ES6-map、filter、find、findIndex、some等数组函数

深藏阁楼爱情的钟 2021-09-08 19:16 922阅读 0赞

map方法：可以简单的理解为映射

1 var arr=[1,2,3,4];
    2 console.log( arr.map((n)=>n*n) );//[1, 4, 9, 16]
    3 console.log( arr.map((n)=>n-1) );//[0, 1, 2, 3]

从数组\[1，4，-5，10\]当中给我找出小于0的数字。在你看到这里的时候相信你也是对箭头函数了解，(n)=>n\*n 就不用赘述了。

filter方法：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 var users = [
     2   {name: "张含韵", "email": "zhang@email.com"},
     3   {name: "江一燕",   "email": "jiang@email.com"},
     4   {name: "李小璐",  "email": "li@email.com"}
     5 ];
     6 //获取所有人的email
     7 var emails=users.map(user=>user.email) 
     8 console.log(emails.join(',')) //"zhang@email.com", "jiang@email.com", "li@email.com"
     9 //获取指定人的email
    10 var liEmail=emails.filter(email=>/^li/.test(email))
    11 console.log(liEmail.join('')) //li@email.com

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

获取用户列表里的所有用户的email，map帮我们做到了，map方法通过传一个形参，这个形参就代表users里的每一项，map内部通过遍历所有的用户项，获取到每个用户项的email，再push到一个数组，再作为值给我们返回。第二步，我们需要获取指定人的email，filter方法登场了，通过过滤筛选email是数组，给我们返回结果，筛选方法得我们定，这里筛选方法是以正则匹配到li开头的那一个email，然后返回。

find方法：

1 [1, 4, -5, 10].find((n) => n < 0)    // -5

find方法比较好理解，这里的参数n代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。

findIndex方法：find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。看一个例子：

1 [1, 4, -5, 10].findIndex((value,index,arr) => value < 0)  // 2

在这个例子当中，value代表这个数组的每一项，1，4，-5，10。index代表每一项的索引值，arr代表这个数组\[1, 4, -5, 10\]，然后我们需要返回的是＜0的这一项的索引值，即是2了。

这4个方法内部机制都有一个遍历过程，比起forEach确实简洁多了。

接着补充ES6-some( ) 和 every( )方法的讲解:

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1     //every()
     2     let numbers = [2, 4, 10, 4, 8];
     3     let a = numbers.every((item,index)=>{
     4         if(item%2===0){
     5             return true;
     6         }else{
     7             return false;
     8         }
     9     });
    10     console.log(a)
    11 
    12     //some()
    13     let b=numbers.some((item,index)=>{
    14          if(item%3===0){
    15             return true;
    16         }else{
    17             return false;
    18         }
    19     })
    20     console.log(b)

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

some 英语翻译为一些,every翻译为所有,每个，所以some方法 只要其中一个为true 就会返回true的，相反，every（）方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；every（）和 some（）目的：确定数组的所有成员是否满足指定的测试。具体请参考MDNhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/some

总结一下：

