JS基础之Array

Aplee
68 阅读6分钟

一、数组的创建

  • 通过字面量创建

    let arr = [1,2,3,5]

  • 通过new Array()创建

    let arr = new Array()
arr[0] = 1
arr[1] = 2
let arr1 = new Array(1,2,3,5)

二、判断是否为数组

  • 通过Array.isArray()判断

    let arr = [1,2,3,5]
let obj = {}
console.log(Array.isArray(arr)) //true
console.log(Array.isArray(obj)) //false

  • 通过instanceof判断（利用原型判断）

    let arr = [1,2,3,5]
let obj = {}
console.log(arr instanceof Array) //true
console.log(obj instanceof Array) //false

  • 利用Object.prototype.toString.call()判断

    let arr = [1,2,3,5]
console.log(Object.prototype.toString.call(arr)) //[object Array]

三、数组（原型）的属性

length属性 数组的长度

let arr = [1,2,3,5]
console.log(arr.length) //4

四、数组（原型）的方法

数组添加元素：push()和unshift()

let arr = [1,2,3,5]
arr.push(35,78)//在数组末尾添加新元素，元素个数不限制，返回值为数组的长度。
arr.unshift(10,50)//在数组头部添加新元素，元素个数不限制，返回值为数组的长度。
console.log(arr);//[10, 50, 1, 2, 3, 35, 78]

数组删除元素：pop()、shift()和delete

let arr = [1,2,3,5]
arr.pop()//删除末尾元素，无参数，返回值为被删除的末尾元素
console.log(arr);//[ 1, 2, 3 ]
arr.shift()//删除头部元素，无参数，返回值为被删除的头部元素
console.log(arr);//[ 2, 3 ]
delete arr[1]//delete方法可以删除数组任意位置的元素，但是不会改变数组的长度，被删除的元素置为empty
console.log(arr);//[ 2, empty]

数组排序：sort()

let arr = [1, 5, 11, 50, 8, 12]
arr.sort()//如果没有参数，它会默认将数组元素转换为字符串，然后再进行排序，最后排序结果是按照字符串排序的结果。
//sort会改变原数组，一般不用其他参数接收。
console.log(arr);//[ 1, 11, 12, 5, 50, 8 ]
arr.sort((a, b) => a - b)//利用减号将数组元素转换为数值型，进行排序。
console.log(arr);//[ 1, 5, 8, 11, 12, 50 ]
arr.sort((a, b) => b - a)
console.log(arr);//[ 50, 12, 11, 8, 5, 1 ]

数组反转：reverse()

let arr = [1, 5, 11, 50, 8, 12]
arr.reverse()//reverse会改变原数组，一般不用其他参数接收。
console.log(arr);//[ 12, 8, 50, 11, 5, 1 ]

数组之间拼接：concat()

let arr = [1, 2, 3]
let arr1 = [3, 4, 5]
arr.concat(arr1)//concat方法里面可以包含一个或多个数组，最后必须有数组来接收新的拼接数组，否则不会改变原数组。
console.log(arr);//[ 1, 2, 3 ]
let arr2 = [7,8,5]
arr = arr.concat(arr1,arr2)
console.log(arr);//[ 1, 2, 3, 3, 4, 5, 7, 8, 5]

数组间元素拼接成字符串：join()

let arr = [1, 2, 3]
let s = arr.join('')//join接收一个拼接的格式字符串，返回最后拼接成功的字符串
console.log(s);//'123'

valueOf() toString()

  • valueOf()返回数组本身
  • toString()返回将数组元素转换为字符串
let arr = [1, 2, 3]
console.log(arr.valueOf());//[ 1, 2, 3 ]
console.log(arr.toString());//1,2,3

数组截取：slice(start,end?)

  • slice默认接收两个参数，第一个是截取的开始位置，第二个位置是结束位置，可选。
  • 如果slice参数只有一个，该参数为开始位置，截取到数组最后一个元素，相当于arr.slice(start,arr.length)
  • 如果接收两个参数，则为截取的起始位置。但不包含第二个参数索引的元素。
  • slice()不会改变原数组。
