ES6新特性详解-优快云博客

什么是ES6?

ECMAScript6(以下简称ES6)是JavaScript语言的下一代标准，在2015年6月正式发布。
复制代码

ECMAScript和JavaScript有什么关系？

简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。
复制代码

ES6的目标？

使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。
复制代码

ES6常用新特性：

1.块级作用域

在ES6之前，JS中只有一种声明方式——使用var关键字声明的变量。这种变量声明的方式，无论其声明在何处，都会被视为声明与所在函数的顶部（如果声明不在函数内，那么则视为在全局作用域的顶部）。这就是所谓的变量提升。
ES6引入了块级作用域，让变量的生命周期更加可控。
复制代码

(1)块级声明

块级声明也就是让所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：  
+ 在一个函数内部。
+ 在一个代码块（由一对大括号包裹）内部
**let声明**
let声明会将变量的作用域限制在当前代码块中。Let声明不会造成变量提升，所以我们用的时候要将let放在代码块的顶部，以便让变量在整个代码块可用。
代码示例：
```
function f(){
   if(true){
	    let a=520;
        console.log(a) //520
    }
    console.log(a) //not defined
}
f();
```
可以看出，let声明的变量只有在其块级作用域可用。
注意:如果一个标识符在一个代码块已经被定义，那么在此代码块内使用同一个标识符进行let声明就会报错。例如：

```
var count = 1;
let count = 2; //语法错误
```
但是，在嵌套作用域内使用let声明一个同名的变量就不会报错。例如：

```
var count = 1;
if(true){
    let count = 2;
    console.log(count) //2
}
console.log(count)	 //1

```
复制代码

(2)常量声明

在ES6中，使用coust声明的变量会被认定为常量。coust与let用法相似，但是coust声明的变量不可被改变。因此，coust变量都需要在声明时进行初始化。例如：

```
const constant = 1; //有效的常量
coust name; //语法错误，未进行初始化

```
复制代码

2.模板字符串

模板字符串是加强版的字符串，使用反引号来包裹普通字符串。它可以当作普通字符串来使用，也可以定义多行字符，或者在字符串中定义变量。通常配合模板字符串的替换位（${}）来使用。格式如下：

```
var name = “madongmei”,age = 38;
console.log(`我叫${name},今年${age}岁了`)

```
复制代码

3.数组

(1) Array.from()

作用：把类数组对象转成真正的数组。

```
var lis =document.getElementsByTagName("li")
var rs = Array.isfrom(lis)
console.log(Array.isArray(rs))//true

```
复制代码

(2) Array.of()

作用：用于正确的创建一个数组，而不是像new Array('2')或newArray(2)一样创建一个行为诡异的数组。

```
var arr = Array.of（2,'2'）
```
复制代码

(3) find()

作用：find用于找出第一个符合条件的数组元素，找不到则是undefined。注意，它是不会返回多个，只找一个，找到了就返回。

```
let arr = [
    { name: "n1", score: 90 },
    { name: "n2", score: 89 },
    { name: "n3", score: 80 },
    { name: "n4", score: 92 },
    { name: "n5", score: 85 },
    { name: "n6", score: 87 },
    { name: "n7", score: 62 },
    { name: "n8", score: 95 }
]
let rs = arr.find(item=> item.name == "n4")
console.log(rs) //{ name: "n4", score: 92 }

```
复制代码

(4) findIndex()

作用：findIndex:返回第一个符合条件的数组元素的索引。找不到则是-1。

```
let arr = [
    { name: "n1", score: 90 },
    { name: "n2", score: 89 },
    { name: "n3", score: 80 },
    { name: "n4", score: 92 },
    { name: "n5", score: 85 },
    { name: "n6", score: 87 },
    { name: "n7", score: 62 },
    { name: "n8", score: 95 }
]
let rs = arr.findIndex(item=> item.name == "n4")
console.log(rs) //3
```
复制代码

(5) includes()

作用：判断元素是否在数组中存在。返回值是 true|false。
```
let arr = [1,2,3,NaN]
console.log(arr.includes(1)) //true
console.log(arr.includes(NaN))//true
```
indexof（）和includes（）的作用差不多，但是要注意, indexOf对NaN的判断是错误的。

```
let arr = [1,2,3,NaN]
console.log(rr.indexof(1))//0
console.log(arr.indexof(NaN))//-1
```
复制代码

(6) fill()

作用：给数组填充指定值。fill 方法用于空数组的初始化非常方便。已有数据会被覆盖。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
填充空数组:
```
let arr = new Array(5)；
arr.fill("*")
console.log(arr)
```
覆盖之前的元素:
```
let arr = [1,2,3]
arr.fill("*")
console.log(arr)
```
指定填充的位置:
```
let arr = [1,2,3,4,5]
arr.fill("*",0,2)
console.log(arr)
```
复制代码

(7) 扩展运算符

扩展运算符的形式是…。扩展运算符的作用是将一个数组，变为参数序列。例如：
```
console.log(…[1,2,3]) // 1 2 3
```
**扩展运算符的应用**
合并数组：
```
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
console.log([…arr1,…arr2,…arr3])

```
将字符串转化为数组:
```
var str ="hello";
var str1 = […str]
console.log(str)

```
复制代码