后续补充：最近看很多小伙伴都在学习ES6，比如ES6中的map，在ES5中是怎么实现的呢？

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 /*
      2  * MAP对象，实现MAP功能
      3  *
      4  * 接口：
      5  * size()                     获取MAP元素个数
      6  * isEmpty()                  判断MAP是否为空
      7  * clear()                    删除MAP所有元素
      8  * put(key, value)            向MAP中增加元素（key, value) 
      9  * remove(key)                删除指定KEY的元素，成功返回True，失败返回False
     10  * get(key)                   获取指定KEY的元素值VALUE，失败返回NULL
     11  * element(index)             获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
     12  * containsKey(key)           判断MAP中是否含有指定KEY的元素
     13  * containsValue(value)       判断MAP中是否含有指定VALUE的元素
     14  * values()                   获取MAP中所有VALUE的数组（ARRAY）
     15  * keys()                     获取MAP中所有KEY的数组（ARRAY）
     16  *
     17  * 例子：
     18  * var map = new Map();
     19  *
     20  * map.put("key", "value");
     21  * var val = map.get("key")
     22  * ……
     23  *
     24  */
     25 function Map() {
     26     this.elements = new Array();
     27 
     28     //获取MAP元素个数
     29     this.size = function() {
     30         return this.elements.length;
     31     };
     32 
     33     //判断MAP是否为空
     34     this.isEmpty = function() {
     35         return (this.elements.length < 1);
     36     };
     37 
     38     //删除MAP所有元素
     39     this.clear = function() {
     40         this.elements = new Array();
     41     };
     42 
     43     //向MAP中增加元素（key, value) 
     44     this.put = function(_key, _value) {
     45         this.elements.push( {
     46             key : _key,
     47             value : _value
     48         });
     49     };
     50 
     51     //删除指定KEY的元素，成功返回True，失败返回False
     52     this.removeByKey = function(_key) {
     53         var bln = false;
     54         try {
     55             for (i = 0; i < this.elements.length; i++) {
     56                 if (this.elements[i].key == _key) {
     57                     this.elements.splice(i, 1);
     58                     return true;
     59                 }
     60             }
     61         } catch (e) {
     62             bln = false;
     63         }
     64         return bln;
     65     };
     66     //删除指定KEY的所有元素
     67     this.removeAllByKey=function(_key){
     68         for (var i = this.elements.length - 1; i >= 0; i--) {
     69             if (this.elements[i].key == _key) {
     70                 this.elements.splice(i, 1);
     71             }
     72         }
     73     }
     74     
     75     //删除指定VALUE的元素，成功返回True，失败返回False
     76     this.removeByValue = function(_value) {//removeByValueAndKey
     77         var bln = false;
     78         try {
     79             for (i = 0; i < this.elements.length; i++) {
     80                 if (this.elements[i].value == _value) {
     81                     this.elements.splice(i, 1);
     82                     return true;
     83                 }
     84             }
     85         } catch (e) {
     86             bln = false;
     87         }
     88         return bln;
     89     };
     90     
     91     //删除指定VALUE的元素，成功返回True，失败返回False
     92     this.removeByValueAndKey = function(_key,_value) {
     93         var bln = false;
     94         try {
     95             for (i = 0; i < this.elements.length; i++) {
     96                 if (this.elements[i].value == _value && this.elements[i].key == _key) {
     97                     this.elements.splice(i, 1);
     98                     return true;
     99                 }
    100             }
    101         } catch (e) {
    102             bln = false;
    103         }
    104         return bln;
    105     };
    106 
    107     //获取指定KEY的所有元素值VALUE，以数组形式返回,失败返回false
    108     this.get = function(_key) {
    109         var arr=[];
    110         try {
    111             for (i = 0; i < this.elements.length; i++) {
    112                 if (this.elements[i].key == _key) {
    113                     arr.push(this.elements[i].value)
    114                 }
    115             }
    116             return arr;
    117         } catch (e) {
    118             return false;
    119         }
    120         return false;
    121     };
    122 
    123     //获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
    124     this.element = function(_index) {
    125         if (_index < 0 || _index >= this.elements.length) {
    126             return null;
    127         }
    128         return this.elements[_index];
    129     };
    130 
    131     //判断MAP中是否含有指定KEY的元素
    132     this.containsKey = function(_key) {
    133         var bln = false;
    134         try {
    135             for (i = 0; i < this.elements.length; i++) {
    136                 if (this.elements[i].key == _key) {
    137                     bln = true;
    138                 }
    139             }
    140         } catch (e) {
    141             bln = false;
    142         }
    143         return bln;
    144     };
    145 
    146     //判断MAP中是否含有指定VALUE的元素
    147     this.containsValue = function(_value) {
    148         var bln = false;
    149         try {
    150             for (i = 0; i < this.elements.length; i++) {
    151                 if (this.elements[i].value == _value) {
    152                     bln = true;
    153                 }
    154             }
    155         } catch (e) {
    156             bln = false;
    157         }
    158         return bln;
    159     };
    160     
    161     //判断MAP中是否含有指定key,VALUE的元素
    162     this.containsObj = function(_key,_value) {
    163         var bln = false;
    164         try {
    165             for (i = 0; i < this.elements.length; i++) {
    166                 if (this.elements[i].value == _value && this.elements[i].key == _key) {
    167                     bln = true;
    168                 }
    169             }
    170         } catch (e) {
    171             bln = false;
    172         }
    173         return bln;
    174     };
    175 
    176     //获取MAP中所有VALUE的数组（ARRAY）
    177     this.values = function() {
    178         var arr = new Array();
    179         for (i = 0; i < this.elements.length; i++) {
    180             arr.push(this.elements[i].value);
    181         }
    182         return arr;
    183     };
    184     //获取MAP中所有指定VALUE的元素数组（ARRAY）
    185     this.getAllByValue=function(_value){
    186         var arr=[];
    187         for (var i = this.elements.length - 1; i >= 0; i--) {
    188             if (this.elements[i].value == _value) {
    189                 arr.push(this.elements[i]);
    190             }
    191         }
    192         return arr;   
    193     }
    194     
    195     //获取MAP中指定key的所有VALUE的数组（ARRAY）
    196     this.valuesByKey = function(_key) {
    197         var arr = new Array();
    198         for (i = 0; i < this.elements.length; i++) {
    199             if (this.elements[i].key == _key) {
    200                 arr.push(this.elements[i].value);
    201             }
    202         }
    203         return arr;
    204     };
    205 
    206     //获取MAP中所有KEY的数组（ARRAY）
    207     this.keys = function() {
    208         var arr = new Array();
    209         for (i = 0; i < this.elements.length; i++) {
    210             arr.push(this.elements[i].key);
    211         }
    212         return arr;
    213     };
    214     
    215     //获取key通过value
    216     this.keysByValue = function(_value) {
    217         var arr = new Array();
    218         for (i = 0; i < this.elements.length; i++) {
    219             if(_value == this.elements[i].value){
    220                 arr.push(this.elements[i].key);
    221             }
    222         }
    223         return arr;
    224     };
    225     
    226     //获取MAP中所有KEY的数组（ARRAY）key有相同的 取出的key为去重后的 数组里去重后的key的数组
    227     this.keysRemoveDuplicate = function() {
    228         var arr = new Array();
    229         for (i = 0; i < this.elements.length; i++) {
    230             var flag = true;
    231             for(var j=0;j<arr.length;j++){
    232                 if(arr[j] == this.elements[i].key){
    233                     flag = false;
    234                     break;
    235                 } 
    236             }
    237             if(flag){
    238                 arr.push(this.elements[i].key);
    239             }
    240         }
    241         return arr;
    242     };
    243 }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

