js/javascript 操作数组【全】(含常用的操作数组的lodash)

数组的基本特点和操作

数组的存储性能比普通对象要好，数组的类型也是对象。

普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引来操作元素。索引：从0开始的整数就是索引。

获取数组的长度 arr.length

修改数组的长度（修改length）

如果修改的length大于原长度，则多出部分会空出来，置为 null。
如果修改的length小于原长度，则多出的元素会被删除，数组将从后面删除元素。

    var arr1 = [11, 12, 13];var arr2 = [21, 22, 23];arr1.length = 1;  // [11]arr2.length = 5;  // [21,22,23,null,null]

判断是否为数组 Array.isArray(arr)

还可以通过 A instanceof B来判断 A 是否属于 B 类型。（现在用得不多）

判断数组是否包含指定值 arr.includes(）

[1, 2, 3].includes(2); // true// 第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。
[1, 2, 3].includes(3, 3); // false

创建数组

方式 1 - 字面量

let arr1 = [];
let arr2 = [1,2,3];

方式 2 - 新建数组实例

let arr1 = new Array(); // 参数为空,得到一个空数组 []
let arr2 = new Array(4); // 参数为一个数值时表示数组的长度，得到  [null,null,null,null]
let arr3 = new Array(15, 16, 17); // 参数为多个数值时表示数组中的元素，得到[15,16,17]

方式 3 - Array.of()

将一系列值转换成数组

let arr = Array.of(1, 'abc', true);

方式 4 - 伪数组变真数组

https://blog.csdn.net/weixin_41192489/article/details/116642962

遍历数组

for of 遍历（推荐）

for…of 可以避免开拓内存空间，增加代码运行效率

for (let item of arr) {console.log(item);
}

可以使用break 或 return 提前跳出遍历

for(let item of arr){if(item === 'a'){console.log(item)break}
}

默认for…of无法获取数组元素的下标index，若想获取index，请参考
https://blog.csdn.net/weixin_41192489/article/details/116645563

forEach() 遍历

arr.forEach((item, index, arr) => {});

没有返回值，也无法被 break打断

第一个参数——当前正在遍历的元素
第二个参数——元素的索引
第三个参数——正在遍历的数组

使用return可以跳出当前循环，但不能跳出整个循环

let arr = ['a', 'b', 'c', 'd']arr.forEach((item, index) => {if (item === 'b') {return}console.log(item)
})// 得到 a c d

通过throw抛异常，可以提前跳出整个循环，但不推荐

let arr = ['a', 'b', 'c', 'd']try {arr.forEach((item, index) => {if (index === 2) {throw new Error()}console.log(item)})
} catch (e) {console.log(e)
}// 得到 a b Error

for 遍历

for (var i = 0; i < arr.length; i++) {console.log(arr[i]);
}

map() 遍历

对原数组中的每一项运行回调函数，将回调函数的返回结果组成新数组。

主要用于基于原数组加工生成一个新数组，新数组和原数组的长度相同。

let arr = ['a', 'b', 'c', 'd']let newArr1 = arr.map((item, index) => item + index)let newArr2 = arr.map((item, index) => ({'index': index,'value': item
}))let newArr3 = arr.map((item, index) => {if (item === 'b') {return item}
})console.log(newArr1)
console.log(newArr2)
console.log(newArr3)

得到

[ 'a0', 'b1', 'c2', 'd3' ][{ index: 0, value: 'a' },{ index: 1, value: 'b' },{ index: 2, value: 'c' },{ index: 3, value: 'd' }
][ undefined, 'b', undefined, undefined ]

reduce() 遍历

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)  //求和，10
let mul = arr.reduce((x,y)=>x*y)  //求乘积，24

更多详情见 https://blog.csdn.net/weixin_41192489/article/details/116661854

every() 遍历

对数组中每一项运行回调函数，如果都返回true，就返回true；如果有一项返回false，则停止遍历，返回false。

