js扩展运行符(...)的用法

╰半橙微兮° 2024-03-31 14:36 56阅读 0赞

在js日常开发中，经常会看到(…)这样的符号，这里介绍一下它的含义和作用。

## 定义 ##

扩展运算符(…)是ES6的用法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。

## 基本用法 ##

let people = {
        name: "张三"，age: 18}
    let someone = {
        ...person}
    someone   //{name: "张三"，age: 18}

## 特殊用法 ##

### **数组** ###

由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组

let foo = {
        ...['a', 'b', 'c']}
    console.log(foo)
    [object] {
        "0":"a","1":"b","2":"c"}

### **空对象** ###

如果扩展运算符后面是一个空对象，则没有任何效果

let a = {...{}, a: 1}
    console.log(a)
    [object] {"a":1}

### **Int类型、Boolean类型、undefined、null** ###

如果扩展运算符后面是上面这几种类型，都会返回一个空对象，因为它们没有自身属性。

// 等同于{...Object(1)}
    let num = {...1}
    console.log(num)
    
    // 等同于{...Object(true)}
    let boo = {...true}
    console.log(boo)
    
    // 等同于{...Object(undefined)}
    let undef = {...undefined}
    console.log(undef)
    
    // 等同于{...Object(null)}
    let nul = {...null}
    console.log(null)

### **字符串** ###

如果扩展运算符后面是字符串，它会自动转在一个类似数组的对象

let str = {...'hello'}
    console.log(str)
    [object] {"0":"h","1":"e","2":"l","3":"l","4":"o"}

### **对象的合并** ###

let age = {age: 15}
    let name = {'name': '张三'}
    let person = {...age, ...name}
    console.log(person)
    [object] {"age":15,"name":"张三"}

## 注意事项 ##

自定义的属性和拓展运算符对象里面属性的相同的时候：  
自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉

let person = {name: '张三', age: 15}
    let someone = {...person, name: '李四', age:17}
    console.log(someone)
    [object] {"age":17,"name":"李四"}

自定义的属性在拓展运算符前面，则变成设置新对象默认属性值

let person = {name: '张三', age: 15}
    let someone = { name: '李四', age:17,...person}
    console.log(someone)
    [object] {"age":15,"name":"张三"}