JavaScript 数组的API在开发过程中尤为重要。
数组的方法分为,改变自身的数组方法,不改变自身的数组方法,以及遍历数组的方法。
创建数组的方法
数组的构造器 Array
// 对象字面量的写法
const arr1 = []
// Array 构造器方法
const arr2 = Array(5) // [empty*5] 创建一个数组长度为5的数组
const arr3 = Array(1, 2, 3) // [1, 2, 3]
ES6 新增的构造方法:Array.of 和 Array.from
Array.of
作用:是将参数依次转化成数组的,然后返回这个新数组,不管这个参数是数字还是其他。
它与 Array 构造器功能一致,唯一的区别就是在单个参数的处理上。
Array.of(8); // [8]
Array(8); // [empty × 8]
Array.of(8, 5); // [8, 5]
Array(8, 5); // [8, 5]
Array.of('8'); // ["8"]
Array('8'); // ["8"]
Array.from
作用:是将一个类数组转化成一个数组,只要一个对象有迭代器,就可以转换成数组(返回新数组,不改变原数组)
可以传三个参数,作用分别为:
- 类数组对象,必传
- 加工函数,新的数组可以经过包装之后,再返回,必须有返回值
- this 作用域,表示加工函数的 this 指向
const obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
const arr = Array.from(obj, function (value, index){
console.log(value, index, this, arguments.length)
return value.repeat(2)
}, obj)
console.log(arr)
输出结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMYpTRqL-1615198628238)(C:\Users\63260\Desktop\js\数组API\ArrayFrom.png)]
Array.from
还可以处理,String
,Set
,Map
数据结构
// String
Array.from('abc'); // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'ab'], [2, 'de']])); // [[1, 'ab'], [2, 'de']]
数组的判断方法
const arr = []
console.log(Array.isArray(arr)) // true
console.log(arr instanceof Array) // true
console.log(arr.constructor === Array) // true
console.log(Array.prototype.isPrototypeOf(arr)) //true
console.log(Object.getPrototypeOf(arr) === Array.prototype) // true
console.log(Object.prototype.toString.apply(arr) === '[object Array]') // true
实现一个 Array.isArray 方法
Array.isArray = function(arg) {
return Object.prototype.toString.apply(arg) === '[object Array]'
}
数组改变自身的方法
改变数组自身的方法,一共有九种,pop
,push
,reverse
,shift
,sort
,splice
,unshift
,以及ES6新增的 copyWithin
和 fill
。
pop
删除数组最后一个元素,返回被删除的元素,数组为空返回 undefined
const arr = ['red', 'blue', 'green']
const res1 = arr.pop()
console.log(res1) // 'green'
console.log(arr) // ['red', 'blue']
push
在数组后面追加元素,返回的是数组新的 length
const arr = ['red', 'blue', 'green']
const res = arr.push('black', 'white')
console.log(res) // 5
console.log(arr) // ['red', 'blue', 'green', 'black', white]
reverse
颠倒元素的位置,改变了原数组,并且返回该数组的引用
const arr = ['red', 'blue', 'green']
const res = arr.reverse()
console.log(res) // ["green", "blue", "red"]
console.log(arr) // ["green", "blue", "red"]
shift
删除数组的第一个元素,并返回删除的元素
const arr = ['red', 'blue', 'green']
const res = arr.shift()
console.log(res) // 'red'
console.log(arr) // ['blue', 'green']
unshift
将一个或多个元素添加到数组开头,并且返回数组的新长度(length)
const arr = ['red', 'blue', 'green']
const res = arr.unshift('white', 'black')
console.log(res) // 5
console.log(arr) // ["white", "black", "red", "blue", "green"]
sort
将数组进行排序,并返回新数组
const arr = ['red', 'blue', 'green']
const res = arr.sort()
console.log(res) // ["blue", "green", "red"]
console.log(arr) // ["blue", "green", "red"]
如果是数字
从小到大排序
const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => a-b)
console.log(res) // [1, 3, 5]
从大到小排序
const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => b-a)
console.log(res) // [5, 3, 1]
splice
传三个参数:
- 第一个参数为开始索引,必传,如果只穿一个参数则表示,将这个元素后面的所有元素删除掉,如何使负数,从-1开始,删除最后一位,返回出来
- 第二个参数为删除元素(传几删几个),可选参数
- 第三个参数为添加的内容(可以传多个元素),可选参数
- 并且返回被删除内容的数组形式。
const arr = ['red', 'blue', 'green']
const res = arr.splice(1, 1)
console.log(res) // ['blue']
console.log(arr) // ['red', 'green']
const res = arr.splice(1, 1, 'white', 'black')
console.log(res) // ['blue']
console.log(arr) // ["red", "white", "black", "green"]
const arr = ['red', 'blue', 'green']
const res = arr.splice(-1)
console.log(res) // ['green']
console.log(arr) // ['red', 'blue']
copyWithin
浅拷贝数组的一部分复制到同一个数组的另一个位置(覆盖数组的原来的位置),并返回这个新数组,不会改变数组的长度
const arr = ['red', 'blue', 'green']
const res = arr.copyWithin(0, 1, 2)
console.log(res) // ["blue", "blue", "green"]
console.log(arr) // ["blue", "blue", "green"]
传三个参数:
- 第一个参数是要覆盖添加的位置索引
- 第二个参数是复制开始的位置
- 第三个参数是复制结束的位置,但不包含结束位置的元素
fill
用一个固定元素,填充数组,可选起始位置和终止位置,并且返回一个新的数组
const arr = ['red', 'blue', 'green']
const res = arr.fill(6, 1, 2)
console.log(res) // ["red", 6, "green"]
console.log(arr) // ["red", 6, "green"]
const res1 = arr.fill(6)
console.log(res) // [6, 6, 6]
传三个参数:
- 第一个参数,表示用来填充数组的值
- 第二个参数,表示索引开始填充的位置,可选传入的参数
- 第三个参数,表示索引结束的位置,不包含结束位置索引的位置,可选传入的参数
出一道题目
给你两个有序整数数组 nums1 和 nums2,请你将 nums2 合并到 nums1 中,使 nums1 成为一个有序数组。
输入:
nums1 = [1,2,3,0,0,0]; m = 3
nums2 = [2,5,6]; n = 3
输出: [1,2,2,3,5,6]
let nums1 = [1,2,3,0,0,0], nums2 = [2,5,6], m =3, n =3
const merge = (nums1, m, nums2, n) => {
nums1.splice(m)
nums2.splice(n)
nums1.push(...nums2)
nums1.sort((a, b) => a - b)
return nums1
}
nums1 = merge(nums1, m, nums2, n)
console.log(nums1) // [1, 2, 2, 3, 5, 6]
不改变数组自身的方法
不改变数组自身的方法,分别有:concat
join
slice
toString
toLocaleString
indexOf
lastIndexOf
toSource
(未形成标准) includes
concat
用于连接数组或值,并且返回一个新的数组,不改变原数组
const arr = ['red', 'blue', 'green']
const res = arr.concat('white', ['black', 'yellow'])
console.log(res) // ["red", "blue", "green", "white", "black", "yellow"]
console.log(arr) // ['red', 'blue', 'green']
join
可以将数组(或者类数组),根据传入的指定字符,连接成字符串,如果不传,则用逗号分开,并且返回连接的字符串,不改变原数组
const arr = ['red', 'blue', 'green']
const res = arr.join()
console.log(res) // red,blue,green
console.log(arr) // ['red', 'blue', 'green']
const res1 = arr.join('')
console.log(res1) // redbluegreen
const res2 = arr.join('-')
console.log(res2) // red-blue-green
slice
将一个数组根据这个数组的索引开始和结束位置,剪切成一个新的数组,并且返回这个新数组,不改变原数组
const arr = ["red", "blue", "green", "yellow"]
const res = arr.slice(1, 3)
console.log(res) // ["blue", "green"]
console.log(arr) // ["red", "blue", "green", "yellow"]
const res1 = arr.slice(1)
console.log(res1) // ["blue", "green", "yellow"]
传参方式:
- 不传参,表示默认从零开始,到最后一个索引(包含最后一个元素)
- 传一个参数表示索引开始的位置,如果是负数,从-1开始,则取出最后一位元素,以数组的形式返回
- 传两个参数表示索引结束的位置,但是不包含结束位置索引的元素,如果开始结束都为负数,如slice(-2, -1),则表示取出数组的倒数第二位元素
toString
将数组元素转换成以逗号连接的字符串,并且返回这个字符串,不改变原数组,和 join()
方法相似
const arr = ["red", "blue", "green", "yellow"]
const res = arr.toString()
console.log(res) // red,blue,green,yellow
console.log(arr) // ["red", "blue", "green", "yellow"]
toLocaleString
返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString
方法转成字符串,这些字符串以逗号连接在一起。
const array= [{name:'zz'}, 123, "abc", new Date()];
const str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23
indexOf
是否能找到该元素的索引值,找不到返回 -1
,找到则返回对应的索引值。
const arr = ["red", "blue", "green", "yellow"]
const res = arr.indexOf('blue')
console.log(res) // 1
const res1 = arr.indexOf('white')
console.log(res1) // -1
const res2 = arr.indexOf('green', 2)
console.log(res2) // 2
传参:
- 第一个参数为,要搜索的值
- 第二个参数,在那个索引开始搜索,如果是负数,从-1开始往后搜索
lastIndexOf
与 indexOf
相反,表示从数组最后一个元素开始查找,返回数组索引
includes
判断数组中是否包含某个元素,返回 Boolean
值,有则返回 true
,没有返回 false
查找方式和传参与 indexOf
相似
const array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
const array = [NaN];
console.log(array.includes(NaN)); // true
数组的遍历
不会改变自身遍历的方法分别有,forEach
every
some
filter
map
reduce
reduceRight
entries
find
findIndex
keys
values
forEach
对数组的每一元素,执行一次给定的函数,不改变原数组,可以将值赋值给新变量,该方法也没有返回值。
var array = [1, 3, 5];
var obj = {name:'aa'};
var sReturn = array.forEach(function(value, index, array){
array[index] = value;
console.log(this.name); // 'aa' 被打印了三次, this指向obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefined
### every
用来检测数组里所有元素,是否都能符合条件,或者通过某个指定函数的测试。返回一个 Boolean
值。
const arr = [3, 5, 7, 13, 9]
const res = arr.every((item, index, array) => {
return item < 20
})
console.log(res) // true
const res1 = arr.every((item, index, array) => {
return item < 10
})
console.log(res1) // false
some
用来检测数组中的元素,是不是至少有1个元素,能符合条件,或者通过某个指定函数的测试。返回的是一个 Boolean
值。(可以用来检测数组中是否存在某个值)
const arr = [3, 5, 7, 13, 9]
const res = arr.some((item, index, array) => {
return item === 5
})
console.log(res) // true
filter
将符合条件的元素,放入一个新数组,并且返回这个新数组。
const arr = [3, 5, 7, 13, 9]
const res = arr.filter((item, index, array) => {
return item > 10
})
console.log(res)
检索字符串
const color = ['red', 'blue', 'yellow', 'black', 'white', 'green']
function selColor (ele) {
return color.filter(item => {
return item.toLowerCase().indexOf(ele.toLowerCase()) !== -1
})
}
console.log(selColor('bl')) // ["blue", "black"]
console.log(selColor('e')) // ["red", "blue", "yellow", "white", "green"]
map
对数组中的每一个元素进行重新包装之后,再返回一个新数组。
const arr = [3, 5, 7, 13, 9]
const res = arr.map((item, index, array) => {
return item * 2
})
console.log(res) // [6, 10, 14, 26, 18]
reduce
数组中的每个元素执行相加(升序执行),最后返回元素相加的和。
const res = arr.reduce((acc, cur, idx, src) => {
acc += cur
return acc
}, 0)
console.log(res) // 37
参数代表:
- Accumulator (acc) (累计器)
- Current Value (cur) (当前值)
- Current Index (idx) (当前索引)
- Source Array (src) (源数组)
将二维数组转成一维数组
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( acc, cur ) => acc.concat(cur),
[]
);
console.log(flattened) // [0, 1, 2, 3, 4, 5]
计算数组中每个元素出现的个数
const color = ['red', 'black', 'black', 'white', 'green', 'red']
const newColor = color.reduce((acc, cur) => {
if(cur in acc) {
acc[cur]++
}else {
acc[cur] = 1
}
return acc
}, {})
console.log(newColor) // {red: 2, black: 2, white: 1, green: 1}
数组去重
const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
if(pre.indexOf(cur) === -1) {
pre.push(cur)
}
return pre
}, [])
console.log(res)
reduceRight
与 reduce
相似,但是从后往前累加。
find
返回数组中符合条件的第一个元素的值,没有返回 undefined
const arr = [3, 5, 7, 13, 9]
const res = arr.find((item, index, array) => {
return item > 10
})
console.log(res) // 13
findIndex
与 find
相似,不过返回的是数组的索引(index),没有返回 -1
return acc
}, {})
console.log(newColor) // {red: 2, black: 2, white: 1, green: 1}
数组去重
```js
const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
if(pre.indexOf(cur) === -1) {
pre.push(cur)
}
return pre
}, [])
console.log(res)
reduceRight
与 reduce
相似,但是从后往前累加。
find
返回数组中符合条件的第一个元素的值,没有返回 undefined
const arr = [3, 5, 7, 13, 9]
const res = arr.find((item, index, array) => {
return item > 10
})
console.log(res) // 13
findIndex
与 find
相似,不过返回的是数组的索引(index),没有返回 -1