一、变量声明
1: let
块级作用域 :ES5 只有全局作用域和函数作用域,没有块级作用域.
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
不存在变量提升: var命令会变量提升,即变量可以在声明之前使用,值为undefined;但是let一定要先声明后使用,否则会报错.
console.log(a); // undefined
var a = 10;
console.log(b); // ReferenceError
let b = 10;
暂时性死区: 块级作用域内存在let命令,它所声明的变量就绑定在这个区域,不会受外部的影响.
var a = 10 ;
if(1){
a = 100 ; // ReferenceError
let a ;
}
不允许重复声明: 同一个块级作用域内同一个变量只能声明一次.
let a = 10;
let a = 100;// Identifier 'a' has already been declared
var a = 10;
let a = 100;// Identifier 'a' has already been declared
2: const-声明一个只读的常量。一旦声明,常量的值就不能改变.
const a = 10;
a = 100; // Assignment to constant variable.
二、变量的结构赋值
1: 数组的解构赋值:按照位置赋值;
// ES5:
let a = 1;
let b = 2;
let c = 3;
// ES6:
let [a,b,c] = [1,2,3];
console.log(a,b,c);// 1,2,3
2: 对象的解构赋值:是按照key来赋值;
let { a, b} = { a:1, b:2, c:3};
console.log(a,b); // 1,2
3: 字符串的解构赋值:是按照位置赋值;
let [ a, b , c, d, e] = 'qwerty';
console.log(a,b,c,d,e); // q,w,e,r,t,y
4: 函数参数的解构赋值:是按照位置赋值
function add([a, b]){
return `${b} + ${a}`;
}
add([1, 2]);// 1,2
三、字符串模板-ES5输出模板是用'+'拼接相当繁琐,尤其是在换行拼接时特容易出错.
// ES5
let str ='这里有 ' + basket.count + '</br> ' +
'个橘子🍊给你, ' +
'<i>' + 你能卖 +
'</i> '+ basket.money +'吗?';
// ES6:
let str =`这里有 ${basket.count} </br>个橘子🍊给你,<i>你能卖</i>${basket.money}吗?`;
四、函数扩展
1: 函数参数的默认值
//ES5:
function log(x, y) {
y = y || '好';
console.log(x, y);
}
log('你') // 你好
log('你', '棒') // 你棒
log('你', '') // 你好
//ES6:
function log(x, y = '真好') {
console.log(x, y);
}
log('你') // 你真好
log('你', '棒') // 你真棒
log('你', '') // 你真好
2: rest参数-用于获取函数的多余参数,这样就不需要使用arguments对象了
function plus(...values) {
let sum = 0;
for (var value of values) {
sum += value;
}
return sum;
}
plus(2, 5, 3); // 10
//A:rest参数后不能再有其他参数,否则会报错;
function fun(a, ...b, c) {};// Rest parameter must be last formal parameter
//B:函数的length属性不包括rest
(function(x) {}).length // 1
(function(...x) {}).length // 0
(function(x, ...y) {}).length // 1
3: 函数的name属性-函数的name属性,返回函数名
function foo(){}
foo.name // 'foo'
4: 箭头函数
- 1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
- 2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
- 3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
- 4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
五、数组的扩展
1: 扩展运算符-扩展运算符(spread)是三个点(...)
console.log(...[1, 2, 3])
// 1 2 3
2: 替代函数的 apply 方法
// ES5 的写法
function f(x, y, z) {
console.log(x,y,z)
}
var args = [0, 1, 2];
f.apply(null, args);// 0,1,2
// ES6写法
function f(x, y, z) {
console.log(x,y,z)
}
let args = [0, 1, 2];
f(...args);// 0,1,2
3: Array.from()-将类数组转换成数组
let arrayLike = {
'0': 'x',
'1': 'y',
'2': 'z',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['x', 'y', 'z']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['x', 'y', 'z']
4: Array.of()-将一组值,转换为数组
Array.of(1, 2, 3); //[1,2,3]
5: 数组实力的fill()
new Array(5).fill(10); // [10,10,10,10,10]
六、对象的扩展
1: 属性的简洁写法
let a = '123';
let b = { a }
2: super关键字-指向当前对象的原型对象
const proto = {
foo: 'hi'
};
const obj = {
foo: 'good',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find(); //hi
3: Object.is()
// ES5
+0 === -0 //true
NaN === NaN // false
// ES6
Object.is(+0,-0); //false
Object.is(NaN,NaN); //true
4: Object.assign()
const t = { a: 1 };
const s1 = { b: 2 };
const s2 = { c: 3 };
Object.assign(t, s1, s2);
t // {a:1,b:2,c:3}
感谢阮一峰大佬