未加星标

使用 es6写更加简洁的 js代码

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

使用新语法配合 babel 的转码,已经可以解决一些浏览器的兼容问题了。既然如此,那就可以在具体的业务中多使用新语法去探索一下怎么更好的去写代码吧。分享下个人开发中整理的常用的 js 写法技巧

使用 let / const

var 命令会发生”变量提升“现象,即变量可以在声明之前使用,值为 undefined。 个人认为,对声明的变量确定后面不会发生更改时,使用 const, 这样代码的可读性也会增强。

const 实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。 let 变量指向的内存地址,保存的只是一个指向实际数据的指针 补充 const 定义的变量不是数据不可变,而是保存的引用地址不能发生改变。例子如下: const person = { age: 22 } person.age = 1 console.log(person.age ) // 1 复制代码 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

好处是:解决了访问多层嵌套的对象或数组的命名,减少代码量

声明多个变量: let [age, name, sex] = [22, 'paopao', 1] console.log(age, name, sex) // 22, paopao, 1 复制代码 使用在对象中: const obj = { name: { firstName: 'da', lastName: 'paopao' } } const { firstName, lastName } = obj.name // 如果我们多处使用 firstName, 那就不必要每个地方都写 obj.name.firstName, 极大提升代码效率 // 等同于 const firstName = obj.name.firstName const lastName = obj.name.lastName 复制代码 使用在函数中 // 在参数中结构赋值,获取参数, 当参数多的使用时候十分方便 function Destructuring({ name, age }) { return { name, age } // 相当于 { name: name, age: age } , 可以简写 } const obj = { name: 'dapaopao', age: 22 } Destructuring(obj) 复制代码 扩展符的运用

es6 扩展符有很多用法,他可以使你的代码更加简洁,易懂。这里就举例常用的用法

在对象中的用法: let obj = { name: 'dapaopao', age: 22, sex: 1 } // 复制对象。扩展符为浅复制!!! const copy = { ...obj } // 修改对象属性值(生成新对象) 相当于 Object.assgin({}, obj, { age: 18 }) const newObj = { ...obj, age: 18 } // 结合结构赋值 let { sex, ...z } = obj z // { name: 'dapaopao', age: 22 } 复制代码 在数组中的用法: const arr = [1, 2, 3] const arr2 = [4, 5, 6, 4] // 复制数组。扩展符为浅复制!!! const newArr = [...arr] // ...[1, 2, 3] => 相当于展开数组:1, 2, 3 // 合并数组 const conbineArr = [...arr, ...arr2] // 结合求最大值函数 Math.max(...arr) // 结合 Set 实现数组去重。注意:json 等对象数组不可用 [...new Set(arr2)] // [4, 5, 6] 复制代码 数组用法 const arr = [1, 2, 3, 4] Array.isArray(arr) // 判断是否为数组 arr.includes(2) // true 判断数组中是否包含某项 arr.findIndex(d => d === 3) // 2 找出第一个符合条件的数组成员并返回数组下标, 找不到返回 -1 arr.find(d => d === 3) // 3 找出第一个符合条件的数组成员并返回, 找不到返回 undefined // es5 其他还有 filter map forEach 等,这里不做举例。 arr.every(d => d > 2) // false 每一项都满足条件则返回 true arr.some(d => d > 2) // true 只要有一项满足条件则返回 true 复制代码

find/findIndex : 找出第一个符合条件的数组成员之后不再匹配,一定程度下优化查找。 includes: 返回 true/false, 相较于 indexOf, 实用多了

flat() : 扁平化数组,常用于将数组转化为一维数组 const arr = [1, 2, [3, 4]] arr.flat() // [1, 2, 3, 4] 扁平化数组, 默认展开一层。 const arr2 = [1, 2, [3, 4, [5, 6]]] arr2.flat() // [1, 2, 3, 4, [5, 6]] arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3) 也是展开两层... 复制代码 flatMap(): 在数组执行 map 方法后执行 flat, 用的不多,其实可以写 map 后写 flat 更好懂点。 [2, 3, 4].flatMap(x => [x, x * 2]) // [ 2, 4, 3, 6, 4, 8 ] // 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]] // 2. [[2, 4], [3, 6], [4, 8]].flat() 复制代码

补充常用的对象转数组的用法:

const obj = { name: 'dapaopao' } Object.keys(obj) // ['name'] Object.values(obj) // ['dapaopao'] Object.entries(obj) // ['name', 'dapaopao'] 复制代码 模板字符串

用的挺多的,但是不兼容 IE !

const name = 'dapaopao' const newStr = `welcome ${name}` // welcome dapaopao // the same as const newStr = 'welcome ' + name 复制代码 使用 async / await

这里做个例子进行介绍

async function test() { const data = await axios.get('https://randomuser.me/api/') console.log(data) } // 等同于 function test() { axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 对象 } 复制代码 优化 if/else 语句

当逻辑或||时,找到为 true 的分项就停止处理,并返回该分项的值,否则执行完,并返回最后分项的值。 当逻辑与&&时,找到为 false 的分项就停止处理,并返回该分项的值。

const a = 0 || null || 3 || 4 console.log(a) // 3 const b = 3 && 4 && null && 0 console.log(b) // null 复制代码

减少 if / else地狱般的调用

const [age, name, sex] = [22, 'dapaopao', 1] if (age > 10) { if (name === 'dapaopao') { if (sex > 0) { console.log('all right') } } } // 使用 && if (age > 10 && name === 'dapaopao' && sex > 0) { console.log('all right') } // 或者(太长了不推荐) age > 10 && name === 'dapaopao' && sex > 0 && console.log('all right') 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:使用 es6写更加简洁的 js代码
本站链接:https://www.codesec.net/view/620948.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(39)