全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  行业资讯

JavaScript全解析——ES6扩展运算符

发布时间:2023-06-01 15:56:00
发布人:zyh

  ES6扩展运算符

  ●扩展运算符也是ES6 的新语法,主要有两个功能

  ●展开和合并

  ●该语法主要操作的是数组和对象

  ●语法:...

ES6扩展运算符

  展开

  ●可以 展开对象, 或者 展开数组

  ○如果是展开对象, 就是去掉对象的 {}

  ○果是展开数组, 就是去掉数组的 []

  展开数组 

<script>
const a1 = [100, 200, 300, 400]
// 如果我想在控制台打印 100 200 300 400
console.log(100, 200, 300, 400) //100 200 300 400
console.log(...a1) //100 200 300 400
const a2 = [...a1, 500, 600, 700]
console.log(a2) //Array(7)
const res = Math.max(...a1)
console.log(res) //400
</script>

  展开对象 

<script>
// 展开对象
const o1 = {
name: 'Jack',
age: 18
}
console.log(o1); //{name: 'Jack', age: 18}
const o2 = {
gender: '男',
...o1
}
console.log(o2); //{gender: '男', name: 'Jack', age: 18}
const o3 = {
...o2,
love: '玩耍'
}
console.log(o3); //{gender: '男', name: 'Jack', age: 18, love: '玩耍'}
</script>

  合并

  ●当这个符号书写在函数的形参位置的时候, 叫做合并运算

  ●从当前形参位置开始获取实参, 直到末尾

  ●注意: 合并运算符一定要写在最后一位

<script>
// 会把第一个实参赋值给 a
// 会把第二个参数给了c
// 从第三个开始到最后的所有实参, 全部放在一个数组里面, 给到 b
const fn = (a, c, ...b) => {
console.log("我是 fn 函数")
console.log(a) //100
console.log(b); // [300, 400, 500, 600, 700]
console.log(c); //200
}
fn(100, 200, 300, 400, 500, 600, 700)
</script>

<script>
// 会直接报错 Uncaught SyntaxError: Rest parameter must be last formal parameter
//未捕获SyntaxError:Rest参数必须是最后一个形式参数
//也就是说在合并的时候,合并运算符一定要写到最后
const fn = (a, ...b, c) => {
console.log("我是 fn 函数")
console.log(a)
console.log(b);
console.log(c);
}
fn(100, 200, 300, 400, 500, 600, 700)
</script>

#运算符

相关文章

PMP®认证荣获北京市境外职业资格认可!

2023-09-07

有哪些好的HTML5前端开发培训机构?

2023-09-07

怎么选择适合自己的HTML5前端开发培训机构?

2023-09-07

短视频运营哪个培训机构靠谱?

2023-09-07

怎么选择靠谱的短视频运营培训机构?

2023-09-07

短视频运营哪个培训机构好?

2023-09-07
在线咨询 免费试学 教程领取