ES6常用知识点整理（二）

1.LET和CONST

JS语言var的缺点：

可重复声明
无法限制修改
没有块级作用域

if(true){
    var a = 12;
}
alert(a);   //12

ES6：
变量let, 常量const

都不能重复声明
都有块级作用域

块级作用域示例

<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script>
    window.onload= function(){
        var aBtn = document.getElementsByTagName('input');
        
        for (let i = 0; i < aBtn.length; i++) {
            aBtn[i].onclick = function(){
                alert(i)
            }
        }
    }
</script>

2.箭头函数

如果只有一个参数，()可以省
如果只有一个return，{}可以省

window.onload = () => {
    alert(1);
}

let show = () => {
    alert(1);
}
show();

()，return 省略后

let show = function(a){
    return a+1;
}
alert(show(2));

//箭头函数改写后

let show = a => a+1;
alert(show(2));

3.函数-参数

参数扩展/展开

作用：

收集剩余的参数 function func(a, b, ...args){}

...args必须放在参数的最后

function show(a, b, ...args){
    alert(a);
    alert(b);
    alert(args);
}

show(12,34,55,35,20);
//12
//34
//55,35,20

展开一个数组，就和直接把数组的内容写在这一样

展开后与show()的参数想对应

let arr = [1,2,3] 
show(...arr)

function show (a,b,c) {
    alert(a)
    alert(b)
    alert(c)
}

数组展开合并

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr4 = [...arr1, ...arr2]

alert(arr4)

相当于把参数展开传入show()中

function show(...args){
    fn(...args)
}

function fn(a,b){
    alert(a+b);
}

show(12,5)  //17

默认参数

直接括号内赋值即可

function show(a,b=5,c=12){
    console.log(a,b,c)
}
show(99,19) //99 19 12

4.解构赋值

左右两边结构必须一样
右边必须是个东西(语法正确)
声明和赋值不能分开（必须在一句话里面完成)

数组

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

json

let {a,c,d} = {a:12, c:15, d:23}
console.log(a, c, d)  //12 15 23

混合结构

let [{a,b},[n1,n2,n3],num,str] = [{a:12, b:5},[12, 5, 8], 8, "scsee"];
console.log(a,b,n1,n2,n3,num,str)   //12 5 12 5 8 8 "scsee"

调整粒度

let [json,arr,num,str] = [{a:12, b:5},[12, 5, 8], 8, "scsee"];
console.log(json,arr,num,str)   //{a: 12, b: 5} [12, 5, 8] 8 "scsee"

5.数组

map ———— 映射：一个对一个，进去多少返回多少

let arr = [12,5,8]
let result = arr.map(item => item*2);
alert(result);  //24,10,16

为成绩分类

let score = [19,85,99,25,90]
let result = score.map(item => item >= 60 ? "及格" : "不及格");

console.log(score)  //[19, 85, 99, 25, 90]
console.log(result) //["不及格", "及格", "及格", "不及格", "及格"]

reduce ———— 汇总：一堆对应一个

三个参数为（中间结果，下一项，次数索引），第一次执行时由于没有前一次的计算，那么中间结果为 arr[0] ，第二次执行时中间结果即为上一次中间结果 arr[0] + 下一项 69 的和为 81，执行到最后一次时，没有下一项，那么当前的中间结果即为 result 的值。

let arr = [12, 69, 180, 8763]
let result = arr.reduce(function(tmp,item,index){
    alert(tmp+ ',' +item+ ','+index)
    return tmp+item;
})
alert(result)   //9024

filter ———— 过滤器

过滤被3整除的数,参数代表要过滤的项

let arr = [12,5,7,99,27,36,75,11,23]
let result = arr.filter(item => item % 3 == 0)
console.log(result) //[12, 99, 27, 36, 75]

forEach ———— 循环(迭代)

循环输出数组项

let arr = [23,45,323,12];
arr.forEach((item,index)=>{
    console.log(index + ':' + item)
    //0:23
    //1:45
    //2:323
    //3：12
})

6.字符串

多了两个新方法

startsWith

判断网址类型

var site = 'https://www.baidu.com';

if(site.startsWith('http://')){
    alert('普通网址');
}else if(site.startsWith('https://')){
    alert('加密网址');
}else if(site.startsWith('git://')){
    alert('git地址');
}else if(site.startsWith('svn://')){
    alert('svn仓库');
}

endsWith

判断文件后缀名

let str = "1.txt"
if(str.endsWith('.txt')){
    alert('文本文件')
}else if(str.endsWith('.jpg')){
    alert('jpg图片')
}

