学习阶段1--ES6的10个新特性

ES6的10个新特性

ECMAScript 6(ES6) 现在已经成为了前端的业界标准，普及速度飞快，由于现在的浏览器对ES6的标准很支持（特别是Chrome和Firefox），因此ES6中的新特性就非常需要去掌握。以下是常用的10个ES6的新特性：

1.js中的变量声明：const和let

在ES6中推荐使用let来声明局部变量，而之前都是用var，用var声明变量的话，不管声明在什么地方，都会被看作生命在函数的最顶部。
var和let声明变量的区别：

var a = '全局变量';//
{
  let a = '局部变量';
  console.log(a); // 局部变量
}
console.log(a); // 全局变量

从上面可以看出let声明的是一个局部变量，仅在当前的块级作用域有效，再来说说const，const会声明一个常量（即声明后不可改动的量）：

const a = 0;
a = 10;//报错，因为a已经是常量0了，不可去修改它的值

但是const也可以用来声明对象，那么声明的这个对象所包含的值是可以修改的，可以理解成它指向的地址没有发生变化，包含的值就不会发生变化：

const boy = { name: '小明' }

boy.name = '小亮';// 正确
boy  = { name: '小亮' };// 报错

在使用let和const时要注意，作用域都只在一个区块内有效，同时const在声明时必须要赋值，不然会报错。

2.箭头函数

ES6中的箭头函数实际上就是普通函数写法的简化版，用括号包参数，后面跟一个=>，然后跟函数主体部分，下面是箭头函数的写法：

//es5写法
var num = function（x，y）{
return x + y；
}；
//箭头函数写法
var num = （x，y）=> x + y；

3.模板字符串

一般情况下在拼接模板字符串的时候这么来写代码：

$("body").html("大家好我是" + name + "，是兄弟就来贪玩蓝月找我");

使用+对字符串进行拼接，，然而对ES6来说，我们可以将表达式写进字符串中进行拼接，用${}界定表达式，然后用反引号``来搞定：

$("body").html(`大家好我是${name} ,是兄弟就来贪玩蓝月找我`);

4.函数默认参数值

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

5.Spread / Rest 操作符

Spread / Rest 操作符指的是…，
当被用于迭代器中时，它是一个 Spread 操作符：

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6.对象超类

ES6 允许在对象中使用 super 方法：

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

7.for…of循环 和 for…in循环

for…of 用于遍历一个迭代器，如数组：

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 输出结果: a, b, c

for…in 用来遍历对象中的属性：

let stu = ['Sam', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 输出结果: Sam, 22, 男

8.ES6中的类

ES6 中支持 class 语法，函数中使用 static 关键词定义构造函数的的方法和属性：

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9.二进制和八进制字面量

ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值：

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

10.对象和数组解构

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

记录学习过程~