JavaScript不熟悉的数组方法

JavaScript不熟悉的数组方法

1.join,toString和concat

1.1 join:数组的每个元素以指定的字符连接形成新字符串返回（连接成字符串）

    let arr = [1,2,3,4,5,6]
    let result1 = arr.join();
    console.log(result1);
    let result2 = arr.join("")
    console.log(result2)
    let result3 = arr.join("*")
    console.log(result3)
//1,2,3,4,5,6
//123456
//1*2*3*4*5*6

1.2 toString

把数组转换为数组值（逗号分隔）的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
//Banana,Orange,Apple,Mango 

1.3 concat:合并数组或元素，返回新的数组,原数组不会改变（英文翻译为合并）

let arr=[1,2,3,4,5]
let newArr=arr.concat([6,7,8],9,10);
console.log(newArr,arr);
//1,2,3,4,5,6,7,8,9,10
//1,2,3,4,5

//可用于复制数组
let copyArr=arr.concat()

2.delete,splice,slice

2.1 delete

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

2.2 splice

只有一个值时，从那个值的头删到尾

let arr=[1,2,3,4,5]；
let num1=arr.splice(1)
console.log(num1;arr)//num=[2,3,4,5];arr=[1];

有两个值时，第一个值为删除的位置，第二个值为删除的个数(可以用来删除指定位置元素

let arr=[1,2,3,4,5]
let num1=arr.splice(2,1)
console.log(num1,arr);
// 3     1,2,4,5

有三个或者多个值时，第一个值为插入元素的位置，第二个值为替换的个数，后面的值都为插入的新元素

let arr=[1,2,3,4,5]；
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8
 
//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2;arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

2.3 slice

slice(开始位置，结束位置)；第二个参数不写默认到尾部,只能从前往后截取；返回的值为截取到的内容形成的新数组;

let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
//concat()也可用于复制数组
let arr=[1,2,3,4,5]；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr)；//newArr=[2,3];arr=[1,2,3,4,5];

3 every和some

3.1 every

检测是否都符合指定条件

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//false

3.2 some

主要有满足条件的返回true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 

console.log( arr.some( function( item, index, array ){ 
    console.log( 'item=' + item + ',index='+index+',array='+array ); 
    return item > 3; 
})); 

console.log( arr.every( function( item, index, array ){ 
    console.log( 'item=' + item + ',index='+index+',array='+array ); 
    return item > 3; 
}));!

4 sort 和 reduce

4.1 sort

sort()将数组进行排序(升序),返回新数组，原数组也会改变;

let arr=[2,3,5,1,4];
let newArr=arr.sort();
console.log(newArr,arr)；//newArr=[1,2,3,4,5]; arr r=[1,2,3,4,5]

4.2 reduce

arr.reduce(function(prev,cur,index,arr){
...
}, init);

prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
cur 必需。表示当前正在处理的数组元素；
index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
arr 可选。表示原数组；
init 可选。表示初始值。

没有设置函数的初始迭代值

const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
    console.log(prev,cur,index);
    return prev + cur;
});
console.log('arr:',arr,'sum:',sum)

运行结果：

分析：在这里reduce的作用就是对这个数组进行求和，迭代了4次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值。

设置函数的初始迭代值

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
    console.log(prev,cur,index);
    return prev + cur;
},5); 
console.log('arr:',arr,'sum:',sum);
1
2
3
4
5
6

运行结果：
分析：这里我们添加了一个初始的迭代值，也就是让prev从5开始计算(以5为初始值求和)，可以看到，这里迭代了5次，结果也加上了初始值。同时，这里使用箭头函数来代替完整的函数。 运行结果相同。

参考文章：https://blog.csdn.net/qq_38970408/article/details/121018660