文章目录
前言
这里将会简单介绍一下在ES6中扩展运算符在数组中以及对象中的用法
提示:以下是本篇文章正文内容,下面案例可供参考
一、在数组中的应用
1.遍历数组
// 1.遍历数组
var arr = [1, 2, 3, 4, 5]
console.log(...arr);
2.当作数组的参数
// 2.可以当作数组的参数
var numArr = ['a', ...arr, 'b']
console.log(numArr);
3.数组的深拷贝
// 3.深拷贝
var arrA = [...arr]
console.log(arrA);
arrA.unshift(0)
console.log(arrA);
console.log(arr);
4.作为函数中的参数
// 4.可以作为函数中的参数
function fn(x, ...y) {
console.log(x);
console.log(...y);
}
fn(...arr)
5.和解构赋值连用
// 5.可以和解构赋值连用
let [a, ...b] = [1, 2, 3, 4]
console.log(a);
console.log(...b);
6.将伪数组转化为真正的数组
// 6.可以将伪数组,转换成真正的数组
var str = '扩展运算符'
console.log(Array.of(1, 2, 3));
console.log(Array.from(str));
console.log([...str]);
二、在对象中的应用
1.对象的合并
var obj = {
name: 'name',
age: 18,
sex: '男'
}
console.log(obj.name = 'zs');
console.log({ ...obj, name: 'zs', age: 20 });
2.对象的遍历
var obj_1 = {
a: 1,
b: 2
}
var obj_2 = {
b: 3,
...obj_1
}
console.log(obj_2);
3.表达式
const obj = {
...(x > 1 ? {a: 1} : {}),
b: 2,
};
4.解构赋值
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined
5.拷贝对象
let obj_4={sty:'123',num:231}
let obj_5={...obj_4}
console.log(obj_5);
总结
以上就是今天要讲的内容,还有其他应用,欢迎补充