ECMAScript 6 (复习）

1. es6与js的关系：前者是后者的规格，后者是前者的一种实现。 es6更加的方便，工程性更高。
2. 变量

   // var：不可以重复声明、没有块级作用域、不能限制；
    //let 声明变量：不存在预解析 ，在同一个作用域里不可重复；for循环括号里声明的变量智能在循环体中使用
      const 声明常量 ：不允许重复声明，必须初始化，禁止重复声明 、控制修改 、支持块级作用域；
        ES6块内部定义的变量，在外部是不可以访问的；在块级作用域内部，变量只能先声明再使用

3. 作用域

//传统的：函数级
//ES6：块级      块级有：语法块{}、if(){}、for(){}、{}

4. 解构赋值

//数组的结构赋值
//let [a,b,c] = [1,2,3];
//console.log(a,b,c);   //1 2 3
//let [a,b,c] = [ ,123, ];
//console.log(a,b,c); //undefined 123 undefined

//对象的解构赋值
// let {foo,bar} = {foo: 'hello',bar : 'hi'};
// console.log(foo,bar) //hello hi
//对象属性别名(如果有了别名，原来的名字就无效了)
let {foo:abc,bar} = {bar:'hi',foo:'nihao'};
//console.log(foo,bar);//foo is not defined
console.log(abc,bar);//nihao hi

//字符串的解构赋值
let [a,b,c,d] = 'hello';
console.log(a,b,c,d); //h e l l
let {length} = 'hi';
console.log(length);  //2

字符串的相关扩展

//字符串扩展
//includes():判断字符串之中是否包含指定的字串（有的话为true,否的话为false）
//           参数一：匹配的字串； 参数二：从第几个开始匹配  
console.log('hello nihao'.includes('hello'));  //true
console.log('hello nihao'.includes('nihao',7)); //false
//startsWith()：判断字符串是否以特定的字串开始
//endsWith()：判断字符串是否以特定的字串结束
let url = 'admin/index.php';
console.log(url.startsWith('admin'))//true
console.log(url.startsWith('admind'))//false
console.log(url.endsWith('php'))//true
console.log(url.endsWith('php2'))//false

//模板字符串
//反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
let obj = {
    username:'shiru',
    age:'20',
    gender:'male'
}
let tpl = `
    <div>
        <span>${obj.gender}</span>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
    </div>
`;
console.log(tpl); 
//打印出来为下面所示
//<div>
        <span>male</span>
        <span>shiru</span>
        <span>20</span>
    </div>

5. 函数

//1.箭头函数
  function(参数){
  }
  (参数）=>{}      //如果有且仅有1个参数，（）可省略  如果有且仅有1条语句-return,{}可省略
  //2.参数展开
  //剩余参数----必须是最后一个
  //展开参数----与数组的类型差不多

函数的扩展

/*
    函数扩展
    1.参数扩展
    2.参数解构赋值
    3.rest参数
    4....扩展运算
 */
//参数默认值
function foo(param = 'nihao'){
    console.log(param);
}
foo('hello');
function bar(name='lisi',age=11) {
     console.log(name,age);
}
bar(); //lisi 11
bar('wanger','13'); //wanger 13
//参数解构赋值
function war({name='lisi',age='14'}={}) {
    console.log(name,age);
}
war({name:'zhangsan'})//zhangsan 14
//rest参数(剩余参数)
function too(a,b,...param) {
    console.log(param)
}
too(1,2,3,4,5,6,7,)//[3,4,5,6,7]
//扩展运算符（...）
function too(a,b,...param) {
    console.log(param)
}
too(1,2,3,4,5,6,7,)//[3,4,5,6,7]

6. 对象

• Array：
• map

    let arr=[25, 67, 37, 99, 29, 39, 49, 59];
    let res=arr.map(function (item){
      if(item>=30){
        return true;
      }else{
        return false;
      }
    });
    let res=arr.map(item=>item>=30);  //箭头函数

    console.log(arr, res);

• forEach：遍历 循环遍历
• filter(过滤）

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

    console.log(arr);
    console.log(arr2);  //Array(4)0: 121: 882: 823: 100length: 4__proto__: Array(0)

    .filter(item=>item.loc==cur_loc)
    .filter(item=>item.price>=60 && item.price<100);

• reduce:减少 多对1
• String:startsWith、 endsWith
• JSON

//1.标准写法：{"key": "aaa", "key2": 20}
//2.JSON对象：stringify:把其变成字符串、parse

    let json={a: 5, b: 19, c: 'jjjj'};

    let str=JSON.stringify(json);
    console.log(str);  //{"a":5,"b":19,"c":"jjjj"}
    
     let str1='{"a":6,"b":8,"c":"bbbb"}';
    let json1=JSON.parse(str1);

    console.log(json1); //Objecta: 5b: 29c: "jjj"__proto__: Object

7.异步处理
同步—一个一个进行操作
异步—多个操作可以一起进行，互不干扰

同步

$.ajax({
  url: 'data/1.json',
  dataType: 'json',
  success(data1){
    $.ajax({
      url: 'data/2.json',
      dataType: 'json',
      success(data2){
        $.ajax({
          url: 'data/3.json',
          dataType: 'json',
          success(data3){
            console.log(data1, data2, data3);
          }
        });
      }
    });
  }
});

异步
Promise

    Promise.all([
      $.ajax({url: 'data/1.json', dataType: 'json'}),
      $.ajax({url: 'data/2.json', dataType: 'json'}),
      $.ajax({url: 'data/3.json', dataType: 'json'}),
    ]).then(([data1, data2, data3])=>{
      console.log(data1, data2, data3);
    }, (res)=>{//箭头函数
      alert('错了');
    });

/*总结：
Promise.all([
  	p1,
 	p2,
 	p3
]).then();*/

async/await

    async function show(){
      let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
      if(data1.a<10){
        let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
        alert('a');
      }else{
        let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
        alert('b');
      }
    }

    show();
/*总结：
async function xxx(){
  let a=12;
  let b=5;

  let data=await promise;

  ...

  alert(a+b);
}

let xxx=async ()=>{

}*/

8.兼容
在线：babel: https://babeljs.io/ 引入时要在书写的js 上加入 type=“text/babel”
编译：

• 安装Node.js
• npm i @babel/core @babel/cli @babel/preset-env
• 添加脚本
• 添加.babelrc——声明preset