告诉你几个ES6的小秘密

273 阅读3分钟

一、变量声明

1: let

块级作用域 :ES5 只有全局作用域和函数作用域,没有块级作用域.
{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
不存在变量提升: var命令会变量提升,即变量可以在声明之前使用,值为undefined;但是let一定要先声明后使用,否则会报错.
console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 10;
暂时性死区: 块级作用域内存在let命令,它所声明的变量就绑定在这个区域,不会受外部的影响.
var a = 10 ;
if(1){
    a = 100 ; // ReferenceError
    let a ;
}
不允许重复声明: 同一个块级作用域内同一个变量只能声明一次.
let a = 10;
let a = 100;// Identifier 'a' has already been declared

var a = 10;
let a = 100;// Identifier 'a' has already been declared

2: const-声明一个只读的常量。一旦声明,常量的值就不能改变.

const a = 10;
a = 100; // Assignment to constant variable.

二、变量的结构赋值

1: 数组的解构赋值:按照位置赋值;

// ES5:
let a = 1;
let b = 2;
let c = 3;

// ES6:
let [a,b,c] = [1,2,3];
console.log(a,b,c);// 1,2,3

2: 对象的解构赋值:是按照key来赋值;

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

3: 字符串的解构赋值:是按照位置赋值;

let [ a, b , c, d, e] = 'qwerty';
console.log(a,b,c,d,e); // q,w,e,r,t,y

4: 函数参数的解构赋值:是按照位置赋值

function add([a, b]){
  return `${b} + ${a}`;
}

add([1, 2]);// 1,2

三、字符串模板-ES5输出模板是用'+'拼接相当繁琐,尤其是在换行拼接时特容易出错.

// ES5
let str ='这里有 ' + basket.count + '</br> ' +
  '个橘子🍊给你, ' +
  '<i>' + 你能卖 +
  '</i> '+ basket.money +'吗?';
  
// ES6:
let str =`这里有 ${basket.count} </br>个橘子🍊给你,<i>你能卖</i>${basket.money}吗?`;

四、函数扩展

1: 函数参数的默认值

//ES5:
function log(x, y) {
  y = y || '好';
  console.log(x, y);
}

log('你') // 你好
log('你', '棒') // 你棒
log('你', '') // 你好

//ES6:
function log(x, y = '真好') {
  console.log(x, y);
}
log('你') // 你真好
log('你', '棒') // 你真棒
log('你', '') // 你真好

2: rest参数-用于获取函数的多余参数,这样就不需要使用arguments对象了

function plus(...values) {
  let sum = 0;
  for (var value of values) {
    sum += value;
  }
  return sum;
}
plus(2, 5, 3); // 10

//A:rest参数后不能再有其他参数,否则会报错;
function fun(a, ...b, c) {};// Rest parameter must be last formal parameter

//B:函数的length属性不包括rest
(function(x) {}).length  // 1
(function(...x) {}).length  // 0
(function(x, ...y) {}).length // 1

3: 函数的name属性-函数的name属性,返回函数名

function foo(){}
foo.name // 'foo'

4: 箭头函数

  • 1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  • 4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

五、数组的扩展

1: 扩展运算符-扩展运算符(spread)是三个点(...)

console.log(...[1, 2, 3])
// 1 2 3

2: 替代函数的 apply 方法

// ES5 的写法
function f(x, y, z) {
  console.log(x,y,z)
}
var args = [0, 1, 2];
f.apply(null, args);// 0,1,2

// ES6写法
function f(x, y, z) {
  console.log(x,y,z)
}
let args = [0, 1, 2];
f(...args);// 0,1,2

3: Array.from()-将类数组转换成数组

let arrayLike = {
    '0': 'x',
    '1': 'y',
    '2': 'z',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['x', 'y', 'z']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['x', 'y', 'z']

4: Array.of()-将一组值,转换为数组

Array.of(1, 2, 3); //[1,2,3]

5: 数组实力的fill()

new Array(5).fill(10); // [10,10,10,10,10]

六、对象的扩展

1: 属性的简洁写法

let a = '123';
let b = { a }

2: super关键字-指向当前对象的原型对象

const proto = {
  foo: 'hi'
};
const obj = {
  foo: 'good',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find(); //hi

3: Object.is()

// ES5
+0 === -0 //true
NaN === NaN // false

// ES6
Object.is(+0,-0); //false
Object.is(NaN,NaN); //true

4: Object.assign()

const t = { a: 1 };
const s1 = { b: 2 };
const s2 = { c: 3 };
Object.assign(t, s1, s2);
t // {a:1,b:2,c:3}

感谢阮一峰大佬