js 数组常用方法总结

map、forEach、concat、join、reverse、push、pop、shfit、unshfit、slice、splice、indexOf、includes、some、flat、fill、toString、find、findIndex、Array.isArray、Array.from、Array.of

1.map():
数组映射

用法1:用于遍历整个数组,返回一个新的数组
var arr = [2,21,12,11]
var newarr = arr.map(item => {
  return item + 1
})
arr: [2,21,12,11]
newarr:[3,22,13,12] 
备注:map不会改变原数组,会直接返回一个新的数组,这个map与forEach用法的本质区别
用法2:可以遍历数组对象中的属性
let obj = [
{zs:1,age:2,address:'南京'},
{zs:33,age:21,address:'南京2'}
]
obj.map(item => {
 return item.address
})
["南京", "南京2"]

2.forEach():
数组遍历

let arr = [11,21,13,14,25]
arr.forEach((item,index,arr) => { // 分别代表元素,下标, 原数据

})
let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index) => {
arr[index] = item  +1
})
arr: [2, 3, 4, 5, 6]

let arr1 = [1,2,3,4,5]
arr1.map((item, index)=> {
 arr1[index] = item +1 
})
因为map中没有使用return,会直接返回
[undefined, undefined, undefined, undefined, undefined], 
但是由于map中也直接对arr1数组进行了操作,
所以arr1的原值也被改变了
  1. concat():
    用于拼接多个数组
let arr = [1,23,4,45,21]
let arr1 = [6,3]
let arr2 = [77,12]
arr.concat(arr1,arr2)
[1, 23, 4, 45, 21, 6, 3, 77, 12]
  1. ‘’():
    用于拼接数组成字符串,join传的参数未分隔符
let arr = [1,3,4,123,4]
arr.join(',')
"1,3,4,123,4"
备注与之对应的是字符串的split方法
"1,3,4,123,4".split(',')
 ["1", "3", "4", "123", "4"]

5.reverse()
用于将数据中的数据进行反转

let arr = [2,32,31,23,4,24]
arr.reverse()
(6) [24, 4, 23, 31, 32, 2]
  1. push() & pop() & shfit() & unshift()
    数组首尾添加或者删除元素
let arr = [1,2] // 往数组的末尾插入数据
arr.push(3)
arr: [1,2,3]
let arr = [1,2] // 从数组的末尾取出最后一个元素,并返回末尾元素的值,原数组被改变
let tmp = arr.pop()  //  tmp = 2

let arr = [1,2] // 在数组的头部插入一个元素,原数组被改变
arr.unshift(0)
arr: [0,1,2]
let arr = [1,2,3] // 从数组的头部取出第一个元素,并返回第一个元素的值,原数组被改变
let tmp = arr.shift()  // tmp = 1
arr: [2,3]
  1. slice() 和splice()用法区别
    slice(起始数组下标,结束数组下标): 从数组中取出 从 起始下标 到 结束下标的数组,返回一个新的数组 不会改变原数组里面的元素
let arr = [11,2,13,6,67]  // 从前往后数组下标为0,1,2,3 从后往前 数组下标为-1,-2,-3
arr.slice(0,3) //  [11,2,13] 取下标0到3的但是不包含下标3的数组元素
arr: [11,2,13,6,67] // 原数组中的元素不会被改变

(下标可以为负数)
let arr = [11,2,13,6,67] 
arr.slice(2,-1) // 返回 [13,6]
/*
 * arr1.splice(a,b,c)
 *    a: 操作的对应下标
 *    b: 删除个数
 *    c: 添加元素(多个用逗号隔开)--可省略
*/
let arr = [11,34,8,12]
let arrtmp = arr.splice(1,2, ...[23,17,19])
arrtmp: [34,8]  // 从原数组中 输出下标1,开始的2个元数,此时返回[34,8]

同时有插入了 [23,17,19]新元素
此时arr : [11,23,17,19,12]
  1. indexOf()
    判断数组里面是否存在对应的值,存在则返回该值第一次出现时所在的下标,不存在则返回-1
[3,5,2].indexOf(2) // 2
[3,5,2].indexOf(7) // -1
备注: 字符串中也有indexOf的方法
'zs'.indexOf('s')  // 1
'zs'.indexOf('k') // -1
  1. includes()
    判断数组中是否有对应的值存在,存在为true ,不存在为false
