美文网首页
js es6特性

js es6特性

作者: proud2008 | 来源:发表于2020-03-13 10:42 被阅读0次

    插值拼接

    var a="11";
    console.log(`aa:${a}`);
    aa:11
    

    注是`` 不是‘’ ,


    image.png

    js自动拆分字符串

    function test(template,name){console.log(template,name);}
    var myname="zhangsan";
    test`my name is ${myname}`; //不要括号 否则整个会做为第一个参数传入
    //(2) ["my name is ", "", raw: Array(2)] "zhangsan"
    

    test 形参中template 接收到的是数组

    参数默认值

    function test(t = 3, s = 4) {
        return t + s;
    }
    test();
    

    可变参数

    function test1(...a){console.log(a}
    test(1,2,3,4) //此时a的结果为数组
    function test(t = 3, s = 4) {
        return t + s;
    }
    test(...[1,2]) //3
    function f(...[a, b, c]) {
      return a + b + c;
    }
    f(1)          // NaN (b and c are undefined)
    f(1, 2, 3)    // 6
    f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
    

    generator

    function *dosome(){console.log("start");yield 10;console.log("end");}
    var t=dosome()
    t.next()
    //VM2689:1 start
    //{value: 10, done: false}  10是yield的返回值
    t.next()
    //VM2689:1 end
    //{value: undefined, done: true}
    t.next()
    //{value: undefined, done: true}
    

    析构表达式

    //析构对象
    var {code,price}={code:11,price:12}
    code //11
    price //12
    function getStock(){return {code:"ibm",proce:100}};
    var {code,proce}=getStock() //注变量名要一致 不一致解构不到的
    var {code:code,price:proce}=getStock() //或者这样
    //析构嵌套格式
    var {code,price}={code:11,price:{price1:12,price2:13}}
    price // {price1: 12, price2: 13} 此时price是对象
    var {code,price:{price2}}={code:11,price:{price1:12,price2:13}}
    price //对象{price1: 12, price2: 13}
    price2 //13 即解析了price 也解析了price2
    
    
    //析构数组
    var arr=[1,2,3];
    var [n1,n2]=arr
    n1 //1 
    n2 //2 
    var [,,n3]=arr
    n3 //3  //前面几个,就是第几个
    var [n1,n2,...other]=arr
    other //[3] 除第一个元素第二个元素 以外的其余元素
    //注传参
    

    遍历

    var arr=[1,2,3,4]
    arr.desc="5"
    //(4) [1, 2, 3, 4, desc: "5"]
    arr.forEach(item=>console.log(item))
    //1
    //2
    //3
    //4 不会遍历到desc
    for (let ite in arr){console.log(ite))}
    //0 返回的下标
    // 1
    //2
    // 3
    //desc 
    for (let ite of arr){console.log(ite)}
    //1
    //2
    //3
    //4 可提前结束掉 break foreach不可结束
    

    class

    class t {
        constructor(a="1") {this.a=a;
        }
      }
    var t1 = new t();
    //t {a: "1"}
    var t2 = new t("444");
    //t {a: "444"}
    class T2 extends t{}  //继承
    var t3=new T2("111") 
    t3 //T2 {a: "111"}
    

    Array flat flatmap

    flat()接收一个数组(这个数组中的某些item本身也是一个数组),返回一个新的一维数组(如果没有特别指定depth参数的话返回一维数组)。

    const arr= [ "a", ["b", "c"], ["d", ["e", "f"]]];
    // .flat() 接收一个可选的深度参数
    const arr2= arr.flat( 2 );
    console.log( arr2); // [ "a", "b", "c", "d", "e", "f" ]
    

    flatMap()类似于map(),但是它的callback返回的是扁平的一维数组(如果没有特别指定depth参数的话)。

    const scattered = [ "my favorite", "hamburger", "is a", "chicken sandwich" ];
    
    // map() 返回的是嵌套的数组results in nested arrays
    const huh = scattered.map( chunk => chunk.split( " " ) );
    console.log( huh ); // [ [ "my", "favorite" ], [ "hamburger" ], [ "is", "a" ], [ "chicken", "sandwich" ] ]
    
    const better = scattered.flatMap( chunk => chunk.split( " " ) );
    console.log( better ); // [ "my", "favorite", "hamburger", "is", "a", "chicken", "sandwich" ]
    

    decodeURI() decodeURIComponent()的区别

    decodeURI(URIstring)     
    //函数可对 encodeURI() 函数编码过的 URI 进行解码。    
    //URIstring    一个字符串,含有要解码的 URI 或其他要解码的文本。
    
    decodeURIComponent(URIstring)  
    //函数可对 encodeURIComponent() 函数编码的 URI 进行解码。     
    //URIstring   一个字符串,含有编码 URI 组件或其他要解码的文本。
    

    encodeURIComponent和decodeURIComponent可以编码和解码URI特殊字符(如#,/,¥等),而decodeURI则不能。

    encodeURIComponent('#')
    "%23"
    decodeURI('%23')
    "%23"
    decodeURIComponent('%23')
    "#"
    encodeURI('#')
    "#"
    

    可以看出encodeURI和decodeURI对URI的特殊字符是没有编码和解码能力的,实际项目中我们一般需要get请求的方式在地址栏中拼接一些参数,但是参数中如果出现#,/,&这些字符,就必须要用decodeURIComponent了,不然这些特殊字符会导致我们接收参数的错误

    假如我们要传一个code字段到http://www.xxx.com,值为20180711#abc

    var codeVal = encodeURI('20180711#abc');
    var url = 'http://www.xxx.com?code=' + codeVal;
    console.log(url);
    http://www.xxx.com?code=20180711#abc
    http://www.xxx.com接收参数
    
    location.search  //"?code=20180711";
    decodeURI("?code=20180711")  //"?code=20180711"
    

    这时候我们拿到的code参数明显是错误的,被特殊字符#截断了,下面我们来看用decodeURIComponent方法:

    var codeVal = encodeURIComponent('20180711#abc');
    var url = 'http://www.baidu.com?code=' + codeVal;
    url;
    "http://www.baidu.com?code=20180711%23abc"
    http://www.xxx.com接收参数
    location.search  //"?code=20180711%23abc"
    decodeURIComponent("?code=20180711%23abc")  //"?code=20180711#abc"
    

    这样子看来参数是不是正确了呢?

    bind

    function.bind(thisArg[,arg1[,arg2[, ...]]])
    参数
    thisArg
    调用绑定函数时作为this参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。当使用bind在setTimeout中创建一个函数(作为回调提供)时,作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空,执行作用域的this将被视为新函数的thisArg。
    arg1, arg2, ...
    当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。
    返回值
    返回一个原函数的拷贝,并拥有指定的this值和初始参数。

    this.num = 9; 
    
    var mymodule = {
      num: 81,
      getNum: function() { return this.num; }
    };
    module.getNum(); // 81
    
    var getNum = module.getNum;
    getNum(); // 9, 因为在这个例子中,"this"指向全局对象
    // 创建一个'this'绑定到module的函数
    var boundGetNum = getNum.bind(module);
    boundGetNum(); // 81
    
    
    //call apply bind区别
    var obj = {test: function() { console.log(this, arguments) }},
    func = obj.test;
    obj.test("Hello", ",", "world", "!");
    // {test: ƒ}  Arguments(4) ["Hello", ",", "world", "!", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
    func.call(obj, "Hello", ",", "world", "!");
    func.apply(obj, ["Hello", ",", "world", "!"]);
    //  {test: ƒ} Arguments(4) ["Hello", ",", "world", "!", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    //call 与apply的区别 只是传不一样,apply数组形式
    func.apply({}, ["Hello", ",", "world", "!"]);
    //  {} Arguments(4) ["Hello", ",", "world", "!", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
    var newFunc = func.bind(obj, "Hello", ","); //有初始参数序列
    newFunc("world", "!");
    // {test: ƒ}test: ƒ ()__proto__: Object Arguments(4) ["Hello", ",", "world", "!", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    newFunc();
    //  {test: ƒ} Arguments(2) ["Hello", ",", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    var newFunc2 = func.bind({}, "Hello", ",");
    newFunc2("world", "!");
    // {} Arguments(4) ["Hello", ",", "world", "!", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
    
    aa
    //fdsafsdf 
    

    相关文章

      网友评论

          本文标题:js es6特性

          本文链接:https://www.haomeiwen.com/subject/mozfshtx.html