js的19种数组操作方法实例实用的编程知识

JavaScript中数组的操作方法，非常实用哦。
  在日常学习工作中，经常需要对数组对象进行操作，但是操作方法多种多样，于是整理了一些，希望可以对大家有所帮助。

先定义两个数组便于下方使用：

let array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let users = [
	{
      id: 1, name: "ted" },
	{
      id: 1, name: "bob" },
	{
      id: 3, name: "sara" },
	{
      id: 4, name: "test" },
	{
      id: 4, name: "test" },
	{
      id: 5, name: "abc" }
];

1. 从阵列中删除重复项

数组：这是一些方便的方法，可用于从数组中删除重复项。

(1)使用filter
let list = array.filter((x, i, a) => a.indexOf(x) == i);

(2)使用set
let setuniq = [...new Set(array)];

//[2, 1, 5, 6, 7, 8, 9, 10]

2. 从对象数组中删除重复项

对象数组：这是一些方便的方法，可用于从对象数组中删除重复项。

(1)使用filter
let filteruniquebyID = users.filter(
    (v, i, a) => a.findIndex(t => t.id === v.id) === i
);
//[{"id":1,"name":"ted"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

(2)使用set
var set1 = Array.from(
users.reduce((m, t) => m.set(t.id, t), new Map()).values()
);
//[{"id":1,"name":"bob"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

3. 在数组中查找一个项目

以下是在数组中查找项目的一些方法。

1、includes：此方法确定数组在条目中是否包含某个值，是返回true值还是false值。
console.log(array.includes(2)); //true

2、 every：此方法测试数组中的所有元素是否通过提供的功能实现的测试。它返回一个布尔值。
let testevery1 = array.every(val=> val>3); //false

3、some：此方法测试数组中的至少一个元素是否通过了由提供的函数实现的测试。它返回一个布尔值。
let testsome1 = array.some(val=> val>3); //true

4、findIndex：此方法返回满足提供的测试功能的数组中第一个元素的索引。否则，它返回-1，表明没有任何元素通过测试。
let  testindex = array.findIndex(val => val > 1); //0

5、find：此方法返回提供的数组中满足提供的测试功能的第一个元素的值。如果没有值满足测试功能，则返回undefined。
let testfind = array.find(el => (el > 2)); //5

6、 filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。
let testfilter1 = array.filter(val=> val>3);
//[5, 6, 7, 8, 9, 9, 10]

7、map：此方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。
let val = [];
array.map(item => {
      if(item >= 3) val.push(item); });
//[5, 6, 7, 8, 9, 9, 10]

4. 在对象数组中找到一个项目

这些是可用于在对象数组中查找项目的方法。

1、every：此方法测试数组中的所有元素是否通过提供的功能实现的测试。它返回一个布尔值。
let testevery2 = users.every(val=> val.id>3); //false

2、some：此方法测试数组中的至少一个元素是否通过了提供的功能实现的测试。它返回一个布尔值。
let testsome2 = users.some(val=> val.id>3); //true

3、 lodash includes：判断在collection中返回的值，如果可以在value找到，则返回true，否则返回false。
let lodashtest11 =_.includes({
      'a': 1, 'b': 2 }, 1); //true
let lodashtest12 =_.includes('abcd', 'bc'); //true

4、 findIndex：此方法返回满足提供的测试功能的数组中第一个元素的索引。否则，它返回-1，表明没有任何元素通过测试。
let  testindex2 = users.findIndex(val => val.id > 1); //3

5、 find：此方法返回提供的数组中满足提供的测试功能的第一个元素的值。如果没有值满足测试功能，则返回undefined。
let testfind2 = users.find(el => (el.id > 2));
//{"id":3,"name":"sara"}

6、filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。
let testfilter2 = users.filter(val=> val.id>3);

7、map：此方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。
let val2 = [];
users.map(item => {
      if(item.id >= 3) val2.push(item); });

5. 对数组项排序

可以使用sort方法对数组进行排序。
该sort()方法对数组中的元素进行适当排序，然后返回排序后的数组。默认的排序顺序是升序，建立在将元素转换为字符串，然后比较其UTF-16代码单元值的序列的基础上。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

6. 对具有特定属性的对象数组进行排序

这些是可以使用对象的特定属性对对象数组进行排序的方法。
1、简单排序：此方法对数组中的元素进行适当排序，并返回排序后的数组。

