es6除了子產品化,class,promise,還有一些其他的常用功能。
1、let/const
let是定義一個變量,但是這個變量可以重新指派,const是定義一個常量,這個常量不能重新指派
let i = 10; i = 100; // 正确
const j = 20; j = 200; // 報錯
2、多行字元串/模闆變量
// JS
var name = 'zhangsan', age = 20, html = '';
html = '<div>'
html += ' <p>' + name + '</p>';
html += ' <p>' + age + '</p>';
html +='</div>'
// es6
const name = 'zhangsan', age = 20;
const html = `
<div>
<p>${name}</p>
<p>${age}</p>
</div>
`;
一個特點是反引号,一個${}引入變量,代碼易讀
3、解構指派
// JS
var obj = {a:100, b:200}
var a = obj.a;
var b = obj.b;
var arr = ['xxx', 'yyy', 'zzz'];
var x = arr[0];
//ES6
const obj = {a:10, b:20, c:30};
const {a, c} = obj;
console.log(a);
console.log(c);
const arr = ['xxx', 'yyy', 'zzz'];
const [x, y, z] = arr;
console.log(x);
console.log(y);
console.log(z);
4、塊級作用域
js沒有塊級作用域,會埋下坑
// JS
var obj = {a:100, b:200}
for (var item in obj){
console.log(item);
}
console.log(item) // b
// ES6
const obj = {a:100, b:200}
for(let item in obj){
console.log(item);
}
console.log(item);// undefined
5、函數預設參數
//JS
function fn(a,b){
if (b == null) {
b = 0;
}
}
//ES6
function fn(a, b=0){
}
6、箭頭函數
//JS
var arr = [1, 2, 3, 4, 5];
arr.map(function(item){
return item + 1;
})
//ES6
const arr = [1, 2, 3, 4, 5];
arr.map(item => item +1);
function fn(){
console.log('real', this); // {a:100}
var arr = [1, 2, 3];
arr.map(() => {
console.log(this); // {a:100}
})
arr.map(function(){
console.log(this)
})
}
fn.call({a: 100})