ES6扩展运算符(...)的应用

最新推荐文章于 2023-08-09 21:48:55 发布

AmyGeng123

最新推荐文章于 2023-08-09 21:48:55 发布

阅读量227

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/AmyGeng123/article/details/108932463

版权

@ES6

扩展运算符(…)的应用

扩展运算符(…)可以将数组或对象拆分成以逗号分隔的参数序列

用于数组合并

// 方法一   (常用)
  let ary1 = [1, 2, 3];
  let ary2 = [3, 4, 5];
  let ary3 = [...ary1, ...ary2];
  console.log(ary3);// [1, 2, 3, 3, 4, 5]
// 方法二   
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
ary1.push(...ary2);
 console.log(ary1);// [1, 2, 3, 3, 4, 5]

可以用于数组或对象的深拷贝

 var obj = {
            name: 'andy',
            color: ['red', 'purple', 'green'],
            msg: {
                age: 18,
                sex: '女'
            },
            sayHi: function () {
                console.log('我是一个舞蹈家');
            }
        }
        var o = {};
        function deepCopy(newObj, oldObj) {
            for (var k in oldObj) {
                if (oldObj[k] instanceof Array) {
                    newObj[k] = [...oldObj[k]];
                } else if (oldObj[k] instanceof Function) {
                    newObj[k] = oldObj[k]
                } else if (oldObj[k] instanceof Object) {
                    newObj[k] = { ...oldObj[k] };
                } else {
                    // 如果是简单类型数据,就直接赋值追加给新的对象
                    newObj[k] = oldObj[k]
                }
            }
        }
        deepCopy(o, obj)
        console.log(obj);
        console.log(o);
        o.sayHi();
        obj.sayHi();

        o.name = 'amy';
        console.log(o.name);
        console.log(obj.name);//修改新对象的属性,不会影响旧对象

        o.color[2] = 'blue';
        console.log(o.color);
        console.log(obj.color);//修改新对象的属性,不会影响旧对象

        o.sayHi = function () {
            console.log('我是一个程序媛');
        };
        o.sayHi();
        obj.sayHi()//修改新对象的方法,不会影响旧对象

将伪数组转换为真正的数组

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>扩展运算符</title>
</head>

<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script>
		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs)//HTMLCollection(6) [div, div, div, div, div, div] 伪数组
		var ary = [...oDivs];
		ary.push('a');//真正的数组,可以进行push操作
		console.log(ary); //[div, div, div, div, div, div, "a"] 
	</script>
</body>

</html>

将字符串转为数组

var str = 'hello world';
var ary = [...str];
console.log(ary);//(11) ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

将字符串转换为正真的数组可以用于求某字符串中字符的去重及排序(数字)等操作

与解构赋值结合

扩展运算符可以与解构赋值结合起来，用于生成数组。

var ary = [1, 2, 4, 5];
var [a, ...b] = ary;
console.log(a);//1
console.log(b);//[2,4,5]

##注意:如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

 var ary = [1, 2, 4, 5];
 var [...a, b, c] = ary;//报错:Uncaught SyntaxError: Rest element must be last element
 var [a, ...b, c] = ary;//报错:Uncaught SyntaxError: Rest element must be last element
 var [a, b, ...c] = ary;//报错:Uncaught SyntaxError: Rest element must be last element

AmyGeng123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6扩展运算符(...)的应用

@JavaScript对象扩展运算符(…)的应用扩展运算符(…)可以将数组或对象拆分成以逗号分隔的参数序列用于数组合并// 方法一 (常用) let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; console.log(ary3);// [1, 2, 3, 3, 4, 5]// 方法二 let ary1 = [1, 2, 3];let ary2 = [3, 4, 5];ar
复制链接

扫一扫