let arr = [4, 5, 5, 7, 154, 12, 4, 2, 54, 45]
let arr1 = arr.slice(2)
console.log(arr1);//[5, 7, 154, 12, 4, 2,  54, 45]
let arr2 = arr.slice(1,5)
console.log(arr2,arr);//[ 5, 5, 7, 154 ] [4, 5, 5,  7, 154,12, 4, 2, 54,  45]

数组删除指定位置元素：splice(start,count?,newArg?)

  • splice()第一个参数为数组删除的开始位置，第二个是从起始位置起要删除的元素个数。如果想从开始位置添加新元素，则可以在后面添加新元素。
  • splice()第一个起始位置参数是必须的，其余皆是可选的。若仅有一个起始位置参数，默认删除包含起始位置之后的所有元素。
  • splice()返回值为被删除的元素数组。
  • 会改变原数组。
let arr = [4, 5, 5, 7]
let arr1 = arr.splice(2)
console.log(arr1, arr);//[ 5, 7 ] [ 4, 5 ]
​
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8]
let arr3 = arr2.splice(0, 5)
console.log(arr2, arr3);//[ 6, 7, 8 ] [ 1, 2, 3, 4, 5 ]
​
let arr4 = [4, 7, 5, 8, 2]
let arr5 = arr4.splice(0, 2, 10, 50, 71, 12, 52)
console.log(arr4,arr5);//[10, 50, 71, 12, 52,  5,  8,  2] [ 4, 7 ]

数组遍历

forEach()

let arr = [4, 5, 5, 7]
arr.forEach((val, index, _arr) => {//其中index(索引)和数组可选参数
    console.log(val,index,_arr);
})
// 4 0 [ 4, 5, 5, 7 ]
// 5 1 [ 4, 5, 5, 7 ]
// 5 2 [ 4, 5, 5, 7 ]
// 7 3 [ 4, 5, 5, 7 ]

map()

let arr = [4, 5, 5, 7]
let arr1 = arr.map(val => -1 * val)//参数情况与forEach一样，只不过需要新数组来接收经过函数处理的新数组
console.log(arr1);//[ -4, -5, -5, -7 ]

for of

  • 用来遍历可迭代对象：Array,String,Set,Map...
let arr = [4, 5, 5, 7]
for (let val of arr) {
    console.log(val);//缺点是无法获取响应的索引值
}
// 4
// 5
// 5
// 7

for in

  • 用来遍历原型，一般是用来遍历对象
let arr = [4, 5, 5, 7]
for (let val in arr) {
    console.log(val);//用for in遍历，获取的值为数组的索引
}
// 0
// 1
// 2
// 3

filter()

  • 过滤满足条件的新数组
let arr = [4, 5, 5, 7]
let arr1 = arr.filter(val => val >= 5)
console.log(arr1, arr);//[ 5, 5, 7 ] [ 4, 5, 5, 7 ]

some()

  • 只要有一个数组成员的返回值为true，则返回true，否则false；
let arr = [4, 5, 5, 7]
console.log(arr.some(val => val >= 5));//true
console.log(arr.some(val => val < 4));//false

every()

  • 需要每一个返回值为true，才能返回true，否则为false;
let arr = [4, 5, 5, 7]
console.log(arr.every(val => val >= 5));//false
console.log(arr.every(val => val >= 4));//true

reduce()和reduceRight()

  • reduce()依次处理数组的每个成员，最终累计成一个值。
  • reduce(a,b,x,y) ---a:必填，累计变量；b：必填，当前变量；x: 可选，当前位置；y:可选，原数组。
  • reduce()主要用来数组求和
let arr = [4, 5, 5, 7]
let sum = arr.reduce((pre, val) => pre += val)
console.log(sum);//21
  • 利用reduce()进行数组去重
let arr = [4, 5, 5, 7]
let arr1 = arr.reduce((pre, val) => {
    if (!pre.includes(val)) {
        return pre.concat(val)
    } else {
        return pre
    }
},[])
console.log(arr1);//[ 4, 5, 7 ]
  • 利用reduce()进行数组扁平化
let arr = [4, 5, 5, 7, [7, 8, 4,]]
let arr1 = arr.reduce((pre, val) => {
    return pre.concat(val)
},[])
console.log(arr1);//[4, 5, 5, 7, 7, 8, 4]
  • reduceRight()和reduce()功能相似，只是方向相反。

