js 数组处理的常用方法

大前端

2022-12-20 · 2377

添加元素类:

push()方法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
[push详细讲解]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

// 打印 fruits 
["Banana","Orange","Apple","Mango","Kiwi"]

unshift() 方法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
[unshift详细讲解]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

// 打印 fruits 
["Lemon","Pineapple","Banana","Orange","Apple","Mango"]

删除元素类:

pop() 方法
pop() 方法可删除数组的最后一个元素并返回删除的元素。
[pop方法详解]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

// 打印 fruits 
{"Banana","Orange","Apple"]

shift() 方法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
[shift方法详解]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

// 打印 fruits 
["Orange", "Apple", "Mango"]

插入、删除、替换数组元素

splice() 方法
splice() 方法用于添加或删除数组中的元素。会改变原数组
[splice方法详解]

语法 splice( index, howmany, item1, …, itemX )
index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX：可选。要添加到数组的新元素

//数组截取从索引0到1的元素，并改变原数组
var arr = [1,2,3,4,5]
arr.splice(0,1)  // [1]
console.log(arr) // [2, 3, 4, 5]

// 高级用法 插入元素从第二位插入并删除0个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
// 打印 fruits 
["Banana","Orange","Lemon","Kiwi","Apple","Mango"]

slice() 方法
slice() 截取数组 arr.slice(start,end) 从start到end 不改变原数组
[slice方法详解]

//数组截取从索引0到1的元素，不改变原数组
var arr = [1,2,3,4,5]
arr.splice(0,1)  // [1]
console.log(arr) // [1, 2, 3, 4, 5]

排序类：

reverse() 方法
reverse() 方法用于颠倒数组中元素的顺序。会改变原数组
[reverse方法详解]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

// 打印 fruits 
["Mango","Apple","Orange","Banana"]

sort() 方法
sort() 方法对数组进行排序，手动创建规则排序。 会改变原数组
[sort方法详解]

var arr = [9, 1, 2, 4]
// 默认排序
console.log(arr.sort()) //[1, 2, 4, 9]
// 传入方法创建自定义规则排序
console.log(arr.sort((a,b)=>(b-a))) //[9, 4, 2, 1]

数组合并类：

concat() 方法
concat() 方法用于连接两个或多个数组。
[concat方法详解]

// 合并三个数组的值
var arr1 = ["Cecilie", "Lone"];
var arr2= ["Emil", "Tobias", "Linus"];
var arr3= ["Robin"];
var children = arr1 .concat(arr2,arr3);

// 打印 children
["Cecilie","Lone","Emil","Tobias","Linus","Robin"]

es6可以用展开符号(...)进行合并：

var arr1 = [1,2,3]
var arr2 = [4,5,6]
console.log([...arr1,...arr2])
// [1,2,3,4,5,6]

数组遍历类：

forEach() 方法
forEach() 方法遍历整个数组，与for同理 不改变原数组
[forEach方法详解]

var arr = [1,2,3,4,5]
arr.forEach((item,index)=>{
    console.log(item,index)
    // 1,0
    // 2,1
    // ...
})

注意：forEach方法无法用return/break跳出循环。
some() 方法
some() 方法用于检测数组中的元素是否满足指定条件 不会改变原数组
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
[some方法详解]

arr.some(item=>{
    console.log(item)
    if(item == 2) return true
})
//打印
// 1
// 2
// 返回 true 遍历到2的时候跳出循环

可以做一些数组元素寻找的处理
要求：遍历数组中是否存在name是静香的元素

var arr = [
    {
        name:'小明'
    },
    {
        name:'静香'
    },
    {
        name:'大雄'
    }
]
var result = arr.some(item=>item.name=='静香')
console.log(result) // true

every() 方法
every() 方法对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
正好与some相反，some是只有一项返回true则返回true。every是全部都返回true才会返回true
[every方法详解]

// 函数返回false时
var arr = [1,2,3,4,5]
arr.every(item=>{
    console.log(item)
    return false
})
// 打印
// 1
// return false
// 函数返回true时
var arr = [1,2,3,4,5]
arr.every(item=>{
    console.log(item)
    return true
})
// 打印
// 1
// 2
// ...
// 5
// return true

