ES6知识点总结

let和const

1.let声明变量，没有变量提升

console.log(a); //2
var a = 2;
console.log(b); //报错
let b = 2; 

2.let是一个块作用域

if(1===1){
	var a = 1;
	let b = 1;
}
console.log(a); //1
console.log(b); //报错

3.let不能重复声明

var a = 2;
var a = 4;
console.log(a); //4 会覆盖第一个a
let b = 1;
let b = 3;
console.log(b); //报错 

4.const声明变量

const max = 30; //声明常量
max = 40; //不允许被修改
console.log(max); //报错
const person = {
	name : 'yt'
}
person.name = 'aaa';
console.log(person); //name:'aaa' 可以修改对象的属性但是不能修改对象
person = {
	age : 22
}
console.log(person); //会报错

作用1：for循环经典例子

var arr = [];  
for (var i = 0;i < 10; i++){
	arr[i] = function () {
		return i;
	}
}
console.log(arr[5]()); //10  i变量提升，污染全局

const arr = [];  
for (var i = 0;i < 10; i++){
	arr[i] = function () {
		return i;
	}
}
console.log(arr[5]()); //5

作用2：不会污染全局变量

let RegExp = 10;
console.log(RegExp);
console.log(window.RegExp);

在默认情况下用const，而只有在知道变量值需要被修改的情况下使用let

模板字符串

使用反引号``,插入变量时使用${变量名}

const oBox = document.querySelector('.box')
let id = 1,name = '小马哥';
let htmlStr = `<ul>
	<li>
		<p id=${id}>${name}</p>
</ul>`;
oBox.innerHTML = htmlStr;
//oBox.innerHTML = "<ul><li><p id=" + id + ">" + name + "</p></li></ul>"

函数之默认值、剩余参数

1.带参数默认值的函数

//es5的写法
function add(a, b){
	a = a || 10;
	b = b || 20;
	return a + b;
}
console.log(add());

function add2(a = 10, b = 20){
	return a + b;
}
console.log(add2())

2.默认的表达式也可以是一个函数

function add(a, b = getVal(5)) {
	return a + b;
}

function getVal(val) {
	return val + 5;
}
console.log(add(10)); //20

3.剩余参数
有三个点…和一个紧跟着的具名参数指定 …keys

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中

function pick(obj,...keys){ //keys可以随意命名，建议具名
	// ...keys 解决了arguments的问题
	let result = Object.create(null); //创建了一个空对象，同{}一样
	for (let i = 0; i < keys.length; i++){
		result[keys[i]] = obj[keys[i]];
	}
	return result;
}

let book = {
	title: 'es6的教程',
	author: '小马哥',
	year: 2019
}
let bookData = pick(book,'year','author');
console.log(bookData)

剩余参数与arguments区别：
1.剩余参数只包含那些没有对应形参的实参，而arguments对象包含了传给函数的所有实参。
2.arguments对象不是一个真正的数组，而剩余参数是一个真正的数组，可以进行数组的所有操作。
3.rest参数是ES6中提供 并且希望以此来替代arguments的。

函数之扩展运算符、箭头函数

1.扩展运算符…
剩余运算符：把多个独立的合并到一个数组中
扩展运算符：将一个数组分割，并将各个项作为分离的参数传给函数

// 处理数组中的最大值，使用apply
const arr = [1,3,9,5,4,6,7,10];
console.log(Math.max.apply(null,arr));

// es6 扩展运算符更方便
console.log(Math.max(...arr));

2.箭头函数