JavaScript 扩展运算符 “...“详解
发布时间
阅读量：
阅读量
一、什么是扩展运算符?
扩展运算符"…"是在ES6中引入的一种语法,它用于展开数组、对象或字符串。扩展运算符的主要作用是快速、简洁地实现对集合元素地操作。下文将介绍扩展运算符的几种基本用法。
二、扩展运算符的作用
1.遍历数组
var arr=[1,2,3,4];
console.log(...arr); //1,2,3,4
javascript
2.当作数组中的元素
var arr=[1,2,3,4];
var arr1=[0,...arr];
console.log(...arr1);//0,1,2,3,4
javascript
3.对数组进行深拷贝
扩展运算符可简洁地对数组 进行深拷贝（注意不是对数组元素 进行深拷贝）,即改变原数组的内容后，拷贝的新数组内容不会随之改变。
先看数组的浅拷贝:拷贝了数组的地址
var arr=[1,2,3,4];
var arr1=arr;
console.log(...arr1); //1 2 3 4
arr.push(5);
console.log(arr); //1 2 3 4 5
console.log(...arr1) //1 2 3 4 5
javascript
可以看到，对原数组arr进行了操作之后，拷贝的数组arr1也进行了改变。下面演示用扩展运算符进行深拷贝（只改变了数组元素的值）。它将避免这个问题
var arr=[1,2,3,4];
var arr1=[...arr];
console.log(...arr1); //1 2 3 4
arr.push(5);
console.log(...arr); //1 2 3 4 5
console.log(...arr1) //1 2 3 4
javascript
4.函数的调用
1）.作为实参
可利用扩展运算符进行实参的传递
var arr=[1,2,3];
function fn(a,b,c,d){
console.log(a,b,c,d);
}
fn(0,...arr); //0 1 2 3
javascript
2）.作为形参
可利用扩展运算符进行形参的接收
function fn(a,...rest){
console.log(a); //0
console.log(...rest) //1 2 3
}
fn(0,1,2,3);
javascript
5.与解构赋值结合使用
扩展运算符可以结合解构赋值使用，方便快捷，形式上类似数组的深拷贝。(解构赋值相关内容详见我发表的关于解构赋值的文章)
var arr=[1,2,3];
var [x,y,z]=[...arr]
console.log(x,y,z) //1 2 3
javascript
6.将伪数组转化为真正的数组
伪数组是可遍历但不能调用数组中方法的对象，比如字符串，通过getElementbyClassName等获取的一堆dom对象，通过ajax返回的一些json对象等。下面将用字符串简单地进行演示。
var str='将伪数组转化为数组';
console.log(Array.isArray(str)); //flase
var strArr=[...str];
console.log(strArr); //(9) ['将', '伪', '数', '组', '转', '化', '为', '数', '组']
console.log(Array.isArray(strArr)); //true
javascript
7.遍历对象
类似遍历数组(要写在花括号内)
var obj={
name:'张三',
age:18,
}
console.log({...obj}) //{name: '张三', age: 18}
javascript
8.对象的深拷贝
类似数组的深拷贝，改变原对象后，拷贝的对象不会被改变
var obj={
name:'张三',
age:18,
}
var obj_1={...obj};
delete obj.age;
console.log(obj);
console.log(obj_1);
javascript
9.对象的合并
类似第2点，用扩展运算符也可以当作对象中的元素，即对象的合并。若合并的数组中有与原数组相同的key，则按书写顺序进行value的覆盖。后写覆盖先写的
var a={
a:1,
c:3
}
var b={
...a,
b:2,
c:1,
}
console.log(b) //{a: 1, c: 1, b: 2}
javascript
全部评论 (0)
还没有任何评论哟~