ES6
ES6新特性
1.1 let關鍵字
let關鍵字用來聲明變數，使用let聲明的變數有幾個特點
- 不允許重複使用
- 塊級作用域
- 不存在變數提升
- 不影響作用域鏈
{ let school = '尚矽谷'; function fn(){ console.log(school); } fn(); }
應用場景：以後聲明變數使用 let 就對了
1.2 const關鍵字
const關鍵字用來聲明常量，有幾個特點
- 一定要賦初值
- 一般常量是用大寫（潛規則）
- 常量的值不能修改
- 塊級作用域
- 對於數組和對象的元素修改，不算是對常量的修改，不會報錯
const TEAM = ['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko');
注意: 對象屬性修改和數組元素變化不會觸發 const 錯誤
應用場景：聲明對象類型使用 const，非對象類型聲明選擇 let
1.3 變數的解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變數進行賦值，這被稱 為解構賦值。
// 1.數組的解構賦值 const xiao=['ss','sss','aaa']; let [s,d,f] = xiao; console.log(s); //ss console.log(d); //sss console.log(f); // aaa
// 2.對象的解構賦值 const people={ name: '小明', age: 18, el: function () { console.log('你好啊'); } } let {name,age,el} = people console.log(name); //小明 console.log(age); //18 el() //你好啊
1.4 模板字元串
模板字元串是增強版的自負床，用反引號“標識，特點：
- 字元串可以出現換行符
- 可以使用 $( 常量/變數 ) 形式輸出變數
// 1.聲明 let str = `我也是一個字元串哦` console.log(str, typeof str); // 2.內容中可以直接換行 let str1 = ` <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> ` // 3.變數拼接 let lovest = '趙麗穎' let out = `${lovest}是我最喜歡的演員` console.log(out); //趙麗穎是我最喜歡的演員
注意：當遇到字元串與變數拼接的情況使用模板字元串
1.5 簡化對象寫法
ES6 允許在大括弧裡面，直接寫入變數和函數，作為對象的屬性和方法。這 樣的書寫更加簡潔。
let name = '小明';
let slogon = '加油
console.log('可以提高你的技能');
}
//屬性和方法簡寫
let atguigu = {
name,
slogon,
change() {
console.log('可以改變你')
}
};
1.6 箭頭函數
注意：
- 如果形參只有一個，則小括弧可以省略
- 函數體如果只有一條語句，則花括弧可以省略，不寫return，函數的返回值為該條語句的執行結果
- 箭頭函數this指向聲明時所在作用於下this的值(當前層的外層作用域的this值)
- 箭頭函數不能作為構造函數實例化
- 不能使用arguments
//省略小括弧和花括弧
let fn3 = score => score * 20
//不能作為構造實例化對象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me); //錯誤
//this 指向
let school = {
name: '尚矽谷',
getName(){
let fn5 = () => {
console.log(this); //指向school
}
fn5();
}
};
箭頭函數適合與this無關的回調。定時器、數組的方法回調
不適合與this有關的回調。事件回調，對象的方法
const arr = [1,6,9,10,12,17]; const result = arr.filter(item => item%2===0); console.log(result) //[6,10,12]
1.7 ES6允許給函數參數賦初始值
// 1.形參初始值，具有默認值的參數，一般為只要靠後（潛規則） function add(a,b,c=10) { return a+b+c; } console.log(add(1, 2, 3)) // 2.與解構賦值結合 //普通寫法 // function connect(options) { // let host = options.host; // let username = options.username; // console.log(host); // console.log(username); // } //ES6與解構賦值結合寫法 function connect({host,username}){ console.log(host); console.log(username); } connect({ host: 'localhost', username: 'root', })
