es6详解--笔记

es6兼容 ie10+，chrome,fireFox、移动端、nodeis以上兼容
es6转js 处理：babel = browser.js转换,webpack中
在线转换：引入browser.js，
es6主要包含：
变量、函数、数组、字符串、面向对象、Promise、generator、模块化

js中var 的缺点：

1. 可以重复申明，当然严格模式不支持；
2. 无法限制修改；
3. 没有块级作用域；

ES6中新增 let 和 const
let 的特点

不可重复申明，变量-可修改；
块级作用域，语法块：if，for，{} …;

const的特点

不可重复申明，常量-不可修改；
块级作用域

es6中的函数
1、箭头函数：

形式：（）=> {} ；
1、如果有且只有一个参数，（）可省略；
2、如果只有一个return {}可以省略；
箭头函数的意义：
简写方便、

2、函数的参数
1）参数的扩展

a.收集参数
function show(a,b,…args)；
Rest Parameter必须是最后一个 b.展开数组 let arr = [1,2,3],arr2=[5,6,7]; let array =
[…arr,…arr2],array=[1,2,3,5,6,7];

2）默认参数

 function show(a,b=5,c=9){
     console.log(a,b,c); //1,3,9
   }
   show(1,3);

解构赋值
1、左右两边必须一样；
2、右边必须是个东西；
3、申明和赋值的不能分开(必须在一句话里完成）；
4、可拆成自己想要的粒度。

  let [a,b,c] = [1,2,3];
  console.log(a,b,c); //1,2,3
  let [{m,n},[n1,n2,n3],num,str]=[{m:1,n:3},[12,5,8],8,'xedggd'];
  console.log(m,n1,num,str);//1 12 8 "xedggd"
  //粒度
  let [Json,arr]=[{m:1,n:3},[12,5,8]];
  console.log(Json,arr);//{1,3} [12,5,8]

数组
1、map–映射 一个对一个

let sorce = [19,85,90,45,99];
  let result = sorce.map(item => item >= 60 ? '及格' : '不及格');
  alert(result);

2、reduce–汇总 一堆出来一个
应用：购物车、表格汇总

 let arr = [12,45,68,9,897];
  let result = arr.reduce((tmp,item,index)=>{
   //  index 1 开始 tmp初始为12
   // alert(tmp+','+item+','+index);
   console.log(tmp,index);//12,1    57,2  125,3   ...
   return tmp+item;
  })
console.log(result); //1031

3、filter–过滤器

let arr2 = [1,3,5,6,12,36,11];
let res2 = arr2.filter(item => item%3 === 0)
console.log(res2);// [3, 6, 12, 36]

4、forEach–循环(迭代）

let arr3 = [12,5,8,9];
arr3.forEach((item,index) => {console.log(item,index)});

字符串
1、startsWith：字符串以什么开始

let str="http://it.kaikeba.com";
  if(str.startsWith('http://')){
    console.log('普通网址');
  }else if(str.startsWith('git://')){
    console.log('git网址');
  }else if(str.startsWith('svn://')){
    console.log('svn网址');
  }else{
    console.log("不知道的...");
  }
 // 普通网址

2、endsWith 字符串以什么结尾

 let str2 = '1.txt';
  if(str2.endsWith('.txt')){
    console.log('文本文件');
  }else{
    console.log('其他文件');
  }
  //结果文本文件

3、字符串模板—好东西
a.直接把东西塞到字符串中 ${东西}；
b.可以折行；

//字符串模板
let a = 12;
let str3=`a${a}b`//反单引号
console.log(str3); //a12b

ES6的面向对象
js中的实现方式

  // js原来的方式
  function User(name,pass){ 
     this.name = name;
     this.pass = pass;
  }
  User.prototype.ShowName = function(){
    alert(this.name);
  }
  User.prototype.ShowPass = function(){
    alert(this.pass);
  }
  
  let u1 = new User('ysy','123456');
  u1.ShowName();
  u1.ShowPass();

ES6中面向对象特点
a.class关键字，构造器和类分开了；
b.class里面直接加方法；

  // es6中
  class User {
    constructor(name,pass){
      this.name = name;
      this.pass = pass;
    }
    ShowName(){
      alert(this.name);
    }
    ShowPass(){
      alert(this.pass);
    }
  }

  let u1 = new User('ysy','123456');
  u1.ShowName();
  u1.ShowPass();

面向对象中的重点是：继承
原来的方式，直接上代码(User部分代码在上面的面向对象中）

  // 继承
function VipUser(name,pass,level){
    User.call(name,pass); // 继承的关键
    this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
// 子类新增的方法
VipUser.prototype.showLevel = function(){
  alert(this.level);
}
let u2 = new VipUser('ysy','123345',12);
u2.showLevel(); // 12
u2.ShowName();//ysy
u2.ShowPass();//123345

注意：VipUser.prototype.showLevel 放在VipUser.prototype = new User();前面会报showLevel is not a function 的错误。

ES6中的继承 (User部分代码在上面的面向对象中）

  // 2.继承
  class VipUser extends User{
    constructor(name,pass,level){
      super(name,pass);
      this.level = level;
    }
    showLevel(){
      alert(this.level);
    }
  }
  
  let u2 = new VipUser('ysy','123345',12);
  u2.showLevel(); //12
  u2.ShowName();//ysy
  u2.ShowPass();//123345

对比一下：es6中更简单、更易读

ES6中json 对象新增
简写
1、名字与值一样(key与value) 留一个就行；
2、json中有方法，可以删 function

 //json的对象简写
  let a = 12;
  let b = 5;
  let json1={a,b,c:8} //a,b名字与值一样
  console.log(json1);
  let json2 ={
    num: 12,
    show(){ // 方法简写，省略了function
     alert(this.num); // 12
    }
  }

Promise
直接上all与race的用法

<script>
  function test() {
    return new Promise((resolve,reject) =>{
       setTimeout(()=>{
        resolve("成功了！");
       },2000)
    });
  }
  function yibuFn(resolve, reject){
    setTimeout(()=>{
        resolve("失败了！");
       },1000)
  }
let res1Fn = test();
let res2Fn = new Promise(yibuFn);
// all 用法 所有异步都执行完
Promise.all([res1Fn,res2Fn]).then((results)=>{
  let [res1,res2] = results;
   console.log("all===",res1,res2); // 失败了！ 成功了！
})
// 先执行完的
Promise.race([res1Fn,res2Fn]).then((results)=>{
 console.log("race===",results);
})
</script>

结果：

generator与yield的介绍
generator–生成器 ，generat–生成；
普通函数–一路走到底；
generator – 中途可以停；
generator函数前带有*，与yield一起使用；
适用于 请求数据，下一步需要这个数据。

yield—放弃执行
yield既可以传参也可以返回

• generator的使用 、yield 传参

  function *show(){
    alert('aaa'); //aaa
    let a = yield; // yield 传参
    alert('bbb');
    alert(a); // 5
  }
  let gen = show();
  gen.next(12);//第一个执行过程  alert('aaa'); 以及 yield ； 第一个next 无法给yield传参
  gen.next(5); // 第二次执行过程 let a ,以及  alert('bbb');  alert(a); // 5

• generator的使用、yield 返回

  function *show(){
  alert(‘aaa’); //aaa
  yield 12; // yield 返回
  alert(‘bbb’);
  // return 55;
  return 55;
  }
  let gen = show();

  let result1 = gen.next();
  console.log(result1); // 结果：{value: 12, done: false}
  let result2 = gen.next();
  console.log(result2); // 结果：{value: undefined, done: true} 如果 return 55;则：{value: 55, done: true}