ES6 (总结篇二)

一.字符串扩展

1.indexOf和index

　之前做项目，遇到判断一个字符串是否存在，不清楚用index还是indexOf，百度之后，用了indexOf。indexOf：返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到这个值就返回-1，这一点很好用，注意，indexOf对大小写敏感。index返回下拉列表中选项的索引位置。

　　而ES6提供了3种判断字符串是否存在的方法。①.includes() 返回布尔值，是否找到该字符串 ②.startsWith() ③.endsWith() 他们可以提供第二个参数，表示搜索的位置，endsWith()和他们不同，他是针对前n个字符，二其他的是针对从第n个开始直到结束。

二.函数的扩展

1.箭头函数使用注意事项：

(1).函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

(2).不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出错误

(3).不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用rest参数代替

(4).不可以使用yield命令，因此箭头函数不能用作Generator函数

注意，this对象的指向是可变的，但是在箭头函数中，它是固定的

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
//如果是普通函数，执行时this应该指向全局对象window,这时输出21

三.数组扩展

1.Rest

　　rest参数，形式为 "...变量名"，用于获取函数多余参数，将多余参数放在数组中，和扩展运算符可以理解为互为逆函数

　　扩展运算符：形式为"..."，它是rest参数的逆运算，将一个数组转为用逗号分隔的参数序列

　　例如：var list = ['大家好'] list.length =1，list[0]=大家好

　　var list = [...'大家好'] list.length =3，list[0]=大，list[1]=家，list[2]=好

　　扩展运算符最有用之一是：Math.max(...arr)，比较数组中的最大值 ES5的写法是：Math.max.apply(null,[1,2,3])

2.扩展运算符的作用

(1).复制数组

// ES5
const a1 = [1,2]
const a2 = a1.concat()
// ES6
const a1 = [1,2]
const a2 = [...a1] 或者 const[...a2] = a1

(2).合并数组

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

(3).与解构赋值结合(如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则报错)

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list