Array内置方法.png

合并/拼接

concat() —— ES3

定义：用于合并两个或多个数组
语法：var new_array = old_array.concat(value1[, value2[, …[, valueN]]])
参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值：返回一个新的数组
注意事项：无
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var b = [7,8,9];
  3. var c = a.concat(b);
  4. var d = a.concat(7,8,9);
  5. console.log(c);    //[1, 2, 3, 4, 5, 6, 7, 8, 9]
  6. console.log(d);    //[1, 2, 3, 4, 5, 6, 7, 8, 9]

转换字符串

join() —— ES3

定义：将数组（或者类数组对象）的所有元素通过指定的分隔符连接成一个字符串并返回
语法：array.join([separator])
参数：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符，如果该参数是空字符串(“”)，则所有元素之间都没有任何字符。
返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串
注意事项：如果一个元素为 undefined 或 null，它会被转换为空字符串。
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var str = a.join('-');
  3. console.log(str);    //"1-2-3-4-5-6"
  5. var str = a.join(' and ');
  6. console.log(str);    //"1 and 2 and 3 and 4 and 5 and 6"
  8. var str = a.join('');
  9. console.log(str);    //"123456"
  11. var str = a.join();
  12. console.log(str);    //"1,2,3,4,5,6"

toString() —— ES3

定义：把数组转换为字符串
语法：array.toString()
参数：无
返回值：返回一个字符串
注意事项：

  • 返回的字符串元素（转换之前的数组元素）之间是以逗号分隔
  • 当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用其 toString 方法。

代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var str = a.toString();
  3. console.log(str);    //"1,2,3,4,5,6"

删除

pop() —— ES3

定义：删除并返回数组的最后一个元素
语法：array.pop()
参数：无
返回值：从数组中删除的元素(当数组为空时返回undefined)。
注意事项：此方法改变数组的长度
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var delLast = a.pop();
  3. console.log(delLast);    //6
  4. console.log(a);    //[1, 2, 3, 4, 5]

shift() —— ES3

定义：删除并返回数组的第一个元素
语法：array.shift()
参数：无
返回值：从数组中删除的元素; 如果数组为空则返回undefined 。
注意事项：此方法改变数组的长度
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var delFirst = a.shift();
  3. console.log(delFirst);    //1
  4. console.log(a);    //[2, 3, 4, 5, 6]

新增

push() —— ES3

定义：将一个或多个元素添加到数组的末尾，并返回该数组的新长度
语法：array.push(item1, item2, …, itemX)
参数：必需。被添加到数组末尾的元素
返回值：数组新长度
注意事项： 此方法改变数组的长度
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var len = a.push(7,8,9);
  3. console.log(len);    //9
  4. console.log(a);    //[1, 2, 3, 4, 5, 6, 7, 8, 9]

unshift() —— ES3

定义：向数组的开头添加一个或更多元素并返回新的长度
语法：array.unshift(item1,item2, …, itemX)
参数：可选。要添加到数组开头的元素或多个元素。
返回值：数组新长度
注意事项：此方法改变数组的长度
代码示例：

  1. var a = [3,4,5,6];
  2. var len = a.unshift(0,1,2);
  3. console.log(len);    //7
  4. console.log(a);    //[0, 1, 2, 3, 4, 5, 6]

截取

slice() —— ES3

定义：从某个已有的数组返回选定的元素
语法：array.slice(begin, end)
参数：

  • begin：可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
  • end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 begin到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值：返回一个新的数组，包含从 begin到 end （不包括end）的 arrayObject 中的元素
注意事项：

  • 不会改变原始数组
  • 返回值是对原数组的浅拷贝

代码示例：

  1. var a = [1,2,3,4,5,6];
  3. // 参数为正数时
  4. var sliceA = a.slice(2,4);
  5. console.log(sliceA);    //[3, 4]
  6. console.log(a);    //[1, 2, 3, 4, 5, 6]
  8. // 参数为负数时
  9. var sliceA = a.slice(-6,-3);
  10. console.log(sliceA);    //[1, 2, 3]
  11. console.log(a);    //[1, 2, 3, 4, 5, 6]
  13. // 参数只有start时
  14. var sliceA = a.slice(3);
  15. console.log(sliceA);    //[4, 5, 6]
  16. console.log(a);    //[1, 2, 3, 4, 5, 6]
  18. // 无参数时
  19. var sliceA = a.slice();
  20. console.log(sliceA);    //[1, 2, 3, 4, 5, 6]
  21. console.log(a);    //[1, 2, 3, 4, 5, 6]

