首页 > 编程知识 正文

es6 三目运算符,es6对象的方法

时间:2023-05-03 12:44:35 阅读:8761 作者:1031

1语义扩展算子(spread )有三点)…。 这就像rest参数的逆运算,它将数组转换为一系列用逗号分隔的参数。

console.log ([ 1,2,3 ] )/123console.log ), [ 2,3,4 ],5 )/1234 ) . document.queryselectoralect

此运算符主要用于函数调用。

Functionpush(Array, items ) array.push (items ); }functionadd(x,y ) {return x y; } var numbers=[ 4,38 ]; 在add(numbers )/42上的代码中,Array.push )…items )和add )…numbers两行是函数的调用,并使用扩展运算符。 运算符将数组更改为参数序列。

扩展运算符可以与常规函数参数结合使用,非常灵活。

functionf(v,w,x,y,z ) { } varargs=[ 0,1 ]; f(-1, args,2, [3];

2 apply方法(而不是数组)可以通过扩展运算符展开数组,从而不需要apply方法并将数组转换为函数的参数。

//ES5的写法functionf(x,y,z ) )/. } varargs=[ 0,1,2 ]; f .应用(空,args ); //ES6的写法functionf(x,y,z ) )/. } varargs=[ 0,1,2 ]; f(args );

给出了一个使用扩展运算符而不是apply方法的实际示例。 应用Math.max方法以简化数组中最大元素的书写方式。

与//ES5表示法math.max.apply(null,[ 14,3,77 ] )//ES6表示法math.max ) . [ 14,3,77 ] )/math.max )同等以上的代码如果有扩展运算符,可以直接使用Math.max。

另一个示例是使用推式函数将一个数组添加到另一个数组的末尾。

//ES5的写法vararr1=[ 0,1,2 ]; vararr2=[ 3,4,5 ]; array.prototype.push.apply (arr 1,arr2); //ES6的写法vararr1=[ 0,1,2 ]; vararr2=[ 3,4,5 ]; arr1.推(arr2);

在上面代码的ES5符号中,推送方法的参数不能是数组,因此必须在apply方法中变通使用推送方法。 可以使用扩展运算符将数组直接传递给推式方法。

下面是另一个例子。

//es5new(date.bind.apply ) date,[null,2015,1,1 ] )/es6 new date…[ 2015,1,1 ];

3扩展算子的应用(1)关联序列扩展算子提供了序列关联的新写法。

//es5 [ 1,2 ].concat (more )/es6 [ 1,2, more]var arr1=['a ',' b']; var arr2=['c']; var arr3=['d ',' e']; //ES5的合并序列arr1.concat(arr2,arr3); //「a”、“b”、“c”、“d”、“//es6的合并数组[.arr1、 arr2、 arr3]//[ 'a、“b”、“c”、“d”

(2)与构造赋值相结合的扩展算子可以与构造赋值相结合用于数组的生成。

//ES5a=list[0],rest=list.slice(1)/es6 ) a, rest=list示例如下: const [first, rest ]=[ 1,2,3,4,5 ]; first//1rest//[ 2,3,4,5 ] const [ first, rest]=[]; first//未定义的rest//[ ] : const [ first, rest]=['foo']; 如果在first //'foo'rest //[]数组赋值中使用扩展运算符,则只能将其放在参数的末尾。 否则,将报告错误。

const [.butLast,last ]=[ 1,2,3,4,5 ]; //报告错误const [first, middle,last]=[1

, 2, 3, 4, 5];// 报错

( 3 )函数的返回值

JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);var d = new Date(...dateFields);上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date。

( 4 )字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello']// [ "h", "e", "l", "l", "o" ]上面的写法,有一个重要的好处,那就是能够正确识别 32 位的 Unicode 字符。

'xuD83DuDE80y'.length // 4[...'xuD83DuDE80y'].length // 3上面代码的第一种写法, JavaScript 会将 32 位 Unicode 字符,识别为 2 个字符,采用扩展运算符就没有这个问题。因此,正确返回字符串长度的函数,可以像下面这样写。

function length(str) {return [...str].length;}length('xuD83DuDE80y') // 3凡是涉及到操作 32 位 Unicode 字符的函数,都有这个问题。因此,最好都用扩展运算符改写。

let str = 'xuD83DuDE80y';str.split('').reverse().join('')// 'yuDE80uD83Dx'[...str].reverse().join('')// 'yuD83DuDE80x'上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。

( 5 )实现了 Iterator 接口的对象

任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div');var array = [...nodeList];上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 接口。

对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。

let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3};// TypeError: Cannot spread non-iterable object.let arr = [...arrayLike];上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。

( 6 ) Map 和 Set 结构, Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

let map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],]);let arr = [...map.keys()]; // [1, 2, 3]Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。

var go = function*(){yield 1;yield 2;yield 3;};[...go()] // [1, 2, 3]上面代码中,变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
如果对没有iterator接口的对象,使用扩展运算符,将会报错。

var obj = {a: 1, b: 2};let arr = [...obj]; // TypeError: Cannot spread non-iterable object



















版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。