一些常见的数组方法
// 1.添加元素
// push
// 将一个或者多个元素添加至数组末尾处,并返回数组长度。
{
let arr = [1, 2, 3, 4]
let length = arr.push(5, 6)
console.log(length, arr) // => 6 [1,2,3,4,5,6]
}
// unshift
// 将一个或多个元素添加到数组到开头,并返回数组长度
{
let arr = [1, 2, 3, 4]
let length = arr.unshift(0, 6)
console.log(length, arr) //=> 6 [ 0, 6, 1, 2, 3, 4 ]
}
//2. 删除元素
// pop
// 从数组中删除最后一个元素,若对空数组调用 pop 则返回 undefined ,会更改源数组。
// 返回的是删除的那个元素
{
let arr = [1, 2, 3, 4, 5]
let delValue = arr.pop()
console.log(delValue, arr) //=> 5 [ 1, 2, 3, 4 ]
}
// shift
// 删除数组中第一个元素,若空数组返回 undefined ,会更改源数组。
// 返回被删除的那个元素
{
let arr = [1, 2, 3, 4]
let delValue = arr.shift()
console.log(delValue, arr) //=> 1 [ 2, 3, 4 ]
}
// delete
// 删除数组元素,删除的元素会变成 undefined , 很少使用。
// 返回布尔值,删除成功为true
{
let temp = [123, 456, 789]
var delValue = delete temp[1]
console.log(temp.length, temp[1], temp, delValue) // 3, undefined
}
//3. 替换、删除、指定位置添加
// splice
// 一个功能强大的函数,它可以通过删除/替换/添加,的方式修改数组,并返回修改的内容(以数组的格式),会对元素组进行修改。
// 第一个参数:整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// 第二个参数:要删除的项目数量。如果设置为 0,则不会删除项目。
// 第三个参数:向数组添加的新项目。
{
//替换
let temp = [123, 456, 789]
let m = temp.splice(1, 1, 'th')
console.log(m) // [456]
console.log(temp) //[123,'th',789]
//删除
let temp1 = [123, 456, 789]
let n = temp1.splice(0, 1)
console.log(n) //[123]
console.log(temp1) //[456,789]
//添加
let temp2 = [123, 456, 789]
let x = temp2.splice(2, 0, 'tj')
console.log(x) //[]
console.log(temp2) //[123,456,'tj',789]
}
//4. 拷贝数组
// slice
// 浅拷贝了原数组,返回一个新的数组对象,原数组不会发生变化。
// 返回一个新的数组,包含从 start 到 end (不包括该元素)的 数组中的元素。
// 如果参数是小数,那么会把小数进行向下取整后,再进行拷贝
// 如果参数不是数字类型,会基于Number()方法进行转换后,载拷贝,如果转换后不是数字,则返回原数组
// 第一个参数:规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
// 第二个参数:规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
{
//元素是基本类型数据
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(NaN)) // [ 'ant', 'bison', 'camel', 'duck', 'elephant' ]
console.log(animals.slice('A')) // [ 'ant', 'bison', 'camel', 'duck', 'elephant' ]
console.log(animals.slice('1')) // [ 'bison', 'camel', 'duck', 'elephant' ]
console.log(animals.slice(2.1, 4.8)) // [ 'camel', 'duck', 'elephant' ]
console.log(animals.slice(4, 2)) // [] 开头数字比结尾数字大,会返回空数组
console.log(animals.slice(-2)) // ["duck", "elephant"]
console.log(animals.slice(2, -2)) // ["camel"]
console.log(animals.slice(2)) // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)) // ["camel", "duck"]
console.log(animals.slice()) // ['ant', 'bison', 'camel', 'duck', 'elephant']
//元素是引用类型数据
let arr = [{
a: 1
}, {
a: 2
}]
let newArr = arr.slice(0, 1)
console.log(arr, newArr) //=> [ { a: 1 }, { a: 2 } ] [ { a: 1 } ]
newArr[0].a = 20
console.log(arr, newArr) //=> [ { a: 20 }, { a: 2 } ] [ { a: 20 } ]
}
//5. 数组合并
// concat
// 用于合并两个或多个数组,不会更改现有数组,会返回一个新的数组。
{
const array1 = ['a', 'b', 'c', {
name: 'boy'
}]
const array2 = ['d', 'e', 'f']
const array3 = array1.concat(array2)
array3[3].name = 'sex'
console.log(array1) // [ 'a', 'b', 'c', { name: 'sex' } ] 使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,拷贝之后数组各个值的指针还是指向相同的存储地址。
console.log(array3) // [ 'a', 'b', 'c', { name: 'sex' }, 'd', 'e', 'f' ]
}
//6. 拓展运算符
// 不会更改源数组,拓展运算符也可以把 Set 转为数组。
{
let temp1 = [1, 2, 3]
let temp2 = [4, 5, 6]
let arr = [...temp1, ...temp2]
console.log(arr) //[1,2,3,4,5,6]
}
// flat
// 多维数组合并,返回一个新的数组。 (浏览器支持性不好)
// {
// // 合并一维数组
// let ary = [1, 2, [3, 4], 5]
// let newAry = ary.flat();
// console.log(newAry) //=> [1,2,3,4,5]
// //合并多维数组
// [1, 2, [3, [4, [5, 6]]]].flat('Infinity'); //=> [1,2,3,4,5,6]
// //移除数组空项
// let arr = [1, 2, , 5];
// let newArr = arr.flat();
// // 原数组不会发生变化
// console.log(arr, newArr); //=> [1, 2,, 5] [1, 2, 5]
// }
//7. 数组迭代(循环)
// forEach
// 遍历数组,对每个元素执行一次函数,不会更改源数组,也不会创建新数组。
// 第一个参数:当前元素
// 第二个参数:当前元素的索引值
// 第三个参数:当前元素所在的数组
{
let temp = [1, 3, 5]
temp.forEach(function (value, index, array) {
console.log(value, index, array)
})
/****
1 0 [1,3,5]
3 1 [1,3,5]
5 2 [1,3,5]
***/
}
// map
// map() 不会对空数组进行检测。(结果还是空数组)
// 遍历数组,对每个元素执行一次函数,不会更改源数组,会创建一个新数组。
// 函数中也可以传入三个参数,和foreach方法中的参数一致
{
const array2 = []
const array1 = [1, 4, 9, 16]
const map1 = array1.map((x) => x * 2)
const map2 = array2.map((x) => x * 2)
console.log(map1) //=> [2, 8, 18, 32]
console.log(map2) // []
}
// filter
// 遍历数组,对每个元素执行一次函数,返回满足规则的元素。
{
const words = [
'spray',
'limit',
'elite',
'exuberant',
'destruction',
'present',
]
const result = words.filter((word) => word.length > 6)
console.log(result) //=> ["exuberant", "destruction", "present"]
}
// every
// 遍历数组,对每个元素执行一次函数,用于测试组内元素,是否全部满足指定规则。
// 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
{
const isBelowThreshold = (currentValue) => currentValue < 40
const array1 = [1, 30, 39, 29, 10, 13]
console.log(array1.every(isBelowThreshold)) //=> true
}
// some
// 遍历数组,对每个元素执行一次函数,用于判断组内元素至少有一个元素通过了指定规则。
// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
{
const array = [1, 2, 3, 4, 5]
const even = (element) => element % 2 === 0
console.log(array.some(even)) //=> true
}
// reduce
// reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
// reduce() 可以作为一个高阶函数,用于函数的 compose。
// 注意: reduce() 对于空数组是不会执行回调函数的。
// reduce方法中的函数参数:第一个参数:初始值, 或者计算结束后的返回值。后面的参数依次是当前元素,当前元素的索引值和当前元素所在数组
{
const array1 = [1, 2, 3, 4]
const reducer = (accumulator, currentValue) => accumulator + currentValue
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)) //=> 10
// 这里的5表示传递给函数的初始值
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)) //=> 15
}
// for循环
// for...in循环
{
const array1 = ['a', 'b', 'c']
const obj1 = {
name: 'ming',
age: '18',
sex: 'boy'
}
for (const element in array1) {
console.log(element) //0,1,2
}
for (const elementObj in obj1) {
console.log(elementObj) //name,age,boy
}
}
// for...of循环
// for..of循环无法循环对象,因为能够被for...of正常遍历的,都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构,早就内置好了Iterator(迭代器),它们的原型中都有一个Symbol.iterator方法,而Object对象并没有实现这个接口,使得它无法被for...of遍历。
{
const array1 = ['a', 'b', 'c']
for (const element of array1) {
console.log(element) //a,b,c
}
}
//8. 查找定位
// indexOf
// 获取数组元素的索引。 对大小写敏感
// 字符串同样可以用这个方法
// 第二个参数表示检索的起始位置
{
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
console.log(beasts.indexOf('duck')) // 3
console.log(beasts.indexOf('ant', 2)) // -1
console.log(beasts.indexOf('gogo')) // -1 未找到,返回-1
}
// lastIndexOf
// 获取数组元素最后一个索引。
// 第二个参数表示检索的起始位置
{
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']
console.log(animals.lastIndexOf('Dodo')) // 3
console.log(animals.lastIndexOf('Tiger', 2)) // 1
console.log(animals.lastIndexOf('Apple')) // -1 未检索到返回-1
}
// findIndex
// 循环数组,返回第一个满足条件的索引。
// 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
// 如果没有符合条件的元素返回 -1
// 函数中参数和foreach一样,分别为,当前值,当前值的索引,当前值所在的数组
{
const array1 = [5, 12, 8, 130, 44]
const where = (value) => value > 13
console.log(array1.findIndex(where)) // 3
}
// find
// 循环数组,返回第一个满足条件的元素值。
// 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
// 如果没有符合条件的元素返回 undefined
// 函数中参数和foreach一样,分别为,当前值,当前值的索引,当前值所在的数组
{
const array1 = [5, 12, 8, 130, 44]
const where = (value) => value > 13
console.log(array1.find(where)) // 130
}
var arr = [
[1, 2],
['a', 'b'],
]
console.log(arr[1][0]) //a 第2列第1行所在的元素
console.log(arr)
//9. 数组排序
// sort
// 数组排序,直接修改原数组,如果不带参数,默认按照数组元素的字母排序,如果是数字则按照大小顺序排列。
{
let array1 = ['bi', 'ci', 'di', 'ai']
console.log(array1.sort()) // ai bi ci di
let array2 = [1, 2, 3, 4]
array2.sort((a, b) => {
//retrun a - b // 升序
return b - a // 降序
})
console.log(array2) // [4,3,2,1]
}
// reverse
// 数组倒序,不更改源数组,返回一个新的数组。
{
const array1 = ['one', 'two', 'three']
const array2 = array1.reverse()
console.log(array2) // ["three", "two", "one"]
}
//10. 数组转换
// toString
// 将数组元素转为字符串,并以逗号分割,不更改源数组
{
const array1 = [1, 2, 'a', '1a']
console.log(array1.toString()) // "1,2,a,1a"
}
// join
// 将数组所有元素连接成一个字符串返回,可以指定连接符。
{
const elements = ['Fire', 'Air', 'Water']
console.log(elements.join()) // Fire,Air,Water
console.log(elements.join('-')) // Fire-Air-Water
}
//11. 填充/包含
// fill
// 用一个固定的值,替换掉数组中指定起始位置到结束位置的全部元素。
// 第一个参数: 填充的值。
// 第二个参数:填充的起始位置
// 第三个参数:填充的结束位置
{
const array1 = [1, 2, 3, 4]
console.log(array1.fill(0, 2, 4)) // [ 1, 2, 0, 0 ]
console.log(array1.fill(5, 1)) // [1, 5, 5, 5]
console.log(array1.fill(6)) // [6, 6, 6, 6]
}
// includes
// 判断数组中是否包含一个指定的值。
{
const array1 = [1, 2, 3]
console.log(array1.includes(2)) //true
}
//12. 查找定位
// indexOf
// 获取数组元素的索引
// 没有找到返回-1
// 第二个参数表示开始检索的位置
{
const beasts = [1, 'ant', 'bison', 'camel', 'duck', 'bison', 1]
console.log(beasts.indexOf('duck')) // 4
console.log(beasts.indexOf('gogo')) // -1
console.log(beasts.indexOf(1)) // 0 有多个时,返回查找的第一个元素位置
}
// lastIndexOf
// 获取数组元素最后一个索引。从后往前查找,如果查找到多个,则返回第一次找到的元素下标
// 没有找到返回-1
// 第二个参数表示开始检索的位置
{
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']
console.log(animals.lastIndexOf('Dodo')) // 3
}
// findIndex
// 不改变原数组中的值
// 循环数组,返回第一个满足条件的索引。
// 函数中参数依次为:当前值,当前值索引,当前值所在数组
{
const array1 = [5, 12, 8, 130, 44]
const where = (value) => value > 13
console.log(array1.findIndex(where)) // 3
}
// find
// 不改变原数组中的值
// 循环数组,返回第一个满足条件的元素值。
// 函数中参数依次为:当前值,当前值索引,当前值所在数组
{
const array1 = [5, 12, 8, 130, 44]
const where = (value) => value > 13
console.log(array1.find(where)) // 130
}
//12. 数组排序
// sort
// 数组排序,直接修改原数组,如果不带参数,默认按照数组元素的字母排序,如果是数字则按照大小顺序排列。
{
let array1 = ['bi', 'ci', 'di', 'ai']
console.log(array1.sort()) // ai bi ci di
let array2 = [1, 2, 3, 4]
array2.sort((a, b) => {
//retrun a - b // 生序
return b - a // 降序
})
console.log(array2) // [4,3,2,1]
}
// reverse
// 数组倒序,不更改源数组,返回一个新的数组。
{
const array1 = ['one', 'two', 'three']
const array2 = array1.reverse()
console.log(array2) // ["three", "two", "one"]
}
//13. 数组转换
// toString
// 将数组元素转为字符串,并以逗号分割,不更改源数组。
{
const array1 = [1, 2, 'a', '1a']
console.log(array1.toString()) // "1,2,a,1a"
}
// join
// 将数组所有元素连接成一个字符串返回,可以指定连接符
// 默认使用逗号作为分隔符
{
const elements = ['Fire', 'Air', 'Water']
console.log(elements.join()) // Fire,Air,Water
console.log(elements.join('-')) // Fire-Air-Water
}
//14. 填充/包含
// fill
// 用一个固定的值,替换掉数组中指定起始位置到结束位置的全部元素。
// 三个参数分别为:填充的值,起始位置,结束位置
{
const array1 = [1, 2, 3, 4]
console.log(array1.fill(0, 2, 4)) // [ 1, 2, 0, 0 ]
console.log(array1.fill(5, 1)) // [1, 5, 5, 5]
console.log(array1.fill(6)) // [6, 6, 6, 6]
}
// includes
// 判断数组中是否包含一个指定的值。
// 第二个参数为:查找的其实位置,若为复式则是从后往前找
{
const array1 = [1, 2, 3]
console.log(array1.includes(2)) //true
}
//15. Array 的类方法
// isArray
// 类型判断
{
console.log(Array.isArray([1, 2, 3])) // true
console.log(Array.isArray({
num: 123
})) // false
}
// from
// 字符串转数组
{
Array.from('foo') // ['f','o','o']
}
// set转数组
{
const set = new Set(['foo', 'bar', 'baz', 'foo'])
Array.from(set) // [ "foo", "bar", "baz" ]
}
// map转数组
{
const map = new Map([
['name', '666'],
['name', 'pp'],
])
Array.from(map) // ['name','pp']
}
// 循环数组
{
Array.from([1, 2, 3], (x) => x + x) // [2, 4, 6]
}
{
let ary = [12, 13, 31, 9, 32];
ary.sort((a, b) => {
console.log(a, b)
})
}