替换/删除/插入

splice() —— ES3

定义：通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容
语法：array.splice(index,howmany,item1,…..,itemX)
参数：

  • index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
  • howmany：必需。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  • item1, …, itemX： 可选。要添加到数组的新元素，如果不指定，则 splice() 将只删除数组元素。

返回值：如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组
注意事项：这种方法会改变原始数组
代码示例：

  1. var a = [1,2,3,4,5,6];
  3. // 替换
  4. var replaceA = a.splice(5,1,'这是6的位置么？');
  5. console.log(replaceA);    //[6]
  6. console.log(a);    //[1, 2, 3, 4, 5, "这是6的位置么？"]
  8. //插入
  9. var replaceA = a.splice(7,0,'我是新加入的');
  10. console.log(replaceA);    //[]
  11. console.log(a);    //[1, 2, 3, 4, 5, 6, "我是新加入的"]
  13. //删除
  14. var delA = a.splice(5,1);
  15. console.log(replaceA);    //[6];
  16. console.log(a);    //[1, 2, 3, 4, 5]
  18. // 不改变原数组的写法
  19. var a = ['年年岁岁花相似','岁岁年年花不同'];
  20. var newA = a.join(',').split(',').splice(0,1);
  21. console.log(newA);    // ["年年岁岁花相似"]
  22. console.log(a);    // ["年年岁岁花相似", "岁岁年年花不同"]

排序

sort() —— ES3

定义：对数组的元素进行正向排序
语法：array.sort(compareFunction)
参数：可选。规定排序顺序。必须是函数。
返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
注意事项：

  • 这种方法会改变原始数组。
  • 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
  • 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
    • 如果 compareFunction(a, b) 小于 0，那么 a 会被排列到 b 之前。
    • 如果 compareFunction(a, b) 等于 0，那么 a 和 b 的相对位置不变。【备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）】
    • 如果 compareFunction(a, b) 大于 0，那么 b 会被排列到 a 之前。
    • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

代码示例：

  1. // 无参数-按数值排序
  2. var a = [2,6,1,4,3,5];
  3. var sortA = a.sort();
  4. console.log(sortA);    //[1, 2, 3, 4, 5, 6]
  5. console.log(a);    //[1, 2, 3, 4, 5, 6]
  7. // 无参数-按字符编码排序
  8. var a = ['A','b','c','D','E','f'];
  9. var sortA = a.sort();
  10. console.log(sortA);    //["A", "D", "E", "b", "c", "f"]
  11. console.log(a);    //["A", "D", "E", "b", "c", "f"]
  13. var b = ['a','b','c','d','e','f'];
  14. var sortB = b.sort();
  15. console.log(sortA);    //["a", "b", "c", "d", "e", "f"]
  16. console.log(a);    //["a", "b", "c", "d", "e", "f"]
  18. // 根据指定的某种规则排序
  19. var a = ['A','b','c','D','E','f'];
  20. a.sort(function(a,b){
  21.   if(a < b){
  22.       return -1;
  23.      }
  24.   if(a > b){
  25.       return 1;
  26.      }
  27.   return 0;
  28. });
  29. console.log(a);    //["A", "D", "E", "b", "c", "f"]

reverse() —— ES3

定义：对数组的元素进行反向排序
语法： arr.reverse()
参数：无
返回值：颠倒顺序后的数组
注意事项：

  • 该方法会改变原数组
  • reverse 方法颠倒数组中元素的位置，并返回该数组的引用。

代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var reverseA = a.reverse();
  3. console.log(reverseA);    //[6, 5, 4, 3, 2, 1]
  4. console.log(a);    //[6, 5, 4, 3, 2, 1]

查找(索引)

indexOf() —— ES5

定义：用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1
语法：

  • arr.indexOf(searchElement)
  • arr.indexOf(searchElement[, fromIndex = 0])

