0. 简介

  • 什么是数组
  • 使用场景
  • 简单使用实例

1. 创建

2. 常用函数

3. 方法

new Array

  1. var ar1 = new Array();
  2. var ar2 = new Array(7);   //区别，都是空数组，length属性不同
  3. userNames = [];
  4. //注意：引用类型
  5. var newArr = oldArr.map();
  6. var newArr = oldArr.slice();
  7. var newArr = oldArr.concat();
  8. var newArr = Array.from();

a.includes代替a.indexOf()

  • includes， return Boolean
  • indexOf() , return Number,-1, 0, 1, 2
    ‘abcf’.includes(‘a’)// true
    ‘abcf’.includes(‘e’)// false
    ‘abcf’.indexOf(‘a’)// 0
    ‘abcf’.indexOf(‘e’)// -1

改变数组方法

  • push, 尾部添加， 仅支持一个元素
  • pop, 尾部移除， 支持固定位置
  • unshift, 头部添加
  • shift, 头部移除
  • concat, 拼接

js, 简单使用

  1. var arr = [1,2]
  2. arr.push(3); // 3
  3. arr // (3) [1, 2, 3]
  4. arr.pop() // 3
  5. arr // (2) [1, 2]
  6. arr.unshift(3) // 3
  7. arr // (3) [3, 1, 2]
  8. arr.shift() // 3
  9. arr  // (2) [1, 2]
  10. arr.concat([3,4]) // (4) [1, 2, 3, 4]
  11. arr.concat([2,3,4]) // (5) [1, 2, 2, 3, 4]

注意：

  • arr.push(newArr) // bad

js复杂使用

  1. arr = [1, 2, 2, 3, 4]
  2. arr.pop(2) // 2
  3. arr // [1]

a.reverse()

return Array

  1. [1, 2, 3, 4].reverse();  //  (4) [4, 3, 2, 1]

array.concat() 拼接

  1. array1.concat(array2,array3,...,arrayN);
  3. var a = [1,2];
  4. var b = a.slice();
  5. copyArr = arr.concat();

splice与slice区别

  • 传参同分
  • 功能有差异
  • 返回值不同
  • 原数组不同

Array.splice(index, remove, add1, …, addn) 添加删除

返回添加和删除的数组，原数组发生改变

  1. var arr = [1, 2, 3, 4, 5, 6, 7, 8];
  2. arr.splice(2,3); // [3, 4, 5]
  3. arr;  //  (5) [1, 2, 6, 7, 8]
  4. arr.splice(0,0,'9',9) // []
  5. arr // ["9", 9, 1, 2, 6, 7, 8]

Array.slice(start[, end = last]) 删除

返回删除后的数组， 原数组不变

  1. var a = [1, 2, 3, 4];
  2. a.slice(1)  //[2, 3, 4]
  3. a //  [1, 2, 3, 4]
  4. a.slice(1,3); //[2, 3]

格式化为数组split(reg,)

  1. array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  4. 'ab d'.split("") 
  5. //(4) ["a", "b", " ", "d"]
  6. 'haha武，空 闲[时]间'.split("")   
  7. //(13) ["h", "a", "h", "a", "武", "，", "空", " ", "闲", "[", "时", "]", "间"]

sort 排序（慎用）

修改原数组并返回。原理是先转成string后使用ASCII升序排列。
注意， 数字类型数组升/降序，错误写法 sort((a, b) => a > b)

  1. [10, 20, 1, 2].sort((a, b) => a - b);  // (4) [1, 2, 10, 20]
  2. [10, 20, 1, 2].sort((a, b) => b - a);  // (4) [20, 10, 2, 1]

array.fill()

  1. var arr = new Array(5);
  2. arr.fill(5);   //arr = [5,5,5,5,5]
  3. arr[3] = 3;    //arr = [5,5,5,3,5]

Array.map用法

  1. ========================特殊用法
  2.   ['1', '7', '11'].map(parseInt)
  3.   // (3) [1, NaN, 3]
  4.   =======================等价
  5. parseInt('1', 0) // 1
  6. parseInt('7', 1) // NaN
  7. parseInt('11', 2) // 3
  8.   ['1', '7', '11'].map(
  9.     (val, index, array) => parseInt(val, index, array)
  10.   );
  11. // 其中parseInt, 解析一个字符串，并返回一个整数。radix = [2, 36]
  12. function parseInt (string[, radix]) {
  13. }
  17. ['1', '7', '11'].map(console.log)
  18.   // VM156708:1 1 0 (3) ["1", "7", "11"]
  19.   // VM156708:1 7 1 (3) ["1", "7", "11"]
  20.   // VM156708:1 11 2 (3) ["1", "7", "11"]
  21.   // (3) [undefined, undefined, undefined]
  22.   // 上面的例子相当于
  23.   [1, 2, 3, 4, 5].map(
  24.     (val, index, array) => console.log(val, index, array)
  25.   );