[43,6,11].includes(8)
false
[43,6,11].includes(11)
true
  1. every()
    判断数组中每一项是否都满足某一个条件,返回true / false
let arr = [2,12,32,6,11]
arr.every( item => { return item > 1 } )
true // 数组中所有的元素都大于1,所以返回了true
arr.every( item => { return item > 11 } )
false // 数组中并不是所以的元素都大于1,所以返回了false
  1. some()
    判断数组中至少某一项满足某个条件 true / false
let arr = [2,12,32,6,11]
arr.some(item => { return item > 32 })
false
arr.some(item => { return item > 31 })
true

12.flat(depth) :
用于展开平铺嵌套数组
depth 可选
指定要提取嵌套数组的结构深度,默认值为 1。
Infinity:展开任意深度的嵌套数组

let arr = [2,12,22, [1,2, [77]]]
arr.flat(1)
(6) [2, 12, 22, 1, 2, Array(1)]
arr.flat(2)
(6) [2, 12, 22, 1, 2, 77]

注意:
arr:  [2,12,22, [1,2, [77]]]  // 原数组不会被更改

arr.flat(Infinity)
(6) [2, 12, 22, 1, 2, 77]
  1. fill(item, start, end) 用法:
    item: 填充数组的元素
    start: 起始位置
    end: 结束位置
let arr = [1,2,3,4,5,6,7,8]
arr.fill(11)
arr: [11, 11, 11, 11, 11, 11, 11, 11] // 不加start end标记,默认填充替换整个数组

let arr = [1,2,3,4,5,6,7,8]
arr.fill(11, 3)
arr: [1, 2, 3, 11, 11, 11, 11, 11] // 只有一个start的话,默认从start到数组结尾填充替换

let arr = [1,2,3,4,5,6,7,8]
arr.fill(11, 3,7)
arr: [1, 2, 3, 11, 11, 11, 11, 8] // 从start 开始 到end (不替换end位置上的数据)
  1. toString() 将数组转换成字符串
let arr = [1,2,3,4,5]
arr.toString()
"1,2,3,4,5"
  1. find()
    find((item, index, arr) => {})
    数组从左往右进行查找,返回数组中第一个数组成员符合条件的元素,未找到则返回 undefined
let arr = [1,23,11,22,12]
let a = arr.find((item, index, arr) => {
  return item === 23
})
a: 23  // 找到

let arr = [1,23,11,22,12]
let a = arr.find((item, index, arr) => {
  return item === 27
})
a: undefined // 未找到

let arr = [{zs: 1},{zs: 34},{zs: 54}]

let a = arr.find((item, index, arr) => {
  return item.zs === 1
})
a: {zs: 1}
  1. findIndex()
    数组从左往右进行查找,返回数组中第一个数组成员符合条件的元素的数组下标,未找到则返回 -1
let arr = [{zs: 91},{zs: 34},{zs: 54}]
let a = arr.findIndex((item, index, arr) => {
  return item.zs < 35
})
a: 1

let arr = [{zs: 91},{zs: 34},{zs: 54}]
let a = arr.findIndex((item, index, arr) => {
  return item.zs === 0
})
a: -1
  1. Array.isArray()
    判断是否为数组
let arr = [1]
let arr1 = {}
Array.isArray(arr)
true
Array.isArray(arr1)
false
  1. Array.from()
    将类数组对象转换成 数组
let arr = {
 0: 'zs',
 1: 'zy',
 length: 2
}
Array.from(arr)
(2) ["zs", "zy"]

let arr = {
 0: 'zs',
 1: 'zy',
 length: 4
}
Array.from(arr)
(4) ["zs", "zy", undefined, undefined]
--------------------------------------------------------------
let arr = {
 0: 'zs',
 1: 'zy'
}
Array.from(arr)
[]

let arr = {
 zs: 'zs',
 zy: 'zy',
 length: 2
}
Array.from(arr)
(2) [undefined, undefined]

总结: 
1. 类数组对象必须有length属性,否则会生成 [] 空数组
2. 类数组的key值必须为 数字 (0,1,2 ....) 或者 数字的字符串 ('0', '1', '2'.....) 形式

19.Array.of()
将一组值转化成数组形式

Array.of('a', '2', 3)
(3) ["a", "2", 3]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。