js基础之数组API

js基础之数组API

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

属性	描述
*concat()	连接两个或更多的数组，并返回结果
*join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素，并返回新的长度
reverse()	颠倒数组中元素的顺序
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素
*toString()	把数组转换为字符串，并返回结果
*slice()	从某个已有的数组返回选定的元素

一、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]