es6学习笔记一数组（上）

最近公司没什么事情,我们老大让我看看es6,小颖就练习了下数组的各个方法,今天先给大家分享一部分.嘻嘻,希望对大家有所帮助.

every方法:

概述: every() 方法测试数组的所有元素是否都通过了指定函数的测试。

参数:

callback:用来测试每个元素的函数;(注意:callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)

element:当前遍历到的元素。

index:当前遍历到的索引。

array:数组本身。

thisArg:执行 callback 时使用的 this 值。(thisArg传:number、string、object、Boolean、null、undefined这几种类型的值都可以)。并不说只能传这几种类型的值哦

描述:

小颖的理解是这样的: every 方法为数组中的每个元素执行一次 callback 函数，如果当前元素不满足callback 函数中条件则立即返回 false。并且不继续执行every方法;如果该数组中有所有元素都满足callback 函数中条件则立即返回 true。也就是说只要数组中有一个不满足callback 函数中的条件,则立即返回 false,所有的元素都满足callback 函数中的条件,则立即返回 true。(注意:every 不会改变原数组。)

如果为 every 提供一个 thisArg 参数，是你在调用callback 时的 this 值。如果省略该参数，则 callback 中调用 this 值时，值为undefined。

示例:

示例1：thisArg值分别为:0,undefined

     let _everyData1=[1,3,5,10,,12].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this+'thisArg值传的:0');//0
         return (element >= 1);
      },0);
     console.log('[1,3,5,10,,12]数组的第四个值:'+[1,3,5,10,,12][4]);
     console.log('判断[1,3,5,10,,12]数组的所有元素是否都大于等于一'+_everyData1); 
     console.log('******************************************************************************'); 
     let _everyData2=['1','3','5','10',,'12'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this+'没有传thisArg值');//undefined
         return (element >=1);
      });
      console.log("判断['1','3','5','10',,'12']数组的所有元素是否都大于等于一"+_everyData2);

打印结果:

示例2：thisArg值分别为:0,undefined

     let _everyData1=[11,31,51,10,,12].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this+'thisArg值传的:0');//0
         return (element >= '1');
      },0);
     console.log('[11,31,51,10,,12]数组的第四个值:'+[1,3,5,10,,12][4]);
     console.log('判断[11,31,51,10,,12]数组的所有元素是否都大于等于一'+_everyData1); 
     console.log('******************************************************************************'); 
     let _everyData2=['11','31','51','10',,'12'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this+'没有传thisArg值');//undefined
         return (element >='1');
      });
      console.log("判断['11','31','51','10',,'12']数组的所有元素是否都大于等于一"+_everyData2);

打印结果:

看完以上示例的打印结果，会发现 element 分别与 1和 ‘1’ 作比较时，element和作比较的值都转换成了数字进行比较，所以数组:[1,3,5,10,,12]和数组：['1','3','5','10',,'12']调用相同的callback函数，返回的结果一样；数组：[11,31,51,10,,12]和数组：['11','31','51','10',,'12']调用相同的callback函数，返回的结果一样。

示例3：测试callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用

     let numArray=[1,3,5,10,,12];
     numArray[4]=undefined;
     let _everyData1=numArray.every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         return (element >= 1);
      });
     console.log('numArray数组的第四个值:'+numArray[4]);//undefined
     console.log('判断numArray数组的所有元素是否都大于等于一'+_everyData1);//false
     console.log('******************************************************************************'); 
     numArray[4]=null;
     let _everyData2=numArray.every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         return (element >= 1);
      });
     console.log('numArray数组的第四个值:'+numArray[4]);//null
     console.log('判断numArray数组的所有元素是否都大于等于一'+_everyData2); //false
     console.log('******************************************************************************'); 
     let _everyData3=[1,3,5,10,,12].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         return (element >=1);
      });
      console.log("[1,3,5,10,,12]数组的第四个值:"+[1,3,5,10,,12][4]);//undefined
      console.log("判断[1,3,5,10,,12]数组的所有元素是否都大于等于一"+_everyData3);//true

打印结果:

第一个给数组numArray=[1,3,5,10,,12]的第四个元素赋值为:undefined,因为已经给第四个元素赋值,所以即使赋值为undefined,也会调用callback,给numArray=[1,3,5,10,,12]第四个元素赋值为null,同理.而[1,3,5,10,,12]数组第四个元素从未被赋过值,所以不会调用callback.

