JS 语言特性（ES6/7/8/9）

简介：在过去的10年里，JS 几乎没有很大的变化。但是自从 ECMAScript 2015 之后，JS 几乎一年一个版本，不停的更新新特性，方法，让我们有种目不暇接的感觉。所以本文章主要收录每个迭代版本的更新内容，用最通俗易懂的文字表达出来，方便大家作为日常手册，快速查验！

我们只会给出一些方法，函数，有必要的时候会给出一些例子。

一、ES5

关于名称这块我们不纠结，只要是 ECMAScript 2015 以前的，我们都统称为 ES5 ，因为在那十年间，他们的变化真的很小！

我们来回忆一下 ES5 的东西：
五大基本数据类型：Undefined, Null, Boolean, Number, String
一种复杂数据类型：Object

不支持创建自定义类型。

1、Undefined, Null

这两个没有什么好说的，他们没有自己的方法和属性，只有 undefined null 两个值，但是他们有一些细微的差别可以注意一下。

// 他们的类型是不一样的
typeof undefined // undefined
typeof null // object

// 但是值是一样的
undefined == null // true
undefined === null // false

2、Boolean

布尔值。用的最多。在JS 中所有类型都是动态的，可以使用 Boolean() 函数来返回一个布尔值，转换规则：
undefined, null, NaN, '', 0, false 都可以转成 false

3、Number

主要讲解一些关于数字类型的的知识。

a. JS 使用 IEEE754 格式来表示整数和浮点数；并支持不同进制的字面量声明方式。

const octalnum1 = 070 // 八进制格式数据（56） 八进制注意第一个字符开始的问题！
const octalnum2 = 0xA // 十六进制格式数据（10）必须以 `0x` 开头
const octalnum3 = 10 // 正常的十进制

b. 浮点数最高精度 17 位，有溢出风险。精度问题：(0.1 + 0.2) !== 0.3

c. 数值范围：5e-324 ~ 1.797e+308
正无穷：Infinity
负无穷：-Infinity

d. NaN 非数值，与任何值都不相等，包括自身。

数值类型的方法：

Number(), parseInt(), parseFloat(), isFinite(), isNaN()
包装类型方法：toFixed(), toExponenetial()

4、String

字符串需要注意的小细节点比较少，但是支持的方法很多。

字符类型的方法：String()
包装类型方法：chartAt(), chartCodeAt()
concat(), slice(), splice(), substr(), substring()
indexOf(), lastIndexOf(), trim()
toLowerCase(), toLocaleLowerCase(), toUpperCase(), toLocaleUpperCase(), localeCompare()
match(), search()
replace()

------------------------------------------------------------------------------ 以下是引用类型 ------------------------------------------------------------------------------

说有的引用类型都有以下公共方法：
toString(), valueof(), toLocaleString()

5、Array

属性：length

方法：
push(), pop(), shift(), unshift(),
reserse(), sort(),
concat(), slice(), splice(),
indexOf(), lastindexOf(),
forEach(), some(), map(), filter(),
reduce(), reduceRight(),

6、Object

属性：__prto__

方法：
construct(), hasOwnProperty(), isPropertyOf(), propertyIsEnumerabled(),

7、Date

注意 toLocaleString 的这个方法会根据不同的时区，返回值是有差异的！

属性：Date.UTC(), Date.parse(), Date.now()

方法：
getTime(), getFullYear(), getMonth(), getDate(), …

查看完整的 Date 方法

8、RegExp

属性：global, ignoreCase, lastIndex, multiline, source

方法：exce(), test()
更多关于正则知识

ES6

ES5 和 ES6 几乎是化历史意义的升级，ES6 里面的内容非常非常多，不是一篇博客 能说清楚的。所以我这里非常推荐大家去看 阮一峰老师 的 《ECMAScript 6 入门》

里面对ES6 新添加的东西正的都讲的非常详细了。而且后边谈到 ES7/8/9 的内容也是基于上面内容的没有的增量。所以要是不了解ES6是，可以先去看看。
这里就大概说一下ES6都更新了什么

1、let，const

增加了 let，const 命令，建议放弃 var 声明变量的方法

2、解构

解构分为：对象，数组，字符串和函数参数的解构。是一个非常实用的一个点。

3、String

字符串类型可以说是添加了很多新的东西。特别是在一些汉字，ASCII 方面有了更好的编码。

1. 字符串类型添加了 for .. of .. 接口;
2. 添加了模板字符串: `` 的表示方法;
3. 添加了 fromCodePoint 方法，用于解决字符识别范围的问题;
4. 添加了 row 方法，用于转译字符串;
5. 添加了 codePointAt 方法，用于解决字符长度返回不正确的行为;
6. 添加了 includes(), startsWith(), endsWith() 方法
   includes()：返回布尔值，表示是否找到了参数字符串。
   startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
   endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
7. 添加了 repeat() 方法，用于重复字符串;
8. 添加了 padStart()，padEnd() 方法，用于补全字符串;
9. 添加了 trimStart()，trimEnd() 方法，用于处理字符串空格;
10. 添加了 matchAll 方法，用于正则的匹配;

4、Number

数字类型主要添加了进制的表示，扩充了语言对数字存储的范围。

1. 添加了 Number.isFinite(), Number.isNaN() 方法；
2. 添加了 Number.isFinite(), Number.isNaN()，其实是把全局的方法挪到了原型上，有利于语言模块化；
3. 添加了 Number.isInteger() 方法， 判断是否为整数；
4. 添加了 Number.isSafeInteger() 方法，判断数值是否有溢出的行为；
5. 添加了 Number.isFinite(), Number.isNaN() 方法；
6. 添加了 BinInt 的表示方法，提供了对大整型数据的表示能力；

5、RegExp

正则表达式这个部分，主要是对修饰符进行了扩充，添加了后行断言和把原来的一些函数，调整到了正则的原型上。
具体大家请看这里：https://es6.ruanyifeng.com/#docs/regex

6、Function

函数主要是添加了箭头函数的写法，但是箭头函数不能当作构造函数使用，并且会绑定定义的时候的作用域，细节问题。
具体可以查看：https://es6.ruanyifeng.com/#docs/function

7、Array

数组添加了许多新的方法。

1. 添加了 Array.from() 方法，把类似数组的解构变成真的数组;
2. 添加了 Array.of() 方法，把类似数组的解构变成真的数组;
3. 添加了 copyWithin 方法，实现数组内的复制方法;
4. 添加了 find()、findIndex() 方法，数组的寻找方法;
5. 添加了 fill() 方法，数组的填充方法;
6. 添加了 entries()，keys() 和 values() 方法;
7. 添加了 includes() 方法，数组的位置方法;
8. 添加了 flat()，flatMap() 方法，打平数组的方法。

8、Object

对象添加的方法。

1. 添加了 Object.is() 方法，比较两个值是否相等;
2. 添加了 Object.is() 方法，拷贝对象；
3. 添加了 Object.getOwnPropertyDescriptors() 方法，返回对象的描述;
4. 添加了 Object.keys()，Object.values()，Object.entries() 方法，遍历对象 key-value 的方法;
5. 添加了 Object.fromEntries() 方法，Object.entries() 的反操作。

9、Symbol

ES6 里面新添加了一种数据类型：Symbol
主要是解决了属性名冲突的问题，具体内容看这里：https://es6.ruanyifeng.com/#docs/symbol

10、Map, Set

这两种数据类型，你可以理解位：
Set => Array
Map=>Object

但是他们比原生的两中类型更强大。
https://es6.ruanyifeng.com/#docs/set-map