ES6入门

ES6

let

声明块级作用域的变量,es6中新增了块级作用域的概念,let所声明创建的变量，只在它所在的这个代码块内有效

// es5
        var _arr = [];
        for (var i = 0; i < 5; i++) {
            // 复习下立即执行函数
            (function(i) {
                _arr[i] = function() {
                    console.log(i);
                }
            })(i);
        }
        _arr[0]();

        // es6 
        var _arr = [];
        for (let i = 0; i < 5; i++) {
            _arr[i] = function() {
                console.log(i);
            }
        }
        _arr[3](); // let存在块级作用域的概念,这里的i只在for循环这一块级作用域中起作用

const

声明常量

   // const要在开始就声明并赋值
        const PI = 3.14;
        // PI = 3.14159;  
        // console.log(PI); // 会报错Assignment to constant variable.
        // console.log(PI);
        const xx = {
            a: 123
        }
        xx.a = 1234;
        console.log(xx.a);

class extends super

es6引入了class（类）的写法

class 父类{
	constructor(){
		一些自己的属性
	}
	xxfn(){
		一些函数方法，这是es6的写法
	}
}
class 子类 extends 父类{
	constructor(){
		//子类用super获得父类的实例
		//因为子类在继承的时候，没有自己的this
		//所以需要先运行super，继承父类的实例
		//然后在此基础之上，加工。
		super();
		一些子类自己的属性
	}
	一些子类自己的方法
}

// 先来写 es5 继承
// 父类构造器
function aa(){
	this.txt = '父类'
	this.fn = function( n ){
		console.log( n )
	}
}
// new aa().fn('这是父类xxx')
// 要继承，prototype
function bb(){}
//prototype，指向的是一个父类的实例
bb.prototype = new aa();
//new之后，bb的this指向了aa
var _bb = new bb();
// console.log( _bb )
// _bb.fn('这是一个子类 bbb')

/*下面是es6的写法*/ 
// es6定义父类
class Axx{
	constructor(){
		this.txt = '现在是：';
	}
	fnxx(n){
		console.log(this.txt+n)
	}
}
let _axx = new Axx();
// console.log( _axx.txt )
_axx.fnxx('这是父类的实例')

/* es6的继承*/
class Bxx extends Axx{
	constructor(){
		super()
		console.log( this )
	}
	bxxfn(){
		console.log('这是子类 自己的方法')
	}
}
let _bxx = new Bxx();
_bxx.fnxx('这是子类的实例')
_bxx.bxxfn()

箭头函数

j箭头函数中的this，是这个函数所在的父函数的this

let _a = () => '123'; //只有一行数据时可以省略return
        // _a();
        let _b = () => {
            let a = 1;
            let b = 2;
            return a + b;
        }
        console.log(_b());
        // 箭头函数没有自己的this,他的this指向的是父级的this
        function Axx() {
            let _a = () => {
                console.log(this);
            }
            _a()
        }
        new Axx();
        // 以后的写法
        class Xxfn {
            constructor() {}
            sayHi(n) {
                console.log(n);
            }
        }
        let _x = new Xxfn();
        _x.sayHi('hi~~~')

模板字符串

它是使用``一对反引号来标识开始和结束，

   let _obj = {
            name: '张三',
            age: 18,
            eat: '吃饭'
        }
        let _s = `我的名字是${_obj.name},我今年${_obj.age}岁了,我喜欢${_obj.eat}`
        console.log(_s);
        let _html = `
            <h1>标题</h1>
            <p>段落</p>
        `;
        let _h = document.createElement('div')
        _h.innerHTML = _html;
        document.body.appendChild(_h)

解构赋值

 let _obj = {a: 1, b: 2, c: ['1,', '2', 'abc']}
 // 对象中的键名作为变量来保存对象的值
let {a,b,c} = _obj;
console.log(a);
console.log(b);
console.log(c);
/*
在react、vue当中，
import {component} from React
这句话的意思，就是从React这个对象中，
取得了component这个键，所对应的值。
*/

默认值

 // 在函数参数上可以写入默认值,传进的实参有值就使用传入的,没值就使用默认的值
        function aa(a = 1, b = 2) {
            return a + b;
        }
        aa();
        aa(2, 3)

rest

 //es5
        // arguments不能使用数组的相关方法,伪数组 可以使用.length方法
        function aa() {
            console.log(arguments);
            console.log(arguments.length);
        }
        aa(1, 2, 3, 4, 5)
//es6
        //...变量名 可以使用数组的方法
        let _a = (...args) => {
            console.log(args);
            console.log(args.pop());
        }
        _a(1, 2, 3.4578, 555)

扩展运算符

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