ES6的小知识（后半部分）

一、iterator和for-of循环

在js里有数组和对象，es6又新出现了set和map这样js就有了四种数据集合，这样可以组合使用他们，比如数组里拥有对象，set等，这样就需要一个统一的

接口机制来处理不同的数据结构，iterator就是这样的接口，它为不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口就可以遍历操作

他们，并且iterator接口主要供for...of遍历

//iterator接口

const arr = [1,2];

function iterator(arr){

  let index = 0;

  return{

   next:function(){

    return index <  arr.length ? {value:arr[index++],done:false}:

    {value:undefined,done:true}

  }

 }

}

const it = iterator(arr);

console.log(it.next());//{value:1,done:false}

console.log(it.next());//{value:2,done:false}

console.log(it.next());//{value:undefined,done:true}

二、class类的使用

es6添加了class，使ECMAScript语法更偏向于后台语言

class Cher{

 constructor(a,b){

  this.a = a;

  this.b = b;

  return this;

 }

 chun(){

  console.log(this.a +'===='+ this.b);

 }

}

const cher = new Cher('111','222');

cher.chun(); //111====222

在这里面，constructor方法是构造方法，一个类里必须要有constructor，如果没有，它会默认添加一个空的constructor，this代表着实例对象，里面还有一个chun方法，前面是不需要加function关键字的，方法之间是不需要逗号隔开，否则会报错，创建实例对象的时候是和es5一样的，必须要加new，否则也是会报错的

三、内置对象的扩展

1、字符串的扩展

字符串添加了一个模板字符串（超级字符串），那就是反引号，并且换行的时候不在需要繁琐的加号连接，而且在字符串里有变量的时候也不需要加号连接，只需要使用

${}操作就可以了

//html代码

<p></p>

//js代码

let str = 'o';

document.getElementsByTagName('p')[0].innerHTML = `hell${str},world!!!`  //hello,world!!!

并且还添加了一些字符串的方法：

repeat：对字符串进行重复的操作

let str1 = '1';

let str2 = str1.repeat(5);

console.log(str2);  //

includes()、startWith()、endWith()分别是查看是否含有某个字符串，字符串里的开始部分是否含有某个字符串，字符串的结尾部分是否含有某个字符串，他们返回的是一个布尔值

2、数组的扩展

Array.from()：把类数组变成数组

类数组最常见的就是js选择一组元素标签

let aP = document.getElementsByTagName('p');

console.log(Array.isArray(aP));  //false

let ap = Array.from(aP);

console.log(Array.isArray(ap));  //true

Array.of()：创造一个数组

const arr = Array.of(a);

console.log(arr)  //[a]

fill():数组填充，第一个参数是填充的字符串，也可以有第二个参数是从什么位置开始填充（可以没有第二个参数）

const arr = ['a','b','c'];

arr.fill('abc');

console.log(arr) //['abc','abc','abc']

find()、findIndex() ：对数组进行赛选

const arr = [1,2,3,4,5];

let arr1 = arr.find(function(a){

 return a > 3;

})

console.log(arr1); //4,5如果没有找到符合条件的值就返回-1

//findIndex()他返回的是下标,没有找到的话返回undefined

3、对象的扩展

对象的简洁表示法

如果对象的属性和值一样的话可以写成let obj = {a}；函数的话可以写成handler(){...};

Object.assign()：对象的合并。将一个对象里的所有可以枚举的属性，复制到另一个对象

let obj1 = {x:1};

let obj2 = {y:1};

Object.assign(obj1,obj2);

console.log(obj1); //{x:1,y:1}

Object.is()看俩个值是否一样，返回布尔值

console.log(Object.is(1,1));  //true

console.log(Object.is(Infinity,-Infinity)) //false

console.log(Object.is(NaN,NaN));  //true

console.log(Object.is(-0,+0));  //false

四、函数的扩展

1、函数的参数指定默认值

function handler(x,y = 1){  //y设置了一个默认值1

  console.log(x + y);

}

handler(3);  //

2、rest参数

rest参数的形式是"...变量名"，获取函数多余的参数，这样就不需要arguments对象了，rest参数搭配的变量是一个数组，该变量将多余的参数放入数组里

function hander(...arr) { //可以在arr前面加参数，但是后面不可以加参数

    var sum = 0;

    for(var i=0;i<arr.length;i++){

        sum += arr[i];

    }

    console.log(sum);

}

hander(1,2,3)  //

3、箭头函数

const hander2 = function (x) { //普通函数

    return x;

}

const hander1 = x => x; //箭头函数

console.log(hander1(1))

console.log(hander2(1))

//俩函数是一样的

箭头函数里没有自己的this对象，使用的时候，里面的this就是定义环境的对象，而不是使用时的对象

箭头函数里没有arguments对象，可以有rest

箭头函数不可以用作构造函数，不可以使用new操作，否则会报错

箭头函数不能用作Generator函数

秒客网

ES6的小知识（后半部分）

相关文章