indexOf()与lastIndexOf()

  • indexOf()用来返回数值在数组出现时第一次的索引；lastIndexOf()用来返回数值在数组出现时最后一次的索引。
  • 如果在数组里没有出现，则返回-1
let arr = [1, 4, 5, 2, 4, 5, 2, 6, 5]
console.log(arr.indexOf(5));//2
console.log(arr.lastIndexOf(5));//8
console.log(arr.indexOf(100));//-1

find()

  • 返回数组中符合条件的第一个元素
let arr = [1, 4, 5, 2, 4, 5, 2, 6, 5]
console.log(arr.find(val => val > 3));//4
console.log(arr.find(val => val > 30));//undefined

flat()

  • es6新增，用于数组扁平化。
  • 接收一个参数，表示数组扁平化的深度，默认为1
let arr = [1,2,[4,7,5,[5,4,8],[45,25,32,[52,14,99]]]]
console.log(arr.flat());
console.log(arr.flat(Infinity));
// [ 1, 2, 4, 7, 5, [ 5, 4, 8 ], [ 45, 25, 32, [ 52, 14, 99 ] ] ]
// [1,  2,  4,  7,  5,  5,  4,  8, 45, 25, 32, 52, 14, 99]

五、数组常用方法

数组去重

//es6
function unique1(arr) {
    return [...new Set(arr)]
}
​
//哈希map
function unique2(arr) {
    let map = new Map()
    let arr1 = []
    arr.forEach((val, index) => {
        if (!map.has(val)) {
            map.set(val, index)
            arr1.push(val)
        }
    })
    return arr1
}
​
//indexOf
function unique3(arr) {
    let arr1 = []
    for (let val of arr) {
        if (arr1.indexOf(val) === -1) {
            arr1.push(val)
        }
    }
    return arr1
}
​
//includes
function unique4(arr) {
    let arr1 = []
    for (let val of arr) {
        if (!arr1.includes(val)) {
            arr1.push(val)
        }
    }
    return arr1
}
​
let arr = [1, 2, 3, 45, 12, 4, 1, 2, 4]
console.log(unique1(arr));
console.log(unique2(arr));
console.log(unique3(arr));
console.log(unique4(arr));

数组扁平化

//es6 flat
function flatten1(arr) {
    return arr.flat(Infinity)
}
​
let arr = [1, [1, 2, [5, 4, 7], [7, 4, [8, 5, 0]], 47], 85]
console.log(flatten1(arr));

数组打乱

let arr = [1, 2, 3, 4, 5, 6]
function shuffle(arr) {
    for (let i = 0; i < arr.length; i++){
        let rdm = Math.floor(Math.random() * arr.length);
        [arr[i], arr[rdm]] = [arr[rdm], arr[i]]
    }
    return arr
}
console.log(shuffle(arr));

求数组的最大值最小值

let arr = [1, 2, 3, 4, 5, 6]
//...拓展运算符
let max1 = Math.max(...arr)
let min1 = Math.min(...arr)
console.log(max1, min1);//6 1
//利用apply改变this指向
let max2 = Math.max.apply(null, arr)
let min2 = Math.min.apply(null, arr)
console.log(max2, min2);//6 1
avatar
文章
阅读
粉丝
相关推荐
JavaScript Array 奇技淫巧
13k阅读
 · 
375点赞
浅析ArrayBuffer、TypedArray和Buffer
8.8k阅读
 · 
42点赞
JS Array.reduce 实现 Array.map 和 Array.filter
6.7k阅读
 · 
36点赞
[译] Javascript 中 Array.push 要比 Array.concat 快 945 倍！🤯🤔
18k阅读
 · 
341点赞
JS数组奇巧淫技
52k阅读
 · 
1.3k点赞
JS的Array对象解析
635阅读
 · 
53点赞
arrayBuffer？Uint8Array？嘛玩意儿
5.0k阅读
 · 
8点赞
更适合Android的集合 SparseArray/ArrayMap/ArraySet
3.7k阅读
 · 
37点赞
「数组方法」从详细操作js数组到浅析v8中array.js
24k阅读
 · 
303点赞
ArrayBuffer、TypedArray与DataView
3.3k阅读
 · 
3点赞

友情链接：