.forEach()

  1. var a = [1,2,3];
  2. a // (3) [1, 2, 3]
  3. a.forEach((d) => d+1);
  4. a // (3) [1, 2, 3]
  5. var b = a.forEach((d) => d+1);
  6. b // undefined
  7. var b = a.map((d) => d+1);
  8. b //  (3) [2, 3, 4]

forEach、map、reduce区别：

forEach遍历进行操作、map返回新数组、reduce进行累计操作

array.map()

  1. var arrmap = arr.map(x => x); //arrmap = [5,5,5,3,5]

for-in、for-of

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

  1. var aa = ['s', 'd', 'e'];
  2. undefined
  3. for(var k in aa) {
  4.   console.log(v);
  5. }
  6. <!--VM687:2 0-->
  7.   <!--VM687:2 1-->
  8.   <!--VM687:2 2-->
  9.   undefined
  10. for(var v of aa) {
  11.   console.log(v);
  12. }
  13. <!--VM697:2 s-->
  14.   <!--VM697:2 d-->
  15.   <!--VM697:2 e-->

.find 替代filter过滤, .some 替代.finds

all return a new array

.finde return first

.filter, return all

  1. var aa = [3,1,2,5,3,5];
  2. aa.filter(v => v > 2)//    (4) [3, 5, 3, 5]
  3. aa.find(v => v > 2)//    3, 返回整个value
  4. aa.some(v => v > 2)//    true
  5. aa.every(v => v > 2)//    false

some、every

return Boolean

array.reduce() 代替 map、代替filter

// a, 累加器，c, 当前值

  1. reduce
  2. param0: Function
  3. param1: p初始值
  5. var arr = [5, 4, 3, 2, 1 ];
  6. arr.reduce((a) => console.log(a)) // exception
  7.   [3, 4, 3, 1, 9, 5].reduce((p,c) => {
  8.     //console.log(p, c);
  9.     return p+c;
  10.   }, 0); 
  11. // 0, 3==3, 4===7, 3====10, 1====11, 9====20, 5====25
  12. // 25
  14. [3, 4, 3, 1, 9, 5].reduce((p,c) => {
  15.   return p.concat({value: c});
  16. }, []);
  17. // [{value: 3}, {value: 4}, {value: 3}, {value: 1}, {value: 9}, {value: 5}]

array.from()

  1. const arrfromstr = Array.from('hello');   //arrfromstr = ["h", "e", "l", "l", "o"]
  2. const arrfromlength = Array.from({length: 4}); //arrfromlength = [undefined, undefined, undefined, undefined]
  3. const arrfromarr = Array.from({length: 4}, (v, i) => i);   //arrfromarr = [0, 1, 2, 3]
  4. //参数，无参数(), 第一个参数表示遍历元素（x,v作用相同），第二个参数表示index
  5. //x一般表示已有单元，v表示，i表示序号
  6. Array.from([1, 2, 3], x => x + x);      
  7. // [2, 4, 6]
  9. ## 错误修正
  10. Array.from({length: 4}, x => x); 
  11. (4) [undefined, undefined, undefined, undefined]
  12. Array.from({length: 4}, i => i); 
  13. (4) [undefined, undefined, undefined, undefined]
  14. Array.from({length: 4}, (v, i) => i); 
  15. (4) [0, 1, 2, 3]

Array.filter

过滤出奇数

  1. var a = [1,2,3,4,5];
  2. a.filter(v => v%2);

浅拷贝

自定义扩展—移除指定项

  1. Array.prototype.remove = (val) => {
  2.   const tmpIndex = this.indexOf(val);
  3.   if (tmpIndex > -1) {
  4.     this.splice(tmpIndex, 1);
  5.   } 
  6. }