let data = [{
     
        id: "3",
        city: "toronto",
        state: "TR",
        zip: "75201",
        price: "123451"
    },
    {
     
        id: "1",
        city: "anand",
        state: "AN",
        zip: "94210",
        price: "345678"
    },
    {
     
        id: "5",
        city: "sudbury",
        state: "SB",
        zip: "00110",
        price: "789045"
    }
];
let sorttest2 = data.sort((a, b) => (a.id < b.id ? -1 : Number(a.id > b.id)));console.log("sort test 2 ", sorttest2);
//output
{
     
    "id": "1",
    "city": "anand",
    "state": "AN",
    "zip": "94210",
    "price": "345678"
}, {
     
    "id": "3",
    "city": "toronto",
    "state": "TR",
    "zip": "75201",
    "price": "123451"
}, {
     
    "id": "5",
    "city": "sudbury",
    "state": "SB",
    "zip": "00110",
    "price": "789045"
}]

2、localCompare：此方法返回一个数字，该数字指示参考字符串是按排序顺序位于给定字符串之前，之后还是与之相同。

let sorttest2 = data.sort((a, b) => (a.id < b.id ? -1 : Number(a.id > b.id)));
//output
[{
     
    "id": "1",
    "city": "anand",
    "state": "AN",
    "zip": "94210",
    "price": "345678"
}, {
     
    "id": "3",
    "city": "toronto",
    "state": "TR",
    "zip": "75201",
    "price": "123451"
}, {
     
    "id": "5",
    "city": "sudbury",
    "state": "SB",
    "zip": "00110",
    "price": "789045"
}]

3、用多个字段排序
该parseInt()函数解析一个字符串参数，并返回一个指定基数的整数（数学数字系统中的基数）。

let sorttest3 = data.sort(function(left, right) {
     
    var city_order = left.city.localeCompare(right.city);
    var price_order = parseInt(left.price) - parseInt(right.price);
    return city_order || -price_order;
});
//output
[{
     
    "id": "1",
    "city": "anand",
    "state": "AN",
    "zip": "94210",
    "price": "345678"
}, {
     
    "id": "5",
    "city": "sudbury",
    "state": "SB",
    "zip": "00110",
    "price": "789045"
}, {
     
    "id": "3",
    "city": "toronto",
    "state": "TR",
    "zip": "75201",
    "price": "123451"
}]

7. 对日期数组进行排序

1、使用sort

let isDescending = false; //set to true for Descending
let dates = ["1/7/2021", "1/6/2021", "8/18/2020", "8/6/2020"];
let sorteddates = dates.sort((a, b) => isDescending ? new Date(b).getTime() - new Date(a).getTime() : new Date(a).getTime() - new Date(b).getTime());
console.log(sorteddates);
//["8/6/2020", "8/18/2020", "1/6/2021", "1/7/2021"]

8. 从阵列中删除一个项目

1、 pop：此方法从数组中删除最后一个元素并返回该元素。此方法更改数组的长度。

let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testpop = arraypoptest.pop();
console.log("array pop", testpop,"-", arraypoptest);
//10 - [2, 1, 2, 5, 6, 7, 8, 9, 9];

2、shift：此方法从数组中删除第一个元素并返回该删除的元素。此方法更改数组的长度。

let arrayshifttest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testshift = arrayshifttest.shift();
console.log("array shift", testshift,"-", arrayshifttest);
//2 - [1, 2, 5, 6, 7, 8, 9, 9, 10]

3、 slice：此方法将数组的一部分的浅表副本返回到一个新的数组对象中，该对象选自startto end（end不包括），其中startandend表示该数组中各项的索引。原始数组将不会被修改。

let arrayslicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testslice = arrayslicetest.slice(0, 3);
console.log("array slice", testslice, arrayslicetest); 
//not changed original array
//[2, 1, 2] - [2, 1, 2, 5, 6, 7, 8, 9, 9, 10]

4、 splice：此方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

let arraysplicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testsplice = arrayslicetest.splice(0, 3);
//[2, 1, 2]

5、 filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

let testarr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testarr2 = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let filtered = testarr.filter(function(value, index, arr) {
     
    return value > 5;
});
let filtered2 = testarr2.filter(item => item !== 2);
console.log("filter example 1", filtered);
//[6, 7, 8, 9, 9, 10]
console.log("filter example 2", filtered2);
//[1, 5, 6, 7, 8, 9, 9, 10]

