当前位置:   article > 正文

对象在es6中的扩展_return key in ms ? ms[key] : null;

return key in ms ? ms[key] : null;

1、属性的简洁表示法

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

 

  1. const foo = 'bar';
  2. const baz = {foo};
  3. baz // {foo: "bar"}
  4. // 等同于
  5. const baz = {foo: foo};

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

  1. function f(x, y) {
  2. return {x, y};
  3. }
  4. // 等同于
  5. function f(x, y) {
  6. return {x: x, y: y};
  7. }
  8. f(1, 2) // Object {x: 1, y: 2}
  1. const o = {
  2. method() {
  3. return "Hello!";
  4. }
  5. };
  6. // 等同于
  7. const o = {
  8. method: function() {
  9. return "Hello!";
  10. }
  11. };

下面是一个实际的例子。

  1. let birth = '2000/01/01';
  2. const Person = {
  3. name: '张三',
  4. //等同于birth: birth
  5. birth,
  6. // 等同于hello: function ()...
  7. hello() { console.log('我的名字是', this.name); }
  8. };

这种写法用于函数的返回值,将会非常方便。

  1. function getPoint() {
  2. const x = 1;
  3. const y = 10;
  4. return {x, y};
  5. }
  6. getPoint()
  7. // {x:1, y:10}

CommonJS 模块输出一组变量,就非常合适使用简洁写法。

  1. let ms = {};
  2. function getItem (key) {
  3. return key in ms ? ms[key] : null;
  4. }
  5. function setItem (key, value) {
  6. ms[key] = value;
  7. }
  8. function clear () {
  9. ms = {};
  10. }
  11. module.exports = { getItem, setItem, clear };
  12. // 等同于
  13. module.exports = {
  14. getItem: getItem,
  15. setItem: setItem,
  16. clear: clear
  17. };

 

2 属性名表达式

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

  1. // 方法一
  2. obj.foo = true;
  3. // 方法二
  4. obj['a' + 'bc'] = 123;

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

但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。

  1. var obj = {
  2. foo: true,
  3. abc: 123
  4. };

ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。

  1. let propKey = 'foo';
  2. let obj = {
  3. [propKey]: true,
  4. ['a' + 'bc']: 123
  5. };

下面是另一个例子。

  1. let lastWord = 'last word';
  2. const a = {
  3. 'first word': 'hello',
  4. [lastWord]: 'world'
  5. };
  6. a['first word'] // "hello"
  7. a[lastWord] // "world"
  8. a['last word'] // "world"

表达式还可以用于定义方法名。

  1. let obj = {
  2. ['h' + 'ello']() {
  3. return 'hi';
  4. }
  5. };
  6. obj.hello() // hi

注意,属性名表达式与简洁表示法,不能同时使用,会报错。

  1. // 报错
  2. const foo = 'bar';
  3. const bar = 'abc';
  4. const baz = { [foo] };
  5. // 正确
  6. const foo = 'bar';
  7. const baz = { [foo]: 'abc'};

 

3、Object.keys(),Object.values(),Object.entries()

Object.keys()

ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

  1. var obj = { foo: 'bar', baz: 42 };
  2. Object.keys(obj)
  3. // ["foo", "baz"]

S2017 引入了跟Object.keys配套的Object.valuesObject.entries,作为遍历一个对象的补充手段,供for...of循环使用。

  1. let {keys, values, entries} = Object;
  2. let obj = { a: 1, b: 2, c: 3 };
  3. for (let key of keys(obj)) {
  4. console.log(key); // 'a', 'b', 'c'
  5. }
  6. for (let value of values(obj)) {
  7. console.log(value); // 1, 2, 3
  8. }
  9. for (let [key, value] of entries(obj)) {
  10. console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
  11. }

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/101801
推荐阅读
相关标签
  

闽ICP备14008679号