ES6学习

 

• 变量

var、let、const

var

1. 可以重复声明
2. 没有块级作用域

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

 

let                声明变量

const           声明常量

1. 禁止重复声明
2. 支持块级作用域 

if (true) {
	let a=12;
}
alert(a);                                            //不能输出undefined

•  解构赋值(参考https://www.imooc.com/article/20556)

 

let {a,b,c}={a: 12, b: 55, c: 99};     //相当于 let json={a: 12, b: 55, c: 99};
//let a=json.a;   let b=json.b;  let c=json.c
//或者 let{a,b,c}=json;

 数量不同也行

let [a,b]=[12,5,8];        //a=12,b=5
let [a,b,c,d]=[12,5,8];    //d为undefined

 

• 箭头函数

function (参数){

}                               //普通函数

 对应的箭头函数

(参数)=>{}                                          //箭头函数

带有函数名的函数

function show(){
      return {a: 12, b: 5};
}

等同于

let show=()=>({a: 12, b: 5});

注意以下几点

如果，有且仅有1个参数，()也可以省

如果，有且仅有1条语句-return，{}可以省（上面例2返回是json对象，‘{}’会被误认为函数代码块，所以要加一个‘（）’）  

 

• 参数展开 

用三个点把内容给展开来 

剩余参数——必须是最后一个

 

let arr=[12,5,8,99,27];
    //...arr  等价于12,5,8,99,27
    function sum(a,b,c,d,e){
      return a+b+c+d+e;
    }
    //alert(sum(arr[0], arr[1],arr[2],arr[3],arr[4]));           常规写法
    alert(sum(...arr));

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

    let arr=[...arr1, ...arr2];
    //等价于let arr=[1,2,3, 4,5,6];

 

• 系统对象

Array

map   映射    1对1

let arr=[100, 98, 37, 28, 19, 96, 56, 67];
    /*let res=arr.map(function (item){   //有item和index两个参数，index代表下标
      if(item>=60){
        return true;
      }else{
        return false;
      }
    });*/
    let res=arr.map(item=>item>=60);   //箭头函数简写

    console.log(arr, res);

 

forEach   遍历    循环一遍

let arr=[12, 5, 8, 99];

    arr.forEach((item, index)=>{                     //index从0 开始
      //alert('第'+index+'个：'+item);
      alert(`第${index}个：${item}`);                      //反引号为模板字符串，${}里可以写入变量
    });

例子里面的反单引号的扩展：模板字符串

 

 filter    过滤

let arr=[12, 88, 19, 27, 82, 81, 100, 107];
let arr2=arr.filter(item=>item%2==0);     //过滤出偶数

过滤后的arr2：arr2：[12, 88, 82, 100]

 

reduce    减少    多对1

let arr=[12, 66, 81, 92];

    let res=arr.reduce(function (tmp, item, index){        //temp为中间结果
      alert(`第${index}次，${tmp}+${item}`);
      return tmp+item;
    });

输出结果：

第1次，12+66

第2次，78+81

第3次，159+92

 

例子2：求平均数

let arr=[12, 66, 81, 92];

    let res=arr.reduce((tmp, item, index)=>{
      if(index<arr.length-1){
        return tmp+item;
      }else{
        return (tmp+item)/arr.length;
      }
    });

 

String

  字符串模板

  startsWith（"xxx"）     以xxx开头

  endsWith（"xxx"）     以xxx结尾

 

JSON

1.标准写法

{"key": "aaa", "key2": 12}

2.JSON对象

Stringify

let json={a: 12, b: 5, c: 'blue'};

    let str=JSON.stringify(json);    //转化为字符串
    console.log(str);

parse

let str='{"a":12,"b":5,"c":"blue"}';
    let json=JSON.parse(str);                          //把字符串转化为json对象

 

 

面向对象（ES6和ES5的比较）

ES5中类和继承的写法

function Person(name, age){               //声明对象、构造方法
      this.name=name;
      this.age=age;
    }

    Person.prototype.show=function (){               //对象的方法的写法
      alert(this.name);
      alert(this.age);
    };

function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }

    Worker.prototype=new Person();
    Worker.prototype.constructor=Worker;

    Worker.prototype.showJob=function (){
      alert(this.job);
    };

    let w=new Worker('alan', 20, '码农');

    w.show();
    w.showJob();

ES6中类和继承的写法

class Person{
      constructor(name, age){             //构造方法
        this.name=name;
        this.age=age;
      }

      show(){
        alert(this.name);
        alert(this.age);
      }
    }

class Worker extends Person{
      constructor(name, age, job){
        super(name, age);
        this.job=job;
      }

      showJob(){
        alert(this.job);
      }
    }

    let w=new Worker('blue', 18, '打杂的');

    w.show();
    w.showJob();

发现ES6中的写法和java很相似

 

模块化

浏览器暂时不支持es6模块话，但是通过webpack处理后可以

导入与导出

export

  export let a=xx;  //导出变量
  export const a=xx;

  export function xxx(){  //导出函数

  };

  export class xxx{  //导出类

  }

  export {xxx, xxx, xxx, ...};  //导出json数据

  export default xx;

  //从另一个模块导出
  export * from './m2';
  export {x,x,x,x} from './m2';
  export {default} from './m2';

Import

  import * as mod from "./xxx";
  import {a, b, c, ...} from "./xxx";

  //引入默认成员
  import xxx from './mod';

  //模块的代码引入进来，不引入内部成员
  import "./1.jpg";
  import "./1.css";

  //异步引入
  let promise=import("./mod1");