ES6-Array对象的扩展

1.Array.from()

(1)转换为数组

①Array.from()方法可以将类数组对象(所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。)和可遍历(iterable)的对象转化为真正的数组。包括ES6新增的数据结构Set和Map.

②常见的类数组对象,如DOM操作获取的NodeList集合,或者函数内部的arguments对象,都可以被Array.from()方法转为数组。

(1)转换NodeList

(2)转换arguments对象

③只要部署了Iterator接口的数据结构,Array.from()都能将其转换为数组。

④若参数是一个数组,它会返回一个相同的新数组。

⑤扩展运算符...也可以将某些数据结构转为数组,扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。

(2)第二个参数

Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

(3)若map函数中用到了this关键字,还可以传入Array.from()的第三个参数,用来绑定this.

(4)只要有一个原始的数据结构,就可以将其进行处理,转换为规范的数组结构,再使用数组方法。以下代码中,Array.from()第一个参数指定了第二个参数运行的次数。

(5)Array.from()的另一个应用是,将字符串转为数组,返回字符串长度,它能正确处理各种Unicode字符,能避免大于\uffff的字符算作两个字符的bug.

2.Array.of()

Array.of()方法用于将一组值转换为数组,目的是为了构造函数Array的不足,因为参数个数不同,会导致Array()行为有差异。

Array.of()基本可以用来替代Array()或者new Array(),行为统一,不会有因为参数不同导致的重载。

Array.of()总会返回参数组成的数组,若没有参数则返回空数组。

3.数组实例的copyWithin()

数组实例的copyWithin方法会在当前数组内部,将指定位置的成员复制到其他位置,会覆盖原有的成员,然后返回当前数组。

接受三个参数

(1)target:必需,从哪个位置开始替换数据

(2)start:可选,从这个位置开始读取数据,默认为0,若是负数,表示倒数。

(3)end:可选,到这个位置停止读取数据,默认为array.length,若为负值表示倒数。

这三个参数都应该是数值,如果不是将会自动转为数值。

参数0,2表示,从第arr[0]开始替换数据,替换为从arr[2]开始的,一直到末尾的数据,共三项,覆盖了原有的123.

4.数组实例的find()和findIndex()方法

(1)arr.find(function(value,index,arr){...})

数组实例的find方法用于找出第一个符合条件的数组成员,参数是一个回调函数,所有食族成员依次执行这个函数,直到找到一个返回值为true的成员并返回这个成员,若没有找到则返回undefined.

(2)数组实例的findIndex方法与find方法类似,但它返回第一个符合条件的数组成员的位置,若没有找到,则返回-1.

这两个方法都可以接受第二个参数,来绑定回调函数的this对象,并且这两个方法都可以发现NaN,弥补了IndexOf方法的不足。

5.数组实例的fill()方法

(1)fill方法使用给定的值填充一个数组

(2)fill()方法还可以接受第二个和第三个参数,表示填充的起始位置和结束位置。(从起始位置开始,替换起始位置,到结束为止之前结束)

6.数组实例的entries(),keys()和values()

(1)ES6提供了三个新的方法,entries()、keys()和values()用于遍历数组,它们都返回一个遍历器对象,可以用for...of进行遍历,唯一的区别是keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

(2)如果不使用for...of循环,可以手动调用遍历器对象的next方法进行遍历。

7.数组实例的includes()方法

(1)数组实例的includes()方法返回一个布尔值,表示数组是否包含给定的值,与字符串的includes方法类似。

②该方法的第二个参数表示搜索的起始位置,默认为0,若参数为负数,则表示倒数的位置,若倒数时数字大于数组长度,则会重置为从0开始。

indexOf()方法不够语义化,返回值是找到的参数的第一次出现的位置,并且它内部使用严格相等运算符判断,因此找不到NaN.

③Map结构的has方法是用来查找键名的,如

Map.prototype.has(key)等

Set结构的has方法是用来查找值的,比如

Set.prototype.has(value)

8.数组的空位

(1)数组的空位指的是数组的某个位置没有任何值,比如Array构造函数返回的数组就是空位。

(2)空位不是undefined,一个位置的值为undefined仍然是有值的,空位是没有任何值的。

(3)ES5对空位的处理

