【js】数组方法汇总

怼怼

一、创建数组

  1. 字面量
  2. new Array()
  3. Array.of()
  4. Array.from()

1.字面量

let arr1 = [1,2,3] 
  • 隐式创建

2.new Array()

let arr = new Array(1); //[undefined]
arr[1] = 5
console.log(arr); //[undefined,5]
let arr2 = new Array(1,2) //[1,2]
  • Array()只有一个数字时,表示数组的长度
  • new Array()不能创建只有一个数字的数组

3.Array.of()

let arr = Array.of(1) //[1]
let arr2 = Array.of({ a: 1 }, 2, ["f"])//[{ a: 1 }, 2, ["f"]]
  • 相较于new Array(),Array.of()能创建一个单一元素的数组

4.Array.from()

参数:伪数组或可迭代对象 mapFn thisAry

let a = { 0: "a", 2: 1, length: 3 }
let arr1 = Array.from(a) //["a", undefined, 1]
let b = "123"
let arr2 = Array.from(b)//["1", "2", "3"]
  • 可以将伪数组对象以及可迭代对象转换成数组
  • 下标为数字且有length属性的对象
  • Set、Map

二、判断数组

  1. instanceof
  2. arr.__proto__
  3. constructor
  4. toString
  5. isArray
let arr = [1, 2, 3]
//判断
arr instanceof Array //true
arr.__proto__ === Array.prototype//true
arr.constructor === Array //true
Object.prototype.toString.call(arr) == "[object Array]"//true
Array.isArray(arr) //true
//推荐方法
({}).toSring.call(arr) === "[object Array]"

三、数组方法

  1. 改变原数组
  2. 不改变原数组

1.改变原数组

push() pop() unshift() shift()

let arr = [1, 2, 3]
let a = arr.push([4], [5]) //5
console.log(arr); //[1,2,3,[4],[5]]
let b = arr.pop() //[5]
console.log(arr) //[1,2,3,[4]]
  • push与pop是在尾部操作,unshift与shift是在头部操作
  • push操作返回的是操作后的长度,pop返回弹出的元素
  • unshift的单个插入和统一插入的顺序不同

sort() reverse()

let arr = ["coser", "Alice", "bob", 5, 66]
let a = arr.sort() //[5, 66, "Alice", "bob", "coser"]
console.log(arr);//[5, 66, "Alice", "bob", "coser"]
  • sort对数组进行排序,默认按首字母排序
  • sort返回排序好的数组
let arr = [37, 12, 1, 5, 66]
let a = arr.sort((n1, n2) => n1 - n2) //[1, 5, 12, 37, 66]
console.log(arr);//[1, 5, 12, 37, 66]
  • sort中加比较函数可以整体排序
  • reverse将数组反序,并返回反序的数组

splice(start,n,param1,param2...)

let arr = [1, 2, 3]
let a = arr.splice(0, 2, 'a') //[1,2]
console.log(arr); //["a",3]
  • 有后面的参数时为替换,返回被删除的元素数组
  • 无参数时删除一段元素
  • start可以为负数

copyWithin() fill()

参数:target start end

let arr = [1, 2, 3, 4, 5]
let a = arr.copyWithin(1, 2, 4)//[1,3,4,4,5]
console.log(arr);[1,3,4,4,5]
  • 第一位为起始粘贴的位置,后两位为对原数组的复制
  • 将复制的值从target开始进行粘贴
let arr = [1, 2, 3, 4, 5]
let a = arr.fill(1, 2, 4) //[1,2,1,1,5]
console.log(arr);//[1,2,1,1,5]
  • 将第一个参数替换选中的范围
  • 类似于splice,功能单一

forEach(callback)

callback参数:value index arr

let arr = [1, 2, 3]
arr.forEach((value) => {
    value = value + 1;
}) //undefined
console.log(arr);//[1,2,3]
  • 修改数组内的原始类型原数组不发生改变
  • forEach无返回值
let arr = [1, 2, 3]
arr.forEach((value, index, arr) => {
    arr[index] += 1
})
console.log(arr);//[2, 3, 4]
let arr = [
    {
        name: "张三",
        age: 17
    },
    {
        name: "李四",
        age: 20
    }]
