ES6新特性(超详细)

ES6是每个前端工作人员绕不开的知识点，因此需要好好学习，本文内容是我购买莫振杰的《从0到1ES6快速上手》所做的笔记，内容已经获得作者的同意，另外推荐新手一个学习网站，绿叶学习网 - 给你初恋般的感觉，站长写的很好，适合新手从0到1，加油，一起成为优秀的前端开发者！！

（由于还没看完整本书，该内容会持续更新）

一、let 和 const

1.var：

(1).在ES5中，作用域一般分为全局作用域和局部作用域，而ES6新增块级作用域的概念，例如条件语句、循环语句中就是一个块级作用域，为了方便理解的话可以理解为ES6中定义在{}内就是一个块级作用域。在var中则不存在块级作用域。

(2).var声明的变量存在变量提升，即搜索引擎在加载js的时候会首先扫描一遍代码，将所有的var声明变量集合在一起，组成一个词法环境。例如先使用console.log(a)，再声明var a = 5; 则不会报错，而是打印undefined。实际上的代码顺序如下:

var a;
console.log(a);
a = 5;

2.let：

(1).let只在块级作用域内有效，比如定义在条件语句中，那么就只在该条件语句内有效，在条件语句外则无效，在外访问会报错

(2).不能重复声明

(3).不存在变量提升

(4).不会成为window的属性，即在全局作用域中用let声明的变量，使用window.变量名不会生效

(5).最常用的用途：解决var在声明技术的循环变量造成的变量泄露问题，

用var来定义

for(var i=0;i<n;i++){

console.log(i)

}则会输出n遍n，而不是从0到n-1;

用let来定义则不会存在这种问题

3.const：

(1).用于声明一个常量，它的特性与let一样，只能在块级作用域中有效，不能重复声明，不存在变量提升，不会成为window的属性，但是它一旦声明就不能再修改值

(2).如果声明基本数据类型，声明后是不能修改的，但是如果声明引用数据类型，则可以修改其属性的值，例如：

const person = {
name: 'xiaoliao',
age: 22
}
person.name = 'liaogl'
console.log(person.name)
此时输出为liaogl，表示修改name属性的值成功

4.暂时性死区：

暂时性死区是ES6语法引入let和const后才引入的，是指在一个块级作用域中，存在一个死区，开始于函数的开头，结束于变量声明的那一行，在这个死区内，无法访问let或const声明的变量。

二、字符串的扩展

1.检索字符串：

(1).includes()，语法格式为：A.includes(B,index),判断A是否包含B，index表示检索的位置，从第index位置开始检索

(2).startsWith(), 语法格式为：A.includes(B,index),判断A是否以B开头，index表示检索的位置，从第index位置开始检索

(3).endsWith(), 语法格式为：A.endsWith(B,index),判断A是否以B结尾，index表示对前index个字符进行检索，这三个语句的index都是可以省略的，省略则表示检索整个字符串。

2.重复字符串：

(1).语法格式为str.repeat(n);

(2).repeat()并不会改变原来的字符串，因此需要一个变量用来接收重复后的结果，

例如：

const str = 'xiaoliao',
const result = str.repeat(3) //定义变量result接收
console.log(result) //输出xiaoliaoxiaoliaoxiaoliao

3.去除空白：

(1).trim(),语法格式为str.trim(),用于去除字符串首尾的空格

(2).trimStart(),语法格式为str.trimStart(),用于去除字符串开始处的空格

(3).trimEnd(),语法格式为str.trimEnd(),用于去除字符串结尾处的空格

4.长度补全：

(1).padStart(),语法格式为str.padStart(len,str),在头部进行补全，len是必选参数，用于指定字符串长度，str可选，表示用来补全的自付出，省略则表示使用空格来补全

(2).padEnd(),语法格式为str.padEnd(len,str),在结尾进行补全，参数作用与上面一致

5.模板字符串

(1).模板字符串使用反引号来表示，例如：`string`，它的本质上也是字符串，只不过比普通字符串的功能更加强大

(2).它可以用来进行表示多行字符串，会保留换行格式

(3).可以用来实现字符串拼接，并且在模板字符串中，单引号和双引号是不需要转义的，可以直接保留下来。

