资讯专栏INFORMATION COLUMN

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

sanyang / 355人阅读

摘要:模板字符串扩展操作符操作符,有两个主要用处复制一个新的数组或对象把多个参数赋值给一个数组变量把一个数组变量赋值给多个参数是一个新的数组,内容和一样合并对象属性,后边的属性会覆盖前边的,可用于修改对象的某个属性值输出默认参数给方法添加默认参

模板字符串
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 }.`;
扩展操作符

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

复制一个新的数组或对象

把多个参数赋值给一个数组变量

把一个数组变量赋值给多个参数

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}
function foo(...args) {
    console.log(args); 
} 
foo( "car", 54, "tree");  //  console.log 输出 [ "car", 54, "tree" ] 
默认参数
// 给方法添加默认参数值
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
// 默认参数值也可以是表达式或者函数
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 ]
// 对象参数默认值,如果参数为空,则会抛出异常
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
解析赋值
// key变量重命名, first --> firstName
const person = {
  first: "foo",
  last: "tom",
};

const { first: firstName } = person;
console.log(firstName); // foo
// 默认值
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"
// 嵌套赋值
const user = {
  id: 339,
  name: "Fred",
  age: 42,
  education: {
    degree: "Masters"
  }
};
const {education: {degree}} = user;
console.log(degree); //prints: Masters
// 如果嵌套的属性不存在
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
利用数组生成一个数字序列
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给数组去重
const years = [2016, 2017, 2017, 2018, 2018, 2019]

// set构造函数的参数是一个array
const distinctYears = [...new Set(years)] // [2016, 2017, 2018, 2019]
生成唯一随机字符串,可以指定长度
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"

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101535.html

相关文章

  • 你的代码简短,整洁,易读ES6技巧

    摘要:让你的代码更简短,更整洁,更易读的小技巧写在文章前面这篇文章翻译自文章就代码整洁方面对进行了总结。如果你正在使用的代码使用的语法,这个是你需要注意的事情。更多还提供了我们很多很多其他的方式来使我们的代码更简洁,更易读,以及更稳定。 让你的代码更简短,更整洁,更易读的ES6小技巧 写在文章前面 这篇文章翻译自ES6 tips and tricks to make your code cl...

    wpw 评论0 收藏0
  • angular,react & vue

    摘要:由进行开发和维护,代发布于年月,现在主要是。状态是只读的,只能通过来改变,以避免竞争条件这也有助于调试。文件大小为,而为,为。请记住,性能基准只能作为考虑的附注,而不是作为判断标准。使用的人员报告说,他们永远不必阅读库的源代码。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 angular,react & vue 2018/07/23 2016年,对于JavaScript来说...

    jiekechoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<