zoukankan      html  css  js  c++  java
  • js 扩展运算符(...)的用法

    在日常开发中,我们在看js代码时,经常会看到(...)这样的符号。这里介绍一下它的含义和作用。

    定义:

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

    基本用法

    let person = {name: "Amy", age: 15}
    let someone = { ...person }
    someone  // {name: "Amy", age: 15}
    

    特殊用法

    数组

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

    let foo = { ...['a', 'b', 'c'] };
    foo
    // {0: "a", 1: "b", 2: "c"}
    
    空对象

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

    let a = {...{}, a: 1}
    a // { a: 1 }
    
    Int类型、Boolen类型、undefined、null

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

    // 等同于 {...Object(1)}
    {...1} // {}
    
    // 等同于 {...Object(true)}
    {...true} // {}
    
    // 等同于 {...Object(undefined)}
    {...undefined} // {}
    
    // 等同于 {...Object(null)}
    {...null} // {}
    
    字符串

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

    {...'hello'}
    // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
    

    对象的合并

    let age = {age: 15}
    let name = {name: "Amy"}
    let person = {...age, ...name}
    person; // {age: 15, name: "Amy"}
    

    注意事项

    自定义的属性和拓展运算符对象里面属性的相同的时候:

    自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。
    let person = {name: "Amy", age: 15};
    let someone = { ...person, name: "Mike", age: 17};
    someone;  //{name: "Mike", age: 17}
    
    自定义的属性在拓展运算度前面,则变成设置新对象默认属性值。
    let person = {name: "Amy", age: 15};
    let someone = {name: "Mike", age: 17, ...person};
    someone;  //{name: "Amy", age: 15}
    
  • 相关阅读:
    Photoshop 基础七 位图 矢量图 栅格化
    Photoshop 基础六 图层
    Warfare And Logistics UVALive
    Walk Through the Forest UVA
    Airport Express UVA
    Guess UVALive
    Play on Words UVA
    The Necklace UVA
    Food Delivery ZOJ
    Brackets Sequence POJ
  • 原文地址:https://www.cnblogs.com/wangyingblock/p/15309047.html
Copyright © 2011-2022 走看看