可以做一些数组排除某元素的处理
要求：数组中name不存在胖虎就返回真

var arr = [
    {
        name:'小明'
    },
    {
        name:'静香'
    },
    {
        name:'大雄'
    }
]
var result = arr.every(item=>item.name!='胖虎')
console.log(result) // true

map() 方法
map()方法处理数组中的值并返回一个新数组。 不改变原数组
[map方法详解]

var arr = [
    {
        name:'小明'
    },
    {
        name:'静香'
    },
    {
        name:'大雄'
    }
]
arr.map(item=>item.name)
// ['小明', '静香', '大雄']

filter() 方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 不改变原数组
平时也多用于查询某条数据是否存在
filter方法详解

var ages = [32, 33, 16, 40];
var result = ages.filter((item)=> item > 18)
// [ 32, 33, 40 ]

keys()、values()、entries()
以上方法都返回一个迭代器 [object Array Iterator]

keys 对键名进行遍历
values 对键值进行遍历
entries 遍历键值对

const arr1 = [1,2,3,4,5,7]
for(let i of arr1.keys()){
    console.log(i)  //0,1,2,3,4,5
}
for(let i of arr1.values()){
    console.log(i)  //1,2,3,4,5,7
}
for(let i of arr1.entries()){
    console.log(i)
}
// [ 0, 1 ]
// [ 1, 2 ]
// [ 2, 3 ]
// [ 3, 4 ]
// [ 4, 5 ]
// [ 5, 7 ]

数组搜索类：

indexOf() 、 lastIndexOf()
indexOf() 方法可返回数组中某个指定的元素位置。
[indexOf方法详解]

语法：array.indexOf(item,start)
start 可选，默认值为0，如果在数组中没找到指定元素则返回 -1。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log(a) // 2

lastIndexOf() 方法查找字符串最后出现的位置
[lastIndexOf方法详解]

语法：array.lastIndexOf(item,start)
start 可选，默认值为0，如果在数组中没找到指定元素则返回 -1。

var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob");
console.log(n)  // 28

find() 方法
find（function(currentValue, index, arr),thisValue) 方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined
[find方法详解]

语法
array.find(function(currentValue, index, arr),thisValue)
参数
callback：必须。为数组中每个元素执行的函数，该函数接受三个参数：
currentValue：必须。数组中正在处理的当前元素。
index：可选。当前元素的索引值。
arr：可选。当前元素所在的数组对象。
thisValue：可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num)  //輸出的結果是2

提取第一个id为1的对象

var arr = [{
    id: 1,
    name: '张一',
    age: 25,
    class: '一班'
}, {
    id: 1,
    name: '张二',
    age: 25,
    class: '二班'
}, {
    id: 2,
    name: '张三',
    age: 25,
    class: '三班'
}]
let obj = arr.find(item => item.id == 1)
console.log(obj); 
// 结果：{id: 1, name: '张一', age: 25, class: '一班'}

findIndex() 方法
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
[findIndex方法详解]

语法
array.findIndex(function(currentValue, index, arr), thisValue)
参数
currentValue 必需。当前元素
index 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
thisValue 可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

// 获取数组中年龄大于等于 18 的第一个元素索引位置
var ages = [3, 10, 18, 20];
ages.findIndex(age=>age >= 18);
// return 2

includes() 方法
includes() 方法查询数组中是否存在某值
[includes方法详解]

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

数组类型转换类：

join() 方法
join() 方法用于把数组中的所有元素转换一个字符串。（元素是通过指定的分隔符进行分隔的。）
[join方法详解]

语法：array.join(separator)
separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
var arr = fruits.join('-')
// 打印 energy
Banana,Orange,Apple,Mango
// 打印 arr
Banana-Orange-Apple-Mango

toString() 方法
toString() 方法可把数组转换为字符串，并返回结果。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var new_fruits = fruits.toString();
// 打印 new_fruits
Banana,Orange,Apple,Mango