Array数组的常见的方法集合

这篇博客详细介绍了JavaScript中Array数组的各种操作方法,包括读取元素、获取元素个数、Array.of()、join()、toString()、concat()、push()、pop()、shift()、unshift()、every()、filter()、find()、findIndex()、forEach()、map()、includes()、some()、reduce()、reverse()、slice()、sort()和splice()。理解并掌握这些方法能有效提高代码编写效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.读取数组的元素,读取数组元素最简单的方法就是使用"[ ]"运算符

   const array = new Array("a","b","c","d","e","f","g","h")     //定义一个数组
   const item1 = array[1];    //    此时 item1 的值是 b 

2.获取数组的元素的个数。

  const array = new Array("a","b","c","d","e","f","g","h") //定义一个数组
  array.length    //8

3.Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(3) 创建一个具有单个元素 3 的数组,而 Array(3) 创建一个长度为3的空数组(注意:这是指一个有3个空位(empty)的数组,而不是由3个undefined组成的数组)。

Array.of(3)    //  [3]
Array.of(1,2,3)     // [1, 2, 3]
Array(3)       //  [ , , ]
Array(1, 2, 3)    //  [1, 2, 3]

4.join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
names.join();     //Peter,Vicky,JoJo,Lucy,John
names.join( "-" );     //  Peter-Vicky-JoJo-Lucy-John

5.toString() 返回一个字符串,表示指定的数组及其元素。这个方法适合把数组装换为字符串

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
console.log(array.toString())      //   1,2,3,5,6,7,8,1,3

6.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

const array1 = ["a","b","c","d"]   //数组1
const array2 = ["1","2","2","2","2"]    //数组2
array1.concat(array2)    //  ['a', 'b', 'c', 'd', '1', '2', '2', '2', '2']

7. push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
console.log(names.push("Lily"));     //  6
console.log(names)    //  ['Peter', 'Vicky', 'JoJo', 'Lucy', 'John', 'Lily']

 8. pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
console.log(names.pop())     //John
console.log(names.pop())     //Lucy
console.log(names.pop())     //JoJo
执行了三次的,每一次把数组最后面的一个元素删除掉

9.shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

 const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
 console.log(names.shift());    //   Peter
 console.log(names)    // ['Vicky', 'JoJo', 'Lucy', 'John']

10. unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度,该方法修改原有数组。

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
console.log(names.unshift("Tom", "CoCo"))     // 7
console.log(names)     //['Tom', 'CoCo', 'Peter', 'Vicky', 'JoJo', 'Lucy', 'John']

11.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。

const fun1 = (element) => element < 10
const array = [1, 2, 3, 4, 5, 6, 7, 11, 22, 33 ,44 ,55 ,66 ,0]
array.filter(fun1)  // [1, 2, 3, 4, 5, 6, 7, 0]

12.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。它返回一个布尔值。

const number = ["1","5","6","1","9","11","7"]
const fun1 = (element) => element < 10
const fun2 = (element) => element < 12
number.every(fun1)  // false
number.every(fun2)  // true

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

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const fun1 = (element)=> element > 3
array.find(fun1)    // 5

14.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const fun1 = (element)=> element > 3
array.findIndex(fun1)    //  3

15.forEach() 方法对数组的每个元素执行一次给定的函数。

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const fun1 = (element) => console.log(element)
array.forEach(fun1)      //  遍历输出array的每一个元素

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

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const fun1 = (element) => element * 2
console.log(array.map(fun1))        //[2, 4, 6, 10, 12, 14, 16, 2, 6]

       forEach() 的返回值并不是 array , 同时会改变原始的数组的值,而 map() 会返回一个全新的数组,原本的数组不受到影响

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

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
console.log(array.includes(2));     //true
console.log(array.includes(0));     //false

18.some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const result = (element) => element < 0
console.log(array.some(result))     // false
console.log(array.some(element => element > 7))   // true

     这个some()要与includes()方法区别开

19.reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。 这个方法可以是作为求传入个任意的数字的求和之类的问题

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3] 
const result = array.reduce((previousValue,currentValue)=>{   //previousValue 是上一次调用的返回值, currentValue 是当前正在处理的元素
        return previousValue + currentValue
console.log(result);    //   36

20.reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
names.reverse()   //['John', 'Lucy', 'JoJo', 'Vicky', 'Peter']    注意 names 的此时的数组元素的位置

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

const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
console.log(names.slice(0,2))   // ['Peter', 'Vicky']
console.log(names.slice(1,4))   // ['Vicky', 'JoJo', 'Lucy']

22.sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

const array = [1, 2, 3, 5, 6, 7, 8, 1, 3]
const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
console.log(array.sort())    //  [1, 1, 2, 3, 3, 5, 6, 7, 8]
console.log(names.sort())    // ['JoJo', 'John', 'Lucy', 'Peter', 'Vicky']

23.splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

// splice(start, deleteCount, items)   start 表示开始的下标,deleteCount 移除的个数 ,items 插入的内容
const names = ["Peter", "Vicky", "JoJo", "Lucy", "John"]
names.splice(1, 0, "CoCo")
console.log(names)      //['Peter', 'CoCo', 'Vicky', 'JoJo', 'Lucy', 'John']
names.splice(0,1,"Tom")
console.log(names)     //['Tom', 'CoCo', 'Vicky', 'JoJo', 'Lucy', 'John']

以上就是一些Array数组常用的方法了,虽然有带点多,但是记得有这个方法,以后就可以提高代码的编写效率了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值