@ES6
扩展运算符(…)的应用
扩展运算符(…)可以将数组或对象拆分成以逗号分隔的参数序列
用于数组合并
let ary1
= [1, 2, 3];
let ary2
= [3, 4, 5];
let ary3
= [...ary1
, ...ary2
];
console
.log(ary3
);
let ary1
= [1, 2, 3];
let ary2
= [3, 4, 5];
ary1
.push(...ary2
);
console
.log(ary1
);
可以用于数组或对象的深拷贝
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
)
var ary
= [...oDivs
];
ary
.push('a');
console
.log(ary
);
</script
>
</body
>
</html
>
将字符串转为数组
var str
= 'hello world';
var ary
= [...str
];
console
.log(ary
);
将字符串转换为正真的数组可以用于求某字符串中字符的去重及排序(数字)等操作
与解构赋值结合
扩展运算符可以与解构赋值结合起来，用于生成数组。
var ary
= [1, 2, 4, 5];
var [a
, ...b
] = ary
;
console
.log(a
);
console
.log(b
);
##注意:如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
var ary
= [1, 2, 4, 5];
var [...a
, b
, c
] = ary
;
var [a
, ...b
, c
] = ary
;
var [a
, b
, ...c
] = ary
;
