ES6数组的扩展~超详细、超好理解哦

在ES5中，数组主要分为两大类：索引数组 和 关联数组（和对象很像）。
在ES6中，对数组进行了一些扩展，跟小编一起来看看吧！
希望这篇博客可以帮助到有需要的小伙伴

扩展运算符

扩展运算符(…)把一个表达式在原地展开。当需要多个参数(比如函数调用时)或者多个值(比如字面量数组)

比如：直接遍历数组

扩展运算符主要用于函数调用的参数（形参与实参）

 // 定义一个数组
 var arr = [1,2,3,4,5];
 // 将数组中的每一个元素打印在控制台
 // ES5 for循环打印
/*
 for (var i=0;i<arr.length;i++) {
     console.log(arr[i]); // 1 2 3 4 5
 }*/

 // ES6扩展运算符
 console.log(arr); // [ 1, 2, 3, 4, 5 ]
 console.log(...arr); // 1 2 3 4 5

 arr2 = [1,2]
 function fn2(a,b) {
    console.log(a+b);
 }
fn2(...arr2);
 fn2(arr2[0],arr2[1]);

替代apply()方法

因为扩展运算符可以把数组展开，所以不再需要 apply()方法把数组转为函数的参数。

function fn() {
    console.log('this is function')
}
// 调用函数
fn();
fn.call(); // 把fn看成是function类型的对象
fn.apply();

/*	
	经典面试题
    call()与apply()方法的区别：
    * call(this,arg1,arg2,arg3,...)
        * 接受的参数是多个参数
    * apply(this,arr)
        * 接受的参数是一个数组
*/

function fn2(a,b) {
    console.log(a+b);
}

arr2=[1,2];
fn2(...arr2);
fn2.call(null,arr2[0],arr2[1]);
fn2.apply(null,arr2);

扩展运算符的应用

• 复制数组

  /*
      数组的深复制和浅复制
      * 深复制 - 复制数组中的元素内容
      * 浅复制 - 复制数组的内存地址
  
  */
  
  var arr1 = [1,2,3,4,5];
  // 把数组arr1复制给数组arr1  浅复制  复制数组的内存地址 arr2的数组内容变了，由于arr1和arr2数组是同一个地址，所以arr1的内容也会变
  var arr2 = arr1;
  arr2[1] = 10
  console.log(arr2); // [ 1, 10, 3, 4, 5 ]
  console.log(arr1); // [ 1, 10, 3, 4, 5 ]
  
  
  var arr3 = [11,12,13,14,15];
  // var arr4 = [22,21,23,24,25];
  /*for (var i=0;i<arr3.length;i++) {
      arr4[i] = arr3[i]; // 深复制 - 把数组arr3的元素内容复制数组arr4 arr4内容变了，arr3不变，因为这两个数组的地址不同
  
  }*/
  var [...arr4] = arr3;
  arr4[1] = 99;
  console.log(arr3); // [ 1, 10, 3, 4, 5 ]
  console.log(arr4); // [ 1, 10, 3, 4, 5 ]
  
  
  

• 合并数组

  var arr1 = [1,2,3];
  var arr2 = [4,5,6];
  // ES5合并数组的方法
  console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
  
  // 利用扩展运算符
  console.log(...arr1,...arr2); // 1 2 3 4 5 6
  
  

• 与解耦赋值结合

  注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

  var arr = [1,2,3,4,5];
  // ES 5
  var v = arr[0];
  var list = arr.slice(1);
  console.log(v,list); // 1 [ 2, 3, 4, 5 ]
  
  
  // 扩展运算符
  var [v,...list] = arr;
  console.log(v,list); // 1 [ 2, 3, 4, 5 ]
  
  /*
  var [...list,v] = arr;
  console.log(v,list); // SyntaxError: Rest element must be last element -- Rest元素必须是最后一个元素*/
  
  

• 字符串转换为数组

  var str = 'ying';
  // ES 5
  console.log(str.split('')); // [ 'y', 'i', 'n', 'g' ]
  // ES 6
  console.log([...str]); // [ 'y', 'i', 'n', 'g' ]
  
  

• 与对象的使用

  扩展运算符必须与可迭代(遍历)的对象配合使用

  关联数组，不会报错，但是没有结果

  // 注意：扩展运算符必须与可迭代(遍历)的对象配合使用
  /*var obj = {
      name : '站给鸡',
      agr : 18,
      job : '教主'
  }
  console.log([...obj]); // TypeError: obj is not iterable*/
  
  
  //注意:关联数组，不会报错，但是没有结果
  var arr = [];
  arr['name']='张无忌;'
  arr['age'] = 18;
  console.log(...arr);
  
  

