29.ES8-Object.values和Object.entries和padStart和padEnd和TrailingCommas和Object.getOwnPropertyDescriptors

Object.values

  • Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同
const obj = {
  name: "why",
  age: 18,
};
console.log(Object.values(obj)); //['why', 18]

类数组,按照键名升序返回

const obj1 = {
  100: "why",
  2: 18,
  7: 1.88,
};
console.log(Object.values(obj1)); //[18,1.88,'why']

只返回可枚举属性的值

const my_obj = Object.create(
  {},
  {
    getFoo: {
      //不可枚举
      value: function () {
        return this.foo;
      },
    },
  }
);
my_obj.foo = "bar";
console.log(Object.values(my_obj)); // ['bar']

也可以处理字符串

console.log(Object.values("abc")); //[ 'a', 'b', 'c' ]

如果传入一个数组,则把此数组返回

console.log(Object.values(['why',18])) //[ 'why', 18 ]

Object.entries

  • Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致
const obj = {
  name: "why",
  age: 18,
};
const entries = Object.entries(obj);
console.log(entries); //[ [ 'name', 'why' ], [ 'age', 18 ] ]

遍历对象的方法一:

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// name: why
// age: 18

遍历对象的方法二:

for (const key in obj) {
  console.log(key);
}
// name
// age

不可枚举属性不会返回

const obj1 = Object.create(
  {},
  {
    getFoo: { //此属性不可枚举
      value() {
        return this.foo;
      },
    },
  }
);
obj1.foo = 'aaa'
console.log(Object.entries(obj1)) //[ [ 'foo', 'aaa' ] ]

也可以处理字符串

console.log(Object.entries("abc")); 
//[ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

也可以处理数组

console.log(Object.entries(['why','lily'])) //[ [ '0', 'why' ], [ '1', 'lily' ] ]

padStart

  • 用另一个字符串填充当前字符串(如果需要的话,会重复多次),以便产生的字符串达到给定的长度。
  • 从当前字符串的左侧开始填充。

语法:

str.padStart(targetLength[,padString])
  • targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身
  • padString 可选 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的默认值为 " "
  • 返回值:在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串

如果省略第二个参数,则默认使用空字符串填充

console.log('abc'.padStart(10)) //       abc
console.log('abc'.padStart(10,'foo')) //foofoofabc

如果填充字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断

console.log('abc'.padStart(10,'123456789')) //1234567abc

如果目标长度小于原始字符串的长度,则返回原字符串

console.log('123456789'.padStart(5)) //123456789

用处:处理身份证号

const num = '410721199006142323'
const num1 = num.slice(-4).padStart(num.length,'*')
console.log(num1) //**************2323

padEnd

  • padEnd() 方法
  • 会用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。
  • 从当前字符串的末尾(右侧)开始填充。

语法:

str.padEnd(targetLength [, padString])
  • targetLength
    当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
  • padString 可选
    填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的缺省值为 " "

如果省略第二个参数,则默认使用空字符串填充

console.log("abc".padEnd(10)); //abc
console.log("abc".padEnd(10, "foo")); //abcfoofoof

如果填充字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断

console.log("abc".padEnd(10, "123456789")); //abc1234567

如果目标长度小于原始字符串的长度,则返回原字符串

console.log("123456789".padEnd(5)); //123456789

Object.getOwnPropertyDescriptors

  • Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
    语法
 Object.getOwnPropertyDescriptors(obj)
  • 参数 obj 任意对象
  • 返回值 所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。
const obj = {
  name: "why",
  age: 18,
  get _name() {
    //存取属性描述符  可枚举
    return this.name;
  },
  set _name(val) {
    this.name = val;
  },
};

//给obj添加一个数据属性描述符address 此属性为不可枚举
Object.defineProperty(obj, "address", {
  value: "北京市",
});

//设置obj对象的原型对象
Object.setPrototypeOf(obj, { title: "我是obj的原型对象" });
console.log(Object.getPrototypeOf(obj)); // { title: '我是obj的原型对象' }

对obj进行浅拷贝
方法一:

const newObj = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
);
console.log(newObj); //{ name: 'why', age: 18, _name: [Getter/Setter] }

方法二:

const newObj1 = { ...obj };
console.log(newObj1); //{ name: 'why', age: 18, _name: 'why' }  _name这个存取属性描述符被转换为了数据属性描述符

方法三:

const newObj2 = Object.assign({}, obj);
console.log(newObj2); //{ name: 'why', age: 18, _name: 'why' } _name这个存取属性描述符被转换为了数据属性描述符

Object.assign() 方法和对象的解构

  • 只能拷贝源对象的可枚举的自身属性,同时拷贝时无法拷贝属性的特性们,
  • 而且访问器属性会被转换成数据属性,
  • 也无法拷贝源对象的原型
  • Object.getOwnPropertyDescriptors()方法配合 Object.create() 方法可以实现上面说的这些。
console.log(Object.getOwnPropertyDescriptors(newObj));
// {
//   name: {
//     value: 'why',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   age: { value: 18, writable: true, enumerable: true, configurable: true },
//   _name: {
//     get: [Function: get _name],
//     set: [Function: set _name],
//     enumerable: true,
//     configurable: true
//   },
//   address: {
//     value: '北京市',
//     writable: false,
//     enumerable: false,
//     configurable: false
//   }
// }

console.log(Object.getOwnPropertyDescriptors(newObj1));
// {
//   name: {
//     value: 'why',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   age: { value: 18, writable: true, enumerable: true, configurable: true },
//   _name: {
//     value: 'why',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }

console.log(Object.getOwnPropertyDescriptors(newObj2));
// {
//   name: {
//     value: 'why',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   age: { value: 18, writable: true, enumerable: true, configurable: true },
//   _name: {
//     value: 'why',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }

console.log(Object.getPrototypeOf(obj) === Object.getPrototypeOf(newObj)); // true
console.log(Object.getPrototypeOf(obj) === Object.getPrototypeOf(newObj1)); //false
console.log(Object.getPrototypeOf(obj) === Object.getPrototypeOf(newObj2)); //false

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容