过滤并去除多个值：

let forDeletion = [2, 3, 5];
let mularr = [1, 2, 3, 4, 5, 3];
mularr = mularr.filter(item => !forDeletion.includes(item));
console.log("multiple value deletion with filter", mularr);
//[1, 4]

6、delete运算符： JavaScript delete 从对象中删除属性；如果不再保存对相同属性的引用，则最终将自动释放该引用。

let ar = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
delete ar[4]; // delete element with index 4
console.log(ar);
//[2, 1, 2, 5, undefined, 7, 8, 9, 9, 10]

9. 从数组中给定的字符串中查找字符数

1、字符串匹配方法
该match()方法检索将字符串与正则表达式匹配的结果。

const test1 = ("atit patel".match(/a/g)||[]).length
console.log(test1); //2

2、字符串拆分方法
该split()方法将a String分为子字符串的有序列表，然后将这些子字符串放入数组中，然后返回该数组。

const test2 ="atit patel".split("a").length-1
console.log(test2); //2

3、indexOf方法
该indexOf()方法返回String第一次出现指定值的调用对象内的索引，从开始搜索fromIndex。如果找不到该值，则返回-1。

let  stringsearch = "a" ,str = "atit patel";
for(var count=-1,index=-2; index != -1; count++,index=str.indexOf(stringsearch,index+1) );
console.log(count); //2

4、filter方法
该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

const mainStr = 'atit patel';
const test3 = [...mainStr].filter(l => l === 'a').length;
console.log(test3); //2

5、reduce方法
该reduce()方法在数组的每个元素上执行reducer函数（由你提供），从而产生单个输出值。

const mainStr1 = 'atit patel';
const test4 = [...mainStr1].reduce((a, c) => c === 'a' ? ++a : a, 0);
console.log(test4); //2

10. 从数组中给定的字符串中查找每个字符的出现次数

1、我们可以添加reduce方法，该方法可以在迭代后返回对象

let s = 'atit patel';
let test5 = [...s].reduce((a, e) => {
      a[e] = a[e] ? a[e] + 1 : 1; return a }, {
     });
console.log(test5); //{a: 2,e: 1,i: 1,l: 1,p: 1,t: 3}

2、与具有“或”运算符的方法6相同

let test6 = [...s].reduce((res, char) => (res[char] = (res[char] || 0) + 1, res), {
     })
console.log(test6);//{a: 2,e: 1,i: 1,l: 1,p: 1,t: 3}

11. 重命名对象数组中的对象属性

1、使用Map：此方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。

let countries = [
{
      id: 1, name: "india" },
{
      id: 2, name: "canada" },
{
      id: 3, name: "america" }
];
const transformed = countries.map(({
      id, name }) => ({
     
label: id,
value: name
}));
console.log("1", JSON.stringify(transformed));[{
     "label":1,"value":"india"},{
     "label":2,"value":"canada"},{
     "label":3,"value":"america"}]

2、使用带有参数的映射

const transformed2 = countries.map(({
      id: label, name: value }) => ({
     
label,
value
}));
console.log("2", JSON.stringify(transformed2));
[{
     "label":1,"value":"india"},{
     "label":2,"value":"canada"},{
     "label":3,"value":"america"}]

3、使用对象解构：该解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。

const rename = (({
     id: a_b_c, ...rest}) => ({
     a_b_c, ...rest}))
console.log(rename({
     id: 1, val: 2}))
//{a_b_c: 1, val: 2}

12. 如何合并两个数组并创建一个新数组？

这可以简单地通过使用扩展运算符来实现。

var arr1 = ['a', 'b', 'c']
var arr2 = ['d', 'e']
var merged = [...arr1, ...arr2]
console.log(merged)

13. 一个数字数组的总和

1、reduce可用于遍历数组，将当前元素值添加到先前元素值的总和中。

console.log(
  [1, 2, 3, 4].reduce((a, b) => a + b, 0)
)
console.log(
  [].reduce((a, b) => a + b, 0)
)//10

14. 比较两个对象数组，删除重复项，根据属性合并对象

我们确实需要比较两个不同的对象数组，并且如果两个对象匹配特定的属性值，则希望合并这两个对象，可以使用filter方法来实现。
该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

