js 数组处理的常用方法
添加元素类:
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