示例4：thisArg值为:null

     let _everyData2=['f','b','c','d','g'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//null
         return (element >='b');//ASCII码作对比
      },null);
      console.log("判断['f','b','c','d','g']数组的所有元素是否都大于'b'"+_everyData2);

打印结果:

示例5：thisArg值为:[1, 2, 3]

     let _everyData2=['f','b','c','d','g'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//[1, 2, 3]
         return (element >='c');//ASCII码作对比
      },[1,2,3]);
      console.log("判断['f','b','c','d','g']数组的所有元素是否都大于'c'"+_everyData2);

打印结果:

示例6：thisArg值为:[{name:'大颖',age:21},{name:'小颖',age:21}],json数组

     let _everyData2=['f','b','c','d','g'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);         return (element >='c');//ASCII码作对比
      },[{name:'大颖',age:21},{name:'小颖',age:21}]);
      console.log("判断['f','b','c','d','g']数组的所有元素是否都大于'c'"+_everyData2);

打印结果:

示例7：thisArg值为:false,Boolean类型

     let _everyData2=['f','b','c','d','g'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//false
         return (element >='c');//ASCII码作对比
      },false);
      console.log("判断['f','b','c','d','g']数组的所有元素是否都大于'c'"+_everyData2);

打印结果:

示例8：thisArg值为:'字符串',string类型

     let _everyData2=['f','b','c','d','g'].every(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//
         return (element >='c');//ASCII码作对比
      },'字符串');
      console.log("判断['f','b','c','d','g']数组的所有元素是否都大于'c'"+_everyData2);

打印结果:

`some`方法:

概述: some() 方法测试数组中的某些元素是否通过了指定函数的测试。

参数:

callback:用来测试每个元素的函数;(注意:callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)

element:当前遍历到的元素。

index:当前遍历到的索引。

array:数组本身。

描述:

小颖的理解是这样的: some 方法为数组中的每个元素执行一次 callback 函数，如果所有元素都不满足callback 函数中条件则返回 false。如果该数组中存在满足callback 函数中条件的元素则立即返回 true。并且不继续执行some方法(注意:some 不会改变原数组。)

如果为 some 提供一个 thisArg 参数，是你在调用callback 时的 this 值。如果省略该参数，则 callback 中调用 this 值时，值为undefined。

示例:

示例1：thisArg值为:null

      let _everyData2=['a','b','c','d','g'].some(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//null
         return (element >='b');//ASCII码作对比
      },null);
      console.log("判断['a','b','c','d','g']数组中是否存在大于'b'的元素"+_everyData2);

打印结果:

因为['a','b','c','d','g']数组第二个元素满足了some方法中callback 函数的条件,所以返回结果为 true,并且第二个元素之后的所有元素都不执行some方法.

示例2：thisArg值为:'aaa',string类型

      let _everyData2=['7','3','5','10','12'].some(function(element, index, array){
         console.log('当前元素'+element+' ,index:'+index+' ,当前数组:'+array);
         console.log(this);//aaa
         return (element >12);
      },'aaa');
      console.log("判断['7','3','5','10','12']数组中是否存在大于十二的元素"+_everyData2);

打印结果:

因为['7','3','5','10','12']数组中所有元素都不满足some方法中callback 函数的条件,所以返回结果为 false.

`filter`方法:

概述: filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

参数:

callback:用来测试每个元素的函数;(注意:callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)

element:当前遍历到的元素。

index:当前遍历到的索引。

array:数组本身。

thisArg:执行 callback 时使用的 this 值。(thisArg传:number、string、object、Boolean、null、undefined这几种类型的值都可以)。

描述:

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。(注意:filter 不会改变原数组。)

如果为 filter 提供一个 thisArg 参数，是你在调用callback 时的 this 值。如果省略该参数，则 callback 中调用 this 值时，值为undefined。

示例:

示例1：

      function isBigEnough(element) {
        return element >= 10;
      }
      let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
      console.log(filtered);//[12, 130, 44]

