欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6简述

程序员文章站 2022-03-22 12:09:41
啥是ES6 大家都知道,JavaScript由DOM、BOM、ECMAScript组成,ECMAScript是标准。 ES6的全称其实是ES2015(6.0)每年更新,依次类推 ES2016(7) ... ES2019(10) 为啥要推ES6 两个字:方便。不用ES6也能写,使用ES6就是为了方便, ......

啥是es6

大家都知道,javascript由dom、bom、ecmascript组成,ecmascript是标准。
es6的全称其实是es2015(6.0)每年更新,依次类推
es2016(7)
...
es2019(10)

为啥要推es6

两个字:方便。不用es6也能写,使用es6就是为了方便,能用更少的代码去做更多的事情,为了提高工程性。

es6有哪些东西

变量

let用于声明变量
const用于声明常量,且不可修改
相比var,es6的变量有啥好处
1.禁止重复声明
es5

var a = 12;
var a = 5;
console.log(a)

输出为5,一点问题没有
es6

let a = 12;
let a = 5;
console.log(5)

ES6简述
它会告诉你a已经被定义过了,不能重复定义

2.控制修改

const a = 5;
a = 12;
console.log(a);

ES6简述
它告诉你你给常量赋值,这是不行的

3.支持块级作用域
es5只有函数级作用域

function sum(a, b) {
  return a+b;
}
console.log(a)

ES6简述

这时候它在外面是访问不到a的
es6有块级作用域

  • {}
  • if(){}
  • for(){}
  • {}
{
  var a = 12;
}
console.log(a);

输出12

{
  let a = 12;
}
console.log(a);

ES6简述

解构赋值

不用解构赋值

//后台读取的数据
var json = {age: 12,height: 168}
console.log(json.age,json.height);

用完解构赋值

let {age,height} = {age: 12,height: 168};
console.log(age,height)

你就不需要去点了
注意事项
1.左右两边一样

let {a,b,c}={a: 12, b: 55, c: 99};//同是对象
let [a,b,c]=[12,5,8];//同是数组

2.右边得是个东西

let {a,b,c} = {12,5,13};//右边是啥,对象?数组?都不是

ES6简述

函数

箭头函数

使用箭头函数不仅写起来简单而且能修复this的问题
1.简单
es5

  • function xx() {}
  • var xx = function() {}
    es6
    let xx = (参数)=>{}
  • 有且仅有一个参数 ()可以省略
  • 有且仅有一条语句 return {}可以省略
let show=()=>({a: 12, b: 5});//用()包一下

2.修复this
es5
在es5,谁调用this,this就是谁
在es6,this绑定在当前的环境

参数展开

(1)剩余参数

function show(a, b, ...arr){
  console.log(a, b, arr);
}
show(12,5,44,7,85,34,33);

12,5,44,7,85,34,33

注意:必须是最后一个

function show(a, b, ...arr, c){
  console.log(a, b, arr, c);
}
show(12,5,44,7,85,34,33);

ES6简述
剩余参数必须得是最后一个形参

(2)数组展开
...arr等价于1,5,12,3

let arr = [1,5,12,3];
var sum=(a, b, c, d)=>a+b+c+d;
console.log(sum(...arr))

21

let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);

1,2,3,4,5,6

系统对象

array

4个api,由对象来调用
map 映射
foreach 循环
filter 过滤(删除)
reduce 减少
(1)map
映射:1对1,进去100个,出来100个

var scores = [100,60,52,48,98,13,45,66,75,98];
//两个参数item,index
var res = scores.map((item)=>item>=60);
console.log(scores,res);

ES6简述

(2)foreach
把true筛出来

let arr = [1,5,12];
arr.foreach((item,index)=>{
  console.log(`第${index}个:${item}`);
});

第0个:1
第1个:5
第2个:12

(3)filter

let scores = [1,2,3,5,6,95,63,45,68,60];
let pass = scores.filter((item)=>item>=60);
console.log(pass)

(4) [95, 63, 68, 60]

(4)reduce
求和

let arr = [1,5,3,16];
    let res = arr.reduce((temp,item,index)=>{
        console.log(`temp:${temp}`);
        return temp+item;
    });
    console.log(`res:${res}`);

temp:1//第一次是第一个数
temp:6//后面都是和
temp:9

求平均数

let arr = [1,5,3,16];
    let res = arr.reduce((temp,item,index)=>{
        if(index<arr.length - 1)
            return temp+item;
        else
            return (temp+item)/2;
    });
    console.log(`res:${res}`);

string

(1)字符串模板

let name = '小明';
console.log(`name : ${name}`);

name : 小明

好处:能折行,对于大段的东西很适用

let str = `<div>
<p>第一行${item1}</p>
<span>第二行${item2}</span>
</div>`;

(2)startswith

let url = 'http://www.baidu.com';
if(url.startswith('http')||url.startswith('https')) console.log('是网址');
else console.log('不是网址')

(3)endswith

json

标准写法:

let json = {"name":"zhangsan","age":12};
  • stringify:对象转json
let xiaoming = {
  name: 'xiaoming',
  age: 25
};
console.log(json.stringify(xiaoming));

{"name":"xiaoming","age":25}

  • parse:字符串转对象
let json = '{"name":"xiaoming","age":25}';
console.log(json.parse(json));

{name: "xiaoming", age: 25}

异步操作

  • 优点:程序性能好,资源利用率高、用户体验好
  • 缺点:程序员体验不好

问题:按顺序拉取数据
环境:服务器
我用的是wampserver

data/1.json

{a: 1}

./data/2.json

{b: 12}

./data/3.json

{c: 16}

./html

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

{a: 1} {b: 12} {c: 16}

因为这种写法恶心,所以promise出现了
了解一下promise,其实jquery的ajax也是promise

let p=new promise(function (resolve, reject){//resolve成功,reject失败
      $.ajax({
        url: 'data/1.json',
        datatype: 'json',
        success(data){
          resolve(data);
        },
        error(res){
          reject(res);
        }
      });
    });

    p.then(function (data){
      alert('成功');
      console.log(data);
    }, function (res){
      alert('失败');
      console.log(res);
    });

怎么用

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('错了')//一个接口出错就不渲染
    })

{a: 1}a: 1__proto__: object
{b: 12}b: 12__proto__: object
{c: 16}c: 16__proto__: object

但是promise有个致命的缺点,处理不了逻辑(第一个数据可能决定后面读什么)
因此async/await登场了,专门配合promise,用同步的方法来写异步。
但是其实编译完还是恶心的嵌套,只不过不需要我们程序员来写,编译就完了

let show = async ()=> {
  let data1 = await $.ajax({url: 'data/1.json', datatype: 'json'});//await后面跟的是promise
  let data2 = await $.ajax({url: 'data/2.json', datatype: 'json'});
  let data3 = await $.ajax({url: 'data/3.json', datatype: 'json'});
  console.log(data1,data2,data3)
}
show();

{a: 1} {b: 12} {c: 16}

处理逻辑

let show = async ()=> {
      let data1 = await $.ajax({url: 'data/1.json', datatype: 'json'});
      if(data1<10) {
        let data2 = await $.ajax({url: 'data/2.json', datatype: 'json'});
        console.log(data1,data2)
      }else {
        let data3 = await $.ajax({url: 'data/3.json', datatype: 'json'});
        console.log(data1,data3)
      }
    }
    show();

{a: 1} {c: 16}