JS学习笔记-ES6-扩展运算符

本文深入探讨ES6中扩展运算符的使用方法,包括数组和对象的扩展,以及如何与解构赋值结合使用。文章详细介绍了扩展运算符在复制数组、合并数组、与字符串及迭代器接口对象的交互,以及在Map、Set结构和Generator函数中的应用。同时,探讨了对象扩展运算符的特性,如浅拷贝和深拷贝的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考:阮一峰-es6扩展运算符

1、数组扩展运算符

扩展运算符(spread)是三个点(…)。
扩展运算符与正常的函数参数可以结合使用,非常灵活。

function a (a,b){}
var arg=[0,1]
a(3,...arg)

扩展运算符后面还可以放置表达式。

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

如果扩展运算符后面是一个空数组,则不产生任何效果。

[...[], 1]
// [1]
  1. 替代函数的 apply 方法
  2. 扩展运算符的应用
    (1)复制数组
var a=[1,2,3]
var b=[...a];//写法一
var [...b]=a//写法二

(2)合并数组
它们的成员都是对原数组成员的引用,这就是浅拷贝。如果修改了引用指向的值,会同步反映到新数组。

var a =[0,1,2]
var b =[1,2,3]
var c=[...a,...b]
console.log(c)//[0, 1, 2, 1, 2, 3]
浅拷贝

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

[a,...b]=list

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

[a,...b]=[0,1,2,3]
console.log(a)//0
console.log(b)//[1, 2, 3]
[...b,a]=[0,1,2,3]//报错:Rest element must be last element

(4)字符串

var str="sxl";
var b=[...str]
console.log(b)//["s", "x", "l"]

(5)实现了 Iterator 接口的对象
任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。
(6)Map 和 Set 结构,Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; /

Generator 函数

2、对象扩展运算符

(1)解构赋值
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

let [a,b,...c]=[0,1,2,3,4]
console.log(a)//0
console.log(b)//1
console.log(c)// [2, 3, 4]
c获取等号右边的所有尚未读取的键,将它们连同值一起拷贝过来。
  • 解构赋值必须是最后一个参数,否则会报错。同数组
  • 解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
  • 扩展运算符的解构赋值,不能复制继承自原型对象的属性。
    (2)
  • 对象的扩展运算符(…)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
var person ={name:"xiaoming",
     age:19,}
 var person1={...person}
 console.log(person1)//{name: "xiaoming", age: 19}
  • 如果扩展运算符后面是一个空对象,则没有任何效果。
{...{},person}//person: {name: "xiaoming", age: 19}
  • 如果扩展运算符后面不是对象,则会自动将其转为对象。
{...1} // {}
  • 如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。
{..."sxl"}//{0: "s", 1: "x", 2: "l"}
  • 对象的扩展运算符等同于使用Object.assign()方法。
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);
  • 如果想完整克隆一个对象,还拷贝对象原型的属性,可以采用下面的写法。
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)
  • 扩展运算符可以用于合并两个对象。
let ab = { ...a, ...b };
  • 如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
  • 如果把自定义属性放在扩展运算符前面,就变成了设置新对象的默认属性值。
  • 与数组的扩展运算符一样,对象的扩展运算符后面可以跟表达式。
  • 扩展运算符的参数对象之中,如果有取值函数get,这个函数是会执行的。

3、函数扩展运算符

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值