ES6基础入门
ES6是JavaScript的版本标准，目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。ES6的学习是在JS基础学习之后进行的。
推荐用书：《ES6标准入门》
学习目录：
一、let与const
ES6中增加了两个声明的关键字，let和const。
学习这两个命令前要理解两个概念：
块级作用域，即在一对大括号内声明的变量只在大括号内有效
变量提升：JS 代码执行之前，浏览器会默认把带有 var 声明的变量在内存中进行提前声明或者定义
1.let命令
let最突出的特点就是声明的变量只在代码块内有效。
经典例题：
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};}
a[6](); // 打印10
//变量i是全局的，函数执行时输出的都是全局作用域下的i值
---------------------------------------
let a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};}
a[6](); // 打印6
//每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.
let还有一个特点就是声明的变量不存在变量提升，所以一定要在声明后使用，否则报错。
// var 的情况 console.log(a); // 输出undefined var a = 2; // let 的情况 console.log(b); // 报错ReferenceError let b = 2;
2.const命令
const关键字用于声明常量，声明时必须初始化（如果声明不赋值会报错），声明后常量的值不可更改。
3.let、const、var区别
| var | let | const |
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 变量不提升 | 变量不提升 |
| 可重新赋值和重复定义 | 同一作用域不可重复声明但可重新赋值 | 同一不可重复声明且不可重新赋值 |
| 声明变量 | 声明变量 | 声明常量 |
二、解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如果解构不成功，变量的值为undefined。
数组解构：
let [x, , y] = [1, 2, 3];
x // 1
y // 3
对象解构:
let person = { name: 'zhangsan', age: 20 };
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
字符串解构
const [x,y,z] = 'sea';
x// "s"
y // "e"
z // "a"
解构赋值的使用：
交换变量值：
[x, y] = [y, x];
函数参数的定义并且从函数返回多个值
//参数
function f([x, y, z]) { ... } f([1, 2, 3]); //返回值 function example() { return [1, 2, 3]; } let [a, b, c] = example();
提取json数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]};
let { id, status, data: number } = jsonData;
解构赋值的好处在于使代码更简洁，语义更清晰，更方便获取数据字段。
三、字符串扩展
模板字符串：
es6中增强字符串，用反引号表示
模板字符串特点：
-
可以表示多行字符串，所有的空格缩进都保留
-
可以在字符串中嵌入变量
-
可以调用函数
let person={
name:'hl',
age:18,
}
let html=`<div>
<span>${person.name}</span>//空格和换行被保留，变量写在${ }中，变量不声明会报错
<span>${person.sge}</span>
</div>`;
//调用函数
function fn() {
return "Hello World";
}
let str=`${fn()}`//${ }中对函数调用
console.log(str);
四、数组扩展
扩展运算符：（...),可以将一个数组转为用逗号分隔的参数序列
应用：
-
合并数组
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // ES6 的合并数组 [...arr1, ...arr2, ...arr3]
-
与解构赋值结合
注：扩展运算符用于数组赋值，只能将其放在参数最后一位，否则报错
//数组解构赋值，
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5]
-
函数返回值
-
字符串
五、函数扩展
1.函数默认值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。在声明函数的时候给参数设定一个默认值，如果函数调用时参数不赋值，参数就等于默认值，赋值则为新的值。非尾部参数函数调用时不可以忽略不复制（会error报错），可以使用undefined代替。
function fun(x=2,y=5){//x默认值使2，y默认值是5
let z= x+y;
console.log(z);
}
fun();//打印7，函数参数等于默认值
fun(1,1);//2 函数参数为传递的值
fun( ,4);//error 第一个参数不能忽略，报错
fun(undefined,4)//6 第一个参数为默认值，第二个参数为传递值
fun(1,);//6 第二个参数未赋值为默认值
2.箭头函数
ES6中新增的定义函数的方式。 允许使用“箭头”（=>）定义函数。
函数定义格式：
const fn = () => {}
在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略.
//ES5函数定义
var sum = function(num1, num2) {
return num1 + num2;
};
//箭头函数形式
var sum = (num1, num2) => num1 + num2;
如果形参只有一个，可以省略小括号
function fn (v) {
return v; }
//箭头函数，省略参数括号
const fn = v => v;
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
let fun = (x,y) => {
console.log(x,y);
return x+y; //必须加return才有返回值
}
如果要返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了，正确写法
let fun = ()=>({ name: hl })