如果你需要兼容IE，用这个ES5写的map应该没有问题，明白了ES5怎么实现ES6中的map，自然也就懂了，后续货继续更新ES6其他知识点，虽然我也很菜，如发现有BUG的小伙伴，一定记得给我留言，万分感激。

后续补充:

传统写法和ES6写法对比:

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 var users = [
     2   {name: "张含韵", "email": "zhang@email.com"},
     3   {name: "江一燕",   "email": "jiang@email.com"},
     4   {name: "李小璐",  "email": "li@email.com"}
     5 ];
     6 
     7 function valuesByKey(_key) {
     8   //定义个空数组
     9   var arr = [];
    10   //循环遍历users数组
    11   for (i = 0; i < users.length; i++) {
    12     //只要是key值等于_key的,对应的值都push进arr
    13     arr.push(users[i][_key]);
    14   }
    15   //返回arr
    16   return arr;
    17 }
    18 
    19 var arr=users.map((user)=>user.name);
    20 console.log(arr)//["张含韵", "江一燕", "李小璐"]
    21 console.log(valuesByKey('name')) //["张含韵", "江一燕", "李小璐"]

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

数组的创建

数组的创建方式一

var arr=\[\];  
console.[log][](arr)//\[\]

数组的创建方式二

var arr=new [Array][]();  
console.[log][](arr)//\[\]  
  
