JavaScript进阶——ES6（五）

ES6简介

什么是ES6？

ES的全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。

年份	版本
2015年6月	ES2015
2016年6月	ES2016
2017年6月	ES2017
2018年6月	ES2018
...	...

ES6实际上是一个泛指，泛指ES2015及其后续的版本。

为什么使用ES6

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性。

• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。
  
  

ES6的新增语法

let

ES6中新增的用于声明变量的关键字。

• let声明的变量只在所处于的块级有效

if(true){
   let a = 10 ;
}
console.log(a) // a is not defind

使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

- 不存在变量提升 ``` console.log(a) // a is not defined let a = 20; ``` - 暂时性死区 ``` var temp = 123; if(true){ temp = 'abc'; let temp; } ```

const

作用：声明常量，常量就是值（内存地址）不能变化的量。

• 具有块级作用域

if(true){
    const a = 10;
}
// a is not defined

• 声明常量时必须赋值

const PI； // Missing initializer in const declaration

• 常量赋值后，值不能更改。

const PI = 3.14;
PI = 100; // Assignment to constant variable.

const ary = [100,200];
ary[0] = 'a';
ary[1] = 'b';
console.log(arg); // ['a','b'];
ary = ['a','b'] // Assignment to constant variable.

let、const、var的区别

1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

解构赋值

ES6允许从数组中，提取值，按照对应位置，对变量赋值。对象也可以实现解构。

数组解构

let[a,b,c] = [1,2,3]
console.log('' + a + b + c)

如果解构不成功，变量的值为undefined

let [foo] = [];
let[bar,foo] = [1];

按照一定模式，从数组中或对象中提取值，将提取出来的值赋给另外的变量。

对象结构

let person = {name:'zhangsan', agg:19};
let{name, age} = person;
console.log(name); // '张三'
console.log(age);  // 20

let{name:myName, age:myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 19

箭头函数

ES6中新增的定义函数的方式。

()=>{}
const fn = () =>{}

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。唉，就是lambda懒得做笔记了。

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。就是java的可变参数

function sum(first,...args){
    console.log(first);
    console.log(args);
}
sum(10,20,30)

剩余参数和解构配合使用

let students = ['wangwu','zhangsan','lisi'];
let[s1,...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan','lisi']

ES6的内置对象扩展

Array 的扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

let ary = [1,2,3];
 //...ary = 1,2,3
console.log(...ary);

之所以输出结果为空格分隔的 1 2 3 是因为这个语句转化为console.log(1,2,3),而不是console.log('1,'+'2,'+3)

扩展运算符可以应用于合并数组

// 方法一
let ary1 = [1,2,3];
let ary2 = [3,4,5];
let ary3 = [...ary1,...ary2];
// 方法二
ary1.push(...ary)

将类数组或可比案例对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

Array扩展方法

构造函数方法：Array.from()
将类数组或可遍历对象转为真正的数组

let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
let arr2 = Array.from(arrayLike); // ['a','b','c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回数组。

let arrayLike = {
    '0':1,
    '1':2,
    'length':2
}
let newAry = Array.from(aryLike,item => item*2)

模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

let name = `zhangsan`;

模板字符串中可以解析变量。

let name = 'zhangsan';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行

Set数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1,2,3,4,4]);

特码的的终于肝完了！Node.js爷来了！