资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6的数组方法

ES6的数组方法

longmon / 1135人阅读

摘要：方法接收一个函数作为累加器数组中的每个值从左到右开始合并最终为一个值执行数组中每个值的函数也可以叫做包含个参数上一次调用回调返回的值或者是提供的初始值数组中当前被处理的元素当前元素在数组中的索引调用的数组作为第一次调用的第一个参数这个参数不

reduce()

1.reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值.
array.reduce(callback, initialValue)
2.callback:执行数组中每个值的函数(也可以叫做reducer),包含4个参数.

1.previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
2.currentValue:数组中当前被处理的元素
3.index:当前元素在数组中的索引
4.array:调用reduce的数组

initialValue:作为第一次调用callback的第一个参数,这个参数不是必需的.

var s = a.reduce((prev, current) => {
    return prev + current;  // 1 + 2, 3+ 3
}, 10);
console.log(s);

var todos = [{
    id: 1,
    completed: true
}, {
    id: 2,
    completed: false
}, {
    id: 3,
    completed: true
}, {
    id: 4,
    completed: true
}, {
    id: 5,
    compelted: false
}];

const completedCount = todos.reduce((count, current) => {
    return current.completed ? count + 1 : count
}, 0);
console.log(completedCount);    // 3

const unCompleted = todos.reduce((count, current) => {
    return !current.completed ? count + 1 : count;
}, 0);
console.log(unCompleted);   // 2

var count = 0;
todos.map((item) => {
    if (item.completed) {
        count++;
    }
});
console.log(count); // 3
filter()

1.filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组.
array.filter(callback, thisArg)
2.callback:用来测试数组的每个元素的函数,包含三个参数.
返回true表示保留该元素(通过测试),返回false则不保留.
currentValue:数组中当前被传递的元素.

var a = [1, 2, 3, 4, 5];

var b = a.filter((item) => {
    return item > 3;
});

console.log(b);

var todos = [{
    id: 1,
    completed: true
}, {
    id: 2,
    completed: false
}, {
    id: 3,
    completed: true
}, {
    id: 4,
    completed: true
}, {
    id: 5,
    compelted: false
}];

var completedTodos = todos.filter((item) => {
    return item.completed;
});

console.log(completedTodos);
map()

1.map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组.
array.map(callback, thisArg)
callback:原数组中的元素调用该方法后返回一个新的元素.
currentValue:数组中当前被传递的元素.

var a = [1, 2, 3, 4, 5];

var b = a.filter((item) => {
    return item > 3;
});
console.log(b); // [4 ,5]

var bb = [];
a.map((item) => {
    if (item > 3) {
        bb.push(item);
    }
});
console.log(bb);    // [4, 5]

var bbb = a.map((item) => {
    return item + 1;
});
console.log(bbb);   // [2, 3, 4, 5, 6]
every()

1.every()方法用于测试数组中所有元素是否都通过了指定函数的测试.
array.every(callback, thisArg);

var a = [1, 2, 3, 4, 5];
var b = a.every((item) => {
    return item > 0;
});
var c = a.every((item) => {
    return item > 1;
});
console.log(b); // true
console.log(c); // false
some()

1.some()方法用于测试数组中是否至少有一项元素通过了指定函数的测试.
array.some(callback, thisArg);

var bb = a.some((item) => {
    return item > 4;
});

var cc = a.some((item) => {
    return item > 5;
});
console.log(bb);    // true
console.log(cc);    // false
forEach()

1.forEach()为每个元素执行对应的方法.

var a = [1, 2, 3, 4, 5];

var b = [];
a.forEach((item) => {
    b.push(item + 1);
});
console.log(b); // [2,3,4,5,6]
indexOf()

1.indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1.

 var a = [1, 2, 3, 4, 5];

var b = a.indexOf(2);
var c = a.indexOf(6);
console.log(b); // 1
console.log(c); // -1
展开运算符

1.展开运算符允许一个表达式在某处展开.常用的场景包括:函数参数,数组元素,解构赋值.
另外,jsx的组件props也可以使用展开运算符来赋值.
2.解构赋值(destructuring assignment)语法是一个js表达式,
它使得从数组或对象中提取数据赋值给不同的变量变为可能.

var a = [1, 2, 3, 4, 5];

var [b, c] = a;
console.log(b); // 1
console.log(c); // 2

function fun(...a) {
    console.log(a); // [1, 2, 3]
}
fun(1, 2, 3);   // 传入1,2,3参数,...a为数组[1,2,3]

function gun({a, b}) {
    return a + b;
}
console.log(gun({ a: 1, b: 2 }));   // 3
云服务器 GPU云服务器 判断数组的方法 定义数组的方法 php操纵数组的方法 php数组排序的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84864.html

相关文章

  • ES6核心特性

    摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。 前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

    loostudy 评论0 收藏0

  • ES6核心特性

    摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。 前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

    _DangJin 评论0 收藏0

  • 你该知道的ES6那些事儿

    摘要：最近重构了一个项目，引入了部分用法，最大的感受是让这门语言变得更加严谨，更加方便。通过该方法获得位置后还得比较一次才能判断是否存在。再来看看的写法使用数组来初始化一个，构造器能确保不重复地使用这些值。下面提供链接，供有兴趣的朋友参考。 最近重构了一个SPA项目，引入了部分ES6用法，最大的感受是ES6让javascript这门语言变得更加严谨，更加方便。本篇将结合实战经验，对最常用的部...

    CoffeX 评论0 收藏0

  • [ ES6 ] 快速掌握常用 ES6 （二）

    摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0

  • ES6： 数组

    摘要：中的方法遍历一下数组中的每个选项返回一个新的数组。还可以接受第二个参数，作用类似与数组的方法，用于对每个元素进行处理。这个方式是用于将一组值，转换为数组。可选到该位置前停止读取数据，默认等于数组长度。如果是负数，表示倒数。 ES6中数组增加了很多新的方法，但是先回顾下之前ES5中的数组的方法。 ES5中的方法 Array.prototype.forEach 遍历一下数组中的每个选...

    lavor 评论0 收藏0

  • ES6 旧瓶新酒

    摘要：本文是系列的第二篇，前一篇走马观花概要介绍了，这一篇标题之所以叫旧瓶新酒，是想介绍那些原来就被广泛使用的对象，例如，对这些对象扩展了一些很有用的新方法。用于监听取消监听数组的变化，指定回调函数。在中已被建议撤销。 本文是 ES6 系列的第二篇，前一篇《ES6 走马观花》概要介绍了ES6，这一篇标题之所以叫旧瓶新酒，是想介绍那些原来就被广泛使用的JS对象，例如String、Array，E...

    未东兴 评论0 收藏0

发表评论

登陆后可评论

0条评论

longmon

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<