let array1 = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 }
];
let array2 = [
	{
      id: "53", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 },
	{
      id: "52", active: "a", value: 13 }
];

let res = array2.filter(val =>
    array1.some(({
     
        value
    }) => (val.value as any) === (value as any))
);
console.log("1", JSON.stringify(res));
//[{"id":"53","active":"a","value":10},{"id":"51","active":"a","value":11}]

15. 比较两个对象数组，合并和更新值（假设数组3,4共享相同的ID）

有时我们确实会获得要求，以将两个不同的属性与新的属性值合并。我们可以使用地图创建一组新的对象数组，并且可以使用find方法在更新新值之前匹配特定属性。
该map()方法创建一个新数组，其中填充了在调用数组中每个元素上调用提供的函数的结果。
该find()方法返回提供的数组中满足提供的测试功能的第一个元素的值。如果没有值满足测试功能，则返回undefined。

let array3 = [
	{
      id: "50", active: "a", value: 12 },
	{
      id: "51", active: "a", value: 15 }
];
let array4 = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 },
	{
      id: "52", active: "a", value: 13 }
];

let arr = [];
array3.map(id =>
    arr.push({
     
        id: id.id,
        newValue: array4.find(o => o.id === id.id).value + 2
    })
);
console.log("2", JSON.stringify(arr));
//[{"id":"50","newValue":12},{"id":"51","newValue":13}]

16. 比较对象数组并找到唯一的对象

如果我们要比较两个对象数组并检查其中哪些是唯一对象，则可以使用filter来实现这些功能。

const array5 = [
	{
      id: "50", active: "a", value: 12 },
	{
      id: "51", active: "a", value: 15 }
];
const array6 = [
	{
      id: "50", active: "a", value: 12 },
	{
      id: "51", active: "a", value: 15 },
	{
      id: "52", active: "a", value: 13 }
];

const ids = array5.map(e => e.id);
let filtered = array6.filter(e => ids.includes(e.id));
console.log("3", JSON.stringify(filtered));
//[{"id":"50","active":"a","value":12},{"id":"51","active":"a","value":15}]

17. 根据匹配的值比较和更新属性

当我们要比较两个对象数组并根据匹配的值更新特定的属性时，可以使用这些函数。

const array7 = [
	{
      id: "50", active: "a", value: 12 },
	{
      id: "51", active: "a", value: 15 }
];
const array8 = [{
      id: "50", active: "a", value: 12 }];

const idSet = new Set(array8.map(o => o.id));
const res1 = array7.map(o => ({
      ...o, value: idSet.has(o.id) ? "0" : o.value }));
console.log("4", JSON.stringify(res1));
//[{"id":"50","active":"a","value":"0"},{"id":"51","active":"a","value":15}

18. 比较两个数组对象并获得差异

当我们要比较两个不同的对象数组并得到它们之间的差异时，可以使用这些函数。

let a = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 }
];
let b = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 },
	{
      id: "52", active: "a", value: 13 }
];

let valuesArray1 = a.reduce(function(a, c) {
     
    a[c.value] = c.value;
    return a;
}, {
     });
let valuesArray2 = b.reduce(function(a, c) {
     
    a[c.value] = c.value;
    return a;
}, {
     });
var result = a
    .filter(function(c) {
     
        return !valuesArray2[c.value];
    })
    .concat(
        b.filter(function(c) {
     
            return !valuesArray1[c.value];
        })
    );
console.log("5", result);
//[{"id":"52","active":"a","value":13}]
//shorthand
let ab = b.filter(o => !a.find(o2 => o.id === o2.id));
console.log("6", ab);

19. 比较对象的两个数组合并并删除重复项

如果我们有要求比较两个对象数组并从它们中删除重复项并合并两个数组，则可以使用此方法。

let arr1 = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 }
];
let arr2 = [
	{
      id: "50", active: "a", value: 10 },
	{
      id: "51", active: "a", value: 11 },
	{
      id: "52", active: "a", value: 13 }
];

const arr1IDs = new Set(arr1.map(({
      id }) => id));
const combined = [...arr1, ...arr2.filter(({
      id }) => !arr1IDs.has(id))];
console.log(JSON.stringify(combined));
//[{"id":"50","active":"a","value":10},{"id":"51","active":"a","value":11},{"id":"52","active":"a","value":13}]

原文参考：22个实用JavaScript编程知识