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>