ES6学习1-变量、函数、JSON、Promise、兼容性

开发效率高、工程性

变量

var：

1.可以重复声明

var a=1;var a=2; a
// 2

2.没有块级作用域
3.不能限制

var b=1;b=2;b
// 2

let 声明变量

const 声明常量

1.禁止重复声明

const c=1;const c=2;c
// VM926:1 Uncaught SyntaxError: Identifier 'c' has already been declared

2.控制修改 (常量不可重新赋值)

const d=1;d=2;d
//VM1053:1 Uncaught TypeError: Assignment to constant variable.
let e=1;e=2;e
// 2

3.支持块级作用域

---

作用域

1.传统
函数级（for里面的变量i的值是最后的值）

2.ES6
块级（for里面的变量i每次都不一样）

语法块{}

if(){}
for(){}
{}

---

解构赋值

{a: 12, b: 5, c: 33}
[12, 5, 8]

1.左右两边一样

let {a,b,c}={a: 12, b: 5, c: 33} // json
let [a,b,c]=[12, 5, 8] // array

2.右边得是个东西

---

函数

1.箭头函数

function (参数){
}

(参数)=>{}

//如果，有且仅有1个参数，()也可以省
let a=(k)=>{consloe.log(k)};
let a=k=>{consloe.log(k)};
//如果，有且仅有1条return语句，{}可以省
let a=(k,m)=>{return k+m};
let a=(k,m)=>k+m;
//{}省略后仍有{}(return json)需包（）
let a=(k,m)=>{return {first:k,sec:m}};
let a=(k,m)=>({first:k,sec:m});

• 修复this
  this的指向取决于定义它的对象，如果重新定义了就会变成新的。es6箭头函数的this绑定在定义它的对象上，不会被修改，这个对象必须在class内，如果不是就会在全局window上。

2.参数展开

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

    function show(a, b, ...arr){
      console.log(a, b, arr);
    }
    show(1,2,6,7,8,9,3);
    //1 2 (5) [6, 7, 8, 9, 3]

• 2.2 展开数组——就跟把数组的东西写在那儿一样

let a=[6,7,8]; [...a]
// (3) [6, 7, 8]

---

系统对象

Array

• map 映射 1对1

let course=[88,99,56,23,16,90];
let res=course.map(val=>val>=60);
console.log(course,res);
// (6) [88, 99, 56, 23, 16, 90] (6) [true, true, false, false, false, true]

• forEach 遍历 循环一遍

let course=[88,99,56,23,16,90];
course.forEach((val,key)=>console.log(`第${key}个课程:${val}分`))；//字符串模板，反单引号
第0个课程:88分
// 第1个课程:99分
// 第2个课程:56分
//第3个课程:23分
//第4个课程:16分
//第5个课程:90分

• filter 过滤 =>后是条件

let course=[88,99,56,23,16,90];
    course.filter(item=>item>=60 && item<100);
// (3) [88, 99, 90]

reduce 减少 多对1

let arr=[1,2,3,7,8,9];
 let res=arr.reduce((tmp, item, index)=>{
    console.log(`第${index}个${tmp}+${item}`);
    return tmp+item;
 });
console.log(res);

// 第1个1+2
//第2个3+3
// 第3个6+7
//第4个13+8
// 第5个21+9
// 30
 let avarage=arr.reduce((tmp, item, index)=>{
      if(index

String

• 字符串模板
• startsWith

    let url='http://www.bing.com/a';

    if(url.startsWith('http://') || url.startsWith('https://')){
      alert('是网址');
    }else{
      alert('非网址');
    }

• endsWith

JSON

1.标准写法

{"key": "aaa", "key2": 12}
json->字符串
字符串->json

2.JSON对象

stringify：前端传到后台(json->字符串)

let json={a: 12, b: 5, c: 'blue'};
let str=JSON.stringify(json);// json->字符串 & 标准化处理
console.log(str);
// {"a":12,"b":5,"c":"blue"}

parse：后台获取到前台（字符串->json）

    let str='{"a":12,"b":5,"c":"blue"}';
    let json=JSON.parse(str);// 数据要符合标准，一般获取到都是标准的
    console.log(json);
//{a: 12, b: 5, c: "blue"}

---

异步处理

Promise
async/await

---

异步操作？
异步——多个操作可以一起进行，互不干扰
同步——操作一个个进行

//异步-依次加载三个json,

$.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);
          }
        });
      }
    });
  }
});

//同步操作伪代码<三个ajax同步一个接个进行>
let data1=$.ajax('data/1.json');
let data2=$.ajax('data/2.json');
let data3=$.ajax('data/3.json');

---

Promise：对异步处理封装,<三个ajax之间异步>

Promise.all([
p1,
p2,
p3
]).then();

// 三个无逻辑,<三个ajax之间异步一起执行谁快谁先结束>
    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('错了');
    });

async/await //有逻辑，同步方式写异步代码

async function xxx(){
let a=12;
let b=5;

let data=await promise;

...

alert(a+b);
}

let xxx=async ()=>{

}

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();

---

兼容性

babel：

1.在线
type="text/babel"

2.编译

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

---

ES6(ECMA 2015)

ES7(ECMA 2016)

• 求幂: **
• Array.includes()

ES8(ECMA 2017)

• await/async

ES9(ECMA 2018) 预览版

• rest/spread :替代await/async
• 异步迭代 ：for循环异步化
• Promise.finally() ：所有操作结束后清理工作
• 正则：增加一些模式