参数：

  • searchElement：要查找的元素
  • fromIndex：开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
注意事项：

  • indexOf 不兼容IE8及以下
  • indexOf 使用严格相等（即使用 === ）去匹配数组中的元素
  • indexOf 会对NaN误判

代码示例：

  1. //对NaN误判
  2. [NaN].indexOf(NaN)    //-1
  4. // 找出指定元素在数组中的索引
  5. var a = [1,2,3,4,5,6,7,6,8];
  6. a.indexOf(2);     // 1
  7. a.indexOf(9);     // -1
  8. a.indexOf(6,6);  // 7
  9. a.indexOf(2,-1); // -1
  10. a.indexOf(2,-8); // 1
  12. // 找出指定元素在数组中的所有索引
  13. var indices = [];
  14. var array = ['a', 'b', 'a', 'c', 'a', 'd'];
  15. var element = 'a';
  16. var idx = array.indexOf(element);
  17. for (var i = 0; i < array.length; i++) {
  18.   if (idx != -1) {
  19.     indices.push(idx);
  20.     idx = array.indexOf(element, idx + 1);
  21.   }
  22. }
  23. console.log(indices);    //[0, 2, 4]
  25. // 判断元素数否存在于数组中
  26. Array.prototype.isInArray = function(value){
  27.     if(this.indexOf(value)==-1){
  28.         this.push(value);
  29.         console.log('元素添加成功');
  30.     }else{
  31.         console.log('该元素已存在于数组中');
  32.     }
  33. }
  34. var a = [1,2,3,4,5,6];
  35. a.isInArray(1);    //该元素已存在于数组中
  36. a.isInArray(7);    //元素添加成功
  37. console.log(a);    //[1,2,3,4,5,6,7]
  39. // 删除单个指定元素
  40. Array.prototype.remove = function(value){
  41.     var index = this.indexOf(value);
  42.     if(index!==-1){
  43.         this.splice(index,1);
  44.         console.log('删除成功');
  45.     }else{
  46.         console.log('该元素不存在');
  47.     }
  48. }
  50. var a = [1,2,3,4,5,6];
  51. a.remove(6);    //删除成功
  52. console.log(a);    //[1,2,3,4,5]

lastIndexOf() —— ES5

定义：用于查找元素在数组中最后一次出现时的索引，如果没有，则返回-1。即lastIndexOf()是indexOf()的逆向查找，即从数组最后一个往前查找。
语法：arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
参数：

  • searchElement：要查找的元素
  • fromIndex：从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

返回值：数组中最后一个元素的索引，如未找到返回-1
注意事项：

  • lastIndexOf 不兼容IE8及以下
  • lastIndexOf 使用严格相等（即使用 === ）去匹配数组中的元素

代码示例：同indexOf

迭代

map() —— ES5

定义：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法：

  1. var new_array = arr.map(function callback(currentValue[, index[, array]]) {
  2. // Return element for new_array
  3. }[, thisArg])

参数：

  • callback：生成新数组元素的函数，使用三个参数：
    • currentValue：正在处理的当前元素。
    • index：可选，正在处理的当前元素的索引。
    • array：可选，调用 map 的数组本身。
  • thisArg：执行 callback 函数时使用的this 值。

返回值：一个新数组，每个元素都是回调函数的结果。
注意事项：详见描述
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. a.map(item=>console.log(item));
  3. //1
  4. //2
  5. //3
  6. //4
  7. //5
  8. //6
  10. var obj = [{name:'wyang'},{name:'wh'},{name:'jh'}];
  11. function getValue(item){
  12.     return item.name;
  13. }
  14. var newArr = obj.map(getValue);
  15. console.log(newArr);    //["wyang", "wh", "jh"]
  16. console.log(obj);    //[{name:'wyang'},{name:'wh'},{name:'jh'}];
  18. var obj = [
  19.   {key:0,name:'wyang'},
  20.   {key:1,name:'wh'},
  21.   {key:2,name:'jh'}
  22. ];
  23. function getValue(item){
  24.   var newObj = {};
  25.   newObj[item.key] = item.name;
  26.     return newObj;
  27. }
  28. var newArr = obj.map(getValue);
  29. console.log(newArr);    //[{0: "wyang"},{1: "wh"},{2: "jh"}]
  30. console.log(obj);    //[{key:0,name:'wyang'},{key:1,name:'wh'},{key:2,name:'jh'}]