var arr1=new [Array][](1);可以接收一个参数，参数表示这个数组的长度，没有值就是[empty][]占位  
console.[log][](arr1)//\[empty\]

数组的清空

var arr =\[1,2,3,7,8,33,55\]  
arr.length=0;//清空数组的方法一，让length等于0；  
console.[log][](arr)//\[\]

var arr =\[1,2,3,7,8,33,55\]  
arr=\[\];//清空数组的方法二，给arr赋值为空数组即可  
console.[log][](arr)//\[\]

数组的首位之前追加

//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度,直接修改原有的数组  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.unshift(99,88))//9  
console.[log][](arr)// \[99, 88, 1, 2, 3, 7, 8, 33, 55\]

数组的末尾之后追加

//push() 方法可向数组的末尾添加一个或更多元素，并返回新的长度,直接修改原有的数组  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.push(88))//8  
console.[log][](arr)//\[1, 2, 3, 7, 8, 33, 55, 88\]

数组的首位删除

//shift() 方法用于把数组的第一个元素从其中删除，并返回被删除的值,直接修改原有的数组  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.shift())//1  
console.[log][](arr)//\[2, 3, 7, 8, 33, 55\]

数组的末位删除

//pop() 方法用于删除数组的最后一个元素,并返回被删除的值,直接修改原有的数组  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.pop())//55  
console.[log][](arr)//\[1,2, 3, 7, 8, 33\]

数组的替换 | 插入 | 删除

数组的替换

//替换 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.splice(1,1,'sanrenbiji'))//'sanrenbiji'替换掉数组索引值为1的值，直接修改原有的数组  
console.[log][](arr)//\[1, "sanrenbiji", 3, 7, 8, 33, 55\]

数组的插入

//插入 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换  
var arr =\[1,2,3,7,8,33,55\]  
arr.splice(1,0,'sanrenbiji')//'sanrenbiji'插入到索引值为1的值前面,原有索引值为1的往后排变成2，直接修改原有的数组  
console.[log][](arr)//\[1, "sanrenbiji", 2, 3, 7, 8, 33, 55\]

数组的删除

//删除 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.splice(1,1))// \[2\] 从数组索引值为1开始删除1个，返回被删除的值，直接修改原有的数组  
console.[log][](arr)//\[1, 3, 7, 8, 33, 55\]

//delete 也可以删除数组的值,删除数组的值后被empty代替  
var arr=\[1,2,3,4\]  
delete arr\[1\]  
console.[log][](arr)//\[1, empty, 3, 4\]  
console.[log][](arr.length)//4  
//只删除值长度不改变

数组截取 - 截取数组的值，以数组形式返回，不影响原始数组

var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.slice(1,3))//\[2,3\]  截取从arr数组的索引值2开始，到索引值3结束，包含开始索引值的值，不包含结束索引值的值  
console.[log][](arr)//\[1,2,3,7,8,33,55\]

数组合并

var arr =\[1,2,3\]  
var arr1=\[4,5,6\]  
var arr2=\[7,8,9\]  
console.[log][](arr.concat(arr1,arr2)) //\[1, 2, 3, 4, 5, 6, 7, 8, 9\]

数组排序

arr.[sort][]();//数组排序，默认以字符串大小编码排序  
arr.[sort][](function( a , b )\{ return a – b \});//标准排序传入比较函数，  
arr.reverse();//数组前后调换位置(倒置)

数组转换成字符串

var arr =\['我','可','劲','学'\];  
console.[log][](arr.[join][](''))//我可劲学  
//把数组变成字符串

数组随机排序

arr.[sort][](function\{  
  return Math.random() > 0.5 ? -1 : 1;  
\});

数组的遍历

var arr =\[1,2,3,7,8,33,55\]  
for(var i=0;i<arr.length;i++)\{  
    console.[log][](arr\[i\])  
    console.[log][](i)  
\}

var arr =\[1,2,3,7,8,33,55\]  
arr.forEach(function(e,i)\{  
    console.[log][](e)  
    console.[log][](i)  
\})

var arr =\[1,2,3,7,8,33,55\]  
arr.map(function(e,i)\{  
    console.[log][](e)  
    console.[log][](i)  
\})

