ES6 数组拓展、对象拓展、函数、类的语法

一、数组的拓展

1、Array.from();

    用于将两种情况下的对象转化为数组:
    
        (1)、类似数组的对象
        (2)、可遍历的对象
    
    参数

        (1)、被转换的的对象。

        (2)、map函数。

        (3)、函数中this指向的对象。

        let obj = {
            render: function(x){
                return x;
            }
        }

        function a(){

            var _arg  = Array.prototype.slice.call(arguments);
            var _from = Array.from(_arg,function(v){return this.render();},obj);

            console.log(_arg);        //[1,2]
            console.log(_from);       //[1,2]
        }

        a(1,2);
        
        类数组中的length属性比实际属性多的情况下  会做截取

        传入数组的情况下会返回新的数组,值传递

        会忽略空位

2、Array.of();

    生成一个数组或将一组值转换为数组。

    
    主要用于规范 Array()  或者 new Array();
    

    区别

        Array.of(1)    //[1]

        Array.of(2,2)  //[2,2]

        Array.of(NaN)  //

        Array(2,2)     //[2,2]

        Array(1)       //[undefined]

3、Array.find()

    用于找出第一个符合条件的数组元素,找不到则返回undefined

    参数

        (1)callback

        (2)函数中this指向的对象

            回调函数中接收的参数

            (1)、value

            (2)、index

            (3)、当前数组的引用

        var a = [1,2,3,4,5];

        a.find(function(value, index, arr) {
            return value > 9;
        })


4、Array.findIndex();

    用于找出第一个符合条件的数组元素的下标,找不到则返回-1

    和indexOf()的区别在于 对NaN  的识别


5、Array.fill();

    用于填充一个数组

    参数

        (1)、要填充的元素

        (2)、起始位置

        (3)、结束位置 不包含

    new Array(100).fill(10)


6、Array.keys()    Array.values()    Array.entries()

    用于遍历数组。

    区别

        (1)、keys()是对键名的遍历
        (2)、values()是对键值的遍历
        (3)、entries()是对键值对的遍历

    返回值

        返回一个遍历器,可以用for...of循环进行遍历

        var a = ['a','b'].entries()

        for( let item of a ){
            console.log(item);  //[0, "a"][1, "b"]
        }


        for...in和Object.keys()区别在于继承


7、Array.copyWithin()

    用于把这个数组的一部分元素复制到其他位置 

    参数

        (1)开始替换的位置 

        (2)copy的起始位置

        (3)结束位置

        let arr = [1, 2, 3, 4, 5, 6, 7, 8];

        arr.copyWithin(1, 5, 8);

        console.log(arr);


    拓展运算符...

    let a = [1,2,3];
    let b = [...a];

二、对象的拓展

    几个简写

    var f = {
        
        url,                    

        data(x , y){            
            return {x , y};
        }
    }


    //等同于


    var f = {
        
        url: url,                    

        data: function(x , y){ 

            return {x:x , y:y};

        }
    }

    属性名表达式

    obj.a = 1;
    obj['a' + 'asd'] = 2;


    let prop = 'foo';

    let obj = {
    [prop]: true,
    ['a' + 'bc']: 123
    };

    定义方法名

    let obj = {
        ['h' + 'ello']() {
            return 'hi';
        }
    };



1、Object.is()

    用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致

    不同点

        +0 === -0 //true
        NaN === NaN // false

        Object.is(+0, -0) // false
        Object.is(NaN, NaN) // true

