JavaScript之ES6新特性01
概述
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等
为什么学习ES6
- ES6 的版本变动内容最多，具有里程碑意义
- ES6 加入许多新的语法特性，编程实现更简单、高效
- ES6 是前端发展趋势，就业必备技能
ES6新特性
let 关键字
ES6 新增了 let 命令，用来声明变量。它的用法类似于 var ，但是所声明的变量，只在 let 命令所在的代码块内有效。l使用 let 声明的变量有几个特点：
- 不允许重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
//声明变量
let a;
let b,c,d;
let e = 10;
let f = 521, g = 'asd', h = [];
//1. 变量不能重复声明
let star = '谭梦寻';
// let star = '小名';//报错--Cannot redeclare block-scoped variable
//2. 块级作用域 全局, 函数, eval
// if else while for
{
let girl = '小红';
}
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
//console.log(girl);//报错--ReferenceError: girl is not defined
//3. 不存在变量提升
// console.log(song);//Cannot access 'song' before initialization
// let song = '恋爱告急';
//4. 不影响作用域链
{
let school = '希望小学';
function fn(){
console.log(school);
}
fn();//希望小学
}暂时性死区：
只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var tmp = 123
if (true) {
tmp = 'abc' // ReferenceError: Cannot access 'tmp' before initialization
let tmp
}上面代码中，存在全局变量 tmp ，但是块级作用域内 let 又声明了一个局部变量 tmp ，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 tmp 赋值会报错。
ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，
就会报错。
总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）
let和var对比学习
var声明的变量全局有效，允许重复声明，存在变量提升（var 命令会发生”变量提升“现象，即变量可以在声明之前使用，值为 undefined ）。而let不允许重复声明，存在块级作用域、不存在变量提升、不影响作用域链 。如下：
作用域1：
console.log(b);//输出undefined
var b = 2;//注意 这里不能省，否则报错
var b = 3;
{
var s2 = "1asd";
}
console.log(s2);//输出 1asd作用域2：
var a = []
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
}
}
a[6]() // 10
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
}
}
a[6]() // 6解释：上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一个变量 i 。每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a的函数内部的 console.log(i) ，里面的 i 指向的就是全局的 i 。也就是说，所有数组 a 的成员里面的 i ，指向的都是同一个 i ，导致运行时输出的是最后一轮的 i 的值，也就是 10。
如果使用 let ，声明的变量仅在块级作用域内有效，最后输出的是 6
变量注意：
ECMAScript的变量是松散型的，即可以用来保存任何类型的数据。如下：
let c = 3;
c = "asd";
console.log(c)//输出asdconst 关键字
const 声明一个只读的常量。一旦声明，常量的值就不能改变。
const 声明有以下特点：
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块儿级作用域
注意: 对象属性修改和数组元素变化不会发生 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let
例子： 值不允许修改
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。const 声明的变量不得改变值，这意味着， const 一旦声明变量，就必须立即初始化，不能留到以后赋值 。
声明必须赋初始值
const f;
// SyntaxError: Missing initializer in const declarationconst 的作用域与 let 命令相同：只在声明所在的块级作用域内有效
if (true) {
const MAX = 5;
}
console.log(MAX); // Uncaught ReferenceError: MAX is not definedconst 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
var tmp = 123
if (true) {
tmp = 'abc'
const tmp;//SyntaxError: Missing initializer in const declaration
}const 声明的常量，也与 let 一样不可重复声明。
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;对象属性修改和数组元素变化不会发生 const 错误
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-onlyconst本质
const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针， const 只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。
变量解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。以前为变量赋值，只能直接指定值。
数组的解构
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)//小沈阳
console.log(liu)//刘能
console.log(zhao)//赵四
console.log(song)//宋小宝上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
数组解构默认值
解构赋值允许指定默认值。
let [foo = true] = [];
console.log(foo); // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'注意事项：
只有当一个数组成员严格等于 undefined ，默认值是才会生效的。（ES6 内部使用严格相等运算符（ === ），判断一个位置是否有值。）
let [n = 1] = [undefined];
console.log(n); // 1
let [n2 = 1] = [null];
console.log(n2);//null对象的解构
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function () {
console.log('我可以演小品')
}
}
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();输出结果：
也可以直接通过函数名解构出里面的函数：
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function () {
console.log('我可以演小品')
}
}
let { xiaopin } = zhao
xiaopin()//我可以演小品如果变量名与属性名不一致，必须写成下面这样。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f); // 'hello'
console.log(l); // 'world'
console.log(foo);//foo is not defined解释：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。上面代码中， foo 是匹配的模式， baz 才是变量。真正被赋值的是变量 baz ，而不是模式 foo 。
对象解构默认值
默认值生效的条件是，对象的属性值严格等于 undefined 。
// 对象解构默认值
var {x = 3} = {};
console.log(x); // 3
var {x, y = 5} = {x: 1};
console.log(x); // 1
console.log(y); // 5
var {x: y = 3} = {};
console.log(y);// 3
var {x: y = 3} = {x: 5};
console.log(y);// 5
var { message: msg = 'Something went wrong' } = {};
console.log(msg); // "Something went wrong
var {x = 3} = {x: undefined};
console.log(x); // 3
var {x = 3} = {x: null};
console.log(x); // null如果解构失败 ，变量的值等于 undefined 。
let {foo} = {bar: 'baz'};
console.log(foo); // undefined注意事项：
1、如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。
let {
user: { bar }
} = { baz: 'baz' }
//TypeError: Cannot read properties of undefined (reading 'bar')解释：等号左边对象的user属性，对应一个子对象。该子对象的 bar 属性，解构时会报错。原因很简单，因为 foo 这时等于 undefined ，再取子属性就会报错，请看下面的代码。
let _tmp = {baz: 'baz'};
_tmp.foo // undefined
_tmp.foo.bar // 报错2、如果要将一个已经声明的变量用于解构赋值，必须非常小心。
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error上面代码的写法会报错，因为 JavaScript 引擎会将 {x} 理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题
// 正确的写法
let x;
({x} = {x: 1});字符串解构
字符串也可以解构赋值。这是因为字符串被转换成了一个类似数组的对象，且类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值。如下：
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5数值和布尔值的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true函数参数的解构赋值
函数的参数也可以使用解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3函数参数的解构也可以使用默认值 （原理同上）
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]