//for in 遍历数组可以输出数组的索引值和对应的值  
var arr =\[1,2,3,7,8,33,55\]  
for(var i in arr)\{  
    console.[log][]('索引值'+i+'的值是:'+arr\[i\])  
\}

//for of 是ES6的方法,只返回每一项的值  
var arr =\[1,2,3,7,8,33,55\]  
for(var v of arr)\{  
    console.[log][](v)  
\}

数组中值的索引值查找

//从数组第一项往后查找给出的值,找到第一个就立即返回该值在数组里的索引值,如果查到最后都没有找到就返回-1  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.indexOf(3))//2  
console.[log][](arr.indexOf(1000))//-1  
PS:应用场景之一:检查是否包含某个值;ES7的includes()也可以检查是否包含某个值

//从数组最后一项往前查找给出的值,找到第一个就立即返回该值在数组里的索引值,如果查到最后都没有找到就返回-1  
var arr =\[1,2,3,7,8,33,55\]  
console.[log][](arr.lastIndexOf(3))//2  
console.[log][](arr.lastIndexOf(1000))//-1

数组值的'过滤'功能

//filter():过滤功能,数组中的每一项运行给定函数,返回满足条件组成的数组  
var arr =\[1,2,3,-1,-2,-3\]  
var filterRes=arr.filter(function(item,index)\{  
    return item<0  
\})  
console.[log][](filterRes)//\[-1, -2, -3\]  
console.[log][](arr)//\[1, 2, 3, -1, -2, -3\]

数组值的累加(做一个累加器)

/\*  
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)  
total:       必需。初始值, 或者计算结束后的返回值。  
currentValue:必需。当前元素  
currentIndex:可选。当前元素的索引  
arr:         可选。当前元素所属的数组对象。  
initialValue:可选。传递给函数的初始值  
  
注意:如果是空数组会报错,翻译大概就是空数组没有有效值  
\*/  
var arr =\[1,2,3\]  
var sum=arr.reduce(function(total, currentValue, currentIndex, arr)\{  
    return total+=currentValue  
\})  
console.[log][](sum)//6  
console.[log][](arr)//\[1,2,3\]

var arr =\[1,2,3\]  
var sum=arr.reduce(function(total, currentValue, currentIndex, arr)\{  
    return total+=currentValue  
\},10)  
console.[log][](sum)//16  
console.[log][](arr)//\[1,2,3\]

/\*  
reduceRight:从数组的最后一项开始,向前遍历到第一项 ,其他和reduce一样  
语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)  
total:必需。初始值, 或者计算结束后的返回值。  
currentValue:必需。当前元素  
currentIndex:可选。当前元素的索引  
arr:可选。当前元素所属的数组对象。  
initialValue:可选。传递给函数的初始值  
注意:如果是空数组会报错,翻译大概就是空数组没有有效值  
\*/  
var arr =\[1,2,3\]  
var sum=arr.reduceRight(function(total, currentValue, currentIndex, arr)\{  
    return total+=currentValue  
\})  
console.[log][](sum)//6  
console.[log][](arr)//\[1,2,3\]

数组检测 (检测数组所有元素是否都符合指定条件（通过函数提供）)

/\*  
every()方法测试数组中的所有元素是否都通过了由提供的函数实现的测试。  
every() 方法使用指定函数检测数组中的所有元素：  
    如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。  
    如果所有元素都满足条件，则返回 true。  
every() 不会对空数组进行检测。  
every() 不会改变原始数组。   
对于空数组，它返回true  
语法   :array.every(function(currentValue,index,arr), thisValue)  
currentValue:必须。当前元素的值  
index:可选。当前元素的索引值  
arr:可选。当前元素属于的数组对象  
thisValue:可选的。this执行时使用的值callback。  
\*/  
var arr =\[1,2,3\]  
var checkResult=arr.every(function(currentValue,index,arr)\{  
    if(currentValue<0)\{  
        return false  
    \}else\{  
        return true  
    \}  
\})  
console.[log][](checkResult)//true  
console.[log][](arr)//\[1,2,3\]  
//PS:常应用与全选和全不选,例如购物车案例

