深入浅出JS—ES6中提升效率的小技巧

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 入门