Array提供的方法

Array.from()方法

Array.fromn()方法用于从一个类似数组或可迭代对象中创建一个新的数组实例。

注意：

扩展运算符(…)也可以将某些数据结构转为数组。

// 构建一个类数组对象  1.可迭代; 2.有效的length
var obj = {
    0 : "肖张",
    1 : "小周",
    2 : "xiaozhao",
    3 : "xiaoxiao",
    length : 4
}
// console.log(obj); // { '0': '肖张', '1': '小周', '2': 'xiaozhao', '3': 'xiaoxiao', length: 4 }

/*
for (var i=0;i<obj.length;i++) {

    console.log(obj[i]);
    /!*肖张
    小周
    xiaozhao
    xiaoxiao*!/

}
*/

// ES5
console.log([].slice.call(obj)); // [ '肖张', '小周', 'xiaozhao', 'xiaoxiao' ]
// ES 6
console.log(Array.from(obj)); // [ '肖张', '小周', 'xiaozhao', 'xiaoxiao' ]
console.log(...Array.from(obj)); // 肖张 小周 xiaozhao xiaoxiao
// 扩展运算符 - 不能使用
// console.log([...obj]);

function fn() {
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
    console.log(arguments.length); // 3
    // 类数组对象 arguments对象 - 用于接受所有的实参
    console.log(...arguments); // 1 2 3
}
fn(1,2,3);

Array.of()方法

Array.of()方法用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为不同。

注意：

Array.of()方法如果没有参数，则返回一个空数组。

//Array. of()如果传递一个参数时，表示一个元素内容
console.log(Array.of(5)); // 把5转成数组 [ 5 ]
console.log(Array.of(1,2,3)); // [ 1, 2, 3 ]

// ES5创建数组对象
console.log(new Array(1,2,3)); // [ 1, 2, 3 ]
// new Array ()如果传递一个参数时,表示length
console.log(new Array(5)); // [ <5 empty items> ]

console.log(Array(1,2,3)); // [ 1, 2, 3 ]
//Array ( )如果传递一个参数时，表示length
console.log(Array (5) ); // [ <5 empty items> ]

// 创建空数组
console.log(Array.of()); // []
console. log(new Array()); // []
console. log(Array()); // []
console.log([]); // []

Array对象的方法

copyWithin()方法

copyithin()方法用于**浅复制（复制的是地址）**数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

arr.copyWithin(target[, start[, end]])

• target: 0为基底的索引，复制序列到该位置。如果是负数，target将从末尾开始计算。
• start: 0为基底的索引，开始复制元素的起始位置。如果是负数，start将从末尾开始计算。
• end: 0为基底的索引，开始复制元素的结束位置。copyWithin()方法将会拷贝到该位置，但不包括end这个位置的元素。如果是负数，end将从末尾开始计算。

把数组的start索引值到end索引值的内容 复制到 另一个数组的target索引值 【从索引值为target的位置开始依次向后复制，不能超出数组的长度】

/*
    copywithin(target,start, end)方法
    * 作用–检索指定数组中从 start 到end 区间的元素，复制到当前数组中的指定索引值
        * 参数
            * target -该参数的值最大等于 当前数组的length属性值-1
            * start -表示当前截取开始的索引值
                * 如果当前参数值省略，自动从数组的开始位置进行截取
            * end -表示当前截取结束的索引值(不包含当前索引值的元素)
                * 如果当前参数值省略，自动截取到当前数组的最后

    * 注意:
        * 该方法不能改变数组的长度
        * 修改了原有数组
*/

var arr = [1,2,3,4,5];
/*console.log(arr.copyWithin(3,0,4));// 把arr数组从索引值为0到索引值为4的内容12345 复制到 另一个数组【另一个数组的索引值为3的位置开始复制，】
// 【 即把12345 复制到 另一个数组的索引值为3的位置 】
console.log(arr);*/

/*console.log(arr.copyWithin(0,3));
// 把数组从3到最后一个索引值的内容都 复制到 另一个数组（从另一个数组的索引为0的位置开始依次向后复制，但不能超出数组的大小）
console.log(arr); // [ 4, 5, 3, 4, 5 ]*/

