常用数组Array的API

2023-12-03 23:38:10

1.创建数组
1.Array.from　
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

　　那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

1、将类数组对象转换为真正数组：
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

　2、将Set结构的数据转换为真正的数组：
var set = new Set([1,2,3,4,6,8,5])
console.log(set)
console.log(Array.from(set))
　

可以代替es5笨拙的arguments类数组转数组的操作
function arg(){
//原es5操作
const arr = Array.prototype.slice.call(arguments);
console.log(arr)//[1, 2, 3, 4]
//es6代替后
const arr2 = Array.from(arguments)
console.log(arr2)//[1, 2, 3, 4]
//Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值
const arr3 = Array.from(arguments , a => a * 2)
console.log(arr3)//[2, 4, 6, 8]
}
arg(1,2,3,4)
2.Array.of()
Array.of()方法用于将一组数值转换为数组，举例:
const a = Array.of(2,4,6,8);
console.log(a); // [2,4,6,8]
这个方法的主要目的是为了弥补数组构造函数Array()的的不足。因为参数个数的不同会导致Array()的行为有一些差异。举例:
console.log(Array(2,3,4,5))//正常输出[2, 3, 4, 5]
console.log(Array(3))//非自己想要输出[空 ×3]，自己想要的结果是创建一个数值为3的数组
console.log(Array.of(3))//输出了想要的结果[3]
2.模拟栈方法（push，pop）
利用push() pop() 模拟栈数据结构，先进后出

1.push()将元素推进数组末尾

2.pop()将数组末尾将最后一个元素移出，并返回该元素

let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach(item => {
arr2.push(item)
})
console.log(arr2)//[1, 2, 3, 4, 5]
arr2.pop()
console.log(arr2)//[1, 2, 3, 4]
3.模拟队列方法（push，shift）(unshift,pop)
利用push()shift()或者反向操作unshift()pop()模拟队列数据结构，先进先出

1.shift()将数组首位元素移出

2.unshift将元素塞进数组首位

//队列方法push shift
//队列方法unshift pop
let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach(item => {
arr2.push(item)
})
console.log(arr2)//[1, 2, 3, 4, 5]
arr2.shift()
console.log(arr2)//[2, 3, 4, 5]

let arr3 = []
arr.forEach(item => {
    arr3.unshift(item)
})
console.log(arr3)//[5, 4, 3, 2, 1]
arr3.pop()
console.log(arr3)//[5, 4, 3, 2]

4.排序方法sort reverse
1.sort()
sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序。

let arr = [0,1,5,10,15]
console.log(arr.sort())//[0, 1, 10, 15, 5]
调用sort()会按照这些数值的字符串形式重新排序。因此，即使5小于10，但字符串"10"在字符串"5"的前头，所以10还是会排到5前面。很明显，这在多数情况下都不是最合适的。为此，sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。

//升序
function compareup(value1,value2){
   return value1 - value2
}
//降序
function comparedown(value1,value2){
    return value2 - value1
}
console.log(arr.sort(compareup))//[0, 1, 5, 10, 15]
console.log(arr.sort(comparedown))//[15, 10, 5, 1, 0]
    2.reverse() 
    reverse()方法就是将数组元素反向排列

let arr = [0,1,5,10,15]
arr.reverse()
console.log(arr)//[15, 10, 5, 1, 0]
5.操作方法concat slice splice
1.concat()
concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。

concat()传入的数组参数，结果默认数组打平，如下所示

let arr = [0,1,2,3]
let arr2 = arr.concat(2,[3,4],[4,5,6])
console.log(arr2)//[0, 1, 2, 3, 2, 3, 4, 4, 5, 6]
console.log(arr)//[0, 1, 2, 3]

concat()不会影响到原来的数组，因为concat会先创建一个当前数组副本进行操作

    2.slice()
    slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。记住，这个操作不影响原始数组。

let arr = ['a','b','c','g','y']
console.log(arr.slice(1));//["b", "c", "g", "y"]
console.log(arr.slice(1,3));// ["b", "c"]
     3.splice()

一个参数：删除从参数开始直到末尾
两个参数：删除从第一个参数开始，长度为第二个参数
三个参数：1. 插入操作开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。
2.替换操作 splice()在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。

let arr = ['a','b','c','g','y']
let arr2 = arr.splice(1)
console.log(arr2)//["b", "c", "g", "y"]
console.log(arr)//["a"]
let arr2 = arr.splice(1,2)
console.log(arr2)//["b", "c"]
console.log(arr)//["a", "g", "y"]
let arr2 = arr.splice(1,0,'r','t','b')
console.log(arr2)//[]
console.log(arr)// ["a", "r", "t", "b", "b", "c", "g", "y"]
let arr2 = arr.splice(1,3,'r','t','b')
console.log(arr2)//["b", "c", "g"]
console.log(arr)// ["a", "r", "t", "b", "y"]
6.搜索和位置方法 indexOf lastIndexOf includes
indexOf()和includes()方法从数组前头（第一项）开始向后搜索，而lastIndexOf()从数组末尾（最后一项）开始向前搜索。

indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。

let arr = ['a','b','c','g','y','g','b']
1.indexOf

console.log(arr.indexOf('c'))//2
2.lastIndexOf

console.log(arr.lastIndexOf('g'))//5
3.includes

console.log(arr.includes('y'))//true
console.log(arr.includes('x'))//false
7.迭代方法 every filter forEach map some
1.every
every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。

    let arr = [1,5,8,4,3,2]
    let result = arr.every((item,index,array) => item < 6)//true
    let result2 = arr.every((item,index,array) => item < 10)//false
    console.log(result)
    console.log(result2)

2.filter

filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。

    let result = arr.filter((item,index,array) => {
        return item > 3
    })
    console.log(result)//[5, 8, 4]

3.forEach

forEach()：对数组每一项都运行传入的函数，没有返回值。

    let arr2 = []
    arr.forEach((item,index,array) => {
        if(item > 3)
        arr2.push(item)
        return arr2
    })
    console.log(arr2)//[5,8,4]

4.map

map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

    let arr2 = arr.map((item,index,array) => {
                           return item * 2
    })
    console.log(arr2)// [2, 10, 16, 8, 6, 4]

5.some

some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

    let arr = [1,5,8,4,3,2]
    let result3 = arr.some((item,index,array) => item < 6)//true
    console.log(result3)

8.归并方法reduce
对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。传给reduce()的函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

实际应用

1.累加

var arr5 = [1,2,3,4,3,2,1,24,5,6,7,4,3]

       var sum = arr5.reduce((pre,cur,index,array) => {
           return pre + cur
       })
       console.log(sum)//65

reduce计算元素出现次数
var arr = ['a','b','b','c','d','e','e','e','f']

     const arr2 = arr.reduce((pre,cur) => {
     if(cur in pre){
         pre[cur]++
     }else{
         pre[cur] = 1
     }
     return pre
     },{})
     console.log(arr2)

3.reduce实现数组去重
var arr3 = [1,2,3,4,3,2,1,24,5,6,7,4,3]

       const arr4 = arr3.reduce((pre,cur) => {
           if(!pre.includes(cur)){
               return pre.concat(cur)
           }else{
               return pre
           }
       },[])
       console.log(arr4)

码农公寓

相关文章