第一个参数——当前正在遍历的元素
第二个参数——元素的索引
第三个参数——正在遍历的数组

let arr = ['a', 'b', 'good', 'd']let result = arr.every((item, index, arr) => {console.log(item)if (item.length < 2) {return true}
})console.log(result)let result2 = arr.every((item, index, arr) => item.length > 0)console.log(result2)

得到 a b good false true

some() 遍历

对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，返回true，若每一项都返回false，则最终返回false

第一个参数——当前正在遍历的元素
第二个参数——元素的索引
第三个参数——正在遍历的数组

let arr = ['a', 'b', 'good', 'd']let result = arr.some((item, index, arr) => {console.log(item)if (item.length < 2) {return true}
})console.log(result)let result2 = arr.some((item, index, arr) => item.length < 0)console.log(result2)

得到 a true false

获取元素

数组[索引] 如果读取不存在的索引（比如元素没那么多），系统不会报错，而是返回undefined。

    var arr = [21, 22, 23];console.log(arr[0]); // 打印结果：21console.log(arr[5]); // 打印结果：undefined

查找元素 arr.find()

找出第一个满足「指定条件返回true」的元素。一旦找到符合条件的第一个元素，将不再继续往下遍历。

        let arr = [2, 3, 2, 5, 7, 6];let result = arr.find(function (item, index) {return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回});

添加元素

在数组头部（左侧）插入一个或多个元素——arr.unshift("王五", "王六") 返回数组的新长度
在数组尾部（右侧）插入一个或多个元素——arr.push("王五", "王六") 返回数组的新长度
在数组指定位置（下标）添加元素—— arr[index] = '王五'
- 若index< arr.length -1 ，则是修改指定位置元素；
- 若index= arr.length 则相当于在数组尾部添加一个元素
- 若index> arr.length -1 ，则在index下标处添加元素后，arr.length -1到 index-1之间的下标都用undefined填充

删除元素

删除第一个元素 —— arr.shift() 返回被删除的元素
删除最后一个元素 —— arr.pop() 返回被删除的元素

删除所有元素——清空数组

array = [];           //方式1：推荐
array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读
array.splice(0);      //方式3：删除数组中所有项目

删除指定的元素—— splice ()

//范例 —— 从index为1的元素开始，一共删除三个元素,并且在 index=1 的前面追加两个元素
let arr = ["a", "b", "c", "d", "e", "f"];
let result = arr.splice(1, 3, "新增元素1", "新增元素2");arr：["a","新增元素1","新增元素2","e","f"]
result：["b","c","d"]

更多详情见 https://blog.csdn.net/weixin_41192489/article/details/116694667

拼接元素 join

数组转换成字符串

方法 1 —— arr.join()

将数组转换为字符串，返回结果为转换后的字符串（不会改变原来的数组）

参数为一个字符串，将会成为数组中元素的连接符；如果不指定连接符，则默认使用 , 作为连接符，此时和 toString()的效果是一致的。

    var arr = ["a", "b", "c"];var result1 = arr.join(); // 这里没有指定连接符，所以默认使用 , 作为连接符var result2 = arr.join("-"); // 使用指定的字符串作为连接符

result1 =a,b,c
result2 =a-b-c

方法 2 —— toString()

字符串 = 数组.toString();

获取下标

获取指定元素的下标

indexOf(value)：从前往后索引，获取 value 在数组中的第一个下标。
lastIndexOf(value) ：从后往前索引，获取 value 在数组中的最后一个下标。

可用于判断某个值是否在指定的数组中，如果没找到则返回-1。

    var arr = ["a","b","c","d","e","d","c"];console.log(arr.indexOf("c"));       //从前往后，找第一个"c"在哪个位置console.log(arr.lastIndexOf("d"));   //从后往前，找第一个"d"在哪个位置

【lodash可以指定查询开始的位置】

// _.indexOf(array, value, [fromIndex=0])_.indexOf([1, 2, 1, 2], 2);
// => 1// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