/*console.log(arr.copyWithin(2));
// 把数组从0到最后一个索引值的内容都 复制到 另一个数组（从另一个数组的索引为2的位置开始依次向后复制，但不能超出数组的大小）
console.log(arr); // [ 1, 2, 1, 2, 3 ]*/


var newArr = arr.copyWithin(2);
console.log(newArr); // [ 1, 2, 1, 2, 3 ]
newArr[0] = 6;
console.log(newArr); // [ 6, 2, 1, 2, 3 ]

find()与findindex()方法

• find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined

  arr.find(callback[, thisArg])
  

  • callback:在数组每一项上执行的函数，该函数接收三个参数。

    • elernent:当前遍历到的元素。
    • index:当前遍历到的索引值。
    • array:数组本身。

  • thisArg: 可选，指定callback 的this参数。

  let arr = [1,2,3,4,5]
  /*
      find (callback)方法
      * 作用 - 返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined
      * callback参数-调用find ()方法时的回调函数
          function(element， index,array)
          * element -指定数组中每一项元素的值
          * index -指定数组中每一项元素的索引值
          * array -指定数组本身
      *特点
          *数组调用find()方法，将指定数组进行遍历
  
  */
  
  
  /*var result = arr.find(function (element,index,array) {
      return index > 1;
  // 索引值大于1的所有索引值中符合条件的第一个 即 索引值为2的，索引值为2的内容是3
  });
  console.log('result:' + result); // result:3
  */
  
  
  /*
  var result = arr.find(function (element,index,array) {
      return element > 4;
  // 数组中 第一个大于4的值 是5
  });
  console.log('result:' + result); // result:5*/
  
  var result = arr.find(function (element,index,array) {
      return element < 4;
  // 数组中 第一个小于4的值 是1 【从前向后遍历】
  });
  console.log('result:' + result); // result:1
  
  

• findIndex()方法

• findindex()方法返回符合表达式结果的第一个元素的索引值，否则返回-1

  arr.findIndex(callback[, thisArg])
  

  • callback:在数组每一项上执行的函数，该函数接收三个参数。
    • elerment:当前遍历到的元素。
    • index:当前遍历到的索引值。
    • array:数组本身。
  • thisArg: 可选，指定callback 的 this 参数。

// findIndex ()方法返回符合表达式结果的第一个元素的索引值
var result = arr.findIndex(function (element,index,array) {
    return element < 4;
// 数组中 第一个小于4的值 是1,1的索引值是0 【从前向后遍历】
});
console.log('result:' + result); // result:0

关于find()和findIndex()方法，在ES5中有Array提供的indexOf()和lastIndexOf()方法与其类似

fill()方法

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引值。

即 作用 – 将指定内容替换指定数组中的指定位置 即 把value复制到索引值为start到索引值为end（不包含end）的位置上

arr.fill(value[, start[, end]])

• value:用来填充数组元素的值。
• start:可选项，起始索引，默认值为O。
• end:可选项，终止索引，默认值为this.lengtho返回值:修改后的数组。

let arr = [1,2,3,4,5];
/*
    fill()方法
    * 作用 – 将指定内容替换指定数组中的指定位置 即 把value复制到索引值为start到索引值为end（不包含end）的位置上
    * 参数
        * value -表示替换的内容(没有类型要求)
        * start -表示替换开始的位置
        * end-表示替换结束的位置(不包含)

*/

// var result = arr.fill(6,1,3);
var result = arr.fill([6,7],1,3);
console.log(result); // [ 1, [ 6, 7 ], [ 6, 7 ], 4, 5 ]
console.log(arr); // [ 1, [ 6, 7 ], [ 6, 7 ], 4, 5 ]

includes()方法

includes()方法用于判断一个数组是否包含一个指定的值。

根据情况，如果包含则返回true，否则返false

arr.includes(searchElement, fromIndex)

• searchElenent:需要查找的元素值。
• fcomIndex:可选项，从该索引处开始查找searchElement。如果为负值，则按升序从arcay.length - frcomIndex.的索引开始搜索。默认为0。

let arr = [1,2,3,4,5];
// 查找数组中是否包含5这个值
console.log(arr.includes(5)); // true
// 从索引值为2（包含索引值2）的地方开始查找，是否存在3这个值
console.log(arr.includes(3,2)); // true

end~
好啦，本篇到此结束了