ES6基础学习

一，什么是ES6

• ECMAScript6（简称ES6），又称ECMAScript2015（ES2015）
• 2015年6月正式发布，是JS语言的下一代标准

二，为什么要学

• 更严谨的语法，更高效的代码
• 更新的特性，更多的功能
• 新特性举例：箭头函数的使用场景——数组遍历

let arr = [1,2,3]
arr1.map(function(X){
  return x*x;
});



let arr2 = [1,2,3]
arr2.map(x=>x*x);

• 兼容性解决方案成熟（Babel）

学习重点

• 变量，常量，解构赋值
• 函数，箭头函数
• Class VS function
• 模块化

一，变量

        1, 声明变量 let

        2. let的三大特性

                特性一：不存在变量提升，必须要先声明，再使用

                特性二：不能重复声明

                特性三：块级作用域，变量只再代码块内有效

function func() {
  let n = 5;
  if(true){
    let n = 10;
    console.log(n);
  };
  console.log(n);
}

 二，常量

        1. 什么是常量？

                 一旦声明，常量的值不能改变

        2. 声明常量

                const PAGE_SIZE = 10

        3. const的三大特征

                特性一：声明必须赋值（必须初始化）

                 特性二：常量是只读的，不能被重新赋值

                特性三：块级作用域，只在代码块内有效

三，解构赋值

        1. 数组的解构赋值

                按顺序将值赋值给对应的变量

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

                ...表示解构运算符，将剩余的内容赋值

let [c,...d] = [1,2,3]

                防止解构失败，给变量默认值

let [g,h=100] = [1]

        2. 对象的解构赋值

                按顺序将值赋值给对应的变量

let {foo,bar} = {foo:'aaa', bar:'bbb'}

                可以解构对象中的常量，方法

console.log(Math.PI)
let {PI, sin} = Math
console.log(PI)
console.log(sin(PI/2))

                解构赋值失败，则为unidefined，可设置为默认值

let {x,y=5} = {x:1}

                重新指定变量名称

let {color:sky} = {color:'blue'}
console.log(sky)

                复杂对象的解构赋值

let {title, author:{name,age}} = {
    title:'新闻标题',
    author:{
        name:'张三',
        age:23
    }
}

console.log(name)
console.log(age)

        3. 字符串的解构赋值

                字符串可以看做是“伪数组”

const [a,b,c,d,e] = 'hello'
console.log(a)
console.log(b)

let {length} = 'hello'
console.log(length)

四，函数与箭头函数

1. 函数指定默认值

function point(x=0, y=0) {
    console.log(x);
    console.log(y);
}

2. 未设置默认值且不传对应参数时，值为undefined

function point(x,y=0) {
    console.log(x);
    console.log(y);
}

ps 将带默认值的参数放最后

3. 注意：参数变量（形参）不可重复声明

// 不被允许
function point(x=0, y=0){
    let x = 0;
    const y = 1;
}

4. 当形参为对象时，可使用解构赋值

function fetch(url, {body='', method='GET', headers={}}) {
    $.ajax({
        url,
        method
    })
}

5. 对象中的函数简写

let UserB = {
    name: '张三',
    age: 23,
    info() {
        return this.name + this.age
    }
}

6. 箭头函数

let f1 = v => v;


// 等同于
let f1 = function(v) {
    return v;
}

函数体包含多条语句，使用{}包含语句块

let f3 = (a,b) => {
    console.log(a,b);
    return a + b;
}

箭头函数的使用场景——数组遍历

let arr1 = [1,2,3];

arr1.map(function(x){
    return x*x;
});



let arr2 = [1,2,3]
arr2.map(x=>x*x)

注意：箭头函数体内的this指向定义时所在的对象，而非实例化后的对象（在函数定义时绑定）

7. 理解this

this指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只能在当前函数内部使用

运行时跟运行环境绑定:浏览器this===window   Node环境this===global

当函数被作为某个对象的方法调用时，this指向那个对象

五，JS中的面向对象编程

1. ES6以前的面向对象编程

function Point(x,y){
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function() {
    return this.x + this.y
}

var p = new Point(1,2)

2. ES6中引入class关键字，实现面向对象编程

class Point {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return this.x + this.y
    }
}


let p = new Point(1,2)
console.log(p.toString())

3. 关于this的指向

        类方法中的this指向类的实例

        静态方法中的this指向类

六，ES6中的继承

1. ES6中使用extends关键字实现类的继承

2. 属性表达式

        类的属性名，可以采用表达式，使用[]来引用

let methodName = 'getArea';
class Square {
    ['a' + 'bc'](){},
    [methodName](){}
}

七，模块化

1.思考：什么是模块化？它有什么好处？

• 模块是对内部逻辑的封装，只对外提供接口
• 一个js文件就是一个模块
• ES6中使用export关键字对外暴露接口（导出）
• ES6中使用import关键字导入一个接口

2. export的使用

• 直接导出 
• 批量导出
• 使用export default默认导出
• 注意：语句的位置（代码顶层，不能再语句块内）

3. import的使用

• 导入需要的部分内容
• 导入全部内容，使用as指定别名