js数组方法

127 阅读5分钟
Array.map()

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

Array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const list = [1, 2, 3, 4]; 
list.filter((el) => el % 2 === 0); // [2, 4]

Array.isArray()

检测数组类型是否为Array

Array.isArray([1,2,3]) // true
Array.isArray({1,2,3}) // false

toString()

  1. 不改变原数组
  2. 将数组转为用逗号隔开的字符串
let array = ['中国','美国','日本','英国','德国']; 
let val = array.toString(); 
// val : 中国,美国,日本,英国,德国

join()

  1. 不改变原数组
  2. 讲数组转换为连续的字符串,可以自定义分隔符
let array = ['red','yellow','green','black','link']; 
let val = array.join(" \ ");
// val : red\yellow\green\black\link

push()

  • 原数组改变
  • 向数组末尾添加内容
let array = ["Banana", "Orange", "Apple", "Mango"];
array.push("china");
// array = ["Banana", "Orange", "Apple", "Mango","china"]

pop()

  • 原数组改变
  • 删除数组最后一个
let array = ["Banana", "Orange", "Apple", "Mango"];
array.pop();
// array = ["Banana", "Orange", "Apple"]

shift()

  • 原数组改变
  • 向数组开头添加元素
let array = ["Banana", "Orange", "Apple", "Mango"];
array.shift("jappan");
// array = ["jappan","Banana", "Orange", "Apple", "Mango"]

unshift()

  • 原数组改变
  • 删除数组第一个元素
let array = ["Banana", "Orange", "Apple", "Mango"];
array.unshift();
// array = ["Orange", "Apple", "Mango"]

length

  • 数组长度
  • length属性提供了向数组追加新元素的简易方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
// 把 fruits 的第一个元素改为 "Kiwi"
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; 
// 向 fruits 追加 "Kiwi"

splice(index,count,value)

  • 原数组改变
  • **添加或删除数组中的指定元素,添加/删除/替换 **
  • 从索引为index处删除count个元素,插入value
1、第一个参数为一个整数,用来指定添加/删除元素的位置(下标),可为负数,从数组末尾开始 必选参数 
2、第二个参数为需要删除元素的数量,可设置为0,不删除 可选参数
3、第三个开始后面的所有参数为需要添加的内容 可选参数
let arr = [1,2,3,4,5];
// 删除 
arr.splice(0,1) 
// [2,3,4,5] 删除指定下标0开始的1个元素 
arr.splice(2,2) 
// [1,2,5] 删除指定下标2开始的2个参数 
// 添加/替换
arr.splice(1,0,9) 
// [1,9,2,3,4,5] 不删除元素,并向指定下标1位置添加元素9
arr.splice(2,1,6)
// [1,2,6,4,5] 删除指定下标开始的1个元素,并向当前位置添加元素6 (相当于把3替换为6)

reverse()

  • 改变原数组
  • 数组反转
let arr = [1,2,3]
arr.reverse() 
// [3,2,1]

sort()

  • 改变原数组
  • 数组排序
  • 默认按字母排序为升序
  • 如遇到非字符串字符,先调用toString()方法将元素转换为字符串,再进行字符串排序
  • 参数为规定排序的比较函数(可选项)
let arr = ["A", "C", "B", "E", "D"] 
arr.sort() // ['A','B','C','D','E']
let arr1 = [1, 0, 5, 4, 9, 45, 78, 6, 14, 2]; 
arr1.sort((a,b) => a - b ) // 升序 
arr1.sort((a,b) => b - a ) // 降序 
// 按年龄排序,若年龄相同,就女士(sex属性为0) 排在男士(sex属性为1)之前
let arr4 = [ 
{ age: 18, sex: 0 },
{ age: 19, sex: 0 }, 
{ age: 20, sex: 0 }, 
{ age: 18, sex: 1 },
{ age: 19, sex: 1 }, 
] 
arr4.sort((a, b) => {
if (a.age == b.age) { 
return a.sex - b.sex // 如果年龄相同按照性别排序 
} else { 
return a.age - b.age // 其他依然按照年龄排序 
} 
}) 
// 结果 [
{ age: 18, sex: 0 },
{ age: 18, sex: 1 }, 
{ age: 19, sex: 0 }, 
{ age: 19, sex: 1 },
{ age: 20, sex: 0 } ]

splice(start,end)

  • 不改变原数组,返回新数组
  • 截取数组索引
1、第一个参数位开始的索引(必填)
2、第二个参数位结束的索引(可选) (截取不包括第二个索引)
let arr5 = [1,2,3,4,5] 
let result = arr5.splice(1,3)
console.log(result) // [2,3]
console.log(arr5) // [1,2,3,4,5] 不改变原数组
// more
arr5.slice(0) // 返回[1,2,3,4,5] 从开头截取到末尾
arr5.slice(1) // 返回[2,3,4,5] 只有一个参数并且大于0,从该索引截取到末尾 
arr5.slice(-2)// 返回[4,5] 只有一个参数并且小于0,从倒数start位截取到末尾 
arr5.slice(2,4) // 返回[3,4] 两位大于0的参数,从start位截取到end的前一位,不包括end位索引 arr5.slice(-1,1)// 返回[] 不符合规则,返回空数组
arr5.slice(1,-2)// 返回[2,3] 两个参数一正一负,从正数start位开始截取到倒数end位,不包括end位索引
arr5.slice(-4,-2)// 返回[2,3] 两个参数都为负数,倒数start位截取至倒数end位,不包含end位索引

indexOf(value)

  • 不改变原数组
1、从索引0开始检索,检查数组中是否包含value,有则返回匹配到的第一个索引,没有则返回-1
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'e', 'e', 'i'] 
arr.indexOf(e) // 4 有的话匹配该元素第一个索引
arr.indexOf(g) // -1 没有返回-1 
console.log(arr) // ['a', 'b', 'c', 'd', 'e', 'f', 'e', 'e', 'i'] 不改变原数组
// 利用indexOf()方法实现数组去重
let arr1 = []
for(let i = 0; i < arr.length; i++){
if(arr1.indexOf(arr[i]) < 0){
arr1.push(arr[i])
   }
 }
console.log(arr1) // ['a', 'b', 'c', 'd', 'e', 'f', 'i']

lastIndexOf(value)

  • 不改变原数组
1、从最后的索引开始,检查数组是否包含value,有的话返回匹配到的第一个索引(也可以说是返回最后一个索引),没有返回-1
2、语法与indexOf相同 
3、也可以用该方法实现数组去重

concat(value)

  • 不改变原数组
  • 将数组/值连接成新的数组
  let a = ['a','b'] , b = [1,2], c = ['中国','小日本'] 
  a.concat(b,c).sort() // [ 1, 2, 'a', 'b', '中国', '小日本' ]

Array.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

// Code const list = [1, 2, 3, 4, 5];
list.pop(); // 5 
list; // [1, 2, 3, 4]

Array.slice()

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

// Code const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3] 
list; // [1, 2, 3, 4, 5]

Array.flat()

var newArray = arr.flat([depth])
// depth 可选:指定要提取嵌套数组的结构深度,默认值为 1。

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

 const list = [1, 2, [3, 4, [5, 6]]];
 list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Array.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false 
const list = [2, 4, 6, 8, 10]; 
list.every((el) => el%2 === 0); // true