1. 解构赋值
- 数组解构
const names = ["zs", "ls", "ww"];
// 解构出前两个元素
const [item1, item2] = names;
console.log(item1); // "zs"
console.log(item2); // "ls"
// 解构出一个元素,后面的元素放入新数组中
const [itemA, ...newNames] = names;
console.log(newNames); //["ls", "ww"]
- 对象解构
const obj = { name: "xs", age: 18, height: 1.88 };
const { age, name } = obj;
console.log(name, age); // "xs" 18
- 解构顺便改名称(原来名字作废)
const obj = { name: "xs", age: 18, height: 1.88 };
const { age, name: newName } = obj;
console.log(newName) // "xs"
console.log(name) // name is not defined
- 默认值
const obj = { name: "xs", age: 18, height: 1.88 };
const { address = "上海市" } = obj;
console.log(address) // "上海市"
- 函数对入参进行解构
function bar({ name, age }) {
console.log(name);
console.log(age);
}
bar(obj)
2. 函数默认参数
function sum (x = 20, y = 30){
return x + y;
}
sum(0) //30 x=0
function sum1(x, y){
x = x || 20; //这种赋予默认值的方式不好,因为x可能为空字符串或者0
y = y || 30;
return x + y;
}
3. 函数剩余参数
function sum(n1, n2, ...rest){
console.log(rest);
}
sum(1, 2, 3, 4, 5) // [3, 4, 5]
剩余参数和普通函数中的arguments有很多区别
- arguments本身是一个类数组,不是数组,而剩余参数是数组,可以使用Array.from()将类数组转化为数组
- 箭头函数没有arguments,但是可以使用剩余参数
- 剩余参数只包括没有实参的形参,但是arguments包括所有参数
4. 展开运算符…
用来展开数组、对象等,展开运算符是浅拷贝,若对应的value是个对象,只会将对象的地址拷贝过来,不会重新创建一个对象
const obj1 = {
name: 'xs',
age:18,
friends: ['kobe', 'james'],
}
const obj2 = {
...obj1,
age: 19,
height: 1.81,
}
console.log(obj2);//{ name: 'xs', age: 19, friends: [ 'kobe', 'james' ], height: 1.81 }
obj1.frineds.push('jane');
console.log(obj2.friends); // [ 'kobe', 'james', 'jane' ]
5. let const var区别
作用域提升
var有作用域提升
let和const没有作用域提升,不能在声明前被使用
块级作用域
var代表的ES5中没有块级作用域,只有全局作用域和函数作用域
let和const代表的ES6中有块级作用域,if for switch 以及{}都表示块级作用域,作用域外访问不到块级作用域中的变量
for循环
for
循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
const nums = [1, 2, 3]
for(let i = 0; i < nums.length; i++){
console.log(nums[i])
}
变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量。可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算
6. 推荐阅读
阮一峰老师的ECMAScript 6 入门