forEach() —— ES5

定义：对数组的每个元素执行一次提供的函数
语法：arr.forEach(callback[, thisArg]);
参数：

  • callback：为数组中每个元素执行的函数，该函数接收三个参数：
    • currentValue：正在处理的当前元素。
    • index：可选，正在处理的当前元素的索引。
    • array：可选，forEach() 方法正在操作的数组。
  • thisArg：执行 callback 函数时使用的this 值。

返回值：undefined
注意事项：详见描述
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. // 输出数组中的所有元素
  3. a.forEach(function(item){
  4.   console.log(item);
  5. });
  6. //1
  7. //2
  8. //3
  9. //4
  10. //5
  11. //6
  13. // 格式化输出
  14. a.forEach(function(item,index){
  15.   console.table('a['+ index +'] = ' + item);
  16. });
  18. // 如果数组在迭代时被修改了，则其他元素会被跳过
  19. var a = [1,2,3,4,5,6];
  20. a.forEach(function(item) {
  21.   console.log(item);
  22.   if (item === 3) {
  23.     a.shift();
  24.   }
  25. });
  26. //1
  27. //2
  28. //3
  29. //5
  30. //6
  31. // 当item===3的时候，数组a的第一项元素1被删掉了，这就导致剩下的元素都往前移了一位，
  32. // 因为元素5移到了元素4的位置，当前执行到元素4的时候，其实元素4已经变成了元素5，所以元素4被跳过

筛选

filter() —— ES5

定义：通过自定义函数中的筛选规则筛选出符合规则的元素并组装成新数组返回
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数：

  • callback：用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
    • element：正在处理的当前元素。
    • index：可选，正在处理的当前元素的索引。
    • array：可选，调用 filter 的数组本身。
  • thisArg：执行 callback 函数时使用的this 值。

返回值：一个新的、符合自定义函数筛选规则的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
注意事项：详见描述
代码示例：

  1. // 筛选出数组中大于等于6的元素
  2. var a = [1,5,7,3,6,0,9,2,8];
  3. var newArr = a.filter(function(item){
  4.     return item >=6;
  5. });
  6. console.log(newArr);    //[7, 6, 9, 8];
  7. console.log(a);    //[1,5,7,3,6,0,9,2,8]
  9. // 结合indexOf 实现数组去重
  10. var a = [1,2,3,4,3,2,5,6,3,2,1,2,2,1,1,4,2,5,5,6,7,8];
  11. var newA = a.filter(function(item,index){
  12.     return a.indexOf(item) === index;
  13. });
  14. console.log(newA);    // [1, 2, 3, 4, 5, 6, 7, 8]
  15. //indexOf查找元素在数组中第一次出现时的索引,重复元素的index和indexOf返回的索引不匹配就会被过滤掉

判断

every() —— ES5

定义：测试一个数组内的所有元素是否都能通过某个指定函数的测试
语法：arr.every(callback[, thisArg])
参数：

  • callback：用来测试每个元素的函数，它可以接收三个参数：
    • element：用于测试的当前值。
    • index：可选，用于测试的当前值的索引
    • array：可选，调用 every 的当前数组。
  • thisArg：执行 callback 函数时使用的this 值。

返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false
注意事项：

  • 若收到一个空数组，此方法在一切情况下都会返回 true
  • 详见描述

代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var isEvery = a.every(function(item){
  3.     return item < 10;
  4. });
  5. console.log(isEvery);    //true
  7. var isEvery = a.every(function(item){
  8.     return item > 10;
  9. });
  10. console.log(isEvery);    //false

some() —— ES5

定义：测试数组内是否至少有一个元素可以通过某个指定函数的测试
语法：arr.some(callback(element[, index[, array]])[, thisArg])
参数：

  • callback：用来测试每个元素的函数，接受三个参数：
    • element：数组中正在处理的元素。
    • index：可选，数组中正在处理的元素的索引值。
    • array：可选，some()被调用的数组。
  • thisArg：执行 callback 时使用的 this 值。

