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 的知识
