ES6使用方法简介（二）

目录

一、for...of

1、常用写法

2、用于遍历

3、比较

二、新增字符串操作：模板字符串

1、就是反引号的用法

2、定义比较长，复杂的字符串

3、可以插入变量

4、可以插入函数

三、函数新特性

1、函数默认值

2、args参数

3、箭头函数

四、数组新特性

1、扩展运算符

2、Array构造函数新增方法

3、数组对象新增方法

---

一、for...of

1、常用写法

    let  xxx = ['w','e','b'];
    for (let val of xxx) {
        console.log(val);
    }

 运行结果： 

2、用于遍历

(1)数组

(2)字符串

(3)元素列表

(4)类数组对象

(5)es6新增Map  Set

3、比较

（1）for   of：纯数组与类数组集合均可遍历

（2）for   in：用于数组与对象，获取的是key

（3）forEach：用于纯数组

二、新增字符串操作：模板字符串

1、就是反引号的用法

2、定义比较长，复杂的字符串

3、可以插入变量

4、可以插入函数

三、函数新特性

1、函数默认值

注：具有默认值的参数要写到后边

2、args参数

（1）function fun(...args){}

（2）可以替代arguments

（3）auguments是也给类数组对象，args是纯数组对象

3、箭头函数

（1）常用写法

let fn=val=>val;
//等同于
let fn=function(val){return val;}

（2）要是实现俩个数的和

let sum=(num1,num2)=>num1+num2;
console.log(sum(1,5));

运行结果： 

（3）若要执行多条语句需要加花括号

（4）作用

   <1>简化回调函数的写法    (eg arr.sort((a,b)=>a-b))

   <2>箭头函数中的this是函数声明时所在的对象

四、数组新特性

1、扩展运算符

（1）相当于rest方法的逆运算，把数组转换为用逗号隔开的参数列表

function   fn(x,y,z){
     console.log(x,y,z);
}
var   arr=[1,2,3];
fn(...arr);

 运行结果：

（2）应用

   <1>复制数组

   //复制数组
    var arr1 = [1, 2, 3];
    var arr2 = [...arr1];
    console.log(arr2);

 运行结果：

   <2>合并数组

 //合并数组
    var a = [1, 2, 3];
    var b = [4, 5, 6];
    var c = [7, 8, 9,];
    //ES5
    var d = a.concat(b, c);
    //ES6
    var e = [...a, ...b, ...c];
    console.log(d);
    console.log(e);

 运行结果：

   <3>解构赋值

   //用于解构赋值
    let [a, b, ...args] = [1, 2, 3, 4, 5];
    console.log(args);

运行结果： 

   <4>字符串

  //用于字符串
    let arr = [..."hellow"]
    console.log(arr);

运行结果：

   <5>适用于所有的类数组集合（实现了遍历器接口的数据类型）

2、Array构造函数新增方法

（1）Array.from()：将类数组对象转换为纯数组

     // 将类数组对象转换为纯数组
    var D = document.getElementsByTagName("div");
    var newD = Array.from(D);
    console.log(D);
    console.log(newD);

运行结果：

（2）Array.of(a,b,c)：

   <1>将参数列表返回一个数组

   <2>相当于创建数组

   <3>Array.of(3) != new Array(3)

3、数组对象新增方法

(1)find(callback)：返回数组中第一个满足条件的元素

let  arr = [9,16,-9,7,56];
var   result = arr.find(function(val,index){
   if(val > 10){
   return   true;
   }
   return  false
})

let   arr = [9,16,-9,7,56];
var  result = arr.find(function(var,index){
   return  val > 10
})

    let arr = [9, 16, -9, 7, 56];
    var result = arr.find(val => val > 10)
    console.log(result);

运行结果：

(2)findindex(callback)：返回数组中第一个满足条件的元素的索引

 let arr = [9, 16, -9, 7, 56];
    var result = arr.findIndex(val => val > 10)
    console.log(result);

运行结果：

(3)entries()：帮助数组遍历每一个key值与value值

let   arr = [9,16,-9,7,56];
for(let  [key,value] of  arr.entries()){
   console.log(key,value);
}

运行结果：

(4)keys()：帮助数组遍历所有的key值

   let arr = [9, 16, -9, 7, 56];
    for (let key of arr.keys()) {
        console.log(key);
    }

运行结果：

(5)includes()：检索数组是否包含某个值，返回布尔值

    let arr = [9, 16, -9, 7, 56];
    console.log(arr.includes(10));

运行结果：

(6)补充

   <1>Array.isArray(arr)

    let arr = [9, 16, -9, 7, 56];
    console.log(Array.isArray(arr));

运行结果：

  注意：返回值为boolean值（true和false）

   <2>filter(callback)

      1）过滤数组单元，将满足条件的元素过滤

      2）callback ==> function(value,index)P{}

      3）自动将每一个元素放入callback中进行处理，如果返回值为true，将元素放入新数组中，否则不操作

      4）形参value，代表数组中的每一个值

      5）形参index，代表数组中每一个值的下标

   let arr = [9, 16, -9, 7, 56];
    var result = arr.filter(val => val > 10)
    console.log(result);

运行结果：

   <3>map(callback)

      1）对数组进行遍历，将计算后的值返回新数组

      2）callback同上，不返回bool，返回具体值

    let arr = [9, 16, -9, 7, 56];
    var result = arr.map(val => val * 10)
    console.log(result);

运行结果：

   <4>some(callback)：对数组进行遍历，只要有一个满足条件，则返回true，并终止遍历，          否则返回false

   let arr = [9, 16, -9, 7, 56];
    var result = arr.some(val => val > 10)
    console.log(result);

运行结果：

   <5>every(callback)：对数组进行遍历，如果有一个不满足条件，则返回false，并终止遍             历，否则返回true

   let arr = [9, 16, -9, 7, 56];
    var result = arr.every(val => val > 10)
    console.log(result);

运行结果：

   <6>forEach(callback)

      1）遍历数组

      2）无返回值

//val为arr里面的内容，index为内容的索引值
let arr = [9, 16, -9, 7, 56];
    arr.forEach((val,index) => {
     console.log(val,index);
    })

运行结果：

   <7>reduce(callback)

      1)累加数组单元

      2)preValue：上一个值

      3)nowValue：当前值

      4)index：当前值下标

      5)arrSelf：当前数组

   let arr = [9, 16, -9, 7, 56];
    var result = arr.reduce((preVal,nowVal) => preVal += nowVal)
    console.log(result);

运行结果：