返回值：如果回调函数返回至少一个数组元素的truthy值，则返回true；否则为false。
注意事项：

  • 对于空数组上的任何条件，此方法返回false
  • 详见描述

代码示例：

  1. var a = [1,2,3,4,5,6];
  2. var isSome = a.some(function(item){
  3.     return item < 2;
  4. });
  5. console.log(isSome);    //true
  7. var isSome = a.some(function(item){
  8.     return item > 10;
  9. });
  10. console.log(isSome);    //false
  12. //判断数组中是否存在某个元素
  13. function checkItem(arr, val){
  14.   return arr.some(function(item){
  15.       return item === val;
  16.   });
  17. }
  18. checkItem(a, 2);    //true
  19. checkItem(a, 9);    //false

isArray() —— ES5

定义：检测某一个值是否是数组
语法：Array.isArray(obj)
参数：需要检测的值
返回值：如果对象是 Array，则为true; 否则为false。
注意事项：严格判定JavaScript对象是否为数组
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. // 下面的函数调用都返回 true
  3. Array.isArray(a);
  4. Array.isArray([]);
  5. Array.isArray(new Array());
  6. Array.isArray(Array.prototype);
  8. // 下面的函数调用都返回 false
  9. Array.isArray();
  10. Array.isArray({});
  11. Array.isArray(null);
  12. Array.isArray(undefined);
  13. Array.isArray(17);
  14. Array.isArray('Array');
  15. Array.isArray(true);
  16. Array.isArray(false);
  17. Array.isArray({ __proto__: Array.prototype });

归并/累计

reduce() —— ES5

定义：遍历数组的每一个元素通过回掉函数中的规则组合成一个返回值
语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：

  • callback：执行数组中每个值的函数，包含四个参数：
    • accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
    • currentValue：数组中正在处理的元素。
    • index：可选，数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
    • array：可选，调用reduce()的数组。
  • initialValue：作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值：函数累计处理的结果
注意事项：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
代码示例：

  1. var a = [1,2,3,4,5,6];
  2. function reducer(count,item){
  3.   return count + item;
  4. }
  5. var num = a.reduce(reducer)
  6. console.log(num);    //21
  7. var num = a.reduce(reducer,7);
  8. console.log(num);    //28

运行机制详见链接_%E5%A6%82%E4%BD%95%E8%BF%90%E8%A1%8C)

reduceRight() —— ES5

reduceRight()与reduce()用法类似，只不过是从数组末尾开始遍历，不再复述。

创建/实例化

Array.of() —— ES6

定义：创建一个新数组
语法：Array.of(element0[, element1[, …[, elementN]]])
参数：任意个参数，将按顺序成为返回数组中的元素。
返回值：新的 Array 实例
注意事项：Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。
代码示例：

  1. var a = Array.of(5);
  2. console.log(arr);    //[5]
  3. console.log(arr.length);    //1
  5. var a = Array.of(1,2,3,4,5,6);
  6. console.log(arr);    //[1,2,3,4,5,6]
  7. console.log(arr.length);    //6
  9. var a = Array.of(undefined);
  10. console.log(arr);    //[undefined]
  11. console.log(arr.length);    //1
  13. var a = Array.of({'name':'zhangsan'},{'name':'lisi'});
  14. console.log(arr);    //[{'name':'zhangsan'},{'name':'lisi'}]
  15. console.log(arr.length);    //2

Array.from() —— ES6

定义：从一个类似数组或可迭代对象中创建一个新的、浅拷贝的数组实例。
语法：Array.from(arrayLike[, mapFn[, thisArg]])
参数：

  • arrayLike：想要转换成数组的伪数组对象或可迭代对象
  • mapFn：可选。如果指定了该参数，新数组中的每个元素会执行该回调函数
  • thisArg：可选。执行回调函数 mapFn 时 this 对象

