zoukankan      html  css  js  c++  java
  • ES6对象简洁语法

    对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级,本章介绍数据结构本身的改变及语法应用细节。

    1.属性的简洁表示法
    ◆ ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
    const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}
    // 等同于
    const baz = {foo: foo};

    ◆ ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
    function f(x, y) {
    return {x, y};
    }
    // 等同于
    function f(x, y) {
    return {x: x, y: y};
    }
    f(1, 2) // Object {x: 1, y: 2}

    ◆ 除了属性简写,方法也可以简写。
    const o = {
    method() {
    return "Hello!";
    }
    };
    // 等同于
    const o = {
    method: function() {
    return "Hello!";
    }
    };

    如:
    let birth = '2000/01/01';
    const Person = {
    name: '张三',
    birth, //等同于birth: birth[重要]
    hello() { console.log('我的名字是', this.name); } // 等同于hello: function ()...
    };

    这种写法用于函数的返回值,非常方便。
    function getPoint() {
    const x = 1;
    const y = 10;
    return {x, y};
    }
    getPoint() // {x:1, y:10}

    ◆ CommonJS 模块输出一组变量,就非常合适使用简洁写法
    let ms = {};
    function getItem (key) {
    return key in ms ? ms[key] : null;
    }
    function setItem (key, value) {
    ms[key] = value;
    }
    function clear () {
    ms = {};
    }
    module.exports = { getItem, setItem, clear };
    // 等同于
    module.exports = {
    getItem: getItem,
    setItem: setItem,
    clear: clear
    };

    ◆ 注意,简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。
    const obj = {
    class () {}
    };
    // 等同于
    var obj = {
    'class': function() {}
    };

    2.属性名表达式
    JavaScript 定义对象的属性,有两种方法。
    // 方法一
    obj.foo = true;
    // 方法二
    obj['a' + 'bc'] = 123;
    上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
    但如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
    var obj = {
    foo: true,
    abc: 123
    };
    ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
    let propKey = 'foo';
    let obj = {
    [propKey]: true,
    ['a' + 'bc']: 123
    };

    下面是另一个例子。
    let lastWord = 'last word';

    const a = {
    'first word': 'hello',
    [lastWord]: 'world'
    };
    a['first word'] // "hello"
    a[lastWord] // "world"
    a['last word'] // "world"

    ◆ 表达式还可以用于定义方法名。
    let obj = {
    ['h' + 'ello']() {
    return 'hi';
    }
    };
    obj.hello() // hi
    注意,属性名表达式与简洁表示法,不能同时使用,会报错。
    // 报错
    const foo = 'bar';
    const bar = 'abc';
    const baz = { [foo] };
    // 正确
    const foo = 'bar';
    const baz = { [foo]: 'abc'};
    注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

    3.方法的 name 属性
    函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。
    const person = {
    sayName() {
    console.log('hello!');
    },
    };
    person.sayName.name // "sayName"
    上面代码中,方法的name属性返回函数名(即方法名)。

    4.对象的扩展运算符
    A.解构赋值
    对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    x // 1
    y // 2
    z // { a: 3, b: 4 }
    解析:变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b),将它们连同值一起拷贝过来。
    注意事项:
    1.解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
    let { ...z } = null; // 运行时错误
    let { ...z } = undefined; // 运行时错误

    2.解构赋值必须是最后一个参数,否则会报错
    let { ...x, y, z } = someObject; // 语法错误
    let { x, ...y, ...z } = someObject; // 语法错误

    B.扩展运算符
    对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
    let z = { a: 3, b: 4 };
    let n = { ...z };
    n // { a: 3, b: 4 }

    由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。
    let foo = { ...['a', 'b', 'c'] };
    foo // {0: "a", 1: "b", 2: "c"}

    如果扩展运算符后面是一个空对象,则没有任何效果。
    {...{}, a: 1} // { a: 1 }

    如果扩展运算符后面不是对象,则会自动将其转为对象。
    // 等同于 {...Object(1)}
    {...1}
    // {}扩展运算符后面是整数1,会自动转为数值的包装对象Number{1}。由于该对象没有自身属性,所以返回一个空对象

    5 对象的新增语法
    01 Object.is
    用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
    123==“123” //true
    123===“123” //false
    Console.log(Object.is(123,”123”)) // false

    02 Object. assign
    Object.assign用来合并对象
    //let 新的对象 = Object.assign(目标对象, source1, srouce2....)
    03 Object. Keys/values/entries
    `Object.keys()`:返回对象自身的所有可枚举的属性的键名。
    Object.values()`:返回对象自身的所有可枚举的属性的值
    Object. entries ()`:返回对象自身的所有可枚举的名、值对

  • 相关阅读:
    JavaScript 基础(三)
    2015-10-15 第十四节课 补充CSS一些特殊选择器
    2015-09-29 第八节课 JavaScript 基础(二)(js语句:条件、循环)
    2015-09-28 第七节课JavaScript 基础(一) (js简介、声明变量、数据类型)
    2015 09-23 第五节课程(css:仿站及常见代码用法)
    【小练习2】如何制作“表格”
    51nod-1627 瞬间移动(组合数+逆元)
    POJ-3450 Corporate Identity (KMP+后缀数组)
    POJ-2406 Power Strings(KMP)
    CSU-1632 Repeated Substrings (后缀数组)
  • 原文地址:https://www.cnblogs.com/jxjy/p/11764982.html
Copyright © 2011-2022 走看看