forEach(), filter(), every() 和some()都会跳过空位。

map()会跳过空位,但会保留这个值

join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

ES6会明确将空位转为undefined。

①Array.from()会将数组空位转为undefined

②扩展运算符也会将空位转为undefined

③copyWithin()会连空位一起拷贝。

④fill()会将空位视为正常的数组位置。

⑤for...of循环也会遍历空位。

⑥entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

时间: 2024-11-07 22:36:32

ES6-Array对象的扩展的相关文章

ES6知识点-对象的扩展

3.6对象的扩展 3.6.1属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法. var foo = 'bar'; var baz = {foo}; console.log( baz ) // { foo: 'bar' } //等同于 var foo = 'bar'; var baz={ foo:foo}; console.log( baz ) // { foo: 'bar' } var func= { method() { return "这里是ES6方法简写!";

【ES6】对象的扩展

Object.setPrototypeOf(obj, proto) Object.getPrototypeOf(obj) Object.getOwnPropertyDescriptor(obj,property) 获取该属性的描述对象.描述对象的enumerable属性,称为“可枚举性”,如果该属性为false,下列操作会忽略当前属性 for...in循环:只遍历对象自身的和继承的可枚举的属性. Object.keys():返回对象自身的所有可枚举的属性的键名. JSON.stringify()

关于es6中对象的扩展

1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提出了Object.is()方法,它用来比较两个值是否相等,与严格运算符(===)的行为基本一致 Object.is('foo', 'foo')  //false  Object.is({} , {}) //false 不同之处只有两个, Object.is(+0, -0) // true  Obje

ES6 之 对象的扩展

属性的简洁表示法 let book = '234'; let good = '432'; let obj01 = { book, good } console.log(obj01); 方法名的name属性 ..... Object.is() // Object.is() 用来比较俩个值是否严格相等,与 === 行为基本一致 // == 会自动转化数据类型 // === NaN不等于 NaN 以及 +0 和 -0 console.log(Object.is('foo','foo')); // tr

ES6 常用总结——第三章(数组、函数、对象的扩展)

1.1. Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map). 下面是一个类似数组的对象,Array.from将它转为真正的数组. let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3}; // ES5的写法var arr1 = [].slice.call(arrayLike);

Array对象的方法总结(ES5 与 ES6)

ES5 数组方法 1.Array.isArray()  方法用来判断一个值是否为数组.它可以弥补typeof运算符的不足 2.valueOf() 方法返回数组本身 3.toString() 方法返回数组的字符串形式 4.push() 方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度.注意,该方法会改变原数组. 5.pop() 方法用于删除数组的最后一个元素,并返回该元素.注意,该方法会改变原数组. 6.join() 方法以参数作为分隔符,将所有数组成员组成一个字符串返回.如果

ES6入门教程---数值扩展数组扩展和对象扩展

1.数值扩展 var num = 0b11; console.log(num);3 var num = 0o11;console.log(num);9 var num = 1.234; console.log(Math.trunc(num))//干掉小数点console.log(Math.sign(-0));//判断参数是正数.负数.正0还是负0 console.log(Math.hypot(3,4))//返回所有参数的平方和的平方根(勾股定理) 2.数组扩展 var str = 'xunian

ES6中对对象的扩展

ES6允许直接写入变量和函数作为对象的属性和方法.这样的书写更加简洁. ES6允许在对象中只写属性名,不写属性值.这时,属性值等于属性名所代表的变量. function f(x , y){ return {x ,y}; } f(1,2)// Object {x:1,y:2} function getPoint(){ var x=1; var y=10; return {x,y}; } getPoint()//{x:1,y:10} js语言定义对象的属性有两种方法.obj.foo=true;obj

web前端之es6对象的扩展

1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算符,相等运算符,相等运算符(==) 和严格相等运算符(===) 5.Object.assign() Object.assign 方法用于对象的合并,将源对象的所有的可枚举属性,赋值到目标对象 例如; 6.属性的可枚举行和遍历 可枚举性 描述对象的enumerable 属性,称为“可枚举属性” 如果该

ES6对数组的扩展

ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回.例如将dom节点集合转化为数组,以前我们可能都会这样写: var divs = document.querySelectAll("div"); [].slice.call(