数组常用方法
1.添加(push与unshift)
1-1:push()
- 向数组末尾添加一个或多个元素
- 返回新数组的长度
let arr=[1,2,3]
arr.push(4,5)
console.log(arr)
打印出来的结果为:(5) [1, 2, 3, 4, 5]
1-2:unshift()
- 向数组的开头添加一个或多个元素
- 返回新数组的长度
let arr=[1,2,3]
arr.unshift(4,5)
console.log(arr)
打印出来的结果为:(5) [4, 5, 1, 2, 3]
2.删除(pop与shift)
2-1:pop()
- 删除数组最后一个元素,如果数组为空,则不改变数组,返回undefined
- 返回被删除的元素
let arr=[1,2,3,4,5]
arr.pop()
console.log(arr)
打印结果(4) [1, 2, 3, 4]
2-2:shift()
- 把数组的第一个元素删除,若空数组,不进行任何操作,返回undefined
- 返回第一个元素的值
let arr=[1,2,3,4,5]
arr.shift()
console.log(arr)
打印结果(4) [ 2, 3, 4,5]
3.从数组中连续删除、插入数据:splice()
- splice(1,2,3),1:起始下标,2:连续删除多少项(为0则不删除),
3:插入的数据(为0则不插入) - 返回被删除的元素
let arr=[1,2,3,4,5]
arr.splice(1,1,"2")
console.log(arr)
打印结果(5) [1, "2", 3, 4, 5]
let arr=[1,2,3,4,5]
arr.splice(1,1)
console.log(arr)
打印结果(4) [1, 3, 4, 5]
4.数组串联:join()
- 把数组中所有元素放入一个字符串
- 返回字符串
let arr=[1,2,3,4,5]
console.log(arr.join("+"))
打印结果1+2+3+4+5
5.数组排序:sort()
- 对数组元素进行排序
默认按照升序排序,最小的在前面,会调用String()转型函数,然后比较字符串来决定顺序。 - 返回该数组
let arr=["Mike","Doinb","Uzi","Mary","Faker","ClearLove"]
console.log(arr.sort())
打印结果(6) ["ClearLove", "Doinb", "Faker", "Mary", "Mike", "Uzi"]
let arr=[1, 2, 3, 4, 5, 11]
console.log(arr.sort())
打印结果(5) [1,11, 2, 3, 4, 5]
一开始数组执行的结果是正确的,但sort会按照数值的字符串进行排序,因此即使11大于5,但是字符串‘11’在’5’的前面,所以11会排在5的前面。
为此sort接受一个比较函数,用于判断哪个值应该排在前面,比较函数接受连给参数。
如果第一个参数排在第二个参数前面就返回负值(从小到大排序)。
如果两个参数相等,就返回0。
如果第一个参数应该排在第二个参数后面就返回正值(从大到小排序)。
下面是一个根据总成绩排序的列子:
let array = [
{ name: "jack", english: 60, math: 66, score: 126 },
{ name: "mike", english: 90, math: 76, score: 166 },
{ name: "mary", english: 30, math: 86, score: 116 }
]
array.sort((left, right) => {
let lef = left.math + left.english
let rig = right.math + right.english
return rig - lef
})
console.log(array)
[{name: 'mike', english: 90, math: 76, score: 166},
{name: 'jack', english: 60, math: 66, score: 126},
{name: 'mary', english: 30, math: 86, score: 116}]
6.数组颠倒:reverse()
- 颠倒数组中元素的顺序
- 返回该数组
let arr=["Mike","Doinb","Uzi","Mary","Faker","ClearLove"]
console.log(arr.sort().reverse())
打印结果(6) ["Uzi", "Mike", "Mary", "Faker", "Doinb", "ClearLove"]
7.数组抽取:slice()
- slice(1,2),1:起始下标,2:结束位置(若为0则返回下标后所有元素)
- 从已有的数组中返回选定的元素
- 返回一个新数组
let arr=[1,2,3,4,5]
console.log(arr.slice(2))
打印结果(3) [3, 4, 5]
let arr=[1,2,3,4,5]
console.log(arr.slice(2,4))
打印结果(2) [3, 4]
8.数组合并:concat()
- 连接两个或多个数组
- 返回被连接数组的一个副本
let arr1=["RNG","EDG"]
let arr2=["Uzi","ClearLove"]
let arr3=["TOP","SKT"]
console.log(arr1.concat(arr2,arr3))
打印结果(6) ["RNG", "EDG", "Uzi", "ClearLove", "TOP", "SKT"]
9.数组转为字符串:toString()
- 把数组转为字符串
- 返回数组的字符串形式
let arr=[1,2,3,4,5]
console.log(arr.toString())
打印结果为1,2,3,4,5
9.new Array()
- 实例化一个数组,并且填充空值
let arr= new Array(5)
console.log(arr)
打印结果为 [空属性 × 5]
arr.length = 5
ES5中数组常用方法
1.forEach(遍历)
从头至尾遍历数组,为每个元素调用指定的函数。
forEach有三个参数(数组元素,索引,数组本身)。
const data = [1, 2, 3, 4, 5]; //要求和的数组
let sum = 0; //初始为0
data.forEach( value => sum+=value) //将每个值累加到sum上
console.log(sum) //=>15
data.forEach((v,i,a)=> a[i]=v+1)
console.log(data) //=>[2,3,4,5,6]
注:forEach无法在所有元素传递给调用函数之前终止遍历(无法使用break),如果要使用就使用try。
返回值:无。
2.map(映射)
map()方法将调用的数组每个元素传递给指定的函数,并返回一个数组。
let a=[1,2,3]
let b=a.map(x) return x*x )
console.log(b) //=>[1,4,9]
/=============================/
let a=[1,2,3]
let b=a.map(i=> return i )
console.log(b) //=>[1,2,3]
注:map返回的是新数组,不修改调用的数组。如果是稀疏数组,返回的也是相同稀疏数组。
返回值:有,新的数组。
3.filtter(过滤)
filtter()遍历数组,过滤出来符合条件的元素,放到一个新数组里面,如果没有就返回空。
三个参数:当前元素、当前索引、原数组。
let a=[1,2,3,4,5]
let b=a.filter(x=> return x<3 )
console.log(b) //=>[1,2]
let c=a.filter(x=> return x>5 )
console.log(c) //=>[]
注:filter()会跳过稀疏数组中缺少的元素,返回的总书稠密的。
filter不会改变原数组,而是返回一个新数组。
返回值:有,符合条件的数组。
4.every(所有)和some(存在)
every()方法就像数学中的“所有”,针对所有符合条件的返回true否则返回false。
let a=[1,2,3,4,5]
let b=a.every(x=> return x<3)
console.log(b) //=>false
let c=a.every(x=> x<6)
console.log(c) //=>true
some()方法就像数学中的“存在”,但数组中至少存在一个元素符合判定条件则返回true,
否则false(一个都没有)。
let a=[1,2,3,4,5]
let b=a.some(x=> return x<3 )
console.log(b) //=>true
let c=a.some(x=> return x<1 )
console.log(c) //=>false
注:一旦every()和some()确定该返回什么值它们就会停止遍历数组。
every()在判定数组时,第一次返回false后就返回false,如果判定一直返回true,他将遍历整个数组。
some()相反,第一次返回true就返回true,如果判定为false就遍历整个数组。
按照数学惯例,在空数组上调用时,every()返回true,some()返回false。
返回值:true或者false。
5.reduce(组合)和reduceRight()
reduce()和reduceRight()方法使用指定的函数将数组元素进行组合,生成单个值。
四个参数:累积值(之前的计算结果或初始值)、当前元素、当前索引和原数组
let a=[1,2,3,4,5]
let b=a.reduce((sum,item,index,array)=>{
return sum + item
},0)
console.log(b) //=>15
如上例所示,打印一下第一个参数x,为: 0,1,3,6,10,
第二个y,为:1,2,3,4,5(当前元素)。
如果把0换成1又会发生什么呢?接下来请看:
let a=[1,2,3,4,5]
let b=a.reduce((x,y)=> {
return x+y
},1)
console.log(b) //=>16
结果变成了16,打印第一个参数sum为:1,2,4,7,11,第二个还是初始值。
那么得出结论:第一次调用函数时,第一个参数是初始值,它就是传递给reduce()的第二个参数。在接下来的调用中,这个值就是上一次化简函数的返回值。在上面例子中第一次调用时的参数分别为0和1。将两者相加并返回1,再次调用时参数是1和2,返回3,以此类推…最后返回15。
reduce() 方法收第二个参数,用于指定累加器的初始值。在本例中,我们将初始值设为 0。如果省略该参数,则默认将数组的第一个元素作为累加器的初始值。
除了计算数组元素的和之外,reduce() 方法还可以用于计算数组的最大值、最小值、平均值等聚合操作。
而reduceRight()的工作原理跟reduce()一样,不同的是他按照数组索引从右到左来处理。
注:reduce()和reduceRight()都能接收一个可选的参数,它指定了化简函数调用时this关键字的值。第二个参数没有,则表示为默认值(第一个元素)。
reduce方法不会改变原数组,而是返回一个最终的结果值。
返回值:有。
6.indexOf(搜索)和lastIndexOf()
indexOf()和lastIndexOf()搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1。
indexOf()从头至尾搜索,lastIndexOf()则相反。
let a=[1,2,3,4,5,4,3,2,1]
let b= a.indexOf(3)
let c= a.lastIndexOf(3)
console.log(b) //=>2
console.log(c) //=>6
注:indexOf()和lastIndexOf()不接受函数作为其参数。
不能检测NaN,X.indexOf(NaN)返回-1
返回值:第一个元素的索引。
是否会改变原数组
会改变:push(),pop(),shift(),unshift() ,splice(),sort(),reverse()。
不变:concat(),split(),slice(),filter(),reduce()。
ES6+数组方法
1. of (创建)
创建一个由任意数量的参数组成的数组
Array.of(1,2,3,4,5) //[1, 2, 3, 4, 5]
Array.of() //[]
2. from(转换)
将一个类似数组或可迭代对象转换为一个真正的数组
Array.from([1,2,3,4,5]) //[1, 2, 3, 4, 5]
Array.from([1,2,3,,5]) //[1, 2, 3, undefined, 5]
Array.from('ES6') //['E', 'S', '6']
3. fill(填充)
用静态值填充数组中的元素。
fill(0,1,2)
0:用来填充的值
1:被填充的起始索引
2(可选):被填充的结束索引,默认为数组末尾
let a =[1,2,3,4,5]
a.fill(0) //[0, 0, 0, 0, 0]
a.fill(0,2) //[1, 2, 0, 0, 0]
a.fill(0,1,2) //[1, 0, 3, 4, 5]
4. copyWithin(复制)
将一部分数组元素复制到数组中的另一个位置
copyWithin(0,1,2)
// 0:替换数据的位置,如果为负值表示倒数
// 1:从该位置开始读取,如果为负值表示从末尾开始计算
// 2(可选):到该位置结束,默认为数组长度
let a =[1,2,3,4,5]
a.copyWithin(0,1) //[2, 3, 4, 5, 5]
//表示从数组的2开始复制数组[2,3,4,5]到索引0的开始位置
a.copyWithin(0,1,2) // [2, 2, 3, 4, 5]
//表示从数组的22号位开始复制数组[2]到索引0的开始位置
a.copyWithin(1,-3,-2) // [1, 3, 3, 4, 5]
//-3相当于2号位,-2相当于3号位 复制[3]到索引1的的位置
5. find(查找第一个符合的值)
返回数组中满足函数的第一个元素的值,否则返回未定义。
let a =[1,2,3,4,5]
a.find(i=>{
i === 2; //2
i === 0; //undefined
})
5. findIndex(查找第一个符合的索引)
返回数组中满足给定测试函数的第一个元素的索引,否则返回-1。
let a =[6,7,8,7,6]
a.findIndex(i=>{
i === 7 ; //1
i === 0; //-1
})
6. includes(是否存在) es7
判断一个数组是否包含一个指定的值,如果包含则返回 true
includes(0,1)
0:包含的值
1:搜索的起始索引,默认为0
let a =[1,2,3,4,5]
a.includes(1) //true
a.includes(0) //false
a.includes(1,1) //false
//意思是找的[2,3,4,5]中是否包含1
可以检测NaN,X.indexOf(NaN)若存在则返回true
7. flat(降低数组层级) es10
通过将所有子数组平铺成一个新数组来降低嵌套数组的层级
flat() 默认只降低一级层级
flat(X) X代表降低的层数,默认为1
不管有多少层级,使用Infinity
关键字作为参数,都能转化为一维数组
let a = [1, 2, [3, 4, [5, 6]]]
a.flat() //[1, 2, 3, 4, [5, 6]]
a.flat(Infinity) //[1, 2, 3, 4, 5, 6]
8. flatMap(映射) es10
将一个数组映射为另一个数组,并将结果平铺成一个新数组
flatMap(0,1,2)
0:当前数组成员
1:当前数组成员索引
2:原数组
let a = [1, 2, 3,4, 5]
a.flatMap(i => {
return i * 2 //[2, 4, 6, 8, 10]
return [[i * 2]] //[[2], [4], [6], [8], [10]]
})
a.flatMap((v, i, Array) => {
console.log('%c ======>>>>>>>>', 'color:orange;', v, i, Array)
})
// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]
9. …(扩展运算符)
将数组转为参数序列
let a =[1, 2, 3, 4, 5]
...(a) //1 2 3 4 5
应用
复制数组
如果只是一层数组或者对象则是深拷贝
let a = [1,2,3]
let b = [...a] //[1,2,3]
b[0] = 3
console.log(a); //[1, 2, 3]
console.log(b); //[3, 2, 3]
如果数组或对象中的元素是引用类型的元素,则是浅拷贝
let a = {
name: "Macey",
country: "Argentina",
team: {
football: 'Barcelona'
},
}
let b = { ...a }
b.team.football = 'Paris Saint-Germain'
console.log(a.team.football); //Paris Saint-Germain
console.log(b.team.football); //Paris Saint-Germain
数组或对象中的元素是引用类型的元素,实现深拷贝
let a = {
name: "Macey",
country: "Argentina",
team: {
football: 'Barcelona'
},
}
let b = {
...a,
team: { ...a.team }
}
b.team.football = 'Paris Saint-Germain'
console.log(a.team.football); //Barcelona
console.log(b.team.football); //Paris Saint-Germain
合并数组
跟复制一样,如果只是一层数组或者对象则是深拷贝
let a = [1, 2, 3]
let b = [4, 5, 6]
a[0] = 9 //[9, 2, 3]
let c = [...a, ...b] //[1, 2, 3, 4, 5, 6]
如果数组或对象中的元素是引用类型的元素,则是浅拷贝
let a = {
name: "Macey",
country: "Argentina",
team: {
football: 'Barcelona'
},
}
let b = {
age: 35
}
let c = { ...a, ...b }
c.team.football = 'Paris Saint-Germain'
console.log(a.team.football); //Paris Saint-Germain
console.log(c.team.football); //Paris Saint-Germain
与解构赋值结合
通过 …rest来获取剩余的值。
let [first, ...rest] = [1, 2, 3, 4, 5]
console.log(first); //1
console.log(rest); //[2, 3, 4, 5]
如果将扩展运算符放在第一位,则会报错
将字符串转化为数组
[...'es6'] //['e', 's', '6']
10. at(负索引)
用于获取数组中指定索引的元素, 不仅可以用于数组也可以用于字符串
Array.at(index)
index表示要获取的元素的索引,该参数可以是负数,表示从数组末尾开始计算的位置。
该方法返回指定索引位置的元素,如果索引越界,则返回undefined。
const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(2)); // 'c'
console.log(arr.at(-1)); // 'e'
console.log(arr.at(5)); // undefined
该方法不会修改原始数组,而是返回一个新的值。