es6--对象的扩展

属性的简洁表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

注意：如果属性名(key)和属性值(value)是同一个，则可以省略属性值不写

 上面代码中，变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例子。

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

下面是一个实际的例子。

let birth = '2000/01/01';

const Person = {

  name: '张三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

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
};

属性名表达式

JavaScript 定义对象的属性，有两种方法。

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。即将属性名作为一个动态的值

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

方法的 name 属性

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。

const person = {
            meName() {
                console.log('abc');
          }
    };
console.log(person.meName.name);

上面代码中，方法的name属性返回函数名（即方法名）

对象的扩展运算符(解构赋值)

《数组的扩展》一章中，已经介绍过扩展运算符（...）

ES2018 将这个运算符引入了对象

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面

所有的键和值，都会拷贝到新对象上面

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

新增：Object.is()

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）

它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0

JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等

ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题

Object.is就是部署这个算法的新方法--用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

新增：Object.assign() 将多个对象合并为一个对象

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）

语法：Object.assign(目标对象，源对象1，源对象3,...);

1.Object.assign() 合并到了第一个参数中，返回的就是合并后的对象

<script>
        //
        const apple = {
            color: '红色',
            shape: '圆形',
            taste: '甜'
        };

        const pen = {
            color: '蓝色',
            shape: '圆柱形',
            use: '写字'
        };

        console.log(Object.assign(apple, pen));
        console.log(Object.assign(apple, pen) === apple);
        console.log(apple);

        console.log({...apple,
            ...pen
        });
        console.log({...apple,
            ...pen
        } === apple);
</script>

示例2：

<script>
        //
        const apple = {
            color: '红色',
            shape: '圆形',
            taste: '甜'
        };

        const pen = {
            color: '蓝色',
            shape: '圆柱形',
            use: '写字'
        };

        console.log(Object.assign({}, apple, pen));

        console.log(apple);
        console.log(pen);
    </script>

2.注意事项：

基本数据类型作为源对象：与对象展开类似，先转换为对象，再合并

 <script>

        //
        console.log(Object.assign({}, null));
        console.log(Object.assign({}, undefined));
        console.log(Object.assign({}, 123));
        console.log(Object.assign({}, true));
        console.log(Object.assign({}, 'hello'));
</script>

同名属性的替换，后面的属性直接替换前面的

<script>
        //
        const apple = {
            color: '红色',
            shape: '圆形',
            taste: '甜'
        };

        const pen = {
            color: '蓝色',
            shape: '圆柱形',
            use: '写字'
        };

        console.log(Object.assign({}, apple, pen));
    </script>

示例2：

<script>
        //
        const apple = {
            color: ['红色', '黄色'],
            shape: '圆形',
            taste: '甜'
        };

        const pen = {
            color: ['蓝色', '橘色'],
            shape: '圆柱形',
            use: '写字'
        };

        console.log(Object.assign({}, apple, pen));
    </script>

应用：

 <script>
        //合并默认参数和用户参数
        const logUser = userOptions => {
            const DEFAULTS = {
                username: 'ZhangSan',
                age: 15,
                sex: 'male'
            };

            const options = Object.assign({}, DEFAULTS, userOptions);

            console.log(options);
        };
        // logUser();
        // logUser({});
        logUser({
            username: 'jack'
        });
    </script>

新增：Object.keys()、Object.values()、Object.entries()

基本用法：

  

 <script>
        //基本用法
        const person = {
            name: 'zhangsan',
            age: 15,
            sex: 'male'
        };

        console.log(Object.keys(person));
        console.log(Object.values(person));
        console.log(Object.entries(person));
    </script>

 

与数组类似方法的区别

 <script> 
        console.log([1, 2].keys());
        console.log([1, 2].values());
        console.log([1, 2].entries());
    </script>

总结：

•  数组的keys()、values()、entries()等方法是实例方法，返回的都是Iterator
• 对象的Object.keys()、Object.values()、Object.entries()等方法是构造函数方法，返回的是数组

应用：

 <script>
        //应用
        const person = {
            name: 'Alex',
            age: 19,
            ex: 'male'
        };

        for (const key of Object.keys(person)) {
            console.log(key);
        }

        for (const value of Object.values(person)) {
            console.log(value);
        }

        // for (const value of Object.entries(person)) {
        //     console.log(value);
        // }

        for (const [key, value] of Object.entries(person)) {
            console.log(key, value);
        }
    </script>

注意：keys()、values()、entries()并不能保证顺序一定是你看到的样子，这一点和for..in循环是一样的