摘要:它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为的成员,然后返回该成员。上面代码中,方法的回调函数可以接受三个参数,依次为当前的值当前的位置和原数组。
数组的扩展 展开运算符
展开运算符(用三个连续的点 ( ... ) 表示)是 ES6 中的新概念,使你能够将字面量对象展开为多个元素。
合并数组展开运算符的一个用途是结合数组。
如果你需要结合多个数组,在有展开运算符之前,必须使用 Array 的 concat() 方法。
const fruits = ["apples", "bananas", "pears"]; const vegetables = ["corn", "potatoes", "carrots"]; const produce = [...fruits, ...vegetables]; console.log(produce);替代数组的 apply 方法
由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。
// ES5 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6的写法 function f(x, y, z) { // ... } let args = [0, 1, 2]; f(...args); Math.max(...[3,5,6]) //6Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
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"]
值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。
// arguments对象 function foo() { const args = [...arguments]; } // NodeList对象 [...document.querySelectorAll("div")]Array.of()
Array.of方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
find() 和 findIndex()数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2includes()
Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90681.html
摘要:循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组,包含对象自身的所有属性的键名。目前,只有对象方法的简写法可以让引擎确认,定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法 在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。...
摘要:属性的简洁表示法在中允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组,包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法 在ES6中 允许直接写入变量...
摘要:它是一个通用标准,奠定了的基本语法。年月发布了的第一个版本,正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。 前言 ES6标准以及颁布两年了,但是,好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手,逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的,该公司1996年11月将JavaSc...
showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等,行为和(===)基本一致。 在ES5中判断两个值是否相等,只能用(==)相等运算符和(===)严格相等运算符,但是这两货都有缺点,前者 两边的值都会转换数据类型,...
阅读 3285·2021-11-24 09:39
阅读 3866·2021-11-22 09:34
阅读 4799·2021-08-11 11:17
阅读 1060·2019-08-29 13:58
阅读 2570·2019-08-28 18:18
阅读 537·2019-08-26 12:24
阅读 825·2019-08-26 12:14
阅读 727·2019-08-26 11:58