JS常用的数组方法总结（一）

目录

 1.push、pop、shift和unshift

2.split和join

3.sort和reserve

4.slice和splice

 5.forEach和map

 6.fill和copyWithin

7.every、some和filter

8.concat

9.includes、find、findIndex、indexOf和lastIndexOf

10.keys、values和entries

---

 1.push、pop、shift和unshift

push()方法用于将一个或多个元素添加到数组末尾,返回数组的新长度。

const arr = [1,2,3,4,5];
let newLength = arr.push(6,7,8);
console.log(newLength);    //    8
console.log(arr);//    [1,2,3,4,5,6,7,8]

pop()方法用于取出数组最后一个元素并返回。

const arr = [1,2,3,4,5];
const item = arr.pop();
console.log(item);//    5
console,log(arr);//    [1,2,3,4]

shift()方法用于取出数组第一个元素并返回它。

const arr = [1,2,3,4,5];
const item = arr.shfit();
console.log(item);//    1
console.log(arr);//    [2,3,4,5]

unshift()方法用于将一个或多个元素添加到数组开头,返回数组的新长度。

const arr = [1,2,3,4,5];
const newLength = arr.unshift(0,1);
console.log(newLength);    //7
console.log(arr);    //[0,1,1,2,3,4,5]

2.split和join

split()方法用于将字符串按照指定分隔符分隔成子字符串数组。

const str = `Welcome to DMAXBlog!`;
const strArr1 = str.split(' ');
console.log(strArr1);    // ["Welcome", "to", "DMBlog!"]
const strArr2 = str.split('');
console.log(strArr2);//    ["W", "e", "l", "c", "o", "m", "e", " ", "t", "o", " ", "D", "M", "B", "l", "o", "g", "!"]
const strArr3 = str.split();
console.log(strArr3);//    ["Welcome to DMBlog!"]

join()方法用于将数组元素按照指定分隔符连接成字符串。

const arr = ["Welcome", "to", "DMBlog!"];
const arrStr1 = arr.join(' ');
console.log(arrStr1);//    Welcome to DMBlog!
cont arrStr2 = arr.join('');
console.log(arrStr2);//    WelcometoDMBlog!
const arrStr3 = arr.join();
console.log(arrStr3);//    Welcome,to,DMBlog!

3.sort和reserve

sort()方法默认会在数组的每一项上调用String()转型函数，然后比较字符串按照升序排列。

const arr = [1,2,4,8,16,32];
arr.sort();
console.log(arr);//    [1, 16, 2, 32, 4, 8]

可以给sort()方法提供一个比较函数，以此来排序。

const arr = [1,2,4,8,16,32];
arr.sort((a , b) => a - b);
console.log(arr)//    [1, 2, 4, 8, 16, 32]

reverse()方法用于将数组反向排列。

const arr =[1,2,4,8,16,32];
arr.reverse();
console.log(arr);//    [32, 16, 8, 4, 2, 1]

4.slice和splice

slice()用于创建一个包含原数组的一个或多个元素的新数组。参数为数组的索引

const arr = [1,2,3,4,5];
console.log(arr.slice(1,3));//    [2,3]    （不包含结束索引对应的元素）
console.log(arr.slice(1));//    [2,3,4,5]    （返回该索引对应的元素到数组末尾的元素）console.log(arr.slice());//    [1,2,3,4,5]    （返回全部元素    ）
console.log(arr.slice(-3,-1));//    [3,4] （同arr.slice(2,4)）

splice()方法能够删除、插入、更改原数组中的元素。

1、删除元素。参数为起始元素的索引和要删除元素的个数（可省略）
 

const arr = [1,2,3,4,5];
console.log(arr.splice(1,3));//    [2,3,4]    （返回删除的元素）
console.log(arr);//    [1,5]
const arr = [1,2,3,4,5];
console.log(arr.splice(1));//    [2,3,4,5]console.log(arr);//    [1]

2、插入和更改元素。除以上参数外，可追加向删除元素位置插入的元素

const arr = [1,2,3,4,5];
arr.splice(0, 1, 0);
console.log(arr);//    [0, 2, 3, 4, 5]
const arr = [1,2,3,4,5];
arr.splice(arr.length,0,6,7,8);
console.log(arr);//    [1,2,3,4,5,6,7,8]
const arr = [1,2,3,4,5];
arr.splice(0,3,7,8,9,10,11);
console.log(arr);//    [7,8,9,10,11,4,5]

 5.forEach和map

