ES6常用特性
平時專案開發中靈活運用ES6+語法可以讓開發者減少很多開發時間，提高工作效率。ES6版本提供了很多新的特性，接下來我列舉專案中常用的ES6+的特性：
- let / const
- 箭頭函式
- 解構賦值
- 預設引數
- 擴充套件運算子
- 類
- 字串
- 陣列
- Promise
ES6的發展史
- 1996, ES1.0 Netscape 將 JS 提交給 ECMA 組織，ES 正式出現
- 1999, ES3.0 被廣泛支援
- 2011, ES5.1 成為 ISO 國際標準
- 2015, ES6.0 正式釋出
var、let、const
var的應用
- 可以重複宣告
var a=12
var a=6
alert(a); //可以出來結果，不報錯，出來的結果為6
複製程式碼- 不能定義常量
//var
var a = 5;
a = 6;
複製程式碼- 沒有塊級作用域
if(true){
var a=12
}
alert(a);//出來的結果是12
複製程式碼- 會變數提升預解釋
console.log(a); //undefined相當於 var a
var a = 52
複製程式碼塊級作用域之var的案例
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input')
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
}
}
}
</script>
</head>
<body>
<input type="button" value="星期一">
<input type="button" value="星期二">
<input type="button" value="星期三">
</body>
複製程式碼列印出來的結果就是點選3個按鈕，都彈出3，這說明了var沒有塊級作用域
所以這下邊這段程式碼就進行了修改，列印出來三個按鈕就是0、1、2
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input')
for(let i=0;i<aBtn.length;i++){
(function(i){
aBtn[i].onclick=function(){
alert(i);
};
})(i)
}
}
</script>
</head>
<body>
<input type="button" value="星期一">
<input type="button" value="星期二">
<input type="button" value="星期三">
</body>
複製程式碼let的應用
- 不能重複宣告
let a=5
let a=10
alert(a);//這時候就會出現報錯，因為相同的變數不能宣告兩次
複製程式碼- 可以修改
//let是定義變數，可以修改
let a=12
a=20
alert(a)//列印出來的結果a=20
複製程式碼- 有塊級作用域
if(true){
let a=12;
}
alert(a);//這個時候就會出現報錯，說a沒有定義
複製程式碼- 不會預解釋變數
console.log(a)//Uncaught ReferenceError: a is not defined 語法錯誤，沒有預解釋
let a = 52
複製程式碼塊級作用域之let的案例
直接使用let就可以解決上邊的問題，使三個按鈕彈出的結果為0、1、2
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input')
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
}
}
}
</script>
</head>
<body>
<input type="button" value="星期一">
<input type="button" value="星期二">
<input type="button" value="星期三">
</body>
複製程式碼const的應用
- 不能重複宣告
const a=5
const a=10
alert(a);//這時候就會出現報錯，因為相同的變數不能宣告兩次
複製程式碼- 不能修改
//const是定義的常量，不能修改
const a=12;
a=5;
alert(a);//這時候就會出現報錯，不能修改
複製程式碼- 有塊級作用域
if(true){
const a=12;
}
alert(a);//這個時候就會出現報錯，說a沒有定義
複製程式碼- 不會預解釋變數
console.log(a)//Uncaught ReferenceError: a is not defined 語法錯誤，沒有預解釋
let a = 52
複製程式碼箭頭函式
在使用箭頭函式時要注意以下幾點：
-
如果只有一個引數，（）可以省
-
如果只有一個return，{ }可以省略
注意：箭頭函式與包圍它的程式碼共享同一個this,能幫你很好的解決this的指向問題
普通函式和箭頭函式寫法區別
//普通函式1
function show(){
}
//箭頭函式1
let show=()=>{
}
//普通函式2
function(){
}
//箭頭函式2
()=>{
}
複製程式碼解構賦值
從陣列和物件中提取值，對變數進行賦值，這被稱為解構，解構賦值可以直接使用物件的某個屬性，而不需要通過屬性訪問的形式使用。
普通賦值
//普通賦值
let arr=[1,2,3]
let a=arr[0]
let b=arr[1]
let c=arr[2]
console.log(a,b,c)//1,2,3
複製程式碼獲取陣列中的值
//獲取陣列中的值
let[a,b,c]=[1,2,3]
console.log(a,b,c)//1,2,3
//獲取陣列中的值
let [a,b]=[123,23]
console.log(a,b)//123 23
複製程式碼獲取物件中的值
//獲取物件中的值
let {a,c,d}={a:12,c:5,d:6}
console.log(a,c,d)
複製程式碼複雜解構
//複雜解構
let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(a,b,n1,n2,n3,num,str)
//複雜解構
let [json,arr,num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(json,arr,num,str)
複製程式碼預設引數
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
複製程式碼function show(a,b=5,c=12){
console.log(a,b,c)
}
show(99)//99 5 12(預設引數就是直接把值替換成沒有定義值的)
複製程式碼擴充套件運算子
- 收集剩餘的引數
function show(a,b,...args){
alert(args)
}
show(12,12,34,3,2,4,28)//列印出來的結果是34,3,2,4,28 (...args必須放在最後面)
複製程式碼- 展開陣列
//普通函式
function show(a,b,c){
alert(a);
alert(b);
alert(c)
}
show(1,2,3)//列印出來的結果彈出1,再彈出2，再彈出3
//陣列展開
let arr1=[1,2,3]
let arr2=[5,6,7]
let arr=[...arr1,...arr2];
alert(arr)
複製程式碼function show(...args){
fn(...args);
}
function fn(a,b){
alert(a+b)
}
show(12,5)//彈出17
複製程式碼陣列
map例子
//例子1
[45,78,278,890]
[
{name:'one',level:0,role:9},
{name:'two',level:0,role:8},
{name:'three',level:0,role:7},
{name:'four',level:0,role:6},
]
//例子2
let arr=[12,5,8];
let result = arr.map((item)=>{
return item*2;
})
alert(result)//24,10,16
//例子3
let arr=[12,5,8];
let result = arr.map(item=>item*2);
alert(result)//24,10,16
複製程式碼reduce例子
//例子1,算平均數
let score=[89,12,34,23,45,55];
let result = score.reduce(function(tmp,item,index){
return tmp+item;
})
alert(result/score.length)//43(把這幾個數求平均數)
//例子2
let arr=[12,67,67,889,97];
let result=arr.reduce(function(tmp,item,index){
if(index!=this.length-1){//不是最後一次
return tmp+item;
}else{//最後一次
return(tmp+item)
}
})
alert(result);//1132
複製程式碼filter例子
//例子1
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
if(item%3==0){
return true;
}else{
return false;
}
});
alert(result);//12,99,87
//例子2
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
alert(item%3==0);
});//彈出布林值
複製程式碼forEach例子
let arr=[12,3,45,6,566];
arr.forEach((item,index)=>{
alert(index+':'+item)//0:12 1:3 2:45 3:6 4:566
})
複製程式碼字串
模板字串
需要拼接字串的時候儘量改成使用模板字串，模板字串可以使字串的拼接更加的簡潔和直觀
- 不使用模板字串
var name = 'The weather today is ' + sun + ' ' + rain + '.'
複製程式碼- 使用模板字串
var name = `The weather today is ${sun} ${rain}.`
複製程式碼startsWith例子
let str='git://www.baidu.com/23448';
if(str.startsWith('http://')){
alert('普通地址');
}else if(str.startsWith('https://')){
alert('加密地址');
}else if(str.startsWith('git://')){
alert('git地址');
}else{
alert('其它');
}//git地址
複製程式碼endsWith例子
let str='1.jpg';
if(str.endsWith('.txt')){
alert('檔案文字');
}else if(str.endsWith('.jpg')){
alert('JPG圖片');
}else{
alert('其它')
}//JPG圖片
複製程式碼promise
什麼是非同步程式設計？
-
從伺服器獲取資料，這個過程就叫做非同步程式設計
-
在node.js中去讀取檔案，這個過程也是非同步的
promise的理解
Promise本意是承諾，在程式中的意思就是承諾我過一段時間後會給你一個結果：
什麼時候會用到過一段時間？
是非同步操作
非同步是指可能比較長時間才有結果的才做，例如網路請求、讀取本地檔案等
最基本的Promise長什麼樣？
程式碼如下：
index.js
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
})
}).then(value => {
console.log('value',value)
},reason => {
console.log('reason',reason)
})
複製程式碼執行結果：
value 1
複製程式碼原生promise它的引數不是函式時，會發生？
程式碼如下：
index.js
new Promise(1)
複製程式碼promise.js
class Promise {
constructor(executor){
//引數效驗
if(typeof executor !== 'function'){
throw new TypeError('Promise resolver ${executor} is not a function')
}
}
}
複製程式碼執行結果：
Promise resolver 1 is not a function
複製程式碼這是一個最基本的promise
程式碼如下
index.js
new Promise((resolve, reject) => {
console.log('早上好！')
resolve(1)
})
複製程式碼promise.js
class Promise {
constructor(executor){
//引數效驗
if(typeof executor !== 'function'){
throw new TypeError('Promise resolver ${executor} is not a function')
}
const resolve = function (){
}
const reject = function (){
}
executor(resolve,reject)
}
}
複製程式碼執行結果：
早上好！
複製程式碼具體可以看這篇一步步教你實現Promise/A+ 規範 完整版文章
generator
generator生成器函式
迭代器函式名前用“*”
//generator生成器函式
function *show2() {
console.log('1')
yield
console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最後了，沒有結果
複製程式碼yield
迭代器遇到yield暫時中止執行，呼叫迭代器next方法繼續執行
- yield可以傳參
//yield可以傳參
function *show(){
alert('a');//a
let a=yield;
alert('b');//b
alert(a)//5
}
let gen=show();
gen.next(12);
gen.next(5);
複製程式碼- yield可以返回
//yield返回
function *show(){
alert('a');
yield 12;
alert('b');
return 55;
}
let gen=show();
let res1=gen.next();
console.log(res1);//{value:12,done:false}
let res2=gen.next()
console.log(res2);//{value:55,done:true} 最後一步的結果靠return
複製程式碼總結
以上例子都是公司專案裡常用的一些ES6新特性，靈活運用好這些API可以讓我們減少很多開發時間來做更多的事。
最後
歡迎大家加入，一起學習前端，共同進步！