JS数组（二） - ES6 数组的扩展

古城微笑少年丶 2023-06-04 06:58 13阅读 0赞

在《[Javascript中的数组-Array对象][Javascript_-Array]》中，已经介绍了JS中数组的一些概念和方法，其中已经提了几个ES6扩展的新方法，这一篇就继续来详细的了解ES6 数组的扩展。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

## 一、新增的两个静态方法： ##

##### 1、of方法 用于将一个或多个值转换成数组 参数是转换后数组的元素 #####

of方法看起来和用new Array()构造数组相似，但是用new Array()的时候，如果传入一个参数，表示生成多大的数组。

//多个参数结果相同
    console.log(new Array(1,2,3));  //[1, 2, 3]
    console.log(Array.of(1,2,3));   //[1, 2, 3]
    //一个参数结果不同 
    console.log(new Array(2));      //[empty × 2]
    console.log(Array.of(2));       //[2]

##### 2、from方法 #####

from函数用来将其他2种对象转换成数组。  
1、类数组对象  
类数组对象指有length属性，元素属性名是数值或者可以转换成数值的字符的对象。  
2、有Iterator接口的对象，比如：Set，Map

let obj={ 
        0: 'a',
        1: 'b',
        2: 'c',
        length:3
      };
      console.log(Array.from(obj));   //["a", "b", "c"]
      console.log(Array.from(new Set(['a','b','c'])));  //["a", "b", "c"]

## 二、新增的实例方法 ##

#### find( ) ####

返回数组中第一个满足要求的元素的值，如果没有满足要求的元素，则返回undefined，参数同样是一个函数。

let arr1=[1,2,3,4,5];
    let res=arr1.find(function (value,index,arr1) { 
      return value>3;
    });
    console.log(arr1);  //[1, 2, 3, 4, 5]
    console.log(res);  //4

#### findIndex( ) ####

返回数组中第一个满足要求的元素的索引，如果没有满足要求的元素，则返回-1，参数同样是一个函数。

var arr1=[1,2,3,4,5];
    var res=arr1.findIndex(function (value,index,arr1) { 
      return value>3;
    });
    console.log(arr1);  //[1, 2, 3, 4, 5]
    console.log(res);  //3

#### includes() ####

判断一个数组是否包含一个指定的值，返回 true 或 false

var arr1=[1,2,3,4,5];
    console.log(arr1.includes(3));  //true

#### fill( ) ####

用指定的值，填充到数组

array.fill(value, start, end)

参数：① value 必需。填充的值。② start 可选。开始填充位置。③ end 可选。停止填充位置 (默认为 array.length)

var arr1=[1,2,3,4,5];
    var arr2=[1,2,3,4,5];
    arr1.fill('a',1,4);
    arr2.splice(1,3,'a');
    console.log(arr1);   // [1, "a", "a", "a", 5]
    console.log(arr2);   // [1, "a", "a", "a", 5]

#### keys() ####

对数组的键(实际就是索引)进行遍历，返回一个遍历器,可以用for…of对其进行遍历。

let arr1=['a','b','c'];
      console.dir(arr1.keys());  //Array Iterator
      for(let index of arr1.keys()){ 
        console.log('index:'+index+',value:'+arr1[index]);
      }

#### values() ####

对数组的元素值进行遍历，返回一个遍历器,可以用for…of对其进行遍历。

let arr1=['a','b','c'];
      console.dir(arr1.values());  //Array Iterator
      for(let value of arr1.values()){ 
        console.log('value:'+value);
      }

#### entries() ####

对数组的键值对进行遍历，返回一个遍历器，可以用for…of对其进行遍历。

var arr1=['a','b','c'];
      console.dir(arr1.entries());  //Array Iterator
      for(let [index,value] of arr1.entries()){ 
        console.log('index:'+index+',value:'+value);
      }

[Javascript中的数组-Array对象][Javascript_-Array]

[Javascript_-Array]: https://blog.csdn.net/dreamingbaobei3/article/details/101604123
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20230601/e9af5ba0e438415ea237382fdb11f893.png