js数组常见操作方法总结

0.将数组中所有name改成ChName,Name改成EnName    
var arr1 = [
    {name:'aa',Name:'ss',children:[{name:'ww',Name:'nn'}] },
    {name:'ff',Name:'ee'},
]
let arr2 = JSON.parse(    
    JSON.stringify(arr1)
      .replace(/name/g, "ChName")
      .replace(/Name/g, "EnName")
 );
console.log(arr2)

1.合并数组   concat()

var arr1 = [1,2,3]
var arr2 = [4,5]
var arr3 = arr1.concat(arr2)

2.数组转换成字符串   join()       toString()

var arr = [2,3,4]
console.log(arr.join())   //2,3,4
console.log(arr.join('-'))   //2-3-4  指定字符连接

var arr = [2,3,4]
console.log(arr.toString())   //2,3,4

3.向数组末尾追加元素   push()

var a = [2,3,4];
var b = a.push(5);
console.log(a); //[2,3,4,5]
console.log(b); //4
push方法可以一次添加多个元素push(data1,data2....)

4.删除并返回数组的最后一个元素   pop()

var arr = [2,3,4]
console.log(arr.pop()) //4
console.log(arr) //[2,3]

5.删除并返回数组的第一个元素   shift()

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr); //[3,4]

6.向数组的开头添加一个或更多元素   unshift()

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3, 6, 2, 3, 4, 5]

7.根据索引获取指定元素   slice()

返回一个新的数组，包含从 start 到 end （不包括该元素）的元素。该方法不会修改原数组。

var arr = [2,3,4,5];
console.log(arr.slice(1,3)); //[3,4]
console.log(arr); //[2,3,4,5]

8.向/从数组添加/删除元素，并返回删除的元素   splice()

array.splice(index, howmany, item1, ....., itemX)

index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, ..., itemX	可选。要添加到数组中的新项目。

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a); // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3)); //[6, 7]
console.log(b); //[5, 3, 8]

9.将数组元素计算为一个值   reduce()    reduceRight()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduceRight()（从右到左）

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

求数组所有项的和
const arr = [1,2,3,4,5]
var newArr = arr.reduce((prev, current)=>{
    return prev + current
})
console.log(newArr)  //15

数组去重        
const arr = [1,1,2,2,3,3]
var newArr = arr.reduce((prev,current)=>{
    !prev.includes(current) && prev.push(current)
    return prev
},[])
console.log(newArr)  //[1, 2, 3]

扁平化数组
const arr = [[1,2],[3,4],[5,6]]
var newArr = arr.reduce((prev, current)=>{
    return [...prev, ...current]
},[])
console.log(newArr)  //[1, 2, 3, 4, 5, 6]

10.排序   sort()
按照 Unicode code 位置排序，默认升序

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

11.颠倒数组中元素的顺序   reverse()

var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr); //[4, 3, 2]

12. 根据元查找位置  indexOf()      lastIndexOf()

indexOf 是从前往后查找， lastIndexOf 是从后往前查找
都有两个参数：(查找的值，查找起始位置)   。不存在，返回 -1 ；存在，返回位置
indexOf

var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
 
if (a.indexOf(7) === -1) {
 // element doesn't exist in array
}
lastIndexOf
 
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);  // 3
numbers.lastIndexOf(7);  // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

13.检测数组所有元素是否都符合指定条件（函数提供） every()
每一项都返回 ture,才返回 true

function isBigEnough(element, index, array) {
 return element < 10;
}
[2, 5, 8, 3, 4].every(isBigEnough); // true

14.检测数组中的元素是否存在满足指定条件的（函数提供） some()
如果有一项满足条件，就会返回true , 剩余的元素不会再执行检测

function compare(element, index, array) {
 return element > 10;
} 
[2, 5, 8, 1, 4].some(compare); // false
[12, 5, 8, 1, 4].some(compare); // true

15.过滤数组中符合条件的元素，返回新数组     filter

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

var a = [1, 5, 10, 15];
var b = a.filter(function(x) {
  return x > 5;
});
console.log(b)  //[10, 15]

js中filter过滤用法总结 - 寒冷的雨呢 - 博客园

16.验证数组中符合条件的返回true/false，或者根据函数处理后  返回新数组    map

参数同filter

var a = [1, 5, 10, 15];
var b = a.map(function(x) {
    return x > 5;
});
console.log(b)   //[false, false, true, true]

var a = [1, 5, 10, 15];
var b = a.map(function(x) {
    return x * 5;
});
console.log(b) //[5, 25, 50, 75]

17. 数组遍历   forEach

参数同filter

const items = ['item1', 'item2', 'item3'];
const copy = []; 
items.forEach(function(item){
 copy.push(item)
});

ES6新增新操作数组的方法

1、find()：
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

var a = [1, '5', 10, 15];
var b = a.find((value,index,arr)=> {
     return typeof value === "number"
})
console.log(b) //1

2、findIndex()：
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3、填充数组  fill()：
用新元素替换掉数组内的元素，可以指定替换下标范围。

arr.fill(value, start, end)

参数	描述
value	必需。填充的固定值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

let a = [1, 2, 3,]
a.fill(1);
console.log(a); //[1, 1, 1]

let b = [1, 2, 3, 4, 5, 6]
b.fill(6, 2, 4)
console.log(b);  //[1, 2, 6, 6, 5, 6]
第2个位置(不是索引)开始(不包括第2个),到第4个位置结束(包括第4个)

4、批量复制   copyWithin()：
选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

array.copyWithin(target, start, end)

参数	描述
target	必需。复制到指定目标索引位置。就是开始被复制的索引位置
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))
 // [1,2,3,1,2] 从下标为3的元素开始被复制，复制数组，所以4, 5被替换成1, 2

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))
// [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3

const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))
// [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2(不包括改位置)，所以4被替换成2

5、Array.from()
通过拥有 length 属性的对象或可迭代的对象来返回一个数组

Array.from(object, mapFunction, thisValue)

参数	描述
object	必需，要转换为数组的对象。
mapFunction	可选，数组中每个元素要调用的函数。
thisValue	可选，映射函数(mapFunction)中的 this 对象。

var arr = Array.from('foo');
console.log(arr)// ["f", "o", "o"]

var a = [1, 2, 3]或者var a = '123'
var arr = Array.from(a, x => x * 10);
console.log(arr)// [10, 20, 30]
6、Array.of()
用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(7);    // [7]
Array.of(1, 2, 3); // [1, 2, 3]

10、includes
判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false