获取符合条件的元素的下标 findIndex()

找出第一个满足「指定条件返回true」的元素的index。

        let arr = [2, 3, 2, 5, 7, 6];let result = arr.findIndex(function (item, index) {return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回});

从右到左查找【需要lodash】

var users = [{ 'user': 'barney',  'active': true },{ 'user': 'fred',    'active': false },{ 'user': 'pebbles', 'active': false }
];_.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
// => 2

数组复制

浅拷贝

let arr2 = arr1

深拷贝

// 使用 lodash
var objects = [{ 'a': 1 }, { 'b': 2 }];var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

获取数组中的最大/最小值

1.es6拓展运算符...

Math.max(...arr)

2.es5 apply(与方法1原理相同)

Math.max.apply(null,arr)

3.for循环

let max = arr[0];
for (let i = 0; i < arr.length - 1; i++) {max = max < arr[i+1] ? arr[i+1] : max
}

4.数组sort()

arr.sort((num1, num2) => {return num1 - num2 < 0
})
arr[0]

5.数组reduce

arr.reduce((num1, num2) => {return num1 > num2 ? num1 : num2}
)

6. 使用lodash

_.max([4, 2, 8, 6]);
// => 8

数组求和【需lodash】

_.sum([4, 2, 8, 6]);
// => 20

数组截取 arr.slice()

从数组中提取指定的一个或者多个元素，将截取到的元素封装到一个新数组中返回（不会改变原来的数组）

新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引

    var arr = ["a", "b", "c", "d", "e", "f"];var result1 = arr.slice(2); //从第二个值开始提取var result2 = arr.slice(-2); //提取最后两个元素var result3 = arr.slice(2, 4); //提取从第二个到第四个之间的值（不包括第四个值）var result4 = arr.slice(4, 2); //空

    arr:["a","b","c","d","e","f"]result1:["c","d","e","f"]result2:["e","f"]result3:["c","d"]result4:[]

数组过滤 arr.filter()

对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。

    const arr1 = [1, 3, 6, 2, 5, 6];const arr2 = arr1.filter(item=> item > 4); //将arr1中大于4的元素返回，组成新的数组

过滤掉假值【需Lodash】

false, null,0, "", undefined, 和 NaN 都被认为是“假值”。

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

数组排序 arr.sort()——改变原数组

let arr = [1, 10, 2, 12];
let DESarr = arr.sort((a, b) => b - a) // 降序排列 [12,10,2,1]

更多详情见 https://blog.csdn.net/weixin_41192489/article/details/116696303

数组反转 arr.reverse()——改变原数组

arr.reverse()：反转数组，返回结果为反转后的数组（会改变原来的数组）

let arr = ["a", "b", "c", "d", "e", "f"];
let result = arr.reverse(); // 将数组 arr 进行反转arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]

普通数组去重

方法1 —— 使用lodash

_.uniq([2, 1, 2]);  // => [2, 1]

方法2 —— 遍历自己，与自己对比，有重复则删掉

      //创建一个数组var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];//去除数组中重复的数字//获取数组中的每一个元素for (var i = 0; i < arr.length; i++) {//console.log(arr[i]);/*获取当前元素后的所有元素*/for (var j = i + 1; j < arr.length; j++) {//console.log("---->"+arr[j]);//判断两个元素的值是否相等if (arr[i] == arr[j]) {//如果相等则证明出现了重复的元素，则删除j对应的元素arr.splice(j, 1);//当删除了当前j所在的元素以后，后边的元素会自动补位//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素//使j自减j--;}}}console.log(arr);

方法3 —— 创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加

//    编写一个方法 去掉一个数组的重复元素var arr = [1,2,3,4,5,2,3,4];console.log(arr);var aaa = fn(arr);console.log(aaa);//思路：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。function fn(array){var newArr = [];for(var i=0;i<array.length;i++){//开闭原则var bool = true;//每次都要判断新数组中是否有旧数组中的值。for(var j=0;j<newArr.length;j++){if(array[i] === newArr[j]){bool = false;}}if(bool){newArr[newArr.length] = array[i];}}return newArr;}

