- A+
所属分类：Web前端
有一些数组方法是ECMAScript新增的，一定要注意浏览器的兼容！！
Array对象属性：
| 属性 | 说明 |
|
constructor |
返回对创建此对象的函数引用 |
| length | 返回集合内的元素的所有长度 |
| prototype | 向对象添加属性和方法 |
constructor
const arr = [1, 2, 4, 5, 6, 9, 15] console.log(arr.constructor) //输出为 ƒ Array() { [native code] }
length
const arr = [1, 2, 4] console.log(arr.length) //输出为 3
下文的箭头函数的解释为：x => x*1 == function(x){return x*1}
如果是有多个参数则：(x,y) => x*y == function(x,y){return x*y} 。我这只是为了简写，并不代表适用。
Array对象方法：
| 方法 | 说明 |
| shift() | 删除第一个元素，并返回结果。 |
| unshift() | 插入元素至第一个元素前面，括号内放入要插入的元素。 |
| splice() |
向数组内添加新元素。第一个参数定义添加新元素的位置,以拼接的 方式，第二个参数是定义应删除多少个元素 |
| slice() |
找出数组内的指定元素。第一个参数定义删除元素的位置，第二个 参数是结束位置。 |
| pop() | 删除数组内的最后一个元素，并返回结果。 |
| push() | 在数组内的末尾添加一个或多个元素，并返回结果。 |
| reverse() | 反转数组内的元素顺序，并返回结果。 |
| toString() | 把数组转换为字符串并返回结果。注意：S为大写。 |
| concat() |
合并(连接)数组创建一个新数组，也可以将括号内的值作为参数合并 至当前数组。 |
| sort() | 对数组内的元素进行排序。 (排序的依照我还搞不清楚....) |
| valueOf() | 返回数组对象的原始值。 |
| join() | 把数组内的元素拼成字符串，再以指定的分隔符进行分隔。 |
| isArray() | 判断对象是否是一个数组。 |
| includes() | 判断数组内是否包含指定的值，可添加多个。 |
| lastIndexOf() | 返回指定的元素最后出现的位置。 |
| find() |
返回数组内通过条件的第一个元素。注意：用函数判断、如果没有符合条 件的元素则返回undefined。 |
| indexOf() | 返回指定元素在数组内的位置。 |
| copyWithin() | 指定元素位置拷贝到另一个位置。注意：后面的元素会被位移出数组，慎用！ |
shift()
const myArray = [3, 1, 5, 2, 6] console.log(myArray.shift()) //输出为 3
unshift()
const myArray = [3, 1, 5, 2, 6] console.log(myArray.unshift(1,3,2323)) //输出为 [1, 3, 2323, 3, 1, 5, 2, 6]
splice()
const myArray = [3, 1, 5, 2, 6] console.log(myArray.splice(1,1,'浮云共我归')) //输出为 [3, "浮云共我归", 5, 2, 6]
slice()
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr2.slice(2, 4)) //输出为 (2) [3, 4]
pop()
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr2.pop()) //输出为 9
push()
const arr2 = [1, 2, 3, 4] console.log(arr2.push('233','333')) console.log(arr2) //输出为 6 、 (6) [1, 2, 3, 4, "233", "333"]
toString()
const myArray = [3, 1, 5, 2, 6] console.log(myArray.toString()) //输出为 3，1，5，2，6
concat()
const myArray = [3, 1, 5, 2, 6] const MyArray = [66,77] const result = myArray.concat(MyArray) console.log(result.concat('add')) //输出为 [3, 1, 5, 2, 6, 66, 77, "add"]
sort()
const arr2 = [6, 2, '云', 1, 4, 'a'] const result = arr2.sort((x, y) => { if (x > y) { return 1 } if (x < y) { return -1 } return 0 }) console.log(result) //输出为 (6) [1, 2, 4, 6, "a", "云"]
valueOf()
const arr2 = [6, 2, '云', 1] console.log(arr2.valueOf()) // 输出为 (4) [6, 2, "云", 1]
join() (结合split()方法会有意想不到的结果,而且我发现)
const arr2 = ['浮','云','共','我','归']
console.log(arr2.join('?')) // 输出为 浮?云?共?我?归
//用上这行arr2.join('?').split('?') 又变回原样了
//split()里不加值 输出： ["浮?云?共?我?归"]
isArray()
const myArray = [3, 1, 5, 2, 6] console.log(Array.isArray(myArray)) //输出为 true
includes()
const arr2 = ['浮','云','共','我','归'] console.log(arr2.includes('云','浮')) // 输出为 true
lastIndexOf()
const arr2 = ['浮','云','共','我','归'] arr2.shift() onsole.log(arr2.lastIndexOf('云')) // 输出为 0
find()
const myArray = [3, 1, 5, 2, 6] const result = myArray.find(x => x > 5) console.log(result) //输出为 6
indexOf()
const myArray = [3, 1, 5, 2, 6] console.log(myArray.indexOf(6)) //输出为 4
copyWithin()
const myArray = [1, 2,'云', 3, 4, 5] const result = myArray.copyWithin(2,0) console.log(result) //输出为 (6) [1, 2, 1, 2, "云", 3]
Array对象-高阶函数
| 方法 | 说明 |
| filter() 过滤 |
过滤未达成指定条件的元素，并返回结果。注意：不会对空元素进 行检测，不会改变原数组 |
| reduce() 累加 |
此方法接收一个函数作为累加器，数组中的每个元素从左到右相 加，最终计算为一个值。可用于函数的compose。 注意：对空数组不会执行回调函数。 reduceRight()从右往左累加 |
| map() 映射 | 返回一个新数组，数组中的元素为调用函数后处理的值。 |
filter()
// 过滤偶数 const arr = [1, 2, 4, 5, 6, 9, 15] myarr = arr.filter((x) => x % 2 !== 0) console.log(myarr)
reduce()
//将元素累加至最终全部相加的值，输出结果为42 const Nums = [1, 5, 1, 5, 10, 20] const total = Nums.reduce((preValue, n) => { return preValue + n }, 0) //后面0表示初始值，正数则在结果值上加，负数反之
map() （这个方法的用法也很多）
const myArray = [1, 2, 3, 4, 5] console.log(myArray.map((function(x) { return x + 1 }))) // 输出为 (5) [2, 3, 4, 5, 6]
数组遍历方法
| 方法 | 说明 |
| forEach | 调用数组的每个元素，将元素传递给回调函数。 |
| for in |
遍历出数组内的元素索引值。 keys()方法也 和这个差不多 |
| for of | 遍历出数组内的元素。 |
forEach
const myArray = [1, 2,'云', 3, 4, 5] //element是当前元素,index是元素索引,array是当前元素所属的数组对象 myArray.forEach(function(element, index,array) { console.log(element,index,array) }) /* 输出为:1 0 (6) [1, 2, "云", 3, 4, 5] 2 1 (6) [1, 2, "云", 3, 4, 5] 云 2 (6) [1, 2, "云", 3, 4, 5] 3 3 (6) [1, 2, "云", 3, 4, 5] 4 (6) [1, 2, "云", 3, 4, 5] 5 5 (6) [1, 2, "云", 3, 4, 5] */
for of
const myArray = [1, 2,'云', 3, 4, 5] for(result of myArray){ console.log(result) } //输出为 1 2 云 3 4 5
for in
const myArray = [1, 2,'云', 3, 4, 5] for(result in myArray){ console.log(result) } //输出为 0 1 2 3 4 5
数组的一些常用方法
去重
const myArray = [3, 1, 5, 1, 6] const result = Array.from(new Set(myArray)) console.log(result) //输出为 [3,1,5,6]
字符串转数组 （数组转字符串可用toString()的方法）
const myArray = '浮云共我归' const result = Array.from(myArray) console.log(result) //输出为 ["浮,云,共,我,归"] //如果去掉from 输出为 ["浮云共我归"]
将首字母变为大写，其余小写
const arr = ['adam', 'LISA', 'barT'] const arr2= ['Adam', 'Lisa', 'Bart'] function result(arr) { return arr.map(function(x) { x = x.toLowerCase() //toUpperCase()将元素转化为大写,substring()提取指定下标里的元素后面的字符 x = x[0].toUpperCase() + x.substring(1) return x }) } console.log(result(arr).toString() === arr2.toString()) //输出为 true 转换小写的方法是 toLowperCase()
用map创建键值对集合 && 元素乘与自身
const arr1 = new Map([ ['lai', 199], ['quan', 'map'], ['feng', 10] ]) console.log(arr1) //输出为 Map(3) {"lai" => 199, "quan" => "map", "feng" => 10} const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] const result = arr2.map(x => x * x) console.log(result) //输出为 (9) [1, 4, 9, 16, 25, 36, 49, 64, 81]
找出数组内最大的数字
const myArray = [1, 2, 3, 4, 5] const result = Math.max(...myArray) console.log(result) //输出为 5
//最小值的话换成min即可
去除数组内的空格 缺点是数组内不能包含数字
const myArray = ['a', ' ', null, '', undefined, 'b', 'c',' '] const result = myArray.filter((z) => z && z.trim()) console.log(result) //输出为 (3) ["a", "b", "c"]
