js基础之数组API

js基础之数组API

以下表格中添加*的方法不会改变原数组。

属性	描述
*concat()	连接两个或更多的数组，并返回结果
*join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素，并返回新的长度
reverse()	颠倒数组中元素的顺序
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素
*toString()	把数组转换为字符串，并返回结果
*slice()	从某个已有的数组返回选定的元素
*find()	查找数组中满足要求的第一个元素的值
*findIndex	查找数组中满足要求的第一个元素的值的索引
*flat	扁平化多维数组
*flatMap	扁平化多维数组
fill	用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

一、concat

var arr = [1, 2, 3]
var arr1 = [4, 5, 6]
var arr3 = [7, 8, 9]
// concat(arrayX,arrayX,......,arrayX)可以连接多个数组
var arr2 = arr.concat(arr1, arr3)
console.log(arr2)  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

二、join

var arr = [1, 2, 3]
// join(separator) separator可选参数，不传默认为","
var str = arr.join()
var str1 = arr.join("-")
console.log(str) // 1,2,3
console.log(str1) // 1-2-3

三、toString

var arr = [1, 2, 3]
var str = arr.toString()
// 返回值与没有参数的join()方法返回的字符串相同
console.log(str1)  // 1,2,3

四、slice

var arr = [1, 2, 3]
// slice(start,end) start为必传，规定从何处开始选取
// end可选，规定从何处结束选取，不包含当前end元素。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素
// start或end如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推
var arr5 = arr.slice(1, 2) // [2]
var arr5 = arr.slice(-3, -1) // [1, 2]
var arr5 = arr.slice(-3) // [1, 2, 3]

五、push

var arr = [1, 2, 3]
var arr1 = [1, 2, 3]
var len = arr.push(4)
var len1 = arr.push(4, 5)
// push返回把指定的值添加到数组后的新长度
console.log(len) // 4
console.log(len1) // 5
// 原数组改变， 在末尾增加相应的元素
console.log(arr) // [1, 2, 3, 4]
console.log(arr1) // [1, 2, 3, 4, 5]

六、pop

var arr = [1, 2, 3]
var number = arr.pop()
// pop返回数组最后一个元素
console.log(number) // 3
// 原数组改变， 在末尾删除一个元素
console.log(arr) // [1, 2]

// 如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值
var arr1 = []
var num = arr6.pop()
console.log(num) // undefined
console.log(arr1) // []

unshift及shift与push及pop同理，只是是从数组头部改变

七、reverse

var arr = [1, 2, 3]
// 颠倒数组中元素的顺序
var newArr = arr.reverse()
console.loig(arr) // [3, 2, 1]
console.loig(newArr) // [3, 2, 1]

八、sort

var arr = [3, 2, 1]
// sort(sortby) sortby可选，必须是个函数
var newArr = arr.sort((a, b) => a - b)
console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3]

var arr1 = [8, 56, 1, 45, 3, 25]
// sort默认字母顺序进行排序
console.log(arr1.sort()) // [1, 25, 3, 45, 56, 8]

九、splice

var arr = [2, 3, 45, 6, 7, 8]
// splice(index,howmany,item1,.....,itemX) index下标 howmany要删除的项目数量，如果设置为0就不会删除
// item1,.....,itemX 可选， 向数组添加的新项目
// 从下标1开始截取，截取1个
var newArr = arr.splice(1, 1)
console.log(newArr) // [3]
console.log(arr) // [2, 45, 6, 7, 8]

var arr1 = [2, 3, 45, 6, 7, 8]
// 从下标1开始截取，截取1个 再在当前位置添加一个1
var newArr1 = arr.splice(1, 1, 1)
console.log(newArr1) // [3]
console.log(arr1) // [2, 1, 45, 6, 7, 8]

var arr2 = [2, 3, 45, 6, 7, 8]
// 从下标1开始截取，截取0个 再在当前位置添加1, 3, 4, 5
var newArr2 = arr.splice(1, 0, 1, 3, 4, 5)
console.log(newArr2) // []
console.log(arr2) // [2, 1, 3, 4, 5, 3, 45, 6, 7, 8]

十、indexOf

返回数组中某个指定的元素位置