4.函数

(1) 函数参数默认值

以前通过逻辑或者操作符来达到给函数设置参数默认值，现在可以在定义函数的时候指定参数的默认值了。如下：
```
function add(x = 1, y=2){
    return x+y;
}

```
复制代码

(2) 箭头函数

传统函数：var f = function(){ return 1;}
箭头函数：var f = ()=>1
如果箭头函数的代码块部分只有一句，那么就可以省略大括号。
箭头函数可以替换函数表达式，但是不能替换函数声明。

**使用箭头函数要注意一下几点：**
不能更改this：this的值在函数内部不能被修改，在函数的整个生命周期内其值会保持不变。
没有arguments对象：既然箭头函数没有arguments绑定，你必须依赖于具名参数或剩余参数来访问函数的参数。
不能被使用new调用： 箭头函数没有[Construct]方法，因此不能被用为构造函数，使用new调用箭头函数会抛出错误。
没有原型： 既然不能对箭头函数使用new，那么它也不需要原型，也就是没有prototype属性。
复制代码

(3) 对象字面量语法的扩展

属性简写：
```
function f(x,y){
    return(x,y)
}

```
等同于：
```
function f(x,y){
    return(x:x,y:y)
}

```
方法的简写：
```
function m(){
    method(){
	    return "hello";
    }
}

```
等同于：
```
function m(){
    method:function(){
	    return "hello";
    }
}

```
复制代码

5.解构赋值

按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为**解构(Destructuring)**。
复制代码

(1) 对象解构

```
let obj = {
    name:”madongmei”,
    age:38
};
let { name, age } = obj;  
console.log(name)  //madongmei
console.log(age)//38

```
代码中，obj.name的值被存储到name本地变量中，obj.age的值则存储到age变量中。

当使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为undefined。例如：
```
let obj = {
    name:"madongmei",
    age:38
};
let { name, age, sex } = obj;  
console.log(name)  //madongmei
console.log(age) //38
console.log(sex) //undefined

```
我们可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。如下：
```
let obj = {
    name:"madongmei",
    age:38
};
let { name, age, sex = "male" } = obj;  
console.log(name)  //madongmei
console.log(age)//38
console.log(sex)//male

```
上面的示例都使用了对象中的属性名作为本地变量的名称。但ES6允许我们在给本地变量赋值时使用一个不同的名称。就像这样：
```
let obj = {
    name:"madongmei",
    age:38
};
let { name:localName, age:localAge } = obj;  
console.log(localName)  //madongmei
console.log(localAge)//38

```
我们也可以给变量别名加默认值:
```
let obj = {
    name:"madongmei",
    age:38
};
let { name:localName ="ergouzi", age:localAge = 36 } = obj;  
console.log(localName)  //madongmei
console.log(localAge)//38

```
复制代码

(2) 数组解构

数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。直接例子：
```
let arr = ["HTML","CSS","JS"];
let [first,second,third] = arr;
console.log(first) 
console.log(second)
console.log(third)

```
也可以添加默认值:
```
let arr = ["HTML","CSS"];
let [first,second,third = "JS"] = arr;
console.log(first) 
console.log(second)
console.log(third)

```
复制代码

(3) 字符串解构

```
const [a,b,c,d,e] = "hello"
console.log（a）//h
console.log（b）//e
console.log（c）//l
console.log（d）//l
console.log（e）//o

```
复制代码

(4) 参数解构

```
function add（x，y）{
    return x+y；
}
add（[1,2]）

```
参数解构也有默认值

```
function move({x=0,y=0} = {} ){
    return [x,y];
}
move({x:3,y:8}); //[3,8]
move({x:3}); //[3,0]
move({y:8}) //[0,8]
move({}) // [0,0]
move()；//[0,0]

```
复制代码

6.模块

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
复制代码

(1)export命令

导出数据:
```
export var color = "red"
export let name= "madongmei"
export const num = 38

```
导出函数:   
```
export function add（x，y）{
    return x+y；
}

```
导出类:
```
export class rect{
    constructor（width，height）{
        this.width = width；
        this.height = height；
    }
}

```
export还可以统一导出:
```
export var color = "red"
export let name= "madongmei"
export const num = 38
export{color，name，num}

```
重命名导出:
```
export function add（x，y）{
    return x+y;
}
export{add as num}

```
导出默认值(导出默认值要使用default关键字):
导出默认值一共有三种写法
第一种:
```
export default function（x，y）{
	return x+y;
}

```
第二种:
```
function add（x，y）{
    return x+y;
}
export default add;

```
第三种:
```
function add（x，y）{
    return x+y;
}
export { add as default };

```
复制代码

(2）import命令

导入单个
```
import {color} from"./example.js";
```
导入多个 
```
import {color，name，num} from"./example.js";
```
重命名导入
```
import {color as red} from"./example.js";
```
整体导入
```
import *as example from"./example.js";
```
导出默认值
```
import add from"./example.js";
console.log(add(1,2))

```
复制代码