ES6新特性:对象优化

简介: ES6新特性:对象优化

基础用法


属性打印


const person = {
    name: 'jack',
    age: 21,
    language: ['java','js','css']
};
// 打印所有key
console.log(Object.keys(person));
// 打印所有value
console.log(Object.values(person));
// 将属性值以键值对的方式打印
console.log(Object.entries(person));



复制对象


使用Object对象的assign方法进行对象的复制


const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target, source1, source2);
console.log(target); // {a:1, b:2, c:3}



声明对象简写


函数声明中,如果传入名与属性名相同,我们可以直接省略冒号与传入参数名


const age = 23;
const name = "zhangsan";
const person1 = {age: age, name: name};
const person2 = {age, name};
console.log(person1);
console.log(person2);



对象的函数属性简写


ES6支持三种方式编写函数的属性


其中需注意:箭头函数中不能使用this


let person3 = {
    name: 'jack',
    eat: function (food) {
        console.log(this.name+'正在吃'+food);
    },
    // 箭头函数中不能使用this
    eat2: food => console.log(person3.name+'正在吃'+food),
    eat3(food){
        console.log(this.name+'正在吃'+food);
    }
}
person3.eat('香蕉');
person3.eat2('苹果');
person3.eat3('梨');



拷贝对象(深拷贝


其中那那三个点是ES6的扩展运算符:不懂的可以参考我整理的另一篇基础博文:


https://yangyongli.blog.csdn.net/article/details/123042910


let p1 = {name: '张三', age: 28};
let p2 = {...p1};
console.log(p2);



对象合并


let p3 = {name: '李四', sex: '男', birthday: '08.01'};
// 如果合并的两个对象中有相同的属性值,后面的对象会覆盖前一个对象
let p4 = {...p3, ...p1};
console.log(p4);


相关文章
|
4天前
|
前端开发 JavaScript
列举一下 ES6 中常用的新特性
这些ES6的常用新特性在现代JavaScript开发中被广泛应用,极大地提升了开发效率和代码质量。
|
1月前
|
缓存 前端开发 JavaScript
ES6 全部特性详解
ES6 是 JavaScript 语言的一个重要升级,它引入了大量新的功能,极大地增强了 JavaScript 的表达力和可读性。通过了解和掌握这些特性,开发者可以编写出更加简洁、高效、优雅的代码,并轻松应对大型项目的复杂性。
57 7
ES6新特性(基础常用)
文章介绍了ES6的常用新特性,包括let和const命令、对象解构赋值、模板字符串、Map和Set对象。通过示例代码详细解释了它们的用法和与传统ES5语法的区别,以及如何利用这些特性编写更简洁和高效的代码。
ES6新特性(基础常用)
|
3月前
|
JavaScript 前端开发 Java
ES6新特性(六):类
ES6新特性(六):类
|
JavaScript 前端开发 安全
ES6 新特性全面解析,零基础也能学会(二)
ES6 新特性全面解析,零基础也能学会(二)
67 0
|
JSON 前端开发 JavaScript
ES6 新特性全面解析,零基础也能学会(四)
ES6 新特性全面解析,零基础也能学会(四)
81 0
|
JavaScript 前端开发 关系型数据库
ES6 新特性重点部分
ES6新特性 重点部分汇总及演示。
81 0
|
存储 前端开发 JavaScript
ES6新特性。对象、数组新增方法
ES6新特性。对象、数组新增方法
193 0
|
JavaScript 前端开发 Java
ES6 新特性全面解析,零基础也能学会(一)
ES6 新特性全面解析,零基础也能学会(一)
119 0
|
算法 JavaScript 网络架构
ES6 新特性全面解析,零基础也能学会(三)
ES6 新特性全面解析,零基础也能学会(三)
70 0