八、ES6内置对象扩展

1、Array的扩展方式

(a)扩展运算符（展开语法）：

（1）扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

  let arr = [1,2,3];
  //...arr  //1,2,3 
  console.log(...arr); //1 2 3  

（2）扩展运算符可以应用于合并数组。

//方法一    
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    let arr3 = [...arr1,...arr2];
    console.log(arr3);     //1,2,3,4,5,6

//方法二
	let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    arr1.push(...arr2);
    console.log(arr1);  // [1, 2, 3, 4, 5, 6]

（3）将伪数组转换为真正的数组

var oDivs = document.getElementsByTagName("div");

    console.log(oDivs);     
//伪数组  	HTMLCollection(6) [div, div, div, div, div, div]

    var arr = [...oDivs];      
    console.log(arr);
//真正的数组  (6) [div, div, div, div, div, div]

（4）arr.fill() 是 ES6 的新方法。

​ fill() 方法用于将一个固定值替换数组的元素。

​ 语法： array.fill(value, start, end)

​ 参数

• ​ value 必需。填充的值。
• ​ start 可选。开始填充位置。
• ​ end 可选。停止填充位置 (默认为 array.length)

​ 填充是从 start 位置开始，到 end-1 位置结束，不包含end位置，直接修改原数组

   let arr = Array.of(1,2,3,4,5);
   console.log(arr.fill(0,1,2));//) [1, 0, 3, 4, 5] 

(b)构造函数方法：Array.from()

（1）将类数组对象或可迭代对象转化为数组

var person = {
        "0":"张三",
        "1":"李四",
        "2":"王五",
        "length":3
    }
    var ary = Array.from(person);
    console.log(ary);    // ['张三', '李四', '王五']

（2）可以接受第二个参数，作用类似于数组的Map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

var arr = {
        "0":"1",
        "1":"2",
        "length":2
    }
   var ary =  Array.from(arr,item => item * 2);
   console.log(ary);   //[2, 4]

©实例方法：find()

(1)用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

  let person = [{
       id: 1,
       name: "张三"
   },{
       id: 2,
       name: "李四"
   }];
   var ary=person.find(item => item.id == 1);
   console.log(ary);   //{id: 1, name: '张三'}

   var ary1=person.find((item,index) => item.id == 3);
   console.log(ary1);    //undefined

（2）用于找出第一个符合条件的数组成员的位置，如果没有找到返回**-1**

let arr = [1,3,5,7,9,11,12];

   let index=arr.findIndex(value => value > 9);
   let index1=arr.findIndex(value => value > 13);

   console.log(index);   //5--返回的是索引--只查找第一个  所以就是11>9满足

   console.log(index1);   //-1

(d)实例方法：includes()

（1）表示某个数组是否包含给定的值，返回布尔值。

   [1,2,3].includes(2);  //数组是否包含2  true
   [1,2,3].includes(4);  //数组是否包含4  false

2、String的扩展方法

(a)模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

   let name = `张三`;
   console.log(name);   //张三

特点（1）模板字符串中可以解析变量。

   let name = '李四';
   let sayHello = `哈喽,我的名字是${name}`;
   console.log(sayHello);    //哈喽,我的名字是李四

（2）模板字符串中可以换行。

let person = {
       name: 'zhangsan',
       age: 20,
       sex: '男'
   };
   let html = `
        <div>
            <span>${person.name}</span>
            <span>${person.age}</span>
            <span>${person.sex}</span>
        </div>
   `;
   console.log(html);

（3）在模板字符串中可以调用函数。

 const sayHello = function(){
        return '哈喽';
    };
    let hi = `${sayHello()} 哈喽呀！`;
    console.log(hi);   //哈喽 哈喽呀！

(b)实例方法：

(1)startsWith()和endsWith()

• startsWith()：表示参数字符串是否在原字符的头部，返回布尔值。
• endsWith()：表示参数字符串是否在原字符的尾部，返回布尔值。

**startsWith()**  
	
    let str = 'hello world';
    console.log(str.startsWith('hello'));   //true
    console.log(str.startsWith('he'));     //true
    
    console.log(str.startsWith('ell'));     //false

**endsWith()**

	let str = 'hello world';
    console.log(str.endsWith('d'));        //true
    console.log(str.endsWith('rld'));      //true
    
    console.log(str.endsWith('rl'));       //false

（2）repeat()

repeat()方法：表示将原字符串重复n次，返回一个新字符串。

   var obj = 'x'.repeat(3);    //重复3次
    console.log(obj);        //xxx

    var str = 'hello'.repeat(2);    //重复2次
    console.log(str);       //hellohello

3、Set数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。

const a = new Set();
    console.log(a.size);   //0

Set函数可以接受一个数组作为参数，用来初始化。

const b = new Set([1,2,3,4]);
    console.log(b);

Set去重

//Set去重
    const c = new Set(["a","b","a","b","c"]);
    console.log(c);    //3 {'a','b','c'}

实例方法：

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

const a = new Set();

    //添加   返回Set结构本身
    var arr=a.add(1).add(2).add(3);
    console.log(arr);   //{1, 2, 3}
    var ary = [...arr];
    console.log(ary);   //[1, 2, 3]
    //删除   返回布尔值
    var del = a.delete(2);
    console.log(del);   //true  
    //是否为Set的成员  返回布尔值
    var hass = a.has(1);
    console.log(hass);   //true
    //清除所有成员  没有返回值
    a.clear();
    console.log(a.size);    //0

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const a = new Set(['a','b','c']);
    a.forEach(value => {
        console.log(value);    //a   b   c
    })

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const a = new Set(['a','b','c']);
    a.forEach(value => {
        console.log(value);    //a   b   c
    })