大前端进阶篇:es6语法中对象简写,箭头函数与对象操作符

简介: 大前端进阶篇:es6语法中对象简写,箭头函数与对象操作符

传统的js对象写法      

var info ={
        title:"快乐学习",
         link:"123",
        go:function(){
            console.log("我骑小黄车")
        }
        }


es6简写

应为对象k,v存在


如果key和变量名字一致,可以省略括号指定一次即可

如果value 是一个函数,可以将function去掉

var title="快乐学习";
        var link="123";
            let info2 ={
               title,
                link,
                go(){
            console.log("我骑小黄车")
        }
        }

es6简写可以让我们的对象的属性赋值为变量,是对象内部的值可以发生改变,操作起来更加方便。


对象操作符 …

…操作符:

可以将一个对象的值赋值给另一个对象,也可以选择性的赋值

可以通过括号选中出不想传输给其他对象的属性,之后通过 …操作符 把对象剩下的属性或者函数给另一个对象

// 对象传播操作符...
        var person = {
            name: "学相伴",
            address: "广东",
            link: "httpcom",
            phone: 1234567,
            go() {
                console.log("开始上班了")
            }
        };
        var {name,address,...person2} = person;


小结

es6的新语法,让我们在开发中,相比之前传统的js简便不少,新的规则也让编码变得越来越规范,相当值得学习 !加油小伙伴!

相关文章
|
1天前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter Dart语言基础语法解析
【4月更文挑战第30天】Dart是Google为Flutter框架打造的高效编程语言,具有易学性、接口、混入、抽象类等特性。本文概述了Dart的基础语法,包括静态类型(如int、String)、控制流程(条件、循环)、函数、面向对象(类与对象)和异常处理。此外,还介绍了库导入与模块使用,帮助开发者快速入门Flutter开发。通过学习Dart,开发者能创建高性能的应用。
【Flutter前端技术开发专栏】Flutter Dart语言基础语法解析
|
2天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
2天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
2天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
2天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
2天前
|
前端开发 JavaScript 网络架构
【Web 前端】箭头函数和普通函数有什么区别?
【4月更文挑战第22天】【Web 前端】箭头函数和普通函数有什么区别?
|
2天前
|
前端开发 JavaScript
【Web 前端】new操作符具体都干了什么?
【4月更文挑战第22天】【Web 前端】new操作符具体都干了什么?
|
2月前
|
前端开发 JavaScript 小程序
系统刷JavaScripit 构建前端体系(语法篇)
系统刷JavaScripit 构建前端体系(语法篇)
17 1
|
2月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
16 0
|
2月前
|
前端开发
web前端-HTML-div语法
web前端-HTML-div语法