ES6个人初学总结-XY-白红宇

1 Let与const

可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用,一旦脱离这个范围变量则无效，避免了变量的污染，而const则很直观，用来定义常量，即无法被更改值的变量。

for(var i=0;i<3;i++){    console.log(i);}   复制代码

此时内部输出结果为 0，1，2。当在for循环外再输出I时可以看到：

for(var i=0;i<3;i++){    console.log(i);}console.log(i);复制代码

此时内部输出：0,1,2，外部输出的结果为：3。可以看到在for循环的外部输出变量依然有效，输出结果为结束循环的值，当将var 置换成let时：

for(let i=0;i<3;i++){    console.log(i);}console.log(i);复制代码

此时内部输出：0,1,2，外部输出 :ReferenceError: i is not defined。可以看到外部的输出并没有找到变量。

2.1 Array.from

新增的Array.from可以将伪数组转换成真数组。

在HTML内新建一个Ul

复制代码

第一和第二个输出的结果为：HTMLCollection(4) [li, li, li, li]和false，从形式上可以看到获取的li是一个数组，但当使用Array.isArray去验证的时候发现它并不是一个数组类型，我们称其为“伪数组”。

再看第三个和第四个输出的结果为：(4) [li, li, li, li]和true，此时我们使用Array.from转换后输出的数据同样是一个数组样式，使用验证方法时我们发现与上面输出的不同，第四个输出为：true，此时获得的数组为真数组。

2.2 Array.of 创建数组

var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{
   name:"xiaoqiang"})console.log(arr);console.log(Array.isArray(arr));复制代码

其输出结果分别为：(12) [1, 2, 3, 4, 5, 5, 7, 8, 9, Array(2), "fafa", {…}]和true。

2.3 Array.find

var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{
   name:"xiaoqiang"})console.log(arr);console.log(Array.isArray(arr));var arr1=arr.find(item => item == 3)console.log(arr1);复制代码

Array.find查找数组中是否存在某个元素，上面代码console.log(arr1)输出为：3表示查到3这个元素。

2.4 findIndex

findIndex()查找数组中的元素，若查到返回该元素的索引，否则返回-1，其格式为 arr.findIndex(function(item,index,arr){return index})

其中item为查找的值的内容，index为查找的索引，arr为查找的数组，return返回的值为查找元素的索引或-1.

复制代码

上面代码的输出为：2和-1.

3 箭头函数

ES6相比于过往在使用上方便了很多，尤其是箭头函数的使用。

//正常的函数书写 ：var a=function(b){     return b+b;}//使用箭头函数后的简写：var a=(b)=>{
   return b+b}//如果变量只有一个则省去小括号，再则return语句只有一个返回值时，大括号同样可以省略得到如下形式：var a=b=>b+b;复制代码

调用上面三种书写得到的结果都是一样，可以看出箭头函数的出现极大的方便了函数的书写，但有一点是要注意的是当函数内部出现this时不能使用箭头函数。

4 字符串模板

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。代码如下：

var obj={    name:"xiaoqiang",    age:88,    say:function(){        console.log(`我是${
     this.name},我今年${
     this.age}岁了。。。`);       }}obj.say();复制代码

输出的结果为：“我是xiaoqiang,我今年88岁了。。。”，此时函数里的this指向方法所在的对象（obj）。

5 字符串扩展

5.1 endsWith、startsWith

判断字符串是否以某一个字符串开始或结束，代码如下：

var str="dassfa erqwrt"//定义字符串console.log(str.startsWith("das"));console.log(str.startsWith("dassfae"));console.log(str.endsWith("rt"));   复制代码

其上输出分别为：true、false、true。

5.2 trim

用于清除字符串中的空格，实现代码如下：

复制代码

5.3 repeat

字符串重复

复制代码

其输出结果为：“a1a”和“a1aa1aa1a”

5.4 includes

查询字符串中是否存在指定的字符

复制代码

输出结果分别为："true"和"false"

5.5 padStart padEnd

设置字符串开始和结束的附加格式

复制代码

输出结果为：*****a1a和a1a------，如str.padStart(8,"")，其中8表示输出字符串的长度，去掉""个数则为原字符串的长度。如果原字符串的长度大于8，则不再显示"*"，此时输出为原字符串。

6 Class 类

类=构造函数+原型,相对于构造函数和原型的模式，类的引入则简单的多，简单代码如下：

class Cars{    constructor(name,color,size){         this.name=name;         this.color=color;         this.size=size;    }    say(){        console.log(`我是${
     this.name},我的车是${
     this.color},它的大小是${
     this.size}cm`);    }}var am=new Cars("zhangliang","red","300")console.log(am.say());复制代码

上面代码的输出为：“我是zhangliang,我的车是red,它的大小是300cm”，与上版本的构造函数+原型的书写方式简单的多。

7 严格模式

js语法非常灵活，JS中这个灵活的特性，弊大于先利。后来增加了严格模式。使用严格模式提高了编译效率。其中严格模式对很多数据的书写有了要求：

7.1 在严格模式下不能使用没有var的变量

复制代码

上面代码执行的结果为：es6zongjie.html:24 Uncaught ReferenceError: a is not defined

7.2 在严格模式下不能使用8进制的数字

复制代码

输出的结果为：Uncaught SyntaxError: Octal literals are not allowed in strict mode.

7.3 在严格模式下不能把函数定义在if语句中

复制代码

输出的错误结果为：es6zongjie.html:30 Uncaught ReferenceError: f is not defined

7.4 在严格模式下函数不能有重名的形参

复制代码

此时输出错误：Uncaught SyntaxError: Duplicate parameter name not allowed in this context。

7.5 在严格模式下arguments不再跟踪形参的变化

复制代码

上面四个输出分别为：“3,4”、“3,4”、“3,4”、“1234,5678”可以看出，此时修改arguments形参不变。

7.6 在严格模式下function中的this就不再是window而是underfined

复制代码

输出的结果为：underfined,正常模式下函数内的this指向window。

8 解构赋值

8.1.1 数组的解构赋值

复制代码

输出结果为：(3) [1, 2, 3]和1 2 3

8.1.2 多维数组解构赋值

复制代码

输出结果分别为：(3) [1, Array(1), Array(1)]和1 2 3

8.1.3 默认值，只有当右边对应位置为undefined时候才会选择默认（null不属于undefined）

复制代码

输出为：(4) [undefined, null, 1, 2]和1 null 1 2。

8.2 对象赋值

复制代码

输出结果为：{name: "xiaoqiang", age: "44"}和"44 xiaoqiang"