/\*  
some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。  
语法:array.some(function(currentValue,index,arr),thisValue)  
currentValue:   必须。当前元素的值  
index:可选。当前元素的索引值  
arr:可选。当前元素属于的数组对象  
thisValue:this执行时使用的值callback。  
空数组返回false  
\*/  
var arr =\[1,2,3\]  
var checkResult=arr.some(function(currentValue,index,arr)\{  
    return currentValue>2  
\})  
console.[log][](checkResult)//true  
console.[log][](arr)//\[1,2,3\]

检查数组中是否存在某个值

var fruits = \['apple', 'banana', 'mango', 'guava'\];  
function checkAvailability(arr, val) \{  
  return arr.some(function(arrVal) \{  
    return val === arrVal;  
  \});  
\}  
console.[log][](checkAvailability(fruits, 'kela'))    // false  
console.[log][](checkAvailability(fruits, 'banana'))  // true

var fruits = \['apple', 'banana', 'mango', 'guava'\];  
console.[log][](fruits.includes('kela'))    // false  
console.[log][](fruits.includes('banana'))  // true

找出第一个符合条件的数组成员

/\*  
find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。  
如果没有符合条件的成员，则返回undefined。如果需要查找元素的位置或元素是否存在于数组中，请使用indexOf()或includes()。  
\*/  
var value=\[1, 4, -5, 10\].find(function(item)\{  
    return item<0  
\})  
console.[log][](value)    // -5  
/\*find方法比较好理解，这里的参数item代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。\*/  
   
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

var index = \[1, 4, -5, 10\].findIndex(function(value,index,arr)\{  
    return value < 0  
\})  
console.[log][](index)  // 2  
/\*在这个例子当中，value代表这个数组的每一项，1，4，-5，10。index代表每一项的索引值，arr代表这个数组\[1, 4, -5, 10\]，然后我们需要返回的是＜0的这一项的索引值，即是2了。\*/

