ES6 常用语法

变量声明let与const

const

• const用于声明常量，在程序运行中不能直接被修改，不然会报错。
• const声明的时候一定要赋值，不然会报错。
• const作用域和let一样都是块级作用域。

let

• let在块级作用域有效，在该块级作用域之外将不能被访问。
• let不存在变量提升（变量提升即将变量声明提升到它所在作用域的最开始的部分）。
• let声明的变量不能重复声明，不然会报错，const亦如此。

变量的解构赋值

数组解构赋值

基本用法

在ES6之前，变量的赋值如下：

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

嵌套使用

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];

特殊情况情况

1. 解构不成功

   let [foo] = [];
   let [bar, foo] = [1];
   

   以上两种情况都属于解构不成功，foo的值都会等于undefined。

2. 不完全解构

   let [x, y] = [1, 2, 3];
   

   等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

3. 报错

   let [foo] = 1;
   let [foo] = false;
   let [foo] = NaN;
   let [foo] = undefined;
   let [foo] = null;
   let [foo] = {};
   

   上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。

   具备Iterator接口是指可遍历

默认值

1. 基本使用

   解构赋值允许指定默认值。

   let [foo = true] = [];
   foo // true
   
   let [x, y = 'b'] = ['a'];
   // x='a', y='b'
   let [x, y = 'b'] = ['a', undefined];
   // x='a', y='b'
   

   注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

2. 表达式

   如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

   function f() {
       console.log('aaa');
       }
   let [x = f()] = [1];
   

   上面代码中，因为x能取到值，所以函数f根本不会执行

3. 引用其他变量

   默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

   let [x = 1, y = x] = [];
   // x=1; y=1
   let [x = 1, y = x] = [2];
   // x=2; y=2
   let [x = 1, y = x] = [1, 2];
   // x=1; y=2
   let [x = y, y = 1] = [];
   // ReferenceError
   

   上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明

对象解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

字符串解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

字符串扩展

1. includes()
   返回布尔值，判断是否找到参数字符串。

2. startsWith()
   返回布尔值，判断参数字符串是否在原字符串的头部。

3. endsWith()
   返回布尔值，判断参数字符串是否在原字符串的尾部。

   let string = "apple,banana,orange";
   string.includes("banana");
   // true
   string.startsWith("apple");
   // true
   string.endsWith("apple");
   // false
   string.startsWith("banana",6)  
   // true
   

4. 模板字符串

• 模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

• 字符串插入变量和表达式。
  变量名写在 ${}中，${} 中可以放入 JavaScript 表达式。

  let name = "Mike";
  let age = 27;
  let info = `My Name is ${name},I am ${age+1} years old next year.`
  console.log(info);
  // My Name is Mike,I am 28 years old next year.
  

  注意：模板字符串中的换行和空格都是会被保留的

• 字符串中调用函数

   function f(){
       return "have fun!";
       }
    let string2= `Game start,${f()}`;
    console.log(string2);  
    // Game start,have fun!
  

函数扩展

参数默认值

function test(x,y = "hello"){
    console.log("函数参数：",x,y);
}
test("winne");      //函数参数：winne hello
test("winne","hi"); //函数参数：winne hi

如上代码我们可以看出，当函数参数有了默认值可以不传入那个参数，那么就直接使用默认的参数。

注意：参数变量是默认声明的，不能用let和const再次声明：

参数解构赋值

function add([x, y]){
  return x + y;
}

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

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

rest参数

rest 参数（形式为 ... 变量名 ），用于获取函数的多余参数。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

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

扩展运算符

扩展运算符（ spread ）是三个点（...）。是 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

function push(array, ...items) {  
array.push(...items);  
}  
function add(x, y) {  
return x + y;  
}  
var numbers = [4, 38];  
add(...numbers) // 42

箭头函数

无参箭头函数

let foo = () => {
    console.log(('oook'))
 }
 foo()

有参箭头函数

let foo = (v) => {
    return v
 }
 foo()

注意

1. 箭头函数可以当作匿名函数应用
2. 箭头函数内外this指向相同,this指向取决于定义
3. 箭头函数不可以new
4. 箭头函数不可以使用argument获取参数列表

类与继承

class关键字

与Java基本相同

class Person{  // Person类  它也是一个函数
    constructor(name){  // 构造函数
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
var p1 = new Person('name');
console.log(p1.showName());  // name

值得注意的是的，constructor代表的是构造函数，在new一个实例的时候，构造函数自动执行。

在写类的过程中，有一点需要注意：class没有预解析，实例化一定要放在下面

继承

基本和java类似

class Person{
    constructor(name){
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
class SubPerson extends Person{
    constructor(name,job){
        super(name);    // 指向父类的构造函数
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new SubPerson('name','前端开发');
console.log(p1.name);