首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ES6+好用的小技巧,让你的代码更干净,短巧,易读

ES6+好用的小技巧,让你的代码更干净,短巧,易读

作者头像
前端知否
发布于 2020-03-23 09:49:41
发布于 2020-03-23 09:49:41
45400
代码可运行
举报
文章被收录于专栏:前端知否前端知否
运行总次数:0
代码可运行

模板字符串

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let name = 'siri', age = 18, job = 'front-end engineer'
/let oldStr = 'Hi, ' + name + ', I\'m ' + age + ' and work as a ' + job + '.';

  let newStr = `Hi, ${ name }, I'm ${ age } and work as a ${ job }.`;

扩展操作符

… 操作符,有两个主要用处:

  1. 复制一个新的数组或对象
  2. 把多个参数赋值给一个数组变量
  3. 把一个数组变量赋值给多个参数
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let a = [1, 2, 3]

let b = [...a] // b是一个新的数组,内容和a一样
let c = [...a, 4, 5, 6]


let car = { type: 'vehicle ', wheels: 4};
let newCar = {...car}
console.log(newCar); // { type: 'vehicle ', wheels: 4}


// 合并对象属性,后边的属性会覆盖前边的,可用于修改对象的某个属性值
let car2 = {...car, type: 'vehicle2', wheels: 2} // {type: "vehicle2", wheels: 2}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function foo(...args) {
    console.log(args); 
}  

foo( 'car', 54, 'tree');  //  console.log 输出 [ 'car', 54, 'tree' ]

默认参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 给方法添加默认参数值
function foo( a = 5, b = 10) {
    console.log( a + b);
}  

foo();  // 15
foo( 7, 12 );  // 19
foo( undefined, 8 ); // 13
foo( 8 ); // 18
foo( null ); // 10 as null is coerced to 0
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 默认参数值也可以是表达式或者函数
function foo( a ) { return a * 4; }


// y = x + 4, z = foo(x)
function bar( x = 2, y = x + 4, z = foo(x)) {
    console.log([ x, y, z ]);
}


bar();  // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ] 
bar( 10, undefined, 3 );  // [ 10, 14, 3 ]
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 对象参数默认值,如果参数为空,则会抛出异常
function show({ title = "title", width = 100, height = 200 }) {
  console.log( `${title} ${width} ${height}` );
}

show() // Cannot destructure property `title` of 'undefined' or 'null'.
show({}) // title 100 200


// 解决办法:
function show({ title = "title", width = 100, height = 200 } = {}) {
  console.log( `${title} ${width} ${height}` );
}


show(); // title 100 200
show({width: 200}) // title 200 200

解析赋值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// key变量重命名, first --> firstName
const person = {
  first: 'foo',
  last: 'tom',
};


const { first: firstName } = person;

console.log(firstName); // foo
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 默认值
const settings = {
    speed: 150
}

const { speed = 750, width = 500 } = settings;

console.log(speed); // 150 
console.log(width); // 500


// 可能不存在的key
const { middle: middleName = 'midname' } = person;
console.log(middleName); // 'midname'
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 嵌套赋值
const user = {
  id: 339,
  name: 'Fred',
  age: 42,
  education: {
    degree: 'Masters'
  }
};

const {education: {degree}} = user;

console.log(degree); //prints: Masters
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 如果嵌套的属性不存在
const user = {
  id: 339,
  name: 'Fred',
  age: 42
};

const {education: {degree}} = user;  // TypeError: Cannot match against 'undefined' or 'null'.


// 解决办法:
const user = {
  id: 339,
  name: 'Fred',
  age: 42
};

const {education: {degree} = {}} = user;

console.log(degree); //prints: undefined

利用数组生成一个数字序列

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const numRange = (start, end) => {
  return Array(end - start + 1).fill().map((item, index) => start + index);
};


const numbers = numRange(0, 5); // [0, 1, 2, 3, 4, 5]
const numbers2 = numRange(1, 5); // [1, 2, 3, 4, 5]

利用Set给数组去重

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const years = [2016, 2017, 2017, 2018, 2018, 2019]


// set构造函数的参数是一个array
const distinctYears = [...new Set(years)] // [2016, 2017, 2018, 2019]

生成唯一随机字符串,可以指定长度

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function generateRandom(length) {
    let radom13chars = function () {
        return Math.random().toString(16).substring(2, 15)
    }
    let loops = Math.ceil(length / 13)
    return new Array(loops).fill(radom13chars).reduce((string, func) => {
        return string + func()
    }, '').substring(0, length)
}


