JS中数组常用方法总结

1.Array.map()

此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

1

2

3

4

let arr = [1, 2, 3, 4, 5]

let newArr = arr.map(x => x*2)

//arr= [1, 2, 3, 4, 5]   原数组保持不变

//newArr = [2, 4, 6, 8, 10] 返回新数组

2.Array.forEach()

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

1

2

3

let arr = [1, 2, 3, 4, 5]

let arr2 = []

   arr.forEach((x,i) => arr2.push(x+i))

   // arr = [1, 3, 5, 7,9]  数组改变,注意和map区分

3..Array.filter()

此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回

1

2

3

4

let arr = [1, 2, 3, 4, 5]

    const isBigEnough = value => value >= 3

    let newArr = arr.filter(isBigEnough )

    //newArr = [3, 4, 5] 满足条件的元素返回为一个新的数组

4..Array.every()

此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false:

1

2

3

4

5

let arr = [1, 2, 3, 4, 5]

    const isLessThan4 => value => value < 4

    const isLessThan6 => value => value < 6

    arr.every(isLessThan4 ) //false

    arr.every(isLessThan6 ) //true

5.Array.some()

 此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false:

1

2

3

4

5

let arr= [1, 2, 3, 4, 5]

    const isLessThan4 = value => value < 4

    const isLessThan6 = value => value > 6

    arr.some(isLessThan4 ) //true

    arr.some(isLessThan6 ) //false

6.Array.reduce()

 此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:

1

2

3

4

5

let arr = [1, 2, 3, 4, 5]

   const add = (a, b) => a + b

   let sum = arr.reduce(add)

   //sum = 15  相当于累加的效果

   与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的

7.Array.push()

 此方法是在数组的后面添加新加元素,此方法改变了数组的长度:

8.Array.pop()

 此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:

1

2

3

4

let arr = [1, 2, 3, 4, 5]

    arr.pop()

    console.log(arr) //[1, 2, 3, 4]

    console.log(arr.length) //4

9.Array.shift()

 此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度:

1

2

3

4

let arr = [1, 2, 3, 4, 5]

    arr.shift()

    console.log(arr) //[2, 3, 4, 5]

    console.log(arr.length) //4 

10.Array.unshift()

 此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:

1

2

3

4

let arr = [1, 2, 3, 4, 5]

    arr.unshift(6, 7)

    console.log(arr) //[6, 7, 1, 2, 3, 4, 5]

    console.log(arr.length) //7 

11.Array.isArray()

 判断一个对象是不是数组,返回的是布尔值

12.Array.concat()

 此方法是一个可以将多个数组拼接成一个数组:

1

2

3

4

let arr1 = [1, 2, 3]

      arr2 = [4, 5]

  let arr = arr1.concat(arr2)

  console.log(arr)//[1, 2, 3, 4, 5]

13.Array.toString()

 此方法将数组转化为字符串:

1

2

3

let arr = [1, 2, 3, 4, 5];

   let str = arr.toString()

   console.log(str)// 1,2,3,4,5

14.Array.join()

  此方法也是将数组转化为字符串:

1

2

3

4

5

6

7

let arr = [1, 2, 3, 4, 5];

   let str1 = arr.join()

   let str2 = arr.join(',')

   let str3 = arr.join('##')

   console.log(str1)// 12345

   console.log(str2)// 1,2,3,4,5

   console.log(str3)// 1##2##3##4##5

15.Array.splice(开始位置, 删除的个数,要插入的元素)

       万能方法,可以实现增删改:该方法会改变原始数组。没有返回值
     

1

2

3

4

5

6

7

let arr = [1, 2, 3, 4, 5];

     arr.splice(2, 0,'haha') //[1, 2, 'haha', 3, 4, 5]新增一个元素

     let arr2 = arr.splice(2, 3)  //[1, 2] 删除三个元素

     let arr3 = arr.splice(2, 1,'haha') //[1, 2, 'haha', 4, 5] 替换一个元素

     

 

### JavaScript 中数组常用方法及其最新用法 以下是关于 JavaScript 数组的一些最常使用的方法以及它们的现代实现方式: #### 1. `map` 方法方法创建一个新数组,其结果是对调用数组中的每个元素执行回调函数的结果。此方法不会改变原始数组。 ```javascript const numbers = [1, 2, 3]; const doubledNumbers = numbers.map(num => num * 2); console.log(doubledNumbers); // 输出: [2, 4, 6] ``` 这种方法广泛用于数据转换操作[^1]。 #### 2. `filter` 方法 通过指定条件过滤原数组中的某些项并返回一个新的数组。 ```javascript const ages = [32, 18, 25, 17, 40]; const adults = ages.filter(age => age >= 18); console.log(adults); // 输出: [32, 18, 25, 40] ``` #### 3. `reduce` 方法 这是一个强大的工具,可以用来计算总和、平均数或者其他累积值。 ```javascript var arr = [1, 2, 3, 4, 5]; var sum = arr.reduce((prev, cur) => { return prev + cur }, 0); console.log(sum); // 输出: 15 ``` 上述例子展示了如何利用 reduce 来求数组之和。 #### 4. `forEach` 方法 遍历数组并对每一项执行一次给定的函数。注意它不支持链式调用因为没有返回新的数组实例。 ```javascript let colors = ['red', 'green', 'blue']; colors.forEach(color => { console.log(color.toUpperCase()); }); // 输出依次为 RED GREEN BLUE ``` #### 5. 扩展运算符 (`...`) 扩展语法允许表达式在地方展开多个单独的元素。这通常被应用于复制或者合并两个以上的数组。 ```javascript let firstArray = [1, 2, 3], secondArray = [4, 5, 6]; let combinedArray = [...firstArray, ...secondArray]; console.log(combinedArray); // 结果将是 [1, 2, 3, 4, 5, 6] ``` #### 6. `find` 和 `findIndex` 方法 分别查找满足测试的第一个元素或索引位置。 ```javascript const users = [{id: 1}, {id: 2}]; const userWithIdTwo = users.find(user => user.id === 2); console.log(userWithIdTwo); // 输出对象{id: 2} const indexUserWithIdOne = users.findIndex(user => user.id === 1); console.log(indexUserWithIdOne); // 输出数字0 ``` 以上列举了一些常见的 JavaScript 数组处理技术,并附带了最新的 ES6+ 特性的应用案例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值