Es6---(三)数组扩展

44 阅读6分钟

Es6 将我们原先学过的数组,字符串,对象,函数,都进行了扩展,其实就是新加了一部分静态方法和实例方法,我们将记忆和熟练使用这些方法。

扩展运算符

扩展运算符(spread)是三个点(...),它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

实例:

1.扩展数组
   let arr = [1,2,3,4];
   console.log(...arr);//1,2,3,4
2.搭配函数参数使用
    function add(x, y) {
      return x + y;
    }
    const numbers = [4, 38];
    add(...numbers) // 42
    //`add(...numbers)`是函数的调用,使用了扩展运算符。该运算符将一个数组,变为参数序列。
    //只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。
    //如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
 3.结合表达式
    const arr = [
      ...(x > 0 ? ['a'] : []),
      'b',
    ];
 4.复制数组
      let arr = [1,2,4];
      let newArr = [...arr];
      console.log(newArr);//1,2,4
 5.合并数组
      let arr1 = [1,2,4];
      let arr2 = ['inhan','lisa'];
      let newArr = [...arr1 , ...arr2];
      console.log(newArr);//1,2,4,'inhan','lisa'
 6.与解构赋值结合
      const [first, ...rest] = [1, 2, 3, 4, 5];
      first // 1
      rest  // [2, 3, 4, 5]
    
      const [first, ...rest] = [];
      first // undefined
      rest  // []

      const [first, ...rest] = ["foo"];
      first  // "foo"
      rest   // []
  7.扩展字符串
   //将字符串转为真正的数组。
      let str = 'linhan';
      console.log(..str);//[ "l", "i", "n", "h", "a" , "n" ]
  8.任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。
     包括了后面将要学的set,map

数组扩展的方法

两组静态方法:
    Array.form() //将两类对象转化为真正的数组:类数组对象和可遍历对象的对象
    Array.of() //将一组值,转换为数组
六组静态方法:
    copyWithin()//复制
    find() findIndex()  findLast() findLastIndex() //四个查找
    fill() //填充
    keys()  values()  entries() //三个遍历器
    includes() //返回一个布尔值,表示某个数组是否包含给定的值,
    at() //接受一个整数作为参数,返回对应位置的成员,支持负索引

两组静态方法: ->

     -Array.from()
        --用于将两类对象转化为真正的数组:类数组对象和可遍历对象的对象
        --(包括Es6新增的数据结构set和map)
        -常见的类数组对象是dom操作返回的listNodes集合以及函数anguments
        --任何有length属性的对象,都可以通过Array.from()方法转为数组,而此时扩展运算符就无法转换。

    -Array.of()
        -用于将一组值,转换为数组。
        -弥补数组构造函数Array()的不足
        -Array()方法没有参数、一个参数、三个参数时,返回的结果都不一样。
        只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。
        参数只有一个正整数时,实际上是指定数组的长度。
        -Array.of()总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
实例:
Array.from():
  1.将类数组对象转化为数组
       let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
        };
        //Es5
        var arr1 = [].splice.call(arrayLike); //['a', 'b', 'c'];
        //Es6
        let arr2 = Array.from(arrayLike); //['a', 'b', 'c'];
  2.将字符串转换为数组,返回值是字符串的长度
        const str = 'linhan'
        const arrStr = Array.from(str); // ['l', 'i', 'n', 'h', 'a', 'n']
  3.复制一个新数组
        const arr2 = Array.from([1, 2, 3, 4]);
Array.from():
   1.将一组值转换为数组
        Array.of(1,2,3,4);//[1,2,3,4]
   2.Array of()和Array的区别
        Array() //[]
        Array(2) //,,
        Array(1, 2, 2); //[1,2,2]
        // -------Array of()-------/
        Array.of() //[]
        Array.of(2) //[2]
        Array.of(1, 2, 2) //[1,2,2]
        Array.of(undefined); //[undefined]
    3.底层实现
       function arrayOf() {
           return [].slice.call(anguments);
       }

六组实例方法: ->

copyWithin()//复制
 -copyWithin() 在当前数组内部将指定成员复制到其他位置,会覆盖原有成员(包前不包后)
        -三个参数
            -target 必需 从该从该位置开始替换数据。如果为负值,表示倒数。
            -start  可选 从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
            -end   可选  到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
 lg:
    let arr = [1,2,3,4];
    let newArr = copyWithin(1,2,3);
    console.log(newArr);//1,3,3,4  并表示将二号位到三号位元素复制到一号位元素
find() findIndex() findLast() findLastIndex() //四个查找
    -find()
        -语法: arr.find((value, index, arr) => {return value > 5})
        -find()方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
        -用于找出第一个符合条件的数组成员。
        它的参数是一个回调函数,所有数组成员依次执行该回调函数,
        直到找出第一个返回值为true的成员,然后`返回该成员`。如果没有符合条件的成员,
        则返回undefined。
    -findIndex()
        -与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1-find()和findIndex()都是从数组的0号位,依次向后检查。
    
    //从数组的最后一个成员开始,依次向前检查,其他都保持不变。
    -findLast()
    -findLastIndex()
    
 lg:
 let arr = [1,2,3,4,5,6];
 //find() 找出第一个符合条件的数组成员。没有返回undefined
 arr.find(value,index,arr) =>{
     return vaule>5
 }
 //findIndex() 返回第一个符合条件的数组成员的位置 没有返回-1
 arr.findIndex(value,index,arr) =>{
     return vaule>5
 }
 //findLast()最后一个成员开始,依次向前检查
 arr.findIndex(value,index,arr) =>{
     return vaule>5
 }
fill() //填充
  -fill() 使用给定值,填充一个数组。
        -fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
        -用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
   lg:
    // 填充数组,会影响原数组
    [''].fill(7); //[7]
    ['', '', ''].fill(7, 1, 2) //['', 7, ''] 传三个参数
keys() values() entries() //三个遍历器
    -遍历器-它们都返回一个遍历器对象
    -//keys()--键名遍历
    for(let keys of ['a','b'].keys()) {
        console.log(keys);//0  1  键
    }
    let k = Object.keys(arr);//法2
    -//values()--值名遍历
    for (let value of ['a', 'b'].values()) {
        console.log(value);//a  b  值
    }
    let v = Object.values(arr);//法2
     -//entries()----键值对遍历
    for (let entries  of ['a', 'b'].entries()) {
        console.log(entries);//[0, 'a'][1, 'b']键值对 
    }
    let e = Object.entries(arr);//法2
    
   
includes() //返回一个布尔值,表示某个数组是否包含给定的值,
-includes返回一个布尔值,表示某个数组是否包含给定的值,
let arr = [1,2,3];
console.log(arr.includes(2));//true
console.log(arr.includes(5));//false
   
at() //接受一个整数作为参数,返回对应位置的成员,支持负索引
const arr = [5, 12, 8, 130, 44];
arr.at(2) // 8
arr.at(-2) // 130
如果参数位置超出了数组范围,`at()`返回`undefined`。