push()和concat()的区别

  • push， 从尾部扩展数组， 返回第一个参数。修改原数组。
  • concat, 返回拼接后的数组， 支持多个参数， 数组会被解析。不修改原数组。
  1. // push
  2. var a1 = [1];
  3. a1.push(2) // 2
  4. a1 // [1, 2]
  5. 多个参数
  6. a1.push(3, 4) // 3
  7. a1 // [1, 2, 3, 4]
  8. // 若果参数是[]
  9. a1 // [1, 2, 3, 4, []]
  11. // concat
  12. var a2 = [1];
  13. a2.concat(2,3) // [1, 2, 3]
  14. a2 // [1]
  15. a2.concat(2, [5, 6]) // [1, 2, 5, 6]
  16. a2 // [1]
  18. // push/concat, 扩展数组到一个数组
  19. var a3 = [1]
  20. a3 = a3.concat([2, 3]) // [1, 2, 3]
  21. a3 // [1, 2, 3]
  23. var a3 = [1]
  24. a3.push.apply(a3, [2, 3]) // 3
  25. a3 // [1, 2, 3]

flat()+flatMap()

  • flat,深度递归遍历数组， return new Array
  • flatMap, 映射函数映射每个元素

flat

  1. /**
  2.  * @description - 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  3.  * @param depth - 指定要提取嵌套数组的结构深度, 默认值为 1。
  4.  * @return { array } - 一个包含将数组与子数组中所有元素的新数组。
  5.  */
  6. arr.flat(depth);
  8. ================================================================
  9. var arr1 = [1, 2, [3, 4]];
  10. arr1.flat();
  11. // [1, 2, 3, 4]
  13. var arr2 = [1, 2, [3, 4, [5, 6]]];
  14. arr2.flat();
  15. // [1, 2, 3, 4, [5, 6]]
  17. var arr3 = [1, 2, [3, 4, [5, 6]]];
  18. arr3.flat(2);
  19. // [1, 2, 3, 4, 5, 6]
  21. //使用 Infinity 作为深度，展开任意深度的嵌套数组
  22. arr3.flat(Infinity);
  23. // [1, 2, 3, 4, 5, 6]
  25. // 会移除数组中的空项
  26. var arr4 = [1, 2, , 4, 5];
  27. arr4.flat();
  28. // [1, 2, 4, 5]

flatMap

  1. /**
  2.  * @description - 使用映射函数映射每个元素，然后将结果压缩成一个新数组。
  3.  * @param callback - 可以生成一个新数组中的元素的函数，可以传入三个参数：
  4.  *         @param currentValue - 当前正在数组中处理的元素。
  5.  *         @param index - 可选的。数组中正在处理的当前元素的索引。
  6.  *        @param array - 可选的。被调用的 map 数组。
  7.  * @param thisArg - 可选的。执行 callback 函数时 使用的this 值。
  8.  * @return { array } - 一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。
  9.  */
  10. arr.flatMap(function callback(currentValue[, index[, array]]) {
  11.   // 返回新数组的元素
  12. }[, thisArg])
  14.   ======================================================================
  15. let arr = ["今天天气不错", "", "早上好"];
  17. arr.map(s => s.split(""));
  18. // [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]
  20. arr.flatMap(s => s.split(""));
  21. // ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

自定义—去重

参考, .uniq(array), .uniqBy(array)

  1. Array.prototype.unique = function () {
  2.   var newArr = [];
  3.   for (var i = 0; i < this.length; i++) {
  4.     if (newArr.indexOf(this[i]) == -1) {
  5.       newArr.push(this[i]);
  6.     }
  7.   }
  8.   return newArr;
  9. }
  10. var arr = ['a','b',1,4,5,8,4,3,1,'a','1'];
  11. console.log(arr.unique());  //  (8) ["a", "b", 1, 4, 5, 8, 3, "1"]

二维数组

let buckets = new Array(bucketCount).fill([]); 错误写法

  1. // 快速定义
  2. // matrix
  3. var arr = [1,2];
  4. var ma = Array.from({length: 1}, () => arr);
  5. undefined

格式化为二维数组

判断数组纬度data[0] instanceof Array

  1. if(!(this.data[0] instanceof Array)){
  2.   let tempArr = [];
  3.   tempArr.push(this.data);
  4.   this.data = tempArr;
  5. }
  7. const d = [92, 71, 0, 25, 36, 100];
  8. d3.max(d);  //100
  9. const arr= [[92, 71, 0, 25, 36, 100],[34, 67, 67, 5, 96, 10]];
  10. var max_arr = [];
  11. arr.forEach(d => console.log(d3.max(d)));  //100,96
  12. arr.forEach(d => max_arr.push(d3.max(d)));
  13. d3.max(max_arr);

问题二维数组concat深复制

  1. var data = [[12,23,1,2,'--',34,'--'],['--',23,'--',2,'--',34,'--']];
  2. // var newData = Array.from({length: data.length}, v => []);
  3. var newData = Array.from({length: data.length}, (v, i) => data[i].concat());
  4. // console.log(newData);
  5. newData[1][2] = 'test';
  6. console.log(data, newData)