ECMAScript6扫盲笔记(二)

5. 数组

map（映射）

//eg1：将原数组中的元素，增大一倍后返回一个新数组
<script>
  let arr=[12,5,8];
  /*let result=arr.map(function (item){  return item*2;  });*/
  let result=arr.map(item=>item*2);//返回arr数组中各个元素2倍的数组
  alert(result);
</script>

//eg2: 遍历分数数组中的元素，判断是否满足要求后，映射返回对应的结果
<script>
  let score=[19, 85, 99, 25, 90];
  // 根据score数组元素内容，处理后生成新的数组格式，判断及不及格
  let result=score.map(item=>item>=60?'及格':'不及格');
  alert(score);  alert(result);
</script>

reduce（可用于数组求和）

filter（过滤器）

<script type="text/javascript">
  let arr=[12,23,5,20,76,59];
  /*根据返回的boolean值。其内部会遍历数组的元素，遍历的元素值给了item
   * 判断元素的是否被过滤。*/
  let result=arr.filter(item=>{ return true;//false; })
</script>

6. 字符串

string.stratsWith("string2"); string字符串中是否以字符串string2开头，返回boolean值。

<script>
  let str='git://www.baidu.com/2123123';
  if(str.startsWith('http://')){ //是否以"http://"为开头
    alert('普通网址');
  }else if(str.startsWith('https://')){
    alert('加密网址');
  }else if(str.startsWith('git://')){
    alert('git地址');
  }else if(str.startsWith('svn://')){
    alert('svn地址');
  }else{
    alert('其他');
  }
</script>

string.endsWith("string2"); string字符串中是否以字符串string2结尾，返回boolean值。

<script>
  let str='1.png';
  if(str.endsWith('.txt')){
    alert('文本文件');
  }else if(str.endsWith('.jpg')){
    alert('JPG图片');
  }else{  alert('其他');  }
</script>

字符串模板：
使用返单引号 ` 和${}进行字符串模板内容的嵌套。
```
<script>
  let title='标题';
  let content=`<div>${title}</div>`;
</script>
```

7. 对象和继承（面向对象）

在ES6中可以像java一样构建对象，eg：

<script>
  class User{//ES6特性，实体类
    constructor(name, pass){//构造器
      this.name=name;
      this.pass=pass;
    }
    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('blue', '123456', 3);
  v1.showName();
  v1.showPass();
  v1.showLevel();
</script>

8. JSON

JSON标准写法：key和value需要使用双引号，并且只能使用双引号。

key和value值相同时，可以省略=和value的值。eg:

<script type="text/javascript">
  let a=12;
  let json={a,b:5};//简写了 a: a
</script>

JSON.stringfy()； json串行化；eg：

<script type="text/javascript">
  let json={"a":12,"b":15};
  // json对象串行化，url传输时需要encodeURIComponent编码转换
  let str='https://www.baidu.com?data='
			+encodeURIComponent(JSON.stringfy(json));
</script>

JSON.parse()；json格式的字符串转换成JSON对象。eg：

<script type="text/javascript">
  let str='{"a":12,"b":5,"c":"abc"}';
  //json格式的字符串转换成json对象。
  let json=JSON.parse(str);
  console.log(json);
</script>

9. promise异步请求格式

优化ajax请求时，请求成功和失败的处理方法，优化代码格式。eg：
单个ajax请求：

<script src="jquery.js" charset="utf-8"></script>
<script>
  //resolve：成功；reject： 失败；
  let p=new Promise(function (resolve, reject){
    $.ajax({
      url: 'data/arr2.txt',
      dataType: 'json',
      success(arr){//请求成功调用resolve函数
        resolve(arr);
      },
      error(err){//请求失败调用reject函数
        reject(err);
      }
    })
  });
  p.then(function (arr){//第一个函数对应resolve
    alert('成功'+arr);
  }, function (err){//第二个函数对应reject
    console.log(err);
    alert('失败了'+err);
  });
</script>

多个ajax请求：

<script src="jquery.js" charset="utf-8"></script>
<script>
  //resolve：成功；reject： 失败；
  let p=new Promise(function (resolve, reject){
    $.ajax({
      url: 'data/arr2.txt',
      dataType: 'json',
      success(arr){//请求成功调用resolve函数
        resolve(arr);
      },
      error(err){//请求失败调用reject函数
        reject(err);
      }
    })
  });
  let p2=new Promise(function(resolve,reject){......});
  Promise.all([p1,p2]).then(function(arr){//请求都成功
    let [res1, res2]=arr;
    console.log(res1);  console.log(res2);
  },function(){//所有请求至少一个失败
    alert("p1和p2至少有一个请求失败！")
  })
</script>

Promise.all() 处理多请求

<script src="jquery.js" charset="utf-8"></script>
<script>
  Promise.all([
    $.ajax({url: 'data/arr.txt', dataType: 'json'}),
    $.ajax({url: 'data/json.txt', dataType: 'json'})
  ]).then(function (results){
    let [arr, json]=results;
    console.log(arr,json);
  }, function (){
    alert('失败了');
  });
</script>

10. generator生成器

generator基础使用：是一种函数，运行过程中会发生暂停的函数。解决异步操作的步骤，优化函数结构。

场景：请求数据时，需要请求到数据之后，再进行下一步操作。由于请求通常是异步的，因此要实现此操作，需要进行函数回调，使代码复杂，因此可以通过generator函数使代码暂停，请求到数据之后再继续。

注意三要素：

function * show(){} 或者 function* show(){} 或者 function *show(){}；均可以声明generator函数。
函数执行可以暂停，类似断点。使用 yield关键字，yield上半部分的代码执行完后，需要通过next()函数才能继续执行另外部分的代码。
在generator函数中，若不使用generatorObj.next()方法，则该函数不会被执行。

<script>
  function *show(){
    alert('yield上半部分');
    yield;
    alert('yield下');
  }
  let genObj=show();
  genObj.next();    //执行yield上面的代码
  //genObj.next();    //执行yield下面的代码
</script>

yield介绍：暂停执行，不唤醒就不执行。接收参数，也可以定义返回值。eg:

/*eg1：yield传参*/
<script>
  function * show(num1, num2){
    alert(`${num1}, ${num2}`);//ES6的字符串模板
    alert('a');
    let yieldParam=yield;
    alert('b');
    alert(yieldParam);
    return;
  }
  let gen=show(99, 88);
  gen.next(12);//第一个next没法给yield传参，可以理解为还没运行到yield。
  gen.next(5);
</script>



/*eg2: yield返回值——JSON对象*/
<script>
  function * show(){
    alert('a');
    yield 12;//yield返回12，可理解为函数上半部分的返回值,函数未执行结束。
    alert('b');
    return 55;//函数返回值，可理解为函数下半部分的返回值
  }
  let gen=show();
  let res1=gen.next();
  console.log(res1);  //yield的返回内容，json数据{value: 12, done: false}
  let res2=gen.next();
  console.log(res2);  //函数的返回内容，json数据{value: 55, done: true}
</script>

generator实例

没写，比较多，还复杂。遇到再说吧。感觉实际上不常用。可能是我太菜了......