js中的展开运算符怎样应用？-群英

上一篇：js中promise用法是什么？promise有什么优势？下一篇：js如何实现消消乐游戏？

文本主要给大家分享的是关于JS展开运算符的内容，一些朋友可能对于JS展开运算符比较陌生，下文有对展开运算符介绍以及实例，感兴趣的朋友可以参考学习。

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法实际相当于

obj2 = {value1: 1, value2: 2}

展开运算符的写法与obj2 = obj1直接赋值的写法的区别在于如果直接赋值的话，对于引用类型来说，相当于只是赋值了obj1的内存空间地址，当obj2发生改变的时候，obj1也会随着发生改变。而是用展开运算符写法的话，由于obj1对象中的属性类型都是基本类型，相当于重新创建了一个对象，此时obj2发生改变的时候，并不会影响obj1这个对象。但是仅限于其属性都为基本类型的情况（或者说只进行了一层的深拷贝）。如果该对象中的属性还有引用类型的话，修改属性中引用类型的值，则两个对象的属性值都会被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

展开运算符的应用

1.在函数中使用展开运算符

function test(a, b, c){};

let arr = [1, 2, 3];
test(...arr);

2.数组字面量中使用展开运算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解构赋值，解构赋值中展开运算符只能用在最后，否则会报错。

// 解构赋值中展开运算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.类数组变成数组

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.对象中使用展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

将一个对象插入另外一个对象当中：

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并两个对象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

以上就是关于js展开运算符的相关操作介绍，上述示例有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习有帮助，想要了解更多js展开运算符内容，大家可以关注其他相关文章。

文本转载自脚本之家

标签： js展开运算符

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：js中promise用法是什么？promise有什么优势？下一篇：js如何实现消消乐游戏？