备案控制台
开发者社区 开发与运维 文章 正文

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

2024-07-02 4
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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]); // 打印结果：21
    console.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']]
文章标签：
JavaScript
索引
前端开发
存储
关键词：
JavaScript数组
JavaScript操作
JavaScript lodash
JavaScript javascript
JavaScript JS
朝阳39
目录
相关文章
zrblue
|
1天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 （剩余参数）、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 （剩余参数）、拓展运算符、对象与数组的解构赋值】
zrblue
7 1
zrblue
|
1天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（三）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（三）
zrblue
8 1
朝阳39
|
2天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
朝阳39
5 1
朝阳39
|
12小时前
|
JavaScript
js 数组移除指定元素【函数封装】（含对象数组移除指定元素）
js 数组移除指定元素【函数封装】（含对象数组移除指定元素）
朝阳39
2 0
yqcoder
|
1天前
|
前端开发 JavaScript API
前端 JS 经典：数组新增 API
前端 JS 经典：数组新增 API
yqcoder
4 0
yqcoder
|
1天前
|
前端开发 JavaScript
前端 JS 经典：判断稀疏数组
前端 JS 经典：判断稀疏数组
yqcoder
7 0
yqcoder
|
1天前
|
前端开发 JavaScript C++
前端 JS 经典：判断数组的准确方法
前端 JS 经典：判断数组的准确方法
yqcoder
6 0
zrblue
|
1天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（一）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（一）
zrblue
5 0
zrblue
|
1天前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）
zrblue
6 0
咖啡机（K.F.J）
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具，点击查看工具。下面的所有示例代码，都可以在codepen上查看到。
咖啡机（K.F.J）
122 0
JavaScript与PHP中正则