arr.forEach((value, index, arr) => {
    if (value.age < 18) {
        arr.splice(index, 1)
    }
})
console.log(arr); //[{name:"李四",age:20}]
  • 修改引用类型会修改原数组

2.不改变原数组

reduce(callback,initialValue) reduceRight()

callback:Accumulator CurrentValue CurrentIndex SourceArray
initialValue:作为callback的第一个参数值,没有则将数组第一项作为初始值

let arr = [1, 2, 2, 3, 3, 3, 5, 7, 9, 2]
let a = arr.reduce((acc, val) => {
    if (val in acc) acc[val]++
    else acc[val] = 1
    return acc
}, {})
console.log(a);
//{1: 1, 2: 3, 3: 3, 5: 1, 7: 1, 9: 1}
  • 对数组进行计数
  • 累加值的特性,可以对数组进行很多处理,去重,扁平化等等
  • reduceRight的操作与reduce相同,它是从右开始遍历操作

join()

let arr = [1, 2, 3]
arr.join()//"1,2,3" 默认以 ","为分隔进行拼接
arr.join("")//"123"
arr.join("-")//"1-2-3"
console.log(arr);//[1, 2, 3]
  • join将数组以某字符为分隔,将数组的每个元素拼接成一个字符串,并返回该字符串
  • split转数组是以原字符串的字符为分隔,转成数组后该字符串消失,join会添加

concat()

let arr = [1, 2, 3]
let a = arr.concat([4, [5]], [6])//[1,2,3,4,[5],6]
console.log(arr);//[1,2,3]
  • 相对于push,concat会打平一层数组

slice(start,end)

let arr = [1, 2, 3]
let a = arr.slice(-2, -1)//[2]
console.log(arr);//[1,2,3]
  • 与字符串的操作类似

indexOf() lastIndexOf() includes()

let arr = [1, 2, 3]
let a = arr.indexOf(3, 2) //2
  • 与字符串类似,第二个参数为起始位置
  • 成功返回索引,否则返回-1
  • lastIndexOf()反向查找
  • includes与字符串类似,存在返回true

find(callback) findIndex(callback)

let arr = [1, 2, 3, "5", 89]
let a = arr.find((value, index, arr) => {
    return value > 3
}) // "5"
console.log(arr);//[1, 2, 3, "5", 89]
  • find返回第一个符合条件的,findIndex返回第一个符合条件的索引

filter(callback) map(callback)

let arr = [1, 2, 3, "5", 89]
let a = arr.filter((value, index, arr) => {
    return value > 3
}) //["5",89]
console.log(arr);//[1, 2, 3, "5", 89]
  • 过滤出所有符合条件的元素,返回一个新数组
let arr = [1, 2, 3, "5", 89]
let a = arr.map((value, index, arr) => {
    return value = 1 + value
})//[2, 3, 4, "15", 90]
console.log(arr);//[1, 2, 3, "5", 89]
  • 相较于forEach,map不改变原数组,有自己的返回值

every(callback) some(callback)

let arr = [1, 2, 3, "5", 89]
let a = arr.every((value, index, arr) => {
    return arr[index] > 0
})//true
  • every遍历数组里的元素,全部满足条件则返回true
  • some只要有一个满足条件则返回true

keys() values() entries()

let arr = [1, 2, 3, "5", 89]
let a = arr.keys()
for (let key of a) {
    console.log(key);
}//0 1 2 3 4
  • 获取全部索引
let arr = [1, 2, 3, "5", 89]
let a = arr.values()
for (let key of a) {
    console.log(key);
} //1 2 3 "5" 89
  • 获取全部值
let arr = [1, 2, 3, "5", 89]
let a = arr.entries()
for (let key of a) {
    console.log(key);
}//[0, 1] [1, 2] [2, 3] [3, "5"] [4, 89]
  • 获取全部键值对

flat(depth) flatMap(callback)

let arr = [1, 2, 3, [4, [5]]]
let a = arr.flat(3)
console.log(arr);
let arr1 = ["it's Sunny in", "", "California"]
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
  • flatMap相较于map会执行一次flat(1),将数组打平一个深度
阅读 306
37 声望
1 粉丝
0 条评论
你知道吗?

37 声望
1 粉丝
文章目录
宣传栏