JS数组操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56079094/article/details/115727507

数组进阶二

ECMAScript 5定义了数组方法来遍历、映射、过滤、检测、简化和搜索数组。
forEach()
方法从头至尾遍历数组，为每个元素调用指定的函数.
特点：

有多少个元素就执行几次。
不会改变原数组

有三个参数：

当前正在遍历的元素 value
当前正在遍历元素的索引 index
当前正在遍历的数组 array

let a=[1,2,3]
a.forEach(function(x,y,z){
    console.log(x+","+y+","+z);
})
//1, 0, 1,2,3
//2, 1, 1,2,3
//3, 2, 1,2,3

map()
方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。
特点:

不会改变原数组
对没有值的数组元素不执行回调函数

有三个参数：

当前正在遍历的元素 value
当前正在遍历元素的索引 index(在这个方法中一般省略）
当前正在遍历的数组 array(在这个方法中一般省略）

let a=[1,2,3]
var aa=a.map(function(value){
    return value*2
})
//aa= [2, 4, 6]

filter
创建一个包含通过测试的数组元素的新数组。
说明：

不改变原数组

有三个参数：

当前正在遍历的元素 value
当前正在遍历元素的索引 index(在这个方法中一般省略）
当前正在遍历的数组 array(在这个方法中一般省略）

let a=[1,2,3]
var aaa=a.filter(function(value){
    return value<=2;
})
//aaa= [1, 2]

rudece()
每个数组元素都参与运行，以生成一个值。
说明：

从左到右进行
对原数组没有影响

有四个参数：
1.总值（初始值/先前返回的值）(total)
2.项目值（value）
3.项目索引（index）
4.数组本身（array）

let numbers=[45,4,9,16,25]
numbers.reduce(function(total,value){
    return total+value;
})
//99

可以设置初始值
numbers.reduce(function(total=1,value){
    return total+value;
},100)
//199

.some()
用于检测数组元素是否满足指定条件
如果有一个元素满足 ---------返回true 并且剩余元素不再进行检测
如果都不满足------------返回false
说明

1.不影响原数组
2.不检查空位

有三个参数：

当前正在遍历的元素 value
当前正在遍历元素的索引 index(在这个方法中一般省略）
当前正在遍历的数组 array(在这个方法中一般省略）

//检测数组中有无大于80的数
var a=[11,50,40,3,5,6,80,90]
a.some(function(value,index,array){
    return value>80
})
//true

every()
用于检测数组元素是否都满足条件
如果有一个元素不满足-----------返回false，不再检测后面的元素
都满足------返回true

var a=[1,2,3,4,5,6]
a.every(function(value){
    return value<8;
})
//true

ES6中新增加的7个方法
copyWith()
会在当前数组内部将指定位置的元素复制到其他位置（会覆盖原有元素），返回当前数组。
说明：

会改变原数组

有三个参数：

1.被覆盖元素的起始位置（target）
2.元素复制的起始位置
3.元素复制的结束位置(不包括）

//将数组索引为2-4的元素复制 从索引为0处覆盖
let arr = [1, 2, 3, 4, 5];
 console.log(arr.copyWithin(0, 2, 4), arr);
  //[3, 4, 3, 4, 5] 
  //[3, 4, 3, 4, 5]

find()、findindex()
找出第一个符合条件的数组元素（或索引）
有三个参数：

当前正在遍历的元素 value
当前正在遍历元素的索引 index
当前正在遍历的数组 array

//返回值大于2且索引大于3的数组元素值
let arr = [1, 2, 3, 4, 5];
let b = arr.find(function (value, index, arr) {
    return value > 2 && index > 3;
  });
console.log(b);
//5

fill( )
使用给定值填充一个数组（相当于覆盖）
有三个参数：

用于填充的值
填充位置的起始位置
填充位置的结束位置

let arr = [1, 2, 3, 4, 5];
arr.fill(100, 1, 3);
console.log(arr);
//[1, 100, 100, 4, 5]

entries( )、keys( )和values( )，用于遍历数组。
includes( )，判断数组中是否包含给定的值，与字符串的includes方法类似。

Array.from()
构造函数方法，用于将两类对象转化为真正的数组。

类似数组的对象
可遍历的对象

  <body>
    <ul id="list-nums">
      <li>100</li>
      <li>200</li>
      <li>300</li>
    </ul>
    <script>
      let lis = document.querySelectorAll("#list-nums li");
      console.log(lis);
      let items = Array.from(lis, function (item) {
        return item.textContent;
      });
      console.log(items);
    </script>
  </body>

Array.of()
将一组值转化为数组。

let nums = Array.of(...arr, 7, 8, 9);
console.log(nums);

数组进阶(二)

数组进阶二