var fruits = ["Banana", "Orange", "Apple", "Mango"]
// indexOf(item,start)  item必填，start可选，规定在数组中开始检索的位置
// 如果数组中不包含此元素，则返回-1
var result = fruits.indexOf("Apple")
console.log(result) // 2

var fruits1 = ["Banana","Orange","Apple","Mango","Banana","Orange","Apple"]
// 表示从下标为4的元素开始寻找
var result1 = fruits.indexOf("Apple",4)
console.log(result1) // 6

lastIndexOf()与indexOf类似，只是lastIndexOf是返回的是元素在数组中最后出现的位置

十一、includes

判断一个数组是否包含一个指定的值

let site = ['runoob', 'google', 'taobao']
// includes(searchElement, fromIndex) fromIndex可选，规定在数组中开始检索的位置
site.includes('runoob')  // true 
site.includes('baidu')  // false

十二、forEach

数组每个元素都执行一次回调函数 ，没有返回值

var arr = [2, 3, 45, 6, 7, 8]
arr.forEach((item,index) => {
	console.log(item, index)
})

十三、map

通过指定函数处理数组的每个元素，并返回处理后的数组 。不会改变原始数组

var arr = [1, 2, 3]
var arr2 = arr.map(item => item * 2)
console.log(arr2) // [2, 4, 6]

十四、filter

检测数值元素，并返回符合条件所有元素的数组

var arr = [3, 5, 42, 1, 33, 1, 43, 5]
var arr2 = arr.filter(item => item < 10)	
console.log(arr2) // [3, 5, 1, 1, 5]

十五、some

检测数组元素中是否有元素符合指定条件，返回值为布尔值

var arr = [3, 5, 42, 1, 33, 1, 43, 5]
// 只要存在一项满足条件，就返回true
var arr2 = arr.some(item => item < 10)	
console.log(arr2) // true

十六、every

检测数值元素的每个元素是否都符合条件 ，返回值为布尔值

var arr = [3, 5, 42, 1, 33, 1, 43, 5]
// 需要每一项都满足条件，才会返回true
var arr2 = arr.some(item => item < 10)	
console.log(arr2) // false

十七、reduce

将数组元素计算为一个值（从左到右）

var arr = [3, 5, 42, 1, 33, 1, 43, 5]
console.log(arr)
//上一次迭代返回的结果作为下一次的prev
var sum = arr.reduce((prev, next) => {
    return prev + next
}, 0)
console.log(sum) // 133

reduceRight()功能与reduce一样，只不过是从右到左做累加

// 二位数组归并为一维数组
var arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]
var arr1 = arr.reduce((prev, next) => {
    return prev.concat(next)
}, [])
console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

十八、find

查找数组中满足要求的第一个元素的值

var arr = [3, 5, 42, 1, 33, 1, 43, 5]
const val = arr.find(item => item > 3)
console.log(val) // 5

十九、flat

扁平化多维数组

let arr = [
    [1,2],
    [3,4],
    [
        [6,7],
        [
            [8],
            [9,10]
        ]
    ]
]
// arr.flat(depth) depth指定要提取嵌套数组的结构深度，默认值为 1
console.log(arr.flat(1)) // [1, 2, 3, 4, [[6,7],[[8],[9,10]]]]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 6, 7, 8, 9, 10]

二十、flatMap

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

let arr = [
    [1, 2],
    [3, 4],
    [6, 8]
]
let arr2 = arr.flatMap(item => {
    return item.filter(item => item >= 2)
})
console.log(arr2) // [2, 3, 4, 6, 8]

二十一、fill

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

// arr.fill(value[, start[, end]])  value用来填充的值，start起始索引，end终止索引
let arr = ["a", "b", "c", "d", "e"]
arr.fill("f", 1, 3)
console.log(arr) // ['a', 'f', 'f', 'd', 'e']
// 注意，fill不会修改原数组的长度
arr.fill("f", 1, 30)
console.log(arr) // ['a', 'f', 'f', 'f', 'f']

属性	描述	返回值
from	把一个类数组转换数组	根据 类数值 生成的新数组
isArray	检测数据是否是个数组	Boolean
of	将参数转成一个数组	新数组

一、Array.from()

把一个类数组转换为真正的数组（类数值：有下标有length）

let list = document.querySlectorAll('#list li') // 获取某个li列表
list = Array.from(list)

// 也可使用扩展运算符将一个类数组转换为数组
list = [...list]