美文网首页
ES6的一些笔记(六)

ES6的一些笔记(六)

作者: 曾迦 | 来源:发表于2017-02-14 05:32 被阅读37次

    函数

    新特性


    新增参数默认值

    在写函数的时候可以给形参所在的变量分配一个默认值,如果在调用函数的时候,没有写入实参,那么形参变量中的值就是默认值。
    默认值会让functionlength属性失真,在默认值后包含默认值的形参将不会计入length属性,并且严格模式不可以使用。

    function test(x,y=10) {    
    return x + y;
    }
    console.log(test())   // NaN 因为x没有值 而y是一个数字
    console.log(test(3,3))  // 6
    console.log(test(3));   // 13
    
    新增rest参数

    写法...vals,vals只是一个变量名,写什么都可以,记得放在参数末尾也就是最后一个参数,不然会报错。
    rest参数就是一个数组。严格模式不可以使用。

    function testEach(...vals) {    
        vals.forEach(function (val) {        
            console.log(val);    
        })
    }
    function test(...vals) {    
        for (var val in vals){        
            console.log(vals[val]);    
        }
    }
    test("呵","呵")   // 呵,呵
    testEach(1,2,3,4)  // 1,2,3,4
    
    新增扩展运算符...

    ...可以把一个数组转化为序列的方式,不止是数组伪数组也可以。
    严格模式不可以使用。

    function test(a,b,c) {    
      return a+b+c;
    }
    console.log(test(...[1,2,3]));   // 6
    
    函数的name属性

    name返回的是一个函数的名称

    function test() {
    }
    var arr = new Array();
    console.log(test.name)   // test
    console.log(arr.push.name)     // push 
    
    函数的新写法“箭头函数”

    箭头函数可以简化原先函数的书写方式,实例如下。

    var myparseInt =  num => Number.parseInt(num)
    var n = myparseInt("72b");
    console.log(n); // 72
    

    如上代码num => Number.parseInt(num)相当于一个匿名函数,而myparselnt则相当于一个函数的名称,也可以说是一个变量接收了一个匿名函数那么久可以通过这个变量来调用函数,匿名函数如果放到ES5中代码如下:

    var  myparseInt  =function(num) {    
        return Number.parseInt(num)
    }
    

    多个参数或者没有参数可以用()来表示参数的地方如:

    var test=  ()=> "返回值"
    //等同于
    var  test  =function() {    
        return "返回值"
    }
    

    如果返回值大于一条语句要用{}包裹起来。

    var test=  (num1,num2)=> {    
        var n = num1 + num2;   
        return n/10;
    }
    console.log(test(30,40))  // 70
    

    箭头函数里面根本没有自己的this,而是引用外层的this。

    function fn() {
        return () =>{
            return () =>{
                return this.name
            }
        }
    }
    
    var jack = fn.call({"name":"jack"})
    
    /** 
      获取的jack
      function () {
            return function () {
                return _this.name;
            };
        }
    */
    console.log(jack) 
    
    console.log("---" + jack.name)  // ---
    console.log(jack.call()()) // jack
    console.log(jack.call({"name":"jack2"})()) // jack
    var jack2 =jack.call({"name":"jack2"});
    console.log("---" + jack2.name) // ---
    /**
      jack2
      function () {
                return _this.name;
      }
    */
    console.log(jack2)
    console.log(jack2()) // jack
    

    对象

    新特性


    对象属性的简易写法
    // 变量
    var name = "jack";
    var age = 18;
    // 将变量赋值给对象
    var obj = {name};
    obj = {age}
    console.log(obj) // Object {age: 18} 会覆盖上一个name
    obj = {name,age} 
    console.log(obj) // Object {name: "jack", age: 18} 这样就可以不覆盖了
    
    对象的方法简易写法(五星好评)
    var p = {
        run(){
            console.log("跑");
        }
    }
    p.run()
    
    属性名与方法名可以利用表达式
    var n = "name"
    var r = "run";
    
    var obj = {
        [n] : "jack",
        [r](){
            return "跑";
        }
    }
    console.log(obj.name)  // jack
    console.log(obj.run()) // 跑
    
    Object.is()

    判断2个值是否相等

    var a = NaN;
    var b = NaN;
    
    console.log(Object.is(a,b)) // true
    
    Object.assign()

    合并对象,包含属性和方法的合并,第一个参数是主对象,后面的是要合并的对象。

    var obj = {};
    var car = {
        run(){
            return "跑";
        }
    }
    var dog = {
        eat(){
            return "吃";
        }
    }
    Object.assign(obj,car,dog);
    console.log(obj.run());  // 跑
    console.log(obj.eat());  // 吃
    
    Object的描述对象Descriptor

    Object.getOwnPropertyDescriptor(obj,key)获取这个描述对象

    var car = {
        run(){
            return "跑";
        }
    }
    /**
      描述对象 enumerable 决定是否是可以在循环中被遍历出的属性
      Object
        configurable: true
        enumerable: true
        value: run()writable: true
        __proto__: Object
    */
    console.log(Object.getOwnPropertyDescriptor(car,"run"));
    
    Object.keys(obj)

    返回由对象所有键所组成的数组

    var car = {
        run(){
            return "跑";
        }
    }
    var arr = Object.keys(car)
    console.log(arr); //  ["run"];
    
    Object.values(obj)

    返回由对象所有值所组成的数组,其特性与keys一样

    var test = {name:"test"}
    var vals = Object.values(test)
    
    console.log(vals) // ["test"]
    
    Object.entries(obj)

    这个返回值有2种情况,当对象只有一个键值对的时候只会返回一个一维数组,0下标的是key1下标的是val,但是当这个对象有多个键值对的时候,所返回的就是一个二维数组,每一个键值对就是一个一维数组.

    var test = {name:"test"}
    test.age = 12;
    
    var entries = Object.entries(test)
    
    console.log(entries) // [["name","test"],["age",12]]
    
    Object.getOwnPropertyNames(obj)

    表面看和keys这个方法区别不大,但是如果是enumerable: true描述对象中的这个属性为否在keys中是不可能遍历出的但是在这里就可以遍历了

    var arr = [1];
    arr.name = "数组";
    
    var keysArr = Object.keys(arr)
    var getOwnPropertyNamesArr = Object.getOwnPropertyNames(arr);
    console.log(keysArr); // ["0", "name"]
    console.log(getOwnPropertyNamesArr) // ["0", "length", "name"]
    
    Reflect.ownKeys(obj)

    返回值为数组,包含所有的key,不论enumerableSymbol

    var arr = [1];
    arr.name = "数组";
    var keysArr = Reflect.ownKeys(arr)
    console.log(keysArr); // ["0", "length", "name"]
    
    Object.setPrototypeOf(obj,proto)

    可以设置对象中的proto属性

    var car = {
        run(){
            return "跑";
        }
    }
    console.log(car);
    /**
      结果如下:
    Object
    run: run()
    __proto__:Object
    __defineGetter__:__defineGetter__()
    __defineSetter__:__defineSetter__()
    __lookupGetter__:__lookupGetter__()
    __lookupSetter__: __lookupSetter__()
    constructor: Object()
    hasOwnProperty: hasOwnProperty()
    isPrototypeOf:isPrototypeOf()
    propertyIsEnumerable:propertyIsEnumerable()
    toLocaleString: toLocaleString()
    toString: toString()
    valueOf: valueOf()
    get __proto__: __proto__()
    set __proto__: __proto__()
    */
    
    
    var car = {
        run(){
            return "跑";
        }
    }
    var test = {name:"test"}
    Object.setPrototypeOf(car,test);
    console.log(car) 
    /**
      Object
          run: run()
          __proto__: Object
              name: "test"
              __proto__: Object
                  __defineGetter__:__defineGetter__()
                  __defineSetter__:__defineSetter__()
                  __lookupGetter__:__lookupGetter__()
                  __lookupSetter__: __lookupSetter__()
                  constructor: Object()
                  hasOwnProperty: hasOwnProperty()
                  isPrototypeOf:isPrototypeOf()
             propertyIsEnumerable:propertyIsEnumerable()
                  toLocaleString: toLocaleString()
                  toString: toString()
                  valueOf: valueOf()
                  get __proto__: __proto__()
                  set __proto__: __proto__()
    */
    
    Object.getPrototypeOf(obj)

    取出一个对象的proto属性 和setPrototypeOf对应

    相关文章

      网友评论

          本文标题:ES6的一些笔记(六)

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