ES6数组方法

妖狐艹你老母 2022-05-29 01:25 464阅读 0赞

ES6数组方法

以下方法添加到了Array.prototype对象上(isArray除外)

indexOf

类似字符串的indexOf()方法

复制代码

  1. 1 stringObject.indexOf(searchvalue,fromindex)
  2. 2
  3. 3 var data = [2, 5, 7, 3, 5];
  4. 4 console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
  5. 5 console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)
  6. 6 console.log(data.indexOf(4)); // -1 (未找到)
  7. 7 console.log(data.indexOf("5")); // -1 (未找到,因为5 !== "5")

复制代码

lastIndexOf

类似indexOf()方法(顺序相反)

forEach

Array在ES5新增的方法中,参数都是function类型,默认有传参(遍历的数组内容,对应的数组索引,数组本身)

  1. [].forEach(function(value, index, array) { // ... });

forEach方法 遍历数组元素

  1. 1 var colors = ['red', 'green', 'blue'];
  2. 2 colors.forEach(function(color) {
  3. 3 console.log(color);
  4. 4 });

forEach除了接受一个必须的回调函数参数,还可以接受一个可选的上下文参数(改变回调函数里面的this指向)(第2个参数)如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined

  1. array.forEach(callback,[ thisObject])

map

映射(一一对应)。[].map();基本用法跟forEach方法类似:

  1. array.map(callback,[ thisObject]);

但是callback需要有return值(如果没有,就像会返回undefined)

  1. 1 var a1 = ['a', 'b', 'c'];
  2. 2 var a2 = a1.map(function(item) {
  3. 3 return item.toUpperCase();
  4. 4 });
  5. 5 console.log(a2); // logs A,B,C

filter

过滤筛选(callback在这里担任的是过滤器的角色,当元素符合条件,过滤器就返回true,而filter则会返回所有符合过滤条件的元素)。

  1. array.filter(callback,[ thisObject]);

指数组filter后,返回过滤后的新数组。用法跟map相似

  1. 1 var a1 = ['a', 10, 'b', 20, 'c', 30];
  2. 2 var a2 = a1.filter(function(item) {
  3. 3 return typeof item == 'number';
  4. 4 });
  5. 5 console.log(a2); // logs 10,20,30

every(且)

every(callback[, thisObject])当数组中每一个元素在callback上被返回true时就返回true。

复制代码

  1. 1 function isNumber(value){
  2. 2 return typeof value == 'number';
  3. 3 }
  4. 4 var a1 = [1, 2, 3];
  5. 5 console.log(a1.every(isNumber)); // logs true
  6. 6 var a2 = [1, '2', 3];
  7. 7 console.log(a2.every(isNumber)); // logs false

复制代码

some(或)

some(callback[, thisObject]) 只要数组中有一项在callback上被返回true,就返回true。

复制代码

  1. 1 function isNumber(value){
  2. 2 return typeof value == 'number';
  3. 3 }
  4. 4 var a1 = [1, 2, 3];
  5. 5 console.log(a1.some(isNumber)); // logs true
  6. 6 var a2 = [1, '2', 3];
  7. 7 console.log(a2.some(isNumber)); // logs true
  8. 8 var a3 = ['1', '2', '3'];
  9. 9 console.log(a3.some(isNumber)); // logs false

复制代码

reduce(从左到右累加)

对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

  1. 1 var a = [10, 20, 30];
  2. 2 var total = a.reduce(function(first, second) {
  3. 3 return first + second;
  4. 4 }, 0);
  5. 5 console.log(total) // Prints 60

reduceRight(从右到左累加)

reduce的作用完全相同,唯一的不同是,reduceRight是从右至左遍历数组的元素。

Array构造器上的isArray

Array.isArray直接写在了Array构造器上,而不是prototype对象上。Array.isArray会根据参数的[[Class]]内部属性是否是”Array”返回true或false.

  1. Array.isArray("NO U") falseArray.isArray(["NO", "U"])// true

Array.prototype.slice.call

真实数组具有slice方法,可以对数组进行浅复制(不影响原数组),返回的依然是数组。类似数组虽然有length属性,可以使用for循环遍历,却不能直接使用slice方法,会报错!但是通过Array.prototype.slice.call则不会报错,本身(类似数组)被从头到尾slice复制了一遍——变成了真实数组!

将类似数组的对象(比如arguments)转换为真实的数组

  1. Array.prototype.slice.call(arguments)

发表评论

表情:
评论列表 (有 0 条评论,464人围观)

还没有评论,来说两句吧...

相关阅读

    相关 es6数组方法图解

    最近接触了一些 web前端开发人员,发现还是很多人不适用es6 提供的语义化api。 下面分享下看到的图解 es6 数组方法。 很形象的es6数组方法解释: ![请添