• ES6学习(下)


    ES6中新增的数组知识

    JSON数组格式转换

    • JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式
    let  json = {
        '0': 'jspang',
        '1': '技术胖',
        '2': '大胖逼逼叨',
        length:3
    }
    let arr=Array.from(json);
    console.log(arr)
    
    • Array.from(xxx)可以将类似数组结构的代码转换成数组,比如json数据结构与set数据结构等,同时用扩展操作符比如[...set数据结构]也能将set数据结构转化成数组

    Array.of()方法

    • 可以把一堆文本或者变量转换成数组
    let arr =Array.of(3,4,5,6);
    console.log(arr);
    
    let arr =Array.of('技术胖','jspang','大胖逼逼叨');
    console.log(arr);
    

    find( )实例方法:

    fill( )实例方法:

    • fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。
    let arr=[0,1,2,3,4,5,6,7,8,9];
    arr.fill('jspang',2,5);
    console.log(arr)
    

    数组的遍历:for…of循环

    • ES6新增的数组遍历
    let arr=['jspang','技术胖','大胖逼逼叨']
    for (let item of arr){
        console.log(item);
    }
    

    箭头函数

    ES6中的函数和数组补漏

    对象的函数解构

    • 我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
    let json = {
        a:'jspang',
        b:'技术胖'
    }
    function fun({a,b='jspang'}){
        console.log(a,b);
    }
    fun(json);
    

    数组的函数解构

    • 函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。
    let arr = ['jspang','技术胖','免费教程'];
    function fun(a,b,c){
        console.log(a,b,c);
    }
    fun(...arr);
    
    • ...arr这里用到了扩展操作符,因为扩展操作符内默认执行for...of...循环将扩展操作符是把数组扩展成单独的参数,之后才能解构赋值。(因为解构赋值必须解构结构要统一,不然会报错)

    in的用法

    • 可以用来检测某个对象中是否有存在某个值
    let obj={
        a:'jspang',
        b:'技术胖'
    }
    console.log('a' in obj);  //true
    
    • 如果检测某个数组中是否存在某个值,可以用indexOf方法判断或者用includes方法判断

    新的基本数据类型Symbol

    • Symbol就是用来产生一个独一无二的值,可以防止属性名的冲突

    声明Symbol

    var a = new String;
    var b = new Number;
    var c = new Boolean;
    var d = new Array;
    var e = new Object; 
    var f= Symbol();
    console.log(typeof(d));//Symbol
    
    • 声明Symbol前不能加new

    Symbol在对象中的应用

    • 看一下如何用Symbol构建对象的Key,并调用和赋值
    var jspang = Symbol();
    var obj={
        [jspang]:'技术胖'
    }
    console.log(obj[jspang]);//技术胖
    obj[jspang]='web';
    console.log(obj[jspang]);//web
    

    ES6中对象

    Object.is( ) 对象比较

    • 对象的比较方法,以前进行对象值的比较,经常使用===来判断,比如下面的代码
    var obj1 = {name:'jspang'};
    var obj2 = {name:'jspang'};
    console.log(obj1.name === obj2.name);//true
    
    • 那ES6为我们提供了is方法进行对比。
    var obj1 = {name:'jspang'};
    var obj2 = {name:'jspang'};
    console.log(Object.is(obj1.name,obj2.name)); //true
    
    • 区分=== 和 is方法的区别是什么,看下面的代码输出结果。
    console.log(+0 === -0);  //true
    console.log(NaN === NaN ); //false
    console.log(Object.is(+0,-0)); //false
    console.log(Object.is(NaN,NaN)); //true
    
    • 这太诡异了,我要怎么记忆,那技术胖在这里告诉你一个小妙招,===为同值相等,is()为严格相等。

    Object.assign( )合并对象

    • 作数组时我们经常使用数组合并,那对象也有合并方法,那就是assgin( )。看一下啊具体的用法。
    var a={a:'jspang'};
    var b={b:'技术胖'};
    var c={c:'web'};
    let d=Object.assign(a,b,c)
    console.log(d);
    

    Set和WeakSet数据结构

    (Set和WeakSet数据结构)[http://jspang.com/2016/06/14/es6001/]

    map数据结构

    promise的基本用法

    let state=1;
    function step1(resolve,reject){
        console.log('1.开始-洗菜做饭');
        if(state==1){
            resolve('洗菜做饭--完成');
        }else{
            reject('洗菜做饭--出错');
        }
    }
    function step2(resolve,reject){
        console.log('2.开始-坐下来吃饭');
        if(state==1){
            resolve('坐下来吃饭--完成');
        }else{
            reject('坐下来吃饭--出错');
        }
    }
    function step3(resolve,reject){
        console.log('3.开始-收拾桌子洗完');
         if(state==1){
            resolve('收拾桌子洗完--完成');
        }else{
            reject('收拾桌子洗完--出错');
        }
    }
    new Promise(step1).then(function(val){
        console.log(val);
        return new Promise(step2);
     
    }).then(function(val){
         console.log(val);
        return new Promise(step3);
    }).then(function(val){
        console.log(val);
        return val;
    });
    

    class类的使用

    类的声明与使用

    class Coder{
        name(val){
            console.log(val);
        }
    }
    let jspang= new Coder;
    jspang.name('jspang');
    

    类的多方法声明

    class Coder{
        name(val){
            console.log(val);
            return val;
        }
        skill(val){
            console.log(this.name('jspang')+':'+'Skill:'+val);
        }
    }
    let jspang= new Coder;
    jspang.name('jspang');
    jspang.skill('web');
    
    • 这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有要注意return 的用法。

    类的传参

    • 在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
    class Coder{
        name(val){
            console.log(val);
            return val;
        }
        skill(val){
            console.log(this.name('jspang')+':'+'Skill:'+val);
        }
        constructor(a,b){
            this.a=a;
            this.b=b;
        }
        add(){
            return this.a+this.b;
        }
    }
    let jspang=new Coder(1,2);
    console.log(jspang.add());
    
    • 我们用constructor来约定了传递参数,然后用作了一个add方法,把参数相加。这和以前我们的传递方法有些不一样,所以需要小伙伴们多注意下。

    class的继承

    class htmler extends Coder{
     
    }
     
    let pang=new htmler;
    pang.name('技术胖');
    
    • 声明一个htmler的新类并继承Coder类,htmler新类里边为空,这时候我们实例化新类,并调用里边的name方法。结果也是可以调用到的。
  • 相关阅读:
    [linux]Linux下的log
    [WDT]内部看门狗和外部看门狗
    [misc]printf/fprintf/sprintf/snprintf函数
    [Linux]read/write和fread/fwrite有什么区别
    移动端图片操作(二)——预览、旋转、合成
    移动端图片操作(一)——上传
    实现tap的多种方式
    Hammer.js分析(四)——recognizer.js
    Hammer.js分析(三)——input.js
    Hammer.js分析(二)——manager.js
  • 原文地址:https://www.cnblogs.com/wan-fei/p/8391455.html
Copyright © 2020-2023  润新知