ES6语法的简单介绍——拓展运算符

简单概要下我最近学习的ES6语法,说一说我觉得平时比较常用的几个需要掌握的语法。(有问题希望各位大神及时指出)

 

一、拓展运算符(...)

(1)、将一个数组转为逗号隔开的参数序列

(小栗子示范:cosnsole.log(...[5,6,7])  //5 6 7)

下面这段小代码是最近做的项目中所用到的简单示例

/**
* 组件回调函数 新增保存 编辑保存
* @param {* addData} 回传的数据
* @param {* saveType} 保存 or 保存并转化
* @param {* operaType} 新增保存 or 编辑保存
*/
async handlerCustomAdd(addData, saveType, operaType) {
 this.handleSpinCustom()
 let params = {
   ...addData,
   companyCityCode: addData.provinceArr[1],
   submitState: saveType === 'saveClueAs' ? 2 : 1}
 let url = operaType === 'customAdd' ? 'handlerCustomAdd' : 'handlerCustomUpdate'
 let { data } = await customApi[url](params);
 this.$Spin.hide();
 if (data.code === 0) {
 this.$Message.success('客户保存成功!');
 this.popShow = false;
 this.queryList()
  } else {
   this.$Message.error(data.message)}},
 
(2)、主要用于函数调用
 
(3)、合并数组(可以将多个数组进行合并
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

结果
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
(4)、函数多参数传递, 替换Apply
 
 先把参数定义成数组,函数定义好。
let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
  console.log( a1, a2, a3, a4)
}

在ES6前,要把数组参数传递给函数,要么按照下标访问数组元素去调用函数,缺点是数组个数和函数参数个数完全绑定,有一个个数发生变化,那么就要修改了。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

要么就用Apply进行调用,结果当然是没毛病,也是ES6之前用的最多的。

fun1.apply(null, arr4)

如果是用扩展运算符,那就方便l。

fun1(...arr4)

结果:

arg1 arg2 arg3 arg4
(5)、与解构配合赋值
 配合使用,可以从数组中提取除第一个以后的所有元素成另外一个数组。
let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

结果:

1
[ 2, 3, 4, 5, 6 ]

但要注意,与解构配合时,扩展运算符只能用在最后一个上,否则报错。

(6)、可以展开实现了Iterator 接口的对象
比如Map,Set,数组就是从Iterator接口实现来的,Object不是,所以扩展Object会报错。
扩展Set。
let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

结果:

1 2 3

(7)、扩展Map。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

结果:

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意,扩展出来的一个个的数组,按照map的键值对结构,每个数组都是2个元素,一个是key,一个是value。

如果扩展Object,就会报错。

let obj1 = {
   p1: 1,
   p2: 2,
   p3: 3
}
console.log(...obj1)

报错。

转载于:https://www.cnblogs.com/zhonghuali/p/10939068.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值