字符串模板

使用一对反单引号 ``, 可以折行, 用 ${} 在其中插值,

let a = 12;
let str = `a${a}bc`;
alert(str) //a12bc

7.面向对象

新增class关键字、构造器和类分开, class 里面直接加方法

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    //class 没有冒号和 function
    showName(){
        alert(this.name)
    }
    showPass(){
        alert(this.pass)
    }
}

var ul = new User('aj','233')
ul.showName();
ul.showPass();

继承

原版的继承

function User(name,pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName = function(){
    alert(this.name)
}
User.prototype.showPass = function(){
    alert(this.pass)
}

var ul = new User('aj','233')
ul.showName();
ul.showPass();

//——————————继承——————

function VipUser(name,pass,level){
    User.call(this,name,pass);
    this.level = level;
}

VipUser.prototype = new User();
VipUser.prototype.costructor = VipUser;
VipUser.prototype.showLevel = function() {
    alert(this.level);
};

var v1 = new VipUser('aaa','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();

ES6的继承

class User {
    constructor(name, pass) {
        this.name = name;
        this.pass = pass;
    }
    //class 没有冒号和 function
    showName() {
        alert(this.name)
    }
    showPass() {
        alert(this.pass)
    }
}

class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass);
        this.level = level;
    }

    showLevel(){
        alert(this.level);
    }
}

var v1 = new VipUser('aaa', '123456', 3);
v1.showName();
v1.showPass();
v1.showLevel();

面向对象应用——React

<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.34/browser.js"></script>
<title>Document</title>
<script type="text/babel">

class Item extends React.Component{
    constructor(...args){
        super(...args);
    }
    
    render(){
        return <li>{this.props.str}</li>
    }
}

class List extends React.Component{
    constructor(...args){
        super(...args);
    }

    render(){
        let aItems = [];
        for(let i = 0; i<this.props.arr.length;i++){
            aItems.push(<Item str={this.props.arr[i]}></Item>);
        }
        //let aItems = this.props.arr.map(a=><Item str={a}></Item>);

        return <ul>
            {aItems}
        </ul>
    }
}

window.onload = function(){
    let oDiv = document.getElementById('div1');
    ReactDOM.render(
        <List arr= {['abc','erw','sdfasdf']}></List>,
        oDiv
    );
}
</script>

8.json

对象转JSON

let json = {a:12, b:5}
let str = "www.baidu.com" + JSON.stringify(json);
console.log(str)    //www.baidu.com{"a":12,"b":5}

JSON转对象

let str2 = '{"a":12,"b":5,"c":"abc"}';
let json2 = JSON.parse(str2);
console.log(json2);     //{a: 12, b: 5, c: "abc"}

简写,名字和值一样时，保留一个就好,有方法时 :function一块删

let a = 12;
let b = 5;

let json = {a,b,c:55}
console.log(json)   //{a: 12, b: 5, c: 55}

Promise

异步：操作之间没啥关系，同时进行多个操作
- 代码更复杂
同步：同时只能做一件事
- 代码更简单

特点：用同步一样的方式，来书写异步代码

generator-生成器

普通函数 —— 一路到底
generator —— 中间能停

function *show(){
    alert('a')
    yield;
    alert('b')
}
let genObj = show();
genObj.next();
genObj.next();

本质上generator 是切分成了许多小函数

yield

传参

function *show(num1,num2){
    alert(`${num1},${num2}`)
    alert('a'); //a

    let a = yield;

    alert('b'); //b
    alert(a);   //5
}

//第一个 yield 之前直接在函数中传值即可
let gen = show(99,88);

// 第一个 next 执行的是函数开始到第一个yield之间的代码。
// 第一个 next() 内传的参数是废的。
gen.next(12);   

// 第二个 next 执行的是第一个 yeild 开始之后的代码。
// 因此 5 会传给 a 。
gen.next(5);

返回值

function *show(num1,num2){
    alert('a')
    yield 12;
    alert('b')
    return 55;
}

let gen = show();
let res1 = gen.next();
console.log(res1)   //{value: 12, done: false}
let res2 = gen.next();
console.log(res2)   //{value: 55, done: true}

形象一点

function * 炒菜(菜市场买回来的菜) {
    
    洗菜 -> 洗好的菜

    let 干净的菜 = yield 洗好的菜

    干净的菜 -> 切 -> 丝

    let 切好的菜 = yield 丝

    切好的菜 -> 炒 -> 熟菜

    return 熟菜
}