代码编织梦想

今天我们接着来讲日常项目中常用的ES6语法。

7.对象的扩展

属性简单表达方式,当对象的属性值为一个变量时,且变量名和对象键值相同,我们可以使用对象的简写方式:

let foo = 'foo'
let obj = {
  foo:foo
}
// 等价于
let obj = {foo}

属性名称表达方式,当对象的键为一个变量时,我们可以使用属性名称表达式:

let foo = 'foo'
let obj = {
   [foo]: 123
}

console.log(obj.foo)  // 123
console.log(obj[foo])  // 123
console.log(obj['f'+'oo']) // 123

属性遍历,ES6一共有5种遍历方式,:for .. in Object.keys()Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Reflect.ownKeys(),我工作中常用的其实就前面两种,后面的三种不翻书根本记不住。

let obj = {a:1,b:2}

for(k in obj) {
  console.log(k,obj[k])  // a,1   b,2
}

Object.keys(obj)  // 返回对象的键组成的数组 [a,b]

8.对象新增方法

Object.assign()用于合并对象,将source对象的可枚举属性复制到target对象,注意这个复制是浅拷贝。

let target = {a:1}
let source1 = {b:2}
let source2 = {c: 3}

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

Object.keys(),Object.values(),Object.entries()分别获取对象的键数组,值数组,建值对数组

let obj = {a:1,b:2}
console.log(Object.keys(obj)) // [a,b]
console.log(Object.values(obj)) // [1,2]
console.log(Object.entries(obj)) // [[a,1],[b,2]]

9.运算符扩展

ES2016 新增了一个指数运算符(**),不要记错了,之前我一直把^当作指数运算符,吃了很大亏,还一直找不到问题在哪儿。
可选链式操作符(?.),之前有做一个屎山项目,对象多层嵌套,后端返回的数据还不一定有到你需要的那一层,于是就发现了这样的代码:

<div v-if="obj&&obj.a&&obj.a.b&&obj.a.b.c&&obj.a.b.c.d">{{obj.a.b.c.d}}</div>
// 当你看见满篇都是 && 符号的时候真的是头都大, 有了可选链式操作符之后,我们可以这样写:
obj?.a?.b?.c?.d // 再也不用担心报错了 

Null 判断运算符(??),这个操作符与 || 有点相似,但其中有一下区别:

?? 只有在符号左边的值为null 和undefined时才会返回符号右边的值
console.log(0??1) // 0
console.log(''??1) // ''
console.log(null??1) // 1
console.log(undefined??1) // 1

10.Map和Set数据集

Map和Set数据集其实在开发中用的比较少,基本上都是用在刷算法题的时候,Map用于模拟hashMap,Set用于纯数字数组去重。

11.Promise用法

Promise在这里就不讲了,要讲的话太多了,我自己也没怎么弄明白。

12.async 函数

async await两个关键字一般用来将异步函数变为同步函数,避免异步函数多层嵌套:

  let functon = async () => {
    let res = await ajax.get(...)
  }

这些大概就是我项目中常用的ES6语法了,如有不足之处,请指正。

相关链接