forEach()方法为数组每一个元素执行一个函数

const arr = [1,2,3,4,5];
arr.forEach((value,index,array) => {    
    console.log(`${value}是[${array}]中第${index+1}个元素`);
})
/*
1是[1,2,3,4,5]中第1个元素
2是[1,2,3,4,5]中第2个元素
3是[1,2,3,4,5]中第3个元素
4是[1,2,3,4,5]中第4个元素
5是[1,2,3,4,5]中第5个元素
*/

map()方法方法为数组每一个元素执行一个函数，并返回结果数组

const arr = [1,2,3,4,5];
console.log(arr.map((value,index,array) => 2*value));//    [ 2, 4, 6, 8, 10 ]
console.log(arr);//    [ 1, 2, 3, 4, 5 ]

 6.fill和copyWithin

fill()方法用于填充数组元素

const arr = [1,2,3,4,5];
arr.fill(0);
console.log(arr);//    [0, 0, 0, 0, 0]//填充到指定位置const.fill("dm",0,3);
console.log(arr);//    [ 'dm', 'dm', 'dm', 0, 0 ]

copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

const arr = [1,2,3,4,5];
console.log(arr.copyWithin(3,0,2));//    [1,2,3,1,2]

7.every、some和filter

every()方法用于递归地检测元素，要所有元素操作都要返回真结果才为true

const arr = [1,2,3,4,5];
console.log(arr.every((value,index,array) => value > 4));
//    false
console.log(arr.every((value,index,array) => value < 6));
//    true

some()方法用于递归地检测元素，如果有一个元素操作为真，表达式结果就为true

const arr = [1,2,3,4,5];
console.log(arr.some((value,index,array) => value > 4));
//    true
console.log(arr.some((value,index,array) => value < 1));
// false

filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const arr = [1,2,3,4,5];
console.log(arr.filter((value,index,array) => value % 2 === 0));
//    [2,4]

8.concat

concat()方法用于连接两个或多个数组

const arr = [1,2,3,4,5];
const newArr = [6,7,8];
console.log(arr.concat(newArr));
//    [1,2,3,4,5,6,7,8]
//不展开元素
newArr[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(newArr));
//    [1,2,3,4,5,[6,7,8]]

9.includes、find、findIndex、indexOf和lastIndexOf

includes()方法从索引开始搜索如果找到则返回true

const arr = [1,2,3,4,5];
console.log(arr.includes(1));
//    true
console.log(arr.includes(1,1));
// flase

find()方法用于将第一次找到的值返回，否则返回undefined

const arr = [1,2,3,4,5]
console.log(arr.find(element => element > 2));
//    3
console.log(arr.find(element => element < 1));
//    undefined

findIndex()方法用于将第一次找到的值的索引返回，否则返回-1

const arr = [1,2,3,4,5]
console.log(arr.findIndex(element => element > 2));
//    2
console.log(arr.findIndex(element => element < 1));
//    -1

indexOf()方法从索引开始搜索，如果找到则返回索引，否则返回-1

const arr = [1,2,3,4,5]
console.log(arr.indexOf(1));
//    0
console.log(arr.indexOf(1,1));
//    -1

lastIndexOf()方法从后向前搜索，如果找到则返回索引，否则返回-1

const arr = [1,2,3,4,5]console.log(arr.lastIndexOf(5));
//    4
console.log(arr.lastIndexOf(5,3));
//    -1

10.keys、values和entries

keys()方法通过迭代对象获取索引

const arr = [1,2,3,4,5]
for (const key of arr.keys()){ 
   console.log(key)
}
// 0,1,2,3,4

values()方法通过迭代对象获取值

const arr = [1,2,3,4,5]
for (const value of arr.values()) {
    console.log(value)
}// 1,2,3,4,5

entries()方法通过迭代获取数组所有键值对

const arr = [1,2,3,4,5]
for (const [key,value] of arr.entries()) { 
   console.log([key,value])
}
// [ 0, 1 ],[ 1, 2 ],[ 2, 3 ],[ 3, 4 ],[ 4, 5 ]