• ES6总结


    请看下面

    1、let关键字,let定义的变量只在它所在的块级作用域有用({}内有用),let不能在同一个作用域中重复定义,let没有声明提升  。

    2、const关键字,用于声明一个常量,一旦定义 就不能改变值 必须得有初始值 也就是常量只要定义就必须要赋值。

    3、解构赋值,一种新的变量赋值方式。常用于交换变量值,提取数据,用解构赋值保存

    常问的有:

    ①数组的解构赋值:let a=10,b=20;[a,b]=[b,a]  ==》交换变量

    ②对象的解构赋值:(提取数据)

    let data={name:"xiaoming",age:18,sex:"nan"};
    
    let {name,sex}=data;
    
    console.log(name,sex);//xiaoming nan

    ③字符串的解构赋值:

    let [d,e,f]="he";
    console.log(d,e,f)//h e undefined

    ④当一个函数有多个返回值的时候 用解构赋值保存

    function fun1(){
    
    return [1,2];
    
    }
    
    let [x,y]=fun1();
    
    console.log(x,y)//1,2

    4、for...of遍历  es6中新增的循环 for-of

    for of循环 可以循环数组和类数组对象,可以直接拿到数组的每一项 也可以使用break和continue,

    但是 它不能直接拿到数组的下标

    5.箭头函数

    Let fun1=()=>{}

    (1)原来js代码里用到函数的地方 都可以写成箭头函数

    (2)箭头函数里没有this,如果要用this就是父级的this 如果父级也没有this 那么就继续往上找 直到找到window

     

    6.Set结构,set它本身是一个构造函数 用new Set去实例化  set的值都是唯一 可以用来去重

    Set.prototype.size:返回Set实例的成员总数。

     add();//往set的末尾添加值

    delete(); // 删除set的某个值  返回一个布尔值,表示删除是否成功。

    has(); //判断是否含有某一项  返回一个布尔值

    clear(); //删除所有的set项   没有返回值。

    foreach可以用于遍历成员,循环set结构  跟数组的循环类似 但是set的循环得不到下标

    数组去重的方法(ES6)

    1. Array.from(new Set(arr))
    2. […new Set(arr)]

    其中   ...分为俩中用法

     

     ...作为扩展运算符(spread)的时候,说白了就是把数组展开

     1.把类数组转化为数组

        var con=new Set([1,2,3,2,1]);
    
        var arr=[...con];//1,2,3

     2.复制数组(第一层深复制) 

     var  arr2=[...arr];

     3.合并数组:

    var arr3=[...arr,...arr2];

     ...作为剩余运算符(rest)

       1.在数组解构的时候:

     let [a,...b]=[1,2,3];
    console.log(a,b)//1  [2,3]

        2.作为剩余参数,实参的个数可以不确定

     function fun1(a,...b){
    
             console.log(a);//1
    
             console.log(b);//[2,3,4,5]
    
     }
    
     fun1(1,2,3,4,5)    

    7、Map结构

    map 结构的数据类似于json  区别是可以用任何类型的数据作为key值

    map.size      //返回 Map 结构的成员总数。

    set(key, value)返回整个 Map 结构。

    get(key)   get方法读取key对应的键值,如果找不到key,返回undefined。

    has(key) 返回一个布尔值    某个键是否在当前 Map 对象之中

    delete(key)   删除某个键,返回true。如果删除失败,返回false。

    clear()    clear方法清除所有成员,没有返回值。

    遍历方法

    Map

    keys():键名。

    values():键值

    forEach():遍历 Map 的所有成员。

     

    8. es6面向对象

    (一) ES6中对象的创建    class

    {
      class Person{//定义类
      //构造方法
        constructor(name,age){
          this.name=name;
          this.age=age;
        }
    
        say(){
          alert(this.name)
        }//不加static的方法被实例化对象调用
    
        static say2(){//静态方法
    
    
        }//加上static的方法 只能被整个类调用
    
    }
    //实例化类
    var xm=new Person("小明",18);
    xm.say();//小明
    Person.say2();

     

     

     

    (二) ES6中对象的继承

    E6中class可以通过extends关键字来实现继承,

    子类必须在constructor方法中首先调用super方法,否则实例化时会报错。

    这是因为子类没有自己的this对象, 而是继承父类的this对象,

    如果不调用super方法,子类就得不到this对象。

     

    class Women extends Person{ // 类women继承preson
    
    //那么 person就叫父类 也叫超类 是因为super方法实现继承
    
         constructor(name,age,sex){
          super(name,age);       
    this.sex=sex;    } show(){       alert(this.sex);    } } var xl=new Women("小丽",20,"nv"); xl.say();

     

      9.处理异步操作

    (一)Promise

    (1)页面中只有一个ajax请求  用promise方法请求

    let p=new Promise(function(resolve,reject){
    
        var xhr=new XMLHttpRequest();
    
        xhr.open("get","a.txt",true);
    
        xhr.send();
    
        xhr.onreadystatechange=function(){
    
            if(xhr.readyState==4){
    
                if(xhr.status==200){
    
                    resolve(xhr.responseText);
    
                }else{
    
                    reject("404");
    
                 }
    
            }
    
        }
    
    })
    
    //原生的写法:
    
    p.then(res=>{
    
       console.log(res);
    
     },error=>{
    
         console.log(error)
    
     })
    
     
    
     //jq写法($.ajax返回的本身就是一个promise对象):
    
     $.ajax({url:"a.txt",dataType:"json"}).then(res=>{
    
     },error=>{})

    (2) 如果页面中有多个ajax请求的时候,这些请求之间互相没有依托关系  可以用promise.all

      // jq写法:
    
            let jq_pro = (url, data) => {
    
                return $.ajax({ url, dataType: "json", data,cache:false })
    
            }//封装一个jq ajax
    
            let del_a = (data) => {
    
                console.log(data)
    
            }//处理数据data1的函数
    
            let del_b = (data) => {
    
                console.log(data)
    
            }//处理数据data2的函数
    
            Promise.all([
    
                jq_pro("a.json"),//调用封装的jq ajax函数
    
                jq_pro("b.txt")
    
            ]).then(res => {
    
                let [data1, data2] = res;//解构赋值
    
                console.log(data1, data2);
    
                del_a(data1);//处理数据data1 把得到的数据data1传进函数
    
                del_b(data2);//处理数据data2 把得到的数据data2传进函数
    
            }).catch(error=>{
    
                console.log(error)
    
            })
    
    // 原生js ajax多个请求时用promise写
    
     
    
    let js_promise =(url)=>{
    
       let p= new Promise(function(resolve,reject){
    
            var xhr=new XMLHttpRequest();
    
            xhr.open("get",url,true);
    
            xhr.send();
    
            xhr.onreadystatechange=function(){
    
                if(xhr.readyState==4){
    
                    if(xhr.status==200){
    
                        resolve(xhr.responseText);
    
                    }else{
    
                        reject("404");
    
                    }
    
                }
    
            }
    
        })
    
        return p;
    
    }
    
     
    
    Promise.all([
    
        js_promise("a.json"),
    
        js_promise("b.txt")
    
    ]).then(res=>{
    
        let [list1,list2]=res;
    
        console.log(eval("("+list1+")"),list2);
    
    })

    (3) 多个ajax请求 并且互相关联

      // jq:
    
            let jq_pro = (url, data) => {
    
                return $.ajax({ url, dataType: "json", data, cache: false })
    
            }//封装一个jq ajax
    
            jq_pro("a.json").then(res => {
    
                console.log(res);
    
                return jq_pro("b.txt");
    
            }).then(res => {
    
                console.log(res);
    
                return jq_pro("c.txt");
    
            }).then(res2 => {
    
                console.log(res2);
    
            }, error => {
    
                console.log(error)
    
            // 原生js解决回调地狱
    
            var js_promise = function (url) {
    
                return new Promise(function (resolve, reject) {
    
                    var xhr = new XMLHttpRequest();
    
                    xhr.open("get", url, true);
    
                    xhr.send();
    
                    xhr.onreadystatechange = function () {
    
                        if (xhr.readyState == 4) {
    
                            if (xhr.status == 200) {
    
                                resolve(xhr.responseText);
    
                            } else {
    
                                reject("404");
    
                            }
    
                        }
    
                    }
    
                });
    
            }
    
            js_promise("a.json").then(function (res) {
    
                return js_promise("b.txt");
    
            }).then(function (res) {
    
                return js_promise("c.txt");
    
            }).then(function (res) {
    
                console.log(res);
    
            }).catch(function (err) {
    
                console.log(err);
    
            })

     

    (二)async处理方式

           let jq_promise=(url,data)=>{
    
                return $.ajax({
    
                    url,
    
                    data,
    
                    dataType:"json"
    
                })
    
            }
    
            async function getData(){
    
                let data1=await jq_promise("a.json");
    
                let data2=await jq_promise("b.json")
    
                return data2;
    
           }
    
            getData().then(res=>{
    
                console.log(res);
    
            })                    

     

    (三)generator处理方式

           let jq_promise=(url,data)=>{
    
                return $.ajax({
    
                    url,
    
                    data,
    
                    dataType:"json"
    
                })
    
         }
    
        function * getData(){
    
            yield jq_promise("a.json")
    
            yield jq_promise("b.json")
    
        }
    
     
    
        var obj=getData();
    
        obj.next().value.then(res=>{
    
            console.log(res);
    
            return obj.next().value;
    
        }).then(res=>{
    
            console.log(res);
    
        })   

    10.Symbol 是一种新的原始数据类型 代表独一无二的值

     

    11.下面是包括ES6的总结的一些数组、字符串方法:

    1.数组的方法

    unshift()       数组头部添加内容

    push()       数组尾部添加内容

    pop()        数组尾部删除内容

    shift()        数组头部删除内容

    sort()        数组排序    a-b 升序 b-a 降序    

    reverse()    数组倒排序

    splice()       修改数组      

    slice()      截取

    indexOf()       查找下标,找不到 返回-1。

    forEach()      循环数组 三个参数(数组的每一项, 每一项的下标, 数组本身)  

    map()     映射数组:对数组的每一项进行操作,返回新的数组

    filter()     过滤数组,返回满足条件的数据,保存在新数组中

    Every       判断数组每一项是否满足条件 全部满足返回真

    Some         只要有一项满足条件就返回真

    Join          把数组用连接符连接成字符串

    Find          查找满足条件的元素 有就返回第一项 没有的话返回undefined

    FindIndex     查找满足条件的下标

    Array.From       把类数组转化为数组

    Array.of            把参数转化为数组

    Fill            填充 用一个元素替换数组的某一部分

    Copywithin    用数组的某一部分替换数组的另外一部分

    keys()      遍历键名。

    values()     遍历键值。

    includes()    数组是否包含指定值。

    flat()      多维数组转一维数组

     

    2.字符串的方法

    match()         匹配   输入内容,返回内容

    search()         查找,输入内容,返回下标    -1   不能使用g

    indexOf()        检索字符串(内容,下次开始找的位置)  -1

    lastindexOf()        倒序

    replace()        替换字符串 默认只能替换一个  i不区分大小写 g全局 m多行

    toUpperCase()       转化为大写

    toLowerCase()       转化为小写

    slice()          截取子字符串(开始下标,结束的下标-1) 能用于数组和字符串

    Substr  substring        截取字符串

    split()               分隔字符串(分隔,个数) 字符串转化为数组  原有字符串不变

    charCodeAt()         unicode码

    charAt(index)         通过下标获取内容

    fromCharCode()          转码

    trim()           删除字符串首尾空格

    模板字符串        用反引号 ``

    includes()         判断是否含有某个字符

    startsWith()        返回布尔值,判断参数字符串是否在原字符串的头部。

    endsWith()        返回布尔值,判断参数字符串是否在原字符串的尾部。

    repeat()           字符串重复   返回新的字符串,表示将字符串重复指定次数返回。

    padStart()            字符串补全 返回新的字符串,从头部补全原字符串。

    padEnd()        字符串补全 返回新的字符串,从尾部补全原字符串。

     

       第一篇博客,多多指教!

  • 相关阅读:
    Object.keys方法
    vue数据绑定原理
    JS控制数字从指定数开始变化
    传入参数和回调取值
    Android contacts content provider学习小结
    Android输入法框架分析(1)-三大组件
    通过Android View的两种事件响应方法比较inheritance和composition
    对象间相互调用时互相控制的几种方法
    immutable和mutable对象
    关于Unicode
  • 原文地址:https://www.cnblogs.com/zhd09/p/11674233.html
Copyright © 2020-2023  润新知