ES6中Array新增的API

布满荆棘的人生 2023-07-21 08:43 15阅读 0赞

在 `ES6` 中新增了 `Array` 的一些 `API` ，在此处记录一下。

### 文章目录 ###

*  静态方法
 *   *  Array.of() 创建数组
     *  Array.from() 将类数组转换为数组
 *  实例方法
 *   *  find(callback) 查找满足条件的元素
     *  findIndex(callback) 返回满足条件的元素的下标
     *  fill(data) 填充数据
     *  copyWithin(target,\[start\],\[end\]) 在数组内复制
     *  includes() 判断是否存在目标值

# 静态方法 #

## Array.of() 创建数组 ##

const arr = Array(1, 2, 3, 4, 5);
    // arr = [1, 2, 3, 4, 5]

## Array.from() 将类数组转换为数组 ##

var a = { 
        '1': 'hello',
        '2': 'javascript',
        '4': 'rabbit',
        length: 5
    };
    
    // 使用Array.form()之前
     const result = Array.prototype.slice.call(a, 0);
     
    // 使用Array.form()
    const result = Array.from(a);
    
    // result => [undefined, "hello", "javascript", undefined, "rabbit"]

# 实例方法 #

## find(callback) 查找满足条件的元素 ##

通过 `find` 函数可以快速的查找数组中的内容

const arr = [{ 
        id: 1,
        name: 'crazy'
    }, { 
        id: 2,
        name: 'rabbit'
    }]
    
    const result = arr.find(item => item.id == 2)
    // result => {id: 2, name: "rabbit"}

## findIndex(callback) 返回满足条件的元素的下标 ##

通过 `find` 函数可以返回数组中的内容的索引

const arr = [{ 
        id: 1,
        name: 'crazy'
    }, { 
        id: 2,
        name: 'rabbit'
    }]
    
    const resultIndex = arr.findIndex(item => item.id == 2)
    // resultIndex => 1

## fill(data) 填充数据 ##

以相同的数据填充数组

const arr = new Array(5);
    arr.fill("Rabbit")
    
    // arr => ["Rabbit", "Rabbit", "Rabbit", "Rabbit", "Rabbit"]

## copyWithin(target,\[start\],\[end\]) 在数组内复制 ##

复制数组后再修改数组的内容，可传递三个参数，

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>target</td> 
   <td>从该位置开始替换数据</td> 
  </tr> 
  <tr> 
   <td>[start]</td> 
   <td>从该位置开始读取数据</td> 
  </tr> 
  <tr> 
   <td>[target]</td> 
   <td>到该位置前停止读取数</td> 
  </tr> 
 </tbody> 
</table>

const arr = [1, 2, 3, 4, 5, 6];

**从第 2 位置开始替换数据**

arr.copyWithin(2);
    
    // arr => [1, 2, 1, 2, 3, 4]

**从第 2 位置开始替换数据，数据从第 1 位开始**

arr.copyWithin(2, 1);
    
    // arr => [1, 2, 2, 3, 4, 5]

**从第 2 位开始代替数据，数据从第 0 位开始，到第 3 位结束**

arr.copyWithin(2, 0, 3);
    
    // arr => [1, 2, 1, 2, 3, 6]

## includes() 判断是否存在目标值 ##

此 `API` 是在 `ES2016` 中提出，因为比较常用，特此记录一下，是用于判断是否存在目标值。

const arr = [12, 5, 7, 8456, 0, 6, NaN, 71];
    console.log(arr.includes(NaN)); // true