Javascript 数组核心方法

数组迭代方法

forEach ------修改数组元素

仅对元素值操作，不改变原数组；通过数组索引操作，改变原数组

var arr = [1,2,3,4,5];
arr.forEach((value,index,array)=>{
    value += 1
})
console.log(arr)//[1, 2, 3, 4, 5]
arr.forEach((value,index,array)=>{
    array[index] = value+1
})
console.log(arr)//[2, 3, 4, 5, 6]

map ----------返回一个新的数组元素，需要return值来改变数组

var arr2 = [1,2,3,4,5];
var data = arr2.map(x=>x*x);//const double = ele => ele * 2   console.log(arr.map(double));
console.log(data)

for of -------遍历数组中的值进行求和等操作

var arr3 = [1,2,3,4,5]; 
var sum = 0; 
for(let item of arr3){
    sum = sum + item;
} 
console.log(sum)

filter -------过滤数组中的元素返回一个新的数组元素

var arr6 = [1,2,3,4,5,6,7,8];
var data = arr6.filter(x=>x<5);//断言函数为false的会被过滤掉
console.log(data)

//对象数组  json格式  保留num为2的
var newarr = [{ num: 1, val: 'ceshi', flag: 'aa' },
 { num: 2, val: 'ceshi2', flag: 'aa2' }]
console.log(newarr.filter(item => item.num===2 ))

//数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index) 
console.log(arr2); 
//[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

every ------不改变原数组存在不满足的即返回false

some -----不改变原数组存在满足的即返回true

var computers = [
  { name: "mac", ram: 32 },
  { name: "mac", ram: 8 },
  { name: "IBM", ram: 16 },
  { name: "IBM", ram: 64 }
];
var everyComputerCan;
var someComputerCan;
//判断每一个元素的ram是否都大于16
var everyBoolan = computers.every((item) =>{return item.ram > 16});
//判断元素的ram是否存在大于16
var someBoolean = computers.some((item)=> {return item.ram > 16;});
console.log(everyBoolan); //结果：false
console.log(someBoolean);//结果: true

修改数组元素的方法，改变原数组

push pop unshift shift-----添加删除数组中的首尾数据返回一个新的数组元素

var array = [1,2,3,4,5];
array.push(6);
console.log(array)//[1, 2, 3, 4, 5, 6]
array.pop()
console.log(array)//[1, 2, 3, 4, 5]
array.unshift(-3,-2,-1);
console.log(array)//[-3, -2, -1, 1, 2, 3, 4, 5]
array.shift()
console.log(array)//[-2, -1, 1, 2, 3, 4, 5]

splice() -------在任意位置增加，删除或替换元素

1.删除传递2个参数比如 splice(0,2) 删除第一个元素的位置和删除元素的数量

2.插入传递3个参数，也可以4个参数，5个参数... 比如splice(2,0,'red','green') 开始位置，要删除的元素数量，要插入的元素数量（可以多个）

3.替换传入3个参数，也可以4个参数，5个参数... 比如splice(2,1,'red','green') 开始位置，要删除的元素数量，要插入的元素数量（可以多个）

var arr5 = [1,2,3,4,5,6,7,8];
arr5.splice(5,3,100,101,102)
console.log(arr5)

var arr6 = [1,2,3,4,5,6,7,8];
var data = arr6.filter(x=>x<5);//断言函数为false的会被过滤掉
console.log(data)

var arr7 = [1,2,3,4,5,6,7,8];
var data = arr7.reduce((a,b)=>a+b)
console.log(data)

数组排序

sort -------对数值数组，字符串数组进行排序

var names = ['Ana','John','ana','john'];
var numbers = [5,3,1,7,9,12,14,8,6];
console.log(numbers.sort());//默认当成字符串进行排序
console.log(numbers.sort((a,b)=>a-b));
console.log(names.sort());
console.log(names.sort((a,b)=>a.localeCompare(b)));

reverse -------反序输出数组

var numbers = [5,3,1,7,9,12,14,8,6];
console.log(numbers.reverse());

搜索数组中的值

includes -------ES2017 数组方法数组存在值的时候返回false，不存在值的时候返回true

var numbers = [5,3,1,7,9,12,14,8,6];
console.log(numbers.includes(14)) 
console.log(numbers.includes(122))

indexOf -------返回与参数匹配的第一个元素的索引

var numbers = [5,3,1,7,9,12,14,8,6]; 
console.log(numbers.indexOf(1))//2

lastIndexOf ---------返回与参数匹配的最后一个元素的索引

var numbers = [5,3,1,7,9,12,1,14,8,6]; 
console.log(numbers.lastIndexOf(1))//6

find ---------ES2015 找到满足条件的值会输出第一个符合条件的值

var numbers = [5,3,1,7,9,12,1,14,8,6]; 
console.log(numbers.find(x=>x>6))

findIndex------返回传入一个测试条件（函数）符合条件的数组第一个元素位置

var arr = [1,4,6,8]
arr.findIndex((currentValue, index, arr)=>{
  return currentValue>6
})
//3

at() 方法进行索引 ES2022

通过负值搜索数组末尾的值

let arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.at(-1))//9

数组方法求和-reduce()方法

reduce -------迭代数组的所有项，从第一项开始遍历到最后一项

var arr7 = [1,2,3,4,5,6,7,8]; 
var data = arr7.reduce((a,b)=>a+b)
// 如果没有指定初始值，a第一个值是1，后面是return 的值，b从第二个值开始遍历 
// 如果指定初始值，a第一个值是初始值，后面是return 的值，b从第一个值开始遍历 
console.log(data)

reduceRight------ 迭代数组的所有项，从最后一项开始遍历到第一项

var arr = [1,2,3,4,5,6,7,8]; 
var data = arr7.reduceRight((a,b)=>a+b) 
console.log(data)

数组的转换方法

toString --------数组转换为字符串,默认逗号分割

[1,2,3].toString() //'1,2,3'

join --------数组转换为字符串,自定义分割符

[1,2,3].join('|') //'1|2|3'

数组的迭代器方法

keys() values() entries() -----检索数组内容的3个方法

for(let [index,item] of text.entries()){
    if(index == text.length-1){
         showText = showText+item.specDetailName
    }else{
        showText = showText+item.specDetailName+'/'
    }
}

数组扁平化方法（ES2019）

flat() 函数仅采用一个参数，该参数是可选的，唯一的参数是 depth 参数默认depth为1

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(2);
var array3 = array1.flat(4);
console.log(array2)
//[1, 2, 3, 4, 5, 6, Array(2), Array(1)]
console.log(array3)
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

JavaScript 数组方法精讲