2、Object.assign()

    用来将源对象的所有可枚举属性,复制到目标对象

    参数

        (1)、目标对象
                
        (2)、源对象 可多个

    同名属性 会覆盖  后面 覆盖前面

    var target  = { a: 1, b: 1 };

    var source1 = { b: 2, c: 2 };
    var source2 = { c: 3 };

    Object.assign(target, source1, source2); 

    Object.assign(undefined) // 报错
    Object.assign(null) // 报错

    const v1 = 'abc';
    const v2 = true;
    const v3 = 10;

    const obj = Object.assign({}, v1, v2, v3);
    console.log(obj);
     
    引用拷贝

    同时也可以用于数组

    Object.assign([1, 2, 3], [4, 5])

    
    3、属性的遍历

    (1)for...in

    for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

    (2)Object.keys(obj)

    Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

    (3)Object.getOwnPropertyNames(obj)

    Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

    (4)Object.getOwnPropertySymbols(obj)

    Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

    (5)Reflect.ownKeys(obj)

    Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。


    4、Object.setPrototypeOf()   Object.getPrototypeOf() 

      
       Object.setPrototypeOf() 

       用于设置一个对象的__proto__

       参数

            (1)、Object:  设置的对象

            (2)、proto:  proto值

            如果第一个参数不是对象,会自动转为对象。但是由于返回的还是第一个参数,所以这个操作不会产生任何效果。



        Object.getPrototypeOf() 

        用于获取

三、函数的拓展

1、rest 参数    表现形式为   ...values   


function a(...values){
    
    return values.sort();

}

a(1,2,3);

后面不允许跟参数


2、箭头函数


例如:  const x = y => y;

        function x(y){
            return y;
        }

        x(){}

        如果不需要参数  或者需要多个参数  就将参数部分用一个括号括起来

        const x = () => 5;

        const x = (v1,v2) => v1 + v2;


        如果函数内部执行语句多于一条时,需要用大括号括起来

        const x = (v1,v2) => { return v1 + v2; }

        原因在于代码块


        函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

        不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误  

        不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替


        this指向原因




3、尾调用优化

    就是指某个函数的最后一步是调用另一个函数。


    以下三种情况,都不属于尾调用。

    // 情况一
    function f(x){
        let y = g(x);
        return y;
    }

    // 情况二
    function f(x){
        return g(x) + 1;
    }

    // 情况三
    function f(x){
        g(x);
    }


    特别针对 尾调用 调用递归


    ES2017 允许函数的最后一个参数有尾逗号(trailing comma)。

四、class基本语法

function point(x,y){
    this.x = x;
    this.y = y;
}

point.prototype.toString = function(){
    return '(' + this.x + ', ' + this.y + ')';
}

改写

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

方法之间不需要写逗号


ES6 的类,完全可以看作构造函数的另一种写法。

class Point {
    
}

typeof Point // "function"
Point === Point.prototype.constructor // true

在类的实例上面调用方法,其实就是调用原型上的方法。

class Point {
    constructor(){
        // ...
    }
}

Object.assign(Point.prototype, {
    toString(){},
    toValue(){}
});


class里面定义的方法  都是不可枚举的

Object.keys(class)

Object.getOwnPropertyNames(class)  

es5中的 是可以枚举的


生成类的实力方法和es5一样 都是通过new的方法来实现的  但是并不存在变量提升   必须在class下  去new


 ES5 一样,实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。

//定义类
class Point {

    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true


类也可以使用表达式的形式定义。

const MyClass = class Me {
    getClassName() {
        return Me.name;
    }
};


类名为MyClass  而非 Me

let inst = new MyClass();
inst.getClassName()
Me.name 

也可以写成立即执行函数


也可以使用get和set 去设定某个属性的get 和set

class MyClass {
    constructor() {
        // ...
    }
    get prop() {
        return 'getter';
    }
    set prop(value) {
        console.log('setter: '+value);
    }
}

let inst = new MyClass();

inst.prop = 123;    // set  123
inst.prop


Class 的静态方法  

只需要在前面加 static 关键字

静态方法不会被new出来的实例继承,只能通过类来调用

比如   

    class foo{
        static aaa(){
            return 'hello';
        }
    }

    new foo().aaa() // no
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,132评论 0 13
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,598评论 18 399
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,219评论 0 4
  • 玲初次见杨时,扬就坐在长江大桥上。他前额的头发在风中飘。地上满是烟头。玲当时穿一袭白裙。玲靠近扬时,不小心摔了...
    籽叶阅读 267评论 2 2
  • 亲爱的自己: 再过几天就是你的生日,你即将满17岁。心情有点复杂,所以写这封信给你。 17岁,说小也不小,说大也不...
    Chris俞金娜阅读 2,513评论 0 3