ES6的一些小技巧

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

箭头函数

Tip:黑色为基础写法，红色为es6写法（es6，即JavaScript的更新语法）

    随着ES6的普及，ES6新语法的应用也越被大家所接受，箭头函数这一点算是ES6最入门的一个点了，除了语法简单以外，this指向的问题也更清晰。

function sayHi(n){
  console.log(n);
}

sayHi = n => concole.log(n)

定时器简写

    定时器的简写，其实还是基于箭头函数的，将定时器中需要执行的函数通过箭头函数的方式来书写。

setTimeout(function(){
  console.log('name');
},2000)

setTimeout( () => console.log('name'),2000 );

遍历简写

    需要用到函数的地方，通通用箭头函数去替换，当然遍历的方法不仅仅是forEach，还有map,each等方法

list.forEach(function(n){
  console.log(n);
})

list.forEach( n => console.log(n) );

隐式返回值简写

    仍然是箭头函数的范畴，但是相比起之前只是替换函数，这里则包含了另一个知识点，即return返回值的问题。

function calc(die){
  return Math.PI * die; // 需要主动return
}

calc = die => ( Math.PI * de ) // 没有{} 大括号函数体时，默认将结果返回

var func = function func(){
  return {foo : 1};
}

var func = () =>({ foo : 1 } );

数据解构

数据结构是ES6之中，对于赋值，值传递的一大变化了，简化了复制的操作，自动对对象、数组进行，数值交换等，在实际开发中可以极大的简化代码，提到代码可读性,并且不丢失代码的可读性。

// 写法一，赋值
var x = 'a', 
    y= 'b';

var [x, y] = ['a', 'b'];  // 等价写法

// 写法二，值交换
var temp = x;
x = y;
y = temp;

[x, y] = [y, x] //等价写法

// 对象简写
var x = 'a', 
    y = 'b';
obj = {x: x, y: y};

var [x, y] = ['a', 'b'], // 等价写法
obj = {x, y};

形参默认值

    在调用函数式，为了避免形参空值，我们通常需要判断一下参数是否存在值，为空值，赋一个默认值，而ES6中则简化这一步。

function get(bool){
  if(bool = null) bool = true;
  console.log(bool);
}
get(); // true;

// 等价写法
function get(bool = true){
  console.log(bool);
}
get() // true