generateRandom(8) // "03836a49"
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-02-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端知否 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6+
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
ymktchic
2022/01/18
2710
ES6+
对象、原型
1、 OOP 指什么?有哪些特性 OOP是Object-oriented programming的缩写,指面向对象程序设计。 在面向对象程序设计中有两个重要概念 类: 类是对现实生活中一类具有共同特征的事物的抽象。 对象: 对象是类的实例,对象包含属性和方法,属性是需要记忆的信息,方法是对象能够提供的服务。 特性 继承 子类能继承父类的属性和方法 子类能添加新的属性和方法,还能重写父类的属性和方法 封装 隐藏对象的属性和实现细节,仅对外公开接口 多态 指同一个实体同时具有多种形式,同一操作作用
小胖
2018/06/27
5090
有个开发者总结这 15 优雅的 JavaScript 个技巧
JavaScript 有很多很酷的特性,大多数初学者和中级开发人员都不知道。今天分享一些,我经常在项目中使用一些技巧。
前端小智@大迁世界
2022/06/15
7720
有个开发者总结这 15 优雅的 JavaScript 个技巧
如何写出干净的 JavaScript 代码
一段干净的代码,你在阅读、重用和重构的时候都能非常轻松。编写干净的代码非常重要,因为在我们日常的工作中,你不是仅仅是在为自己写代码。实际上,你还需要考虑一群需要理解、编辑和构建你的代码的同事。
ConardLi
2021/09/08
1.2K0
如何写出干净的 JavaScript 代码
一份开源的编码规范:代码整洁的 JavaScript
作者根据 Robert C. Martin 《代码整洁之道》总结了适用于 JavaScript 的软件工程原则《Clean Code JavaScript》。
落落落洛克
2021/03/08
9800
ES13 中的 11 个惊人的 JavaScript 新特性
与许多其他编程语言一样,JavaScript 也在不断发展。每年,该语言都会通过新功能变得更强大,让开发人员编写更具表现力和简洁的代码。 让我们探索 ECMAScript 2022 (ES13) 中添加的最新功能,并查看它们的使用示例以更好地理解它们。 ◆ 1. 类字段声明 在 ES13 之前,类字段只能在构造函数中声明。与许多其他语言不同,我们不能在类的最外层范围内声明或定义它们。 class Car { constructor() { this.color = 'blue'; this.
IT大咖说
2022/08/26
8260
ES13 中的 11 个惊人的 JavaScript 新特性
JavaScript 风格指南 [每日前端夜话(0x1C)]
原文链接:https://github.com/ryanmcdermott/clean-code-javascript
疯狂的技术宅
2019/03/27
9050
JavaScript 风格指南 [每日前端夜话(0x1C)]
ES13的11个超赞的新属性
声明:本文为翻译文章,原文为11 Amazing New JavaScript Features in ES13
进击的大葱
2022/08/22
4210
一文吃透es6 ~ es13所有新特性
ECMAScript是一个脚本语言规范,通常看作是js的标准规范,但是js其实是ES的扩展语言。
心念
2023/01/11
2.2K0
已阅冴羽大佬文章
https://juejin.cn/post/6958361473953300488
达达前端
2021/05/06
1K0
Ramda 函数库参考教程
学习函数式编程的过程中,我接触到了 Ramda.js。 我发现,这是一个很重要的库,提供了许多有用的方法,每个 JavaScript 程序员都应该掌握这个工具。 你可能会问,Underscore 和
ruanyf
2018/04/12
2.1K0
Ramda 函数库参考教程
《现代Typescript高级教程》类型守卫
在 TypeScript 中,类型守卫可以用于在运行时检查变量的类型,并在代码块内部将变量的类型范围缩小到更具体的类型。这种类型收窄可以让 TypeScript 编译器更好地理解我们代码的意图,从而提供更准确的类型推断和类型检查。
linwu
2023/07/27
3750
ECMAScript13 中11个令人惊叹的 JavaScript 新特性
与许多其他编程语言一样,JavaScript 也在不断发展。每年,该语言都会通过新功能变得更加强大,使开发人员能够编写更具表现力和简洁的代码。 小编今天就为大家介绍ES13中添加的最新功能,并查看其用法示例以更好地理解它们。
葡萄城控件
2023/10/16
3410
前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发vue项目。 一、ECMAScript6概要 ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaSc
张果
2018/03/30
1.8K0
前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
熬夜7天,我总结了JavaScript与ES的25个重要知识点!
说起JavaScript,大家都知道是一门脚本语言。那么ES是什么鬼呢?ES全称ECMAScript ,是JavaScript语言的国际标准。
达达前端
2020/09/17
1.9K0
熬夜7天,我总结了JavaScript与ES的25个重要知识点!
重学JS-6-一图掌握解构赋值
剩余语法(Rest syntax) :与展开语法相反,用于合并多个元素组合成数组或者对象。
luciozhang
2023/04/22
2.4K0
重学JS-6-一图掌握解构赋值
代码整洁的 JavaScript
将源自 Robert C. Martin 的 Clean Code 的软件工程原则适配到 JavaScript 。 这不是一个代码风格指南, 它是一个使用 JavaScript 来生产 可读的, 可重用的, 以及可重构的软件的指南。
beginor
2020/08/07
1.1K0
代码整洁的 JavaScript
[译] 如何写出漂亮的 JavaScript 代码
这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好,也更容易重构。如果违反这个规则,那么代码会很难被测试或者重用。
小生方勤
2019/07/01
6610
[译] 如何写出漂亮的 JavaScript 代码
分享7个实用的 JavaScript 方法技巧
在本文中,我收集了一些关于JavaScript 技巧和窍门,我相信它们可以让你成为更好的 JavaScript 开发人员。没有特别的顺序,这里一共收集整理了7个 JavaScript 技巧!
前端达人
2021/07/16
9420
ES的新特性
首先来看一下ES6新增加的特性块级作用域,至于作用域的深入讲解后续会专门出一篇文章进行讲解
用户3045442
2020/08/06
1.2K0
相关推荐
ES6+
更多 >
LV.0
这个人很懒,什么都没有留下~
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档