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

╰半夏微凉° 2022-03-07 10:20 145阅读 0赞

### 模板字符串 ###

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.  把一个数组变量赋值给多个参数

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"

![图片描述][2593869537-5c55c268417d6_articlex]

[2593869537-5c55c268417d6_articlex]: /images/20220307/7b309a3472ce45178a50f095da56884c.png