对象数组去重

// arr为需要去重的对象数组
// prop为判重依据的字段名
function uniqObjArr(arr, prop) {let obj = {};arr = arr.reduce(function (item, next) {obj[next[prop]] ? '' : obj[next[prop]] = true && item.push(next);return item;}, []);return arr
}

使用范例


let arr = [{key: '01',value: '乐乐'
}, {key: '02',value: '博博'
}, {key: '03',value: '淘淘'
}, {key: '04',value: '哈哈'
}, {key: '01',value: '乐乐'
}];arr = uniqObjArr(arr, 'key')
console.log(arr);// 得到
//     [
//     { key: '01', value: '乐乐' },
//         { key: '02', value: '博博' },
//         { key: '03', value: '淘淘' },
//         { key: '04', value: '哈哈' }
//     ]

数组拼接 arr.concat ()

新数组 = 数组1.concat(数组2, 数组3 ...)

    var arr1 = [1, 2, 3];var arr2 = ["a", "b", "c"];var arr3 = ["朝阳", "vae"];var result1 = arr1.concat(arr2);  // [1,2,3,"a","b","c"]var result2 = arr2.concat(arr1, arr3);   // ["a","b","c",1,2,3,"朝阳","vae"]

数组的交集、差集、补集、并集

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]var sa = new Set(a);
var sb = new Set(b);
// 交集
let intersect = a.filter(x => sb.has(x));
// 差集
let minus = a.filter(x => !sb.has(x));
// 补集
let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))];
// 并集
let unionSet = Array.from(new Set([...a, ...b]));

数组拆分【需Lodash】

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

数组覆写【需Lodash】

var array = [1, 2, 3];_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']_.fill(Array(3), 2);
// => [2, 2, 2]_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]

数组重组【需Lodash】

按下标重组和还原

https://www.lodashjs.com/docs/lodash.zip

var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]_.unzip(zipped);
// => [['fred', 'barney'], [30, 40], [true, false]]

重置为对象

https://www.lodashjs.com/docs/lodash.zipObject

_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }

统计分组

https://www.lodashjs.com/docs/lodash.groupBy

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

数组统计【需Lodash】

https://www.lodashjs.com/docs/lodash.countBy

_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }// The `_.property` iteratee shorthand.
_.countBy(['one', 'two', 'three'], 'length');
// => { '3': 2, '5': 1 }

数组降维

[1,2,[1,2] ] 嵌套数组变为一维数组 [1,2,1,2]

使用lodash

https://www.lodashjs.com/docs/lodash.flatMap

function duplicate(n) {return [n, n];
}_.flatMap([1, 2], duplicate);
// => [1, 1, 2, 2]

数组随机取样【需Lodash】

取一个

_.sample([1, 2, 3, 4]);
// => 2

取n个

_.sampleSize([1, 2, 3], 2);
// => [3, 1]_.sampleSize([1, 2, 3], 4);
// => [2, 3, 1]

打乱数组【需Lodash】

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

对象数组解析【需Lodash】

https://www.lodashjs.com/docs/lodash.partition

var users = [{ 'user': 'barney',  'age': 36, 'active': false },{ 'user': 'fred',    'age': 40, 'active': true },{ 'user': 'pebbles', 'age': 1,  'active': false }
];_.partition(users, function(o) { return o.active; });
// => objects for [['fred'], ['barney', 'pebbles']]// The `_.matches` iteratee shorthand.
_.partition(users, { 'age': 1, 'active': false });
// => objects for [['pebbles'], ['barney', 'fred']]// The `_.matchesProperty` iteratee shorthand.
_.partition(users, ['active', false]);
// => objects for [['barney', 'pebbles'], ['fred']]// The `_.property` iteratee shorthand.
_.partition(users, 'active');
// => objects for [['fred'], ['barney', 'pebbles']]