-1 序言
- 本文档统计了数组的常用方法,其中有参数可能不完整.请转至mdn查看
0. delete 数组元素的删除
- a.语法:
delete arr[2] - b.描述 删除数组的某一项的内容,或者说将某一项的内容置为空,
- c.返回值
- d.特点 改变原数组,长度不发生变化
var arr = [1,6,8,9,6]
delete arr[3]
console.log(arr) // [1, 6, 8, empty, 6]
console.log(arr[3]) // undefined
1. push 数组元素的添加
- a.语法
arr.push(1,2,5) - b.描述 向数组末尾追加 一个 或 多个 元素
- c.返回值 追加元素之后的数组的 长度
- d.特点 改变原数组,长度发生变化
2. pop 删除数组末尾元素
- a.语法
arr.pop() - b.描述 删除数组 末尾 的 一个 元素
- c.返回值 被删除的元素
- d.特点 改变原数组,长度发生变化
3. unshift 数组最前面添加元素
- a.语法
arr.unshift(1,2,3) - b.描述 在数组最前面添加 一个 或 多个 元素
- c.返回值 追加元素之后的数组的 长度
- d.特点 改变原数组,长度发生变化
4. shift 删除数组最前面的元素
- a.语法
arr.shift() - b.描述 删除数组最前面的一个元素
- c.返回值 被删除的那个元素
- d.特点 改变原数组,长度发生变化
5 . splice 数组元素的截取
- a.语法
arr.splice(索引位置,[截取个数],[追加的新元素]) - b.描述 截取数组元素。
- 第一个参数:从索引位置,包括索引,开始截取
- 第二个参数:截取个数,可选,---- 不写 将当前索引及以后的元素全部截取
- 第三个参数:将截取的元素替换追加为新元素
- c. 返回值 一个数组,数组中为截取的元素
- d.特点 改变原数组,返回新数组
var arr = [1,5,6,6,9,7,8,25,4]
var newArr = arr.splice(2) arr = [1,5] newArr = [6,6,9,7,8,25,4]
var newArr = arr.splice(2,3) arr = [1,5,7,8,25,4] newArr = [6,6,9]
var newArr = arr.splice(2,3,'aa',5,'6','bb') arr = [1,5,'aa',5,'6','bb',7,8,25,4] newArr = [6,6,9]
6. reverse 数组元素的反转
- a.语法
arr.reverse() - b.描述 反转数组
- c.返回值 反转后的数组 === arr
- d.特点 改变原数组
var arr = [1,5,6,9]
var newArr = arr.reverse()
console.log(arr === newArr) //true
console.log(arr) [9,6,5,1]
console.log(newArr) [9,6,5,1]
7. sort 数组元素的排序
- a.语法
arr.sort(function(a,b){return a-b})// 升序 - a.语法
arr.sort(function(a,b){return b-a})// 降序 - b.描述 数组排序 可选参数，不传按照字符编码 升序 排序
- c.返回值 反转后的数组 === arr
- d.特点 改变原数组
var arr = [1,2,3,5,'6',8,7,'22',23,45]
var newArr = arr.sort()
console.log(arr === newArr) //true
console.log(arr) [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,]
console.log(newArr) [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,]
arr.sort(function(a,b){return a-b}) // 升序
console.log(arr) [1, 2, 3, 5, "6", 7, 8, "22", 23, 45]
console.log(newArr) [1, 2, 3, 5, "6", 7, 8, "22", 23, 45]
arr.sort(function(a,b){return b-a}) // 降序
console.log(arr) [45, 23, "22", 8, 7, "6", 5, 3, 2, 1]
console.log(newArr) [45, 23, "22", 8, 7, "6", 5, 3, 2, 1]
8. concat 数组的拼接
- a.语法 :
arr.concat(arr1,arr2,arr3) - b.描述 : 数组拼接,将多个数组拼接成一个数组
- c.返回值 : 一个拼接后的新数组
- d.特点 : 不改变原数组
var arr = [1,2,3]
var arr1 = [25,36,78]
var arr2 = [25,78,1,45]
var newArr = arr.concat(arr1,arr2)
console.log(arr) [1, 2, 3]
console.log(newArr) [1, 2, 3, 25, 36, 78, 25, 78, 1, 45]
console.log('newArr===arr1',newArr===arr1) // false
9. join 数组元素的拼接
- a.语法 :
arr.join('分隔符') - b.描述 : 将数组内元素以一定分隔符拼接成字符串,分隔符如下案例
- c.返回值 : 字符串
- d.特点 : 不改变原数组
- e.案例
var arr = [1,2,3]
var newArr = arr.join()
console.log(newArr) // 1,2,3
var newArr = arr.join('')
console.log(newArr) // 123
var newArr = arr.join('aa')
console.log(newArr) // 1aa2aa3
10. split 字符串的切割
- a.语法 :
str.split('分隔符') - b.描述 : 将字符串 以一定分隔符号转换成数组
- c.返回值 : 返回切割好的数组
var str = '465a76a986a6769'
var arr = str.split()
console.log(arr) // ["465a76a986a6769"]
var arr = str.split('')
console.log(arr) // ["4", "6", "5", "a", "7", "6", "a", "9", "8", "6", "a", "6", "7", "6", "9"]
var arr = str.split('6')
console.log(arr) // ["4", "5a7", "a98", "a", "7", "9"]
var arr = str.split('a')
console.log(arr) // ["465", "76", "986", "6769"]
11. indexOf 数组元素的查找
- a.语法 :
arr.indexOf('内容') - b.描述 : 用来查找数组中某一项的索引,
- c.返回值 : 若查找的内容在数组中不存在,则返回 -1 ,存在返回 顺序开始找到的 索引
var arr = [1,6,8,9,6]
var newArr = arr.indexOf(3) // -1
console.log(newArr)
var newArr = arr.indexOf(6)
console.log(newArr) // 1
13. lastIndexOf 数组元素的查找
- a.语法 :
arr.lastIndexOf('内容') - b.描述 : 用来查找数组中某一项的索引,
- c.返回值 : 若查找的内容在数组中不存在,则返回 -1 ,存在返回 倒序 开始找到的 索引
var arr = [1,6,8,9,6]
var newArr = arr.indexOf(3) // -1
console.log(newArr)
var newArr = arr.indexOf(6)
console.log(newArr) // 4
13. includes 数组元素的查找
- a.语法 :
arr.includes('内容') - b.描述 : 判断内容是否数组中存在
- c.返回值 : 若查找的内容在数组中不存在,则返回 false ,存在返回 true
var arr = [1,2,3,5]
var a = arr.includes(6) // false
var a = arr.includes(2) // true
14. slice 数组的截取
- a.语法 :
const newArr = arr.slice([start],[end]) - b.参数: start 开始索引 end 结束索引
- b.描述 : 对数组元素从一定位置进行截取,返回一个截取后的新数组,不改变原数组,不包含结束索引
- c.返回值 : 截取后的新数组
const arr = [1,2,3]
const newArr = arr.slice(1,2)
console.log('aa1',newArr) // aa1 [ 2 ]
console.log('aa2',arr) // aa2 [ 1, 2, 3 ]
16. isArray 判断是否为数组
- a.语法 :
Array.isArray(arr) - b.描述 : 判断传入的对象是否是一个数组
- c.返回值 : false true
var arr = [1,2,3]
console.log(Array.isArray(arr)) // true
var arr = {name:123}
console.log(Array.isArray(arr)) // false
16. toString
- a.语法 :
arr.toString() - b.描述 : 将数组转化为字符串
- c.返回值 : 转化后的字符串
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str)// 1,2,3,4,5
17. flat 数组的扁平化
- 数组的扁平化
- 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
- 不改变原数组 返回新数组
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // 默认depth 为1
const arr2 = [0, 1,undefined,null,'', 2, [[[3, 4]]]];// 全局属性 Infinity 是一个数值，表示无穷大。
console.log('Infinity',Infinity) // Infinity
console.log('Infinity typeof',typeof Infinity) // number
// Infinity 展开任意深度
console.log(arr2.flat(Infinity)); // [ 0, undefined, null, '', 2, 3, 4 ]
const arr = new Array(2) // // flat会移除数组中的空项
arr[0] = 'aaaa'
console.log(arr.flat()) // [ 'aaaa' ]
18. Array 创建一个数组实例
-
数组的构造函数
const arr = new Array(10) console.log('arr',arr) // 创建了一个数组长度为10的数组 console.log(arr[0] === null) // false console.log(arr[0] === undefined) // undefined console.log('1111', typeof arr[0]) // undefined const arr1 = new Array(10,20,30) // 创建一个数组 [10,20,30]
19. fill 数组的填充
- 数组的填充
- 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素, 不包括终止索引
- 语法:
arr.fill(value,[start],[end]) - 参数: value: 填充的值 start: 开始索引位置 end: 结束索引位置
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
20. from 转换类数组为标准的数组
- 转换类数组为标准的数组
- 对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
const set = new Set(['foo', 'bar', 'baz', 'foo']);
console.log(Array.from(set)) // [ 'foo', 'bar', 'baz' ]
function f() {
return Array.from(arguments);
}
console.log( f(1, 2, 3)) // [ 1, 2, 3 ]
21 fouEach 数组的遍历
- 遍历数组
- 语法:
arr.forEach((ele,[index],[arr]) =>{}) - 参数: ele:每一个元素 index: 数组索引 arr数组本身
const arr = [1,2,3]
arr.forEach((ele,index,arr) =>{})
22. map 数组的遍历并映射
- 数组的映射
- 对原数组进行遍历,并返回一个新的数组,新的数组元素为每一次遍历回调函数的返回值,
- 不改变原数组,返回新数组
- 语法:
arr.map((ele,[index],[arr]) =>{ return ele}) - 参数: ele: 数组的每一个元素 index 数组元素索引 arr 数组本身
const arr = [1,2,3]
const newArr = arr.map((ele,index,arr) =>{
return 1
})
console.log('11',newArr) // 11 [ 1, 1, 1 ]
23. filter 数组的遍历并过滤
-
数组的过滤
-
对原数组进行遍历,并返回新的数组,新的数组的元素是遍历时回调函数返回为true时的那一项文章来源：https://www.toymoban.com/news/detail-432430.html
-
不改变原数组,返回新数组文章来源地址https://www.toymoban.com/news/detail-432430.html
const arr = [1,2,3]
const newArr = arr.filter((ele,index,arr) =>{
return ele > 1
})
console.log('11',newArr) // 11 [ 2, 3 ]
24. reduce
- 可以将每一次回调的返回值当作参数传递给下一次的回调
- 对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
- 语法:
const total = arr.reduce((pre,cur,index,arr) =>{return pre + cur},initValue) - 参数: initValue: 初始值 pre: 上一次的返回值 cur 当前的数组的元素
const arr = [1,2,3]
const total = arr.reduce((pre,cur,index,arr) =>{
return pre + cur
},0)
console.log('aa',total) // 6
到了这里，关于javascript常用的数组方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