示例2：

      let filtered=[1,'3','5',,7,10].filter(function(element, index, array){
        console.log('当前元素:'+element+"   当前index:"+index+'  当前数组:'+array)
        console.log(this);
        return element >= 2;
      });
      console.log(filtered);//["3", "5", 7, 10]

打印结果：

`find`方法:

概述: 如果数组中某个元素满足测试条件，find() 方法就会返回那个元素的值，如果没有满足条件的元素，则返回 undefined。

参数:

callback:用来测试每个元素的函数;(注意:callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)

element:当前遍历到的元素。

index:当前遍历到的索引。

array:数组本身。

描述:

find方法对数组中的每一项元素执行一次callback 函数，直至有一个callback返回true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回undefined。当数数组中有两个满足callback 函数条件时,则返回从左到右的第一个满足callback 函数条件的元素。(注意: 不会改变原数组。)

如果为 find 提供一个 thisArg 参数，是你在调用callback 时的 this 值。如果省略该参数，则 callback 中调用 this 值时，值为undefined。

示例:

示例1:

      let _ageData=[{age:20,name:'喵嘞个咪'},{age:18,name:'大颖'},{age:23,name:'胡亥'}];
      function findName(fruit) { 
        console.log(this);//undefined
        return fruit.name === '大颖';
      }
      console.log(_ageData.find(findName)); //[{{age:18,name:'大颖'}]
      console.log(_ageData);//[{age:20,name:'喵嘞个咪'},{age:18,name:'大颖'},{age:23,name:'胡亥'}]

示例2:

      let _ageData=[{age:20,name:'喵嘞个咪'},{age:18,name:'大颖'},{age:20,name:'大颖'},{age:23,name:'胡亥'}];
      function findName(element, index, array) { 
        console.log('当前元素:');
        console.log(element);
        console.log('当前元素的index:'+index);
        console.log(array);
        return element.name === '大颖';
      }
      console.log(_ageData.find(findName)); //[{{age:18,name:'大颖'}]
      console.log(_ageData);//[{age:20,name:'喵嘞个咪'},{age:18,name:'大颖'},{age:23,name:'胡亥'}]

打印结果:

因为在[{age:20,name:'喵嘞个咪'},{age:18,name:'大颖'},{age:20,name:'大颖'},{age:23,name:'胡亥'}]中的第二个元素{age:18,name:'大颖'}已经满足了callback 函数条件,所以就不往下继续执行callback 函数,并且立即返回满足callback 函数条件的元素。

findIndex方法:

概述: findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。

参数:

callback:用来测试每个元素的函数;(注意:callback 只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)

element:当前遍历到的元素。

index:当前遍历到的索引。

array:数组本身。

描述:

findIndex() 方法对数组中的每一个元素执行一次回调函数直至有一个回调函数返回真值。如果找到了一个这样的元素，则 findIndex 将会立刻返回这个元素的索引。否则 findIndex 将会返回 -1。回调函数只有在数组的索引被分配值的时候才会被调用，若是索引被删除或者没有被赋值将不会被调用。(注意: findIndex 不会修改所调用的数组)

如果为 find 提供一个 thisArg 参数，是你在调用callback 时的 this 值。如果省略该参数，则 callback 中调用 this 值时，值为undefined。

示例:

示例1:

      function isPrime(element, index, array) {
        console.log('当前元素:'+element+"   当前index:"+index+'  当前数组:'+array);
        return element>4;
      }
      console.log( [4, 6, 7, 12].findIndex(isPrime) ); // 1

打印结果：

示例2：

      function isPrime(element, index, array) {
        console.log('当前元素:'+element+"   当前index:"+index+'  当前数组:'+array);
        console.log(this);
        return element>13;
      }
      console.log( [4, 6, 7, 12].findIndex(isPrime) ); // -1

打印结果：

posted @ 2016-09-29 15:37 爱喝酸奶的吃货阅读(694) 评论(5) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

爱喝酸奶的吃货

你没空时不会做的事情，有空了也不会做.

es6学习笔记一数组（上）

every方法:

`some`方法:

`filter`方法:

`find`方法:

findIndex方法:

公告

爱喝酸奶的吃货

你没空时不会做的事情，有空了也不会做.

es6学习笔记一数组（上）

every方法:

some方法:

filter方法:

find方法:

findIndex方法:

公告

`some`方法:

`filter`方法:

`find`方法: