【前端】ES6新特性上

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cheidou123/article/details/91481546

一 函数默认值

// Before
function decimal(num, fix) {
    fix = fix === void(0) ? 2 : fix;

    return +num.toFixed(fix);
}
// After
function decimal(num, fix = 2) {
    return +num.toFixed(fix);
}

ES6我们可以在入参直接指定默认值。注意:
设定了默认值的入参，应该放在没有设置默认值的参数之后，也就是我们不应该这样写：function decimal(fix = 2, num){}，虽然通过变通手段也可以正常运行，但不符合规范。

二 模板字符串

首先我们来看传统字符串的问题

• 不能正常换行
• 不能友好插入变量
• 不能友好处理单双引号嵌套问题
  在ES6中我们使用TAB上面的``来定义字符串

// 可以正常换行.
console.log(`string text line 1
string text line 2`);

// 可以插入变量，以及函数等。
function fn() {
  return "Hello World";
}
 
`foo ${fn()} bar`
// foo Hello World bar

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?

三 解构赋值

解构赋值分为数组，对象

1.数组

数组的元素是按次序排列的，变量的取值由它的位置决定。

var [a, ,b] = [1, 2, 3, 4, 5];
console.log(a); // => 1
console.log(b); // => 3

2.对象

属性或方法名必须与待解构的目标对象中的属性或方法名完全相同才能解构到对应的属性或方法。

var {b, c} = {a: 1, b: 2, c: 3};
console.log(b); // => 2
console.log(c); // => 3

另外，对象解构可以支持更改解构后的变量名:

var example = function() {
    return {a: 1, b: 2, c: 3};
}
var {a: d, b: e, c: f} = example();
console.log(d, e, f); // => 1, 2, 3

四 Let & Const

1.Let

⑴无变量提升

// Before
console.log(num); // => undefined     已被声明未赋值
var num = 1; 

// After
console.log(num); // => ReferenceError  未被声明
let num = 1;

⑵有块级作用域

// Before
{
    var num = 1;
    console.log(num); // => 1
}
console.log(num);     // => 1


// After
{
    let num = 1;
    console.log(num); // => 1
}
console.log(num);     // => ReferenceError

⑶禁止重复声明

// Before
var dev = true;
var dev = false;

console.log(dev); // => false

// After
let dev = true;
let dev = false; // => SyntaxError

2.Const

⑴无变量提升

⑵有块级作用域

⑶禁止重复声明

⑷禁止重复赋值

const DEV = true;
DEV = false; // => TypeError

⑸必须附初始值

const DEV; // => SyntaxError