前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6+好用的小技巧,让你的代码更干净,短巧,易读

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

作者头像
前端知否
发布2020-03-23 17:49:41
3980
发布2020-03-23 17:49:41
举报
文章被收录于专栏:前端知否前端知否

模板字符串

代码语言:javascript
复制
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
复制
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
复制
function foo(...args) {
    console.log(args); 
}  

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

默认参数

代码语言:javascript
复制
// 给方法添加默认参数值
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
复制
// 默认参数值也可以是表达式或者函数
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
复制
// 对象参数默认值,如果参数为空,则会抛出异常
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
复制
// key变量重命名, first --> firstName
const person = {
  first: 'foo',
  last: 'tom',
};


const { first: firstName } = person;

console.log(firstName); // foo
代码语言:javascript
复制
// 默认值
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
复制
// 嵌套赋值
const user = {
  id: 339,
  name: 'Fred',
  age: 42,
  education: {
    degree: 'Masters'
  }
};

const {education: {degree}} = user;

console.log(degree); //prints: Masters
代码语言:javascript
复制
// 如果嵌套的属性不存在
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
复制
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
复制
const years = [2016, 2017, 2017, 2018, 2018, 2019]


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

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

代码语言:javascript
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模板字符串
  • 扩展操作符
  • 默认参数
  • 解析赋值
  • 利用数组生成一个数字序列
  • 利用Set给数组去重
  • 生成唯一随机字符串,可以指定长度
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档