返回值：一个新的数组实例
注意事项：详见描述
代码示例：

  1. //将拷贝的字符串创建为数组
  2. var a = Array.from('array');
  3. console.log(a);    //["a", "r", "r", "a", "y"]
  4. console.log(Array.isArray(a));    //true
  6. //将拷贝的arguments创建为数组
  7. function aFun(){
  8.   return Array.from(arguments);
  9. }
  10. var a = aFun(1,2,3,4,5,6);
  11. console.log(a);    //[1,2,3,4,5,6]
  12. console.log(Array.isArray(a));    //true
  14. //通过callback处理拷贝的元素并返回处理后的新的数组实例(在处理元素上感觉跟forEach和map等遍历方法类似)
  15. var a = [1,2,3,4,5,6];
  16. var arr = Array.from(a,function(item){
  17.   return item+item;
  18. });
  19. console.log(arr);    //[2, 4, 6, 8, 10, 12]
  21. // 使用箭头函数
  22. var arr = Array.from([1,2,3,4,5,6],item=> item+item);
  23. console.log(arr);    //[2, 4, 6, 8, 10, 12]

复制/替换

copyWithin() —— ES6

定义：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
语法：arr.copyWithin(target[, start[, end]])
参数：

  • target：0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。

如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。

  • start：可选。0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。

如果 start 被忽略，copyWithin 将会从0开始复制。

  • thisArg：可选。0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。

如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）
返回值：改变后的数组
注意事项：该方法会改变原数组
代码示例：

  1. var a = [1,2,3,4,5,6];
  3. a.copyWithin(-2);    //[1, 2, 3, 4, 1, 2]
  4. a.copyWithin(0,3);    //[4, 5, 6, 4, 5, 6]
  5. a.copyWithin(0,3,4);    //[4, 2, 3, 4, 5, 6]
  6. a.copyWithin(-2,-3,-1);    //[1, 2, 3, 4, 4, 5]

填充/替换

fill() ——ES6

定义：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
语法：arr.fill(value[, start[, end]])
参数：

  • value：用来填充数组元素的值。
  • start：可选。起始索引，默认值为0。
  • thisArg：可选。终止索引，默认值为 this.length。

返回值：改变后的数组
注意事项：该方法会改变原数组
代码示例：

  1. var a = [0,2,3,4,5,6];
  2. a.fill(1,0,1);
  3. console.log(a);    //[1, 2, 3, 4, 5, 6]
  4. a.fill('哈哈');
  5. console.log(a);    //["哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈"]
  6. a.fill('哈哈',5);
  7. console.log(a);    //[0, 2, 3, 4, 5, "哈哈"]
  8. a.fill('哈哈',4,5);
  9. console.log(a);    //[0, 2, 3, 4, "哈哈", 6]

递归/扁平化

flat()

定义：通过深度递归遍历拉平多维数组
语法：var newArray = arr.flat(depth)
参数：可选。指定要提取嵌套数组的结构深度，默认值为 1。
返回值：一个包含将数组与子数组中所有元素的新数组。
注意事项：这是一个实验性的 API，请尽量不要在生产环境中使用它。
代码示例：

  1. // 扁平化数组
  2. var a = [1,2,3,[4,5,6]];
  3. a.flat();    //[1, 2, 3, 4, 5, 6]
  5. // 去除空元素
  6. var a = [1,2,3,,5,6];
  7. a.flat();    //[1, 2, 3, 5, 6]

flatMap()

定义：通过回调函数处理每一个元素并拉平和去除空格
语法：

  1. var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
  2.     // 返回新数组的元素
  3. }[, thisArg])

参数：

  • callback：可以生成一个新数组中的元素的函数，可以传入三个参数：
    • currentValue：当前正在数组中处理的元素
    • index：可选的。数组中正在处理的当前元素的索引。
    • array：可选的。被调用的 map 数组
  • thisArg：可选的。执行 callback 函数时 使用的this 值。

返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1
注意事项：

  • 它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
  • 这是一个实验性的 API，请尽量不要在生产环境中使用它。

代码示例：

  1. var a = [1,2,3,4,5,6];
  2. a.flatMap(function(item){
  3.     return item * 2;
  4. });    //[2, 4, 6, 8, 10, 12]
  6. var arr = ["今天天气不错", "", "早上好"];
  7. arr.flatMap(s => s.split(''));    //["今", "天", "天", "气", "不", "错", "早", "上", "好"]