(4).在模板字符串中插入变量采用KaTeX parse error: Can't use function '\`' in math mode at position 16: {}将变量包裹起来，例如：**\̲`̲数量为{num}个`**

三、数组的扩展

1.判断数组

(1).Array.isArray(值),判断该值是否是一个数组，返回一个布尔值

2.创建数组

(1).在ES6之前创建一个数组有两种方式，一种是使用构造函数(new Array())，另一种是使用数组字面量(即[ ])的方式创建，但是使用构造函数创建数组会产生一些怪异行为，例如：

const arr1 = new Array(); // 输出为[]
const arr2 = new Array(0); // 输出为[]
const arr3 = new Array(1); // 输出为[empty]
const arr4 = new Array(1,2); // 输出为[1,2]

为了解决传统new Array()方式创建的怪异行为,ES6引入一种新的创建数组的方式，即Array.of方法，例：

const arr1 = Array.of(); // 输出为[]
const arr2 = Array.of(0); // 输出为[0]
const arr3 = Array.of(1); // 输出为[1]
const arr4 = Array.of(1,2); // 输出为[1,2]

3.转换数组

(1).类数组的概念，常见的类数组有以下三种

字符串

函数的arguments

DOM的NodeList

类数组又被成为“伪数组”，因为并不是真正的数组，只是类似于数组而已，类数组具有以下两样特点

拥有length属性

可以使用下标方式访问

但是它不能使用数组的方法，在ES5中将类数组转换为真正的数组，可以使用Array.prototype.slice.apply()来实现，例如：

const str = "小廖是个菜鸟";
const arr = Array.prototype.slice.apply(str)
console.log(arr) // 输出为["小","廖","是","个","菜","鸟"]

(2).在ES6中，可以使用**Array.from()**来将一个类数组转换为真正的数组

const str = "小廖是个菜鸟";
const arr = Array.from(str)
console.log(arr) // 输出为["小","廖","是","个","菜","鸟"]

4.填充数组

(1).ES6中想要使用某一个指定的值来填充数组，我们可以使用fill方法来实现。

(2).语法格式为arr.fill(value,start,end),value表示填充的值，start表示填充的开始位置，end表示填充的结束位置，start和end可省略，表示填充整个数组，例如：

const arr = Array.of(10).fill(0) //输出为[0,0,0,0,0,0,0,0,0,0,]
const arr1 = [1,2,3,4]
arr1.fill(8) //输出为[8,8,8,8]

5.打平数组(数组扁平化)

(1).数组扁平化，即将多维数组转化为一维数组，在ES5中实现数组扁平化的方法有三种

递归实现

toString()(方法

join()方法

(2).在ES6中，我们只需要使用flat()方法即可实现，语法为arr.flat(正整数或infinity),正整数表示打平几层，infinity表示不管多少层嵌套，都转化为一维数组。

6.判断元素是否存在

(1).在ES6中我们使用includes()方法来判断数组中是否包含某个值，语法格式为arr.includes(value,index),其中value是必选参数，表示需要查找的值，index是可选参数，表示从哪个元素下标开始查找，默认为0

(2).includes()和indexOf()的对比，indexOf()更为复杂一点，因为要将值与-1进行比较

const arr = ["red","green","blue"];
console.log(arr.includes("green")); //输出为true
console.log(arr.indexOf("green") !== -1 ) //输出为true

(3).includes()和find()的对比，find()用于查找数组中是否符合条件的值，更加复杂.

const arr = ["red","green","blue"];
console.log(arr.includes("green")); //输出为true
const result = arr.find(function(value){
return value === "red";
})
console.log(result === "red"); //输出为true

7.查找元素

(1).find(),在ES6中可以使用find()查找数组中符合条件的元素，语法格式为

arr.find(function(value,index,array){
return ......
})

表示接受一个回调函数作为参数，所有数组元素都会一次执行一次该回调函数，如果有符合条件的元素，就返回第一个符合条件的元素，如果一个符合条件的元素都没有，就返回undefined。其中value表示数组的元素，index表示数组元素的索引，array表示数组本身，其中index和array可以省略。

(2).findIndex(),用来查找数组中符合条件的元素的索引,语法格式为

arr.findIndex(function(value,index,array){
......
})

8.every()和some()

(1).every():用于判断数组中所有元素是否都满足某个条件。如果都满足，则返回true，如果有一个不满足，则返回false。类似于逻辑判断中的与&&关系

const arr = [3,9,1,12,50,24];
const result = arr.every(function (value){
return value > 10;
})
console.log(result) //输出false

(2).some():用于判断数组中是否存在一个元素满足某个条件，只要有一个元素满足就返回true，只有当所有元素都不满足时，才返回false。类似与逻辑判断中的或||关系

const arr = [3,9,1,12,50,24];
const result = arr.some(function (value){
return value > 10;
})
console.log(result) //输出true

9.遍历数组

(1).在ES5中，想要遍历一个数组，可以使用for循环、forEach方法，在ES6中新增3种方法

1.arr.keys() 遍历数组的键

2.arr.values() 遍历数组的值

3.arr.entries() 同时遍历数组的键和值