国庆摆烂第二天,我总结了项目中常用的ES6语法(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Salange1/article/details/127157709

es6常用知识点概述_weixin_33670786的博客-爱代码爱编程

前言 国庆假期已过一半,来篇干货压压惊。 ES6,并不是一个新鲜的东西,ES7、ES8已经赶脚了。但是,东西不在于新,而在于总结。每个学前端的人,身边也必定有本阮老师的《ES6标准入门》或者翻译的《深入理解ECMAScript6》。本篇主要是对ES6的一些常用知识点进行一个总结。如果你喜欢我的文章,欢迎评论,欢迎Star~。欢迎关

野蛮生长的痛(一个伪前端的2015总结)_weixin_33862041的博客-爱代码爱编程

碎碎念 又一个忙碌的一周结束了。好像每天都挺忙的,是真的很忙。 还真没想到我现在正从事着我在大学里面最为惧怕的一项工作:编程。之前听同学说编程好难啊,整天对着黑白屏都看傻了,又或者听同学讲他某某的亲戚因为编程的工作强度太大,每天都没时间吃正餐,只能吃方便面,一个月后被发现死在了自己的卧室里面。种种的道听途说让我觉得编程是一项我以后碰都不想碰的

typescript基础知识点_阡ゼ陌的博客-爱代码爱编程_returned expression type boolean is not assignable

Typescript知识点总结 简介基础类型Typescript中文网 简介 TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运

一文快速掌握 es6+新特性及核心语法_徐小夕@趣谈前端的博客-爱代码爱编程

首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能。 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了,希望在总结自己经验的过程中大家会有所收获~ 正文 一. let和const

ES6与ReactJS学习笔记-爱代码爱编程

1.ES6 ES6,是ECMAScript 6 的简称,是JavaScript语言的下一代标准,已于2015年6月正式发布。 1.1. let于const 之前,我们在编写js定义变量的时候,只有一个关键字 var。var有一个问题,就是定义的变量会成为全局变量。 // var变量的作用域问题检查 for(var i = 0;i<5;i++)

终于在国庆前找到工作了!(面试全过程真实记录)-爱代码爱编程

1,面试准备 面试的时候99.99%的公司都会让你做一下自我介绍和最近做的一个项目,所以自我介绍和项目要提前打好草稿,特别是不太会说话的。 自我介绍: 我觉得简洁一点就行了,一般面试官都会趁着你自我介绍的时候看简历,也没认真听你做自我介绍。 下面是我自己打的草稿: 面试官你好,非常荣幸参加贵公司的本次面试。下面我简单的介绍一下我的个人情

①Webpack学习入门笔记之国庆搬砖篇第一记-爱代码爱编程

一、Webpack简介 1.1webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。那么为什么要使用we

总结前端高频面试题-爱代码爱编程

近两天正值中秋国庆假期,约面试也到节后了,留给我们准备的时间还是挺充分的,毕竟跳一次槽还是不容易的。总结前端高频面试题,拿下理想的offer 兼容问题 1、不同浏览器的标签默认的外边距和内边距不同 2、图片默认有间距 3、使用after伪元素清除法(也称之为万能清楚法) 4、超出显示省略号 5、链接访问过后hover样式就不出现的问题 详细

Javascript高级程序设计第四版详细测评-爱代码爱编程

简介 哈喽大家好, 我是大圣,上次做了一个js的书籍测评,评价还不错,在做css和node之前,再做几本书的详细推荐吧,  国庆今天又在家好好读了几本具有代表性的 javascript高级程序设计【红宝书】javascript忍者秘籍你不知道的javascript 【小黄书】javascript语言精粹与编程实践【绿皮书】how javasc

lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?-爱代码爱编程

国庆刚刚结束,我们开始一波新的学习进程吧。 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。作为前端必备技能,我们来快速开始吧 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了,希望在总结自己经验的过程中大家会有所收获~ 正文

ie模版字符串_【探秘ES6】系列专栏:模版字符串-爱代码爱编程

【探秘ES6】系列专栏(四):模版字符串 为什么80%的码农都做不了架构师?>>> ... 【探秘ES6】系列专栏 【探秘ES6】系列专栏(一):ES6简介 【探秘ES6】系列专栏(二):迭代器和for-of循环 【探秘ES6】系列专栏(三):生成器 【探秘ES6】系列专栏(四):模版字符串 【探秘ES6】系列专栏(五

linux中vim的使用,linux中vim使用技巧-爱代码爱编程

一.导入文件内容 :r 解释 导入文件 示例 编辑模式下 # 将/tmp/test.txt内容导入到光标所在的位置的下一行 :r /tmp/test.txt :! 解释 在编辑文件时,执行系统命令 示例 编辑模式下 # 查看ls命令的目录 :!which ls [No write since last change] /

学习ES6系列:generator的基本认识和使用-爱代码爱编程

每天对自己多问几个为什么,总是有着想象不到的收获。 一个菜鸟小白的成长之路(copyer) 前言 ​ 今天是国庆节的第二天,回到家中,还是比较的无聊,还是写写代码吧。毕竟是个代码小白,需要学习的东西还是很多的,加油吧! ​ 最近在学习redux-saga这个中间件,它其中的内部代码的原理就是 ES6中的 generator,但是呢?我对其中

【实习日记】第五天 剖析源码+学习Node.js & Typescript基本语法-爱代码爱编程

国庆假期结束了,其实在这里实习对我而言还算是比较愉快的,虽然完成任务过程中出现的问题层出不穷,但也被克服问题的成就感包裹着,感觉每天在办公室就像在上自习一样。加油啦小荷! 自从把example运行成功后接下来的任务就明晰一点了,首先要完成的是学会Node.js & Typescript这个语言,我决定从头学起,这个语言是一门类C语言,所以语法方面

javascript复习总结_小王nemo的博客-爱代码爱编程

认识JavaScript html:主要目的搭建页面的结构 css:装饰页面 JavaScript:在用户在页面上的操作有反馈,也叫做用户与页面的交互 能够修改css的样式能够操作html能够获取后台数据,把数据展示

国庆摆烂第二天,我总结了项目中常用的es6语法(一)_项目中用过哪些es6?-爱代码爱编程

前言 ES6语法,这几乎是一个面试必考的问题,而每次遇到这个问题的时候,如果不特意准备的话,回答的总是不太理想,不是这儿忘了就是那儿忘了,以前总觉得这没什么,到了要用的时候再百度一下就好了,但是每次遇到都百度,这就很浪费时