Array.from方法将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>[Array][].form</title>  
</head>  
<style>  
body,ul,li\{margin: 0;padding: 0;\}  
ul\{width: 250px;height: 50px;display: flex;margin: 50px auto;\}  
ul li\{background: pink;width: 25%;text-align: center;line-height: 50px;list-style: none;border: 1px solid \#666\}  
</style>  
<body>  
<ul>  
    <li class="li-1">li-1</li>  
    <li class="li-2">li-2</li>  
    <li class="li-3">li-2</li>  
    <li class="li-4">li-4</li>  
    <li class="li-5">li-5</li>  
</ul>  
<button id="btrn">按钮</button>  
</body>  
<script>  
    /\*Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。\*/  
    let aLi=document.querySelectorAll('ul li');  
    var filterLi=[Array][].from(aLi).filter(function(e)\{  
        return e.textContent=='li-2'  
    \})  
    console.[log][](filterLi)//\[li.li-2, li.li-3\]  
</script>  
</html>

let arrayLike = \{  
    '0': 'a',  
    '1': 'b',  
    '2': 'c',  
    length: 3  
\};  
  
// ES5的写法  
var arr1 = \[\].slice.call(arrayLike); // \['a', 'b', 'c'\]  
  
// ES6的写法  
let arr2 = [Array][].from(arrayLike); // \['a', 'b', 'c'\]

/\*实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。\*/  
// NodeList对象  
let ps = document.querySelectorAll('p');  
[Array][].from(ps).filter(p =>\{  
  return p.textContent.length >100;  
\});  
  
// arguments对象  
function foo() \{  
  var args = [Array][].from(arguments);  
  // ...  
\}

只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。

[Array][].from('hello')  
// \['h', 'e', 'l', 'l', 'o'\]  
  
let namesSet = new Set(\['a', 'b'\])  
[Array][].from(namesSet) // \['a', 'b'\]

上面代码中，字符串和 Set 结构都具有 Iterator 接口，因此可以被Array.from转为真正的数组。  
如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

[Array][].from(\[1, 2, 3\])// \[1, 2, 3\]

值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组。

// arguments对象  
function foo() \{  
  const args = \[...arguments\];  
\}  
  
// NodeList对象  
\[...document.querySelectorAll('div')\]

拍平多维数组

var arr1=\[1,\[2,\[3,\[4,\[5\]\]\]\],6,\[7\]\]  
var arr2=\[8,\[9,\[10\],11\],12\]  
var ary1=arr1.toString().[split][](',');//arr1降成一维数组  
var ary2=arr2.toString().[split][](',');//arr2降成一维数组  
console.[log][](ary1)//\["1", "2", "3", "4", "5", "6", "7"\]  
console.[log][](ary2)//\["8", "9", "10", "11", "12"\]  
console.[log][](ary1.concat(ary2))//\["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"\]

多维数组降维

var arr22=\[1,\[2,\[3,\[4,\[5\]\]\]\],6,7\]  
console.[log][](arr22.flat())  
//arr.flat()里可以传个参数:传Infinity表示直接降成一维,arr22有5维,传参数2,则降成(5-2)3维数组

生成0到count范围内的随机不重复的数 以数组形式返回

function tmp([count][])\{  
    var \_arr=\[\];  
    for(var i=0;i<[count][];i++)\{  
        var randomNum=Math.[floor][]([count][]\*Math.random());  
        \_arr.indexOf(randomNum)==-1&&\_arr.push(randomNum)  
    \}  
    return \_arr  
\}  
console.[log][](tmp(20))

function tmp([count][])\{  
    var \_arr=\[\];  
    for(var i=0;i<[count][];i++)\{  
        \_arr.push(Math.[floor][]([count][]\*Math.random()))  
        \_arr=\[...new Set(\_arr)\]  
    \}  
    return \_arr  
\}  
console.[log][](tmp(20))

生成0到count范围内的随机不重复的数 以数组形式返回 数组长度为n

function tmp([count][],n)\{  
    var \_arr=\[\];  
    for(var i=0;i<[count][];i++)\{  
        var randomNum=Math.[floor][]([count][]\*Math.random());  
        \_arr.indexOf(randomNum)==-1&&\_arr.push(randomNum)  
    \}  
    if(\_arr.length==n)\{  
        return \_arr  
    \}else\{  
        return tmp([count][],n)  
    \}  
\}  
console.[log][](tmp(20,5))

指定数字范围，个数，生成随机不重复的数字，以数组形式返回

/\*  
count : 0-count范围 (确定生成随机数的起始范围，默认从0开始)  
n     : 生成的个数  
ps    : 随机不重复  
\*/  
function tmp([count][],n)\{  
    var arr=\[\]  
    while(arr.length<n)\{  
        var randomNum=Math.[floor][](Math.random()\*[count][]);  
        if(arr.length===0)\{  
            arr.push(randomNum)  
        \}else\{  
              
            if(arr.indexOf(randomNum)==-1)\{  
                arr.push(randomNum)  
            \}  
              
        \}  
    \}  
    return arr  
\}

数组去重

var arr=\[1,2,3,3,2,1,5,6,7,5\]  
function uniq(arr)\{  
    let ary=\[\]  
    let i=0,len=arr.length  
    for(;i<len;i++)\{  
        if(ary.indexOf(arr\[i\])==-1)\{  
            ary.push(arr\[i\])  
        \}  
    \}  
    return ary  
\}  
console.[log][](uniq(arr))//\[1, 2, 3, 5, 6, 7\]

var arr=\[1,2,3,3,2,1,5,6,7,5\]  
function uniq(arr)\{  
    for(var i=0; i<arr.length; i++)\{  
        for(var j=i+1; j<arr.length; j++)\{  
            if(arr\[i\]===arr\[j\])\{  
                arr.splice(j,1)  
                j--  
            \}  
        \}  
    \}  
    return arr   
\}  
  
console.[log][](uniq(arr))//\[1, 2, 3, 5, 6, 7\]

//ES6  
var arr=\[1,2,3,3,2,1,5,6,7,5\]  
console.[log][](\[...new Set(arr)\])//\[1, 2, 3, 5, 6, 7\]  
console.[log][]([Array][].from(new Set(arr)))//\[1, 2, 3, 5, 6, 7\]

var arr=\[1,2,3,3,2,1,5,6,7,5\]  
  
function uniq(arr)\{  
      
    for(let i=0;i<arr.length;i++)\{  
  
        if(arr.lastIndexOf(arr\[i\])!=-1 && i!=arr.lastIndexOf(arr\[i\]))\{  
  
            arr.splice(arr.lastIndexOf(arr\[i\]),1)  
  
        \}  
    \}  
    return arr  
\}  
console.log(uniq(arr))//\[1, 2, 3, 5, 6, 7\]

判断给出的几个数组,是否值都一样

var arr=\[1,2,3\]  
var arr1=\[1,2,3\]  
var arr2=\[1,2,3,4\]  
function arrIsEqual()\{  
    var [array][Array]=\[\];  
    for(var i=0;i<arguments.length;i++)\{  
        [array][Array].push(JSON.stringify(arguments\[i\]))  
    \}  
    return ![array][Array].some(function(value, index) \{  
        return value !== [array][Array]\[0\];  
    \});  
\}  
console.[log][](arrIsEqual(arr,arr1))//true  
console.[log][](arrIsEqual(arr,arr2))//false

判断数组里的值是否全部相同

var arr=\[1,2,3\]  
var arr1=\[1,1,1\]  
function isAllEqual([array][Array]) \{  
    if ([array][Array].length >0) \{  
        return ![array][Array].some(function(value, index) \{  
            return value !== [array][Array]\[0\];  
        \});  
    \} else \{  
        return true;  
    \}  
\}  
console.[log][](isAllEqual(arr))//false  
console.[log][](isAllEqual(arr1))//true

var arr=\[1,2,3\]  
var arr1=\[1,1,1\]  
function isAllEqual([array][Array]) \{  
    if ([array][Array].length> 0) \{  
        for(var i=1;i<[array][Array].length;i++)\{  
            if([array][Array]\[i\]!==[array][Array]\[0\])\{  
                return false  
            \}  
        \}  
        return true  
    \} else \{  
        return true;  
    \}  
\}  
console.[log][](isAllEqual(arr))//false  
console.[log][](isAllEqual(arr1))//true

获取数组里重复的项

var arr=\[1,2,3,4,5,4,1,2\] //1,2,4  
  
function getRepeatItem(arr)\{  
    var ary0=\[\],ary1=\[\]  
    for(var i=0;i<arr.length;i++)\{  
        if(ary0.indexOf(arr\[i\])==-1)\{  
            ary0.push(arr\[i\])  
        \}else\{  
            ary1.push(arr\[i\])  
        \}  
    \}  
    return ary1  
\}  
console.[log][](getRepeatItem(arr))//\[4, 1, 2\]

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

# ES6 常用数组方法 some（） 和 every（） #

*  ** every => 判断数组中的所有元素是否都符合某种条件**

**   **![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RzZERkaXNz_size_16_color_FFFFFF_t_70][]

1.  `当数组都没有被选中，不展示的情况`
2.  `v-if="!targets.every((value) => (!value.isSelect))"`

*  **some => 判断数组中是否含有符合条件的元素**

1.  `判断数组中是否有累计金额大于每次金额`
2.  `let result = this.targets.some((value) => (value.everyquota > value.totalquota))；`
3.  `console.log(result)`

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20210908/fd0ec8fd41f94f5786cf87d4305a7d53.png
[log]: http://www.php.net/log
[Array]: /images/20210908/91718402e9034106a255aab5c8ce7634.png
[empty]: http://www.php.net/empty
[sort]: http://www.php.net/sort
[join]: http://www.php.net/join
[split]: http://www.php.net/split
[count]: http://www.php.net/count
[floor]: http://www.php.net/floor
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RzZERkaXNz_size_16_color_FFFFFF_t_70]: /images/20210908/5e79e63765194414be5cb1b637fe493f.png