浅谈ES6新特性

       ES6是新版本javascript语言的标准，它给咱们带来了更简单、更快捷也更容易理解的语法，如箭头函数、模板字符串等，为咱们提供新语法以及代码特性来提高javascript的使用体验,目前大多数浏览器已经支持ES6中绝大多数特性，基于此ES6普及速度至关快，基本成为业界标准。

ES6经常使用特性列举

1、新的变量声明方式：let和const

       ES6推荐使用let声明变量，相较于var,let声明的变量会造成一个块级做用域,其声明的变量只在局部做用域中起做用：

var a=1;
    {
        let b=2;
    }
    console.log(a);//1
    console.log(b);//ReferenceError: b is not defined
复制代码

       let表示声明变量，而const表示声明常量，二者都会造成块级做用域，可是const声明的变量都会以常量的形式存在，即值一旦肯定就不能修改：

const a=1;
    a=0;
    console.log(a);//TypeError: Assignment to constant variable.
复制代码

       const声明对象时，对象的属性值能够被修改:

const hero={
        name:"stark",
        from:"American"
    }
    hero.name="batman";
    console.log(hero);//{name: "batman", from: "American"}
复制代码

       let与const的其余注意细节：

• 1.let和const声明的变量不具有在预编译时提高的特性
• 2.let声明的变量能够先声明不赋值
• 3.let和const声明变量不容许重复声明
• 4.const在声明变量时必须初始化

2、新的函数声明方式：箭头函数

       传统的函数声明方式包括函数声明，函数表达式声明等,而ES6中新增的函数声明方式：箭头函数，其简便直观的特色，更简化了开发者的工做复杂度。
       箭头函数最直观的特色：

• 省略了function函数声明关键字
• 返回值return关键字可省
• 其声明的函数内部this指向其上一级

//传统的表达式声明方式
    var getSum=function(a,b){
        return a+b;
    };
    getSum(1,2);//3
    //箭头函数
    var add=(a,b)=>a+b;
    add(1,2);//3
复制代码

       此处函数体只有一条执行语句，函数体return和{}能够同时省略。箭头函数只有一个参数时，包裹形参的()也能够省略：

let func=a=>a;
    func(666);//666
复制代码

       箭头函数中的this指向：

setTimeout(()=>console.log(this),1000);//当前this指window全局对象
复制代码

3、模版字符串

       ES6以前的字符串处理方式:

let sayInfo=(name,fromArea)=>console.log("I am "+name+" and from "+fromArea+".");
sayInfo("Michael","American");//I am Michael and from American.
复制代码

       而采用模版字符串以后：

let sayInfo=(name,fromArea)=>console.log(`I am ${name} and from ${fromArea}.`);
    sayInfo("Mary","Cuba");//I am Mary and from Cuba.
复制代码

       不难看出，采用模版字符串以后减小了+的拼接工做，下降了代码量也让代码的可读性更强。
       模版字符串的特色以下：

• 数据用``包裹
• 基本的字符串格式化
• 表达式嵌入字符串中进行拼接，用${}来界定

console.log(`<li>学习中心</li>
                <li>案例交流</li>
                <li>课程分享</li>  
    `); //<li>学习中心</li>
        //<li>案例交流</li>
        //<li>课程分享</li> 
复制代码

模版字符串的又一强大之处，输出后结果会保留数据的原格式。

4、解构赋值

数组解构

//通常意义上的赋值
    let arr=[1,2,3];
    let a=arr[0];
    let b=arr[1];
    let c=arr[2];
复制代码

       数组解构使用数组字面量，且解构操做所有在数组类内完成。

let colors=["red","green","blue"]
    let first=colors[0];
    let second=colors[1];
    console.log(first,second);//red green
复制代码

       在数组解构语法中，咱们经过值在数组中的位置进行选取，且能够将其存储在任意变量中，未显式声明的元素都会直接被忽略。
       在数组解构中可直接跳过变量名，只为须要的元素提供变量名：

let people=["zhangsan","lisi","wangwu"];
    let [,,third]=people;
    console.log(third);//wangwu
复制代码

       使用解构赋值语法从people中获取第3个元素，third前的逗号是前方元素的占位符，不管数组中的元素有多少个，均可以经过这种方法提取想要的元素，不须要为每个元素都指定变量名。

变量交换

       数组解构语法还有一个独特的用例：交换两个变量的值。

//互换变量的值
    let a=1,
        b=2;
    [a,b]=[b,a];
    console.log(a,b);//2 1
复制代码

       数组解构赋值看起来像是一个镜像：赋值语句左侧(也就是等号左侧)与其余数组解构示例同样，是一个解构模式；右侧是一个为交换过程建立的临时数组字面量。代码执行过程当中，先解构临时数组，将b和a的值复制到左侧数组的前两个位置，最终结果是变量互换了它们的值。

• 注意细节：若是右侧数组解构赋值表达式的值为null或undefined，则会致使程序抛出错误

默认值

       在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定位置的属性不存在或其值为undefined时使用默认值。

let students=["Jane","Mary"];
    let [first,second,third="Michael"]=students;
    console.log(first,second,third);//Jane Mary Michael
复制代码

       students数组中没有第三个元素与之对应，可是它有默认值Michael，不会输出undefined。

嵌套数组解构

       嵌套数组解构即在原有数组模式中插入另外一个数组模式，将解构过程深刻到下一个层级。

let students=["Machael",["Jane","Mary"],"Mike"];
    let [first,[second,third]]=students;
    console.log(first);//Machael
    console.log(second,third);//Jane Mary
复制代码

       变量second引用的是students数组中的值"Jane"，该元素包含在数组内部的另外一个数组中，因此second与third两侧的方括号是一个必要的解构模式。

数组复制

       在ES5中通常使用concat()方法实现对数组的拷贝：

//concat()方法拷贝数组
    let colors=["red","green","blue"];
    let cloneColors=colors.concat();
    console.log(cloneColors); // ["red", "green", "blue"]
复制代码

       在ES6中，能够经过不定元素的语法来实现相同的目标:

let colors=["red","green","blue"];
    let [...cloneColors]=colors;
    console.log(cloneColors);
复制代码

• 在被解构的数组中，不定元素必须为最后一个条目，在后面继续添加逗号会致使程序抛出语法错误

对象解构赋值

       对象字面量的语法形式是在一个赋值操做符左边放置一个对象字面量：

let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
复制代码

       在这段代码中，node.type的值被存储在名为type的变量中；node.name的值被存储在名为name的变量中。

解构赋值

       上面咱们已经将对象解构应用到了变量的声明中。然而，咱们一样能够在给变量赋值时使用解构语法。

let node={
        type:"Identifier",
        name:"Mike"
    },
    type="Literal",
    name=5;
    //使用解构分配不一样的值
    {type,name}=node;
    console.log(type,name);// Identifier Mike
复制代码

       这段代码中在声明type与name时初始化了一个值，后面经过解构赋值的方法，从对象中获取相应值从新为两个变量赋值了。

默认值

       使用解构赋值表达式时，若是指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined，与数组解构赋值有类似处。

let student={ name:"Michael"};
    let {name,age=20}=student;
    console.log(name); //Michael
    console.log(age); //20
复制代码

       这段代码中为age设置了默认则value，只有当对应student上没有该属性或者该属性值为undefined时此默认值才有效。

为非同名局部变量赋值

       若是但愿使用不一样命名的变量来存储对象属性的值，ES6的一个扩展语法能够知足需求：

let hero={
        type:"ironman",
        name:"stark"
    };
    let {type:ownType,name:ownName}=hero;
    console.log(ownType); //ironman
    console.log(ownName); //stark
复制代码

       使用解构赋值来声明变量ownType与ownName，两个变量分别存储hero对象中的type与name的属性值。

嵌套对象解构

let info={
        type:"Identifier",
        name:"zhangsan",
        friends:{
            first:{
                age:35,
                hobby:"drink"
            },
            second:{
                age:32,
                hobby:"smoke"
            }
        }
    };
    let { friends:{second}}=info;
    console.log(second.age); //32
    console.log(second.hobby); //somke
复制代码

       在解构模式中使用了{}，其含义为在对象中找到friends属性后，继续深刻一层查找second属性，并最终获取到赋值运算符右侧的属性值。
       对象解构模式能够应用于任意层级深度的对象，且每一层都具有同等的功能。

5、扩展运算符

扩展运算符在数组中的应用

let arr=[...[1,2,3]];
    console.log(arr); //[1,2,3]
复制代码

       利用扩展运算符实现数组的复制，即浅拷贝。

function getNum(x,y,z){
        //遍历arguments对象
        for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);// 4 5 6
    }
        //转化前为伪数组
        console.log(Array.isArray(arguments));//false
        let newArguments=[...arguments];
        //转化后为真数组
        console.log(Array.isArray(newArguments));//true
    };
    getNum(4,5,6);
复制代码

       利用扩展运算符将伪数组转化为真数组。
       除此以外扩展运算符还能够用于合并数组：

let arr1=[1,2];
    let arr2=[3,4];
    console.log(...arr1,...arr2); //1 2 3 4
复制代码

注意细节：扩展运算符使用时必须有容器包裹，不然会致使系统抛出错误。
复制代码

扩展运算符在对象中的应用

let student={
        name:"Jane",
        sex:"woman",
        friends:["Mary","Mike"]
    };
    let newStudent={...student};
    //let newStudent=Object.assign({},student);等同于扩展运算符方法
    console.log(newStudent); //{name: "Jane", sex: "woman", friends: Array(2)};
复制代码

       与数组中的实现功能类似，完成了新对象对旧对象的浅拷贝。此外扩展运算符也能够用于对象的合并：

let info1={ name:"Mike" };
    let info2={ hobby:"write" };
    let studentInfo={ ...info1,...info2};
    console.log(studentInfo);// {name: "Mike", hobby: "write"};
复制代码

       与数组的扩展运算符同样，其后能够跟表达式：

const obj={
        ...(1<2?{a:1}:{a:2}),
        b:2,
    };
    console.log(obj); // {a: 1, b: 2}
复制代码

       若是扩展运算符后面是一个空对象，则没有任何效果：

let obj={...{},a:1};
    console.log(obj); //{a:1}
复制代码

       若是扩展运算符的参数是null或undefined，这两个值编译时会被忽略，不会报错：

let emptyObj={...null,...undefined}; //不会报错
复制代码

       对象的扩展运算符与解构赋值的结合使用：

let {x,y,...z}={x:1,y:2,m:3,n:4};
    console.log(x,y,z);//1 2 {a:3,b:4};
复制代码

       上述代码中变量z对应的是解构赋值所在的对象，它获取赋值运算符右边全部还没有读取的属性，连通属性值一统拷贝过来。因为解构赋值要求等号右边是一个对象，因此若是等号右边是 undefined 或 null，就会报错，由于它们没法转为对象。

6、ES6中字符串扩展

       1.trim() : 用于除去字符串中空白符

let str=' a bc de ';
    console.log(str.trim()); // "a bc de"
    console.log(str.trimLeft()); // "a bc de "
    console.log(str.trimRight()); //" a bc de"
复制代码

       2.repeat() : 字符串重复次数

let str="12345";
    console.log(str.repeat(2)); // "1234512345"
复制代码

       3.includes() :是否包含传入参数，返回布尔值

let str="hello world";
    console.log(str.includes("h")); // true
    console.log(str.includes("z")); //false
复制代码

       4.starts/endsWith():是否已传入参数开头/结尾，返回布尔值

let str="hello world";
    console.log(str.startsWith("hello")); // true
    console.log(str.endsWith("xyz")); // false
复制代码

       5.padStart/End():接收两个参数，第一个参数为填充以后的字符串长度，第二个参数为填充元素

let str="abc def";
    console.log(str.padStart(15,"*")); // ********abc def
    console.log(str.padEnd(20,"-")); // abc def-------------
复制代码

7、ES6中数组扩展

       1.Array.from()

function getNum(x,y,z){
        console.log(Array.isArray(arguments));//false
        console.log(Array.isArray(Array.from(arguments)));//true
    };
    getNum(1,2,3);
复制代码

       使用Array.from转化前判断结果为false，并非真正的数组，而转化后结果为true，已经从类数组转变为了真正的数组。

       2.Array.of()

做用：将一组值转换为数组，主要目的是弥补构造器Array的不足

       以前利用new操做符建立数组：

let arr1=new Array(3);
    let arr2=new Array("3");
    console.log(arr1,arr2);// [empty × 3] ["3"]
复制代码

       从输出结果能够看出咱们的初衷并非建立一个长度为3的空数组，这就是Array构造器建立数组的缺陷。
       利用Array.of新建数组：

let arr1=Array.of(3);
    let arr2=Array.of("3");
    console.log(arr1,arr2); // [3] ["3"]
复制代码

       Array.of()完美解决了Array构造器的缺陷，而且简化了利用构造器建立数组的操做。

       3.find()与findIndex()

find()用于找出第一个符合条件的数组元素，找不到则会返回undefined

let infoArr=[ 
        {name:"Lucy",score:85},
        {name:"Jane",score:78},
        {name:"Michael",score:80}
    ];
    //返回name属性为Jane的对象
    let result=infoArr.find(item=>item.name=="Jane");
    console.log(result); // {name: "Jane", score: 78}
复制代码

• 注意细节：find()不会返回多个值，找到一个符合条件的元素就会返回。

findIndex():返回第一个符合条件的数组元素的索引，没有符合条件的则会-1。

let infoArr=[ 
        {name:"Lucy",score:85},
        {name:"Jane",score:78},
        {name:"Michael",score:80}
    ];
    //返回score属性值为80的元素的索引
    let result=infoArr.findIndex(item=>item.score==80);
    console.log(result); // 2
复制代码

       4.includes()

includes()用于判断数组中是否包含该元素，并返回一个布尔值。

let arr=[1,2,3];
    let result1=arr.includes(2);
    let result2=arr.includes("a");
    console.log(result1,result2);// true  false
复制代码

       indexOf()用于查找元素在数组中的索引值，基于此也能够实现与includes相似的功能：

let arr=[1,2,3];
    let result1=arr.indexOf(2);
    let result2=arr.indexOf('b');
    console.log(result1,result2); //1 -1
复制代码

       经过其返回的索引值结果咱们也能够判断出数组中是否存在该元素，可是它对NaN的判断不许确。

let arr=[1,NaN,3,6];
    let result1=arr.indexOf(NaN);
    console.log(result1); //-1
    let result2=arr.includes(NaN);
    console.log(result2); //true
复制代码

       5.fill()

做用：给数组填充指定值，能够用于数组初始化

let arr=new Array(5);
    console.log(arr.fill("*")); //["*", "*", "*", "*", "*"]
复制代码

       使用fill()填充数组具备覆盖性：

let arr =Array.of(1,2,3);
    console.log(arr.fill("a")); // ["a", "a", "a"]
复制代码

       此外fill()还能够接收第二个和第三个参数，用于指定数据填充位置。

let arr =Array.of("a","b","c");
    console.log(arr.fill("d",2,3)); // ["a", "b", "d"]
复制代码

8、新的数据结构：Set与Map

       Set与数组形式类似，也是一种数据集合，区别在于它存储的值都是惟一的不能重复。建立一个Set实例:

let s1=new Set();
复制代码

       使用Set时传入数据有两种方式，一种为初始化时以数组形式传入，另外一种为使用add()方法添加。

let s1=new Set([1,2,3,true]);
    s1.add(4,"a");
    console.log(s1); // {1, 2, 3, true, 4,"a"}
复制代码

       对于Set中数据的遍历，能够采用数组中的forEach方法：

let s1=new Set([1,2,3,true]);
    s1.forEach(item=>console.log(item));// 1 2 3 true
复制代码

       此外对于Set数据结构，还有一种for of方法：

let s1=new Set(["a","b","c"]);
    for(let item of s1){
        console.log(item);  // a b c
    };
复制代码

注意细节：Set本质上并非一个数组。

let s1=new Set([1,2,3]);
    console.log(Array.isArray(s1)); //false
    console.log(typeof s1);//object
复制代码

       由输出结果不难发现，Set不是数组，而是形式上与数组相似的对象，即类数组。
       利用Set中数据的惟一性，咱们能够轻松的实现数组的去重工做：

let s1=new Set([1,1,2,2,3,3,4,4]);
    console.log(s1); //{1, 2, 3, 4}
    let arr=[1,2,5,3,1,3,NaN,false,NaN];
    //Set与扩展运算符结合使用，完成数组去重后的浅拷贝
    let newArr=[...(new Set(arr))];
    console.log(newArr);// [1, 2, 5, 3, NaN, false]
复制代码

       Map也相似于对象，区别在于对象中的键名即属性名只能是字符串，而Map中存放的键能够是任意值。
       建立一个Map实例：

let m1=new Map();
复制代码

       Map存放数据的方式与数组、对象等其余数据结构都有差异：

let m=new Map([
        ["name","Mike"],
        ["area","American"],
        [false,"hello"]
    ]);
    console.log(m);// {"name" => "Mike", "area" => "American", false => "hello"}
复制代码

       除这种初始化方式外，还能够利用set添加数据：

let m=new Map();
    m.set(true,"xyz");
    m.set([1,2,3],{name:"stark"});
    console.log(m);// {true => "xyz", Array(3) => {…}}
复制代码

       既然有set添加数据，相应的必然有get获取数据：

let m=new Map([
        ["a","hello"],
        [1,"world"],
        [false,"xyz"]
    ]);
    m.set([1,2,3],{name:"Michael"});
    console.log(m.get("a"),m.get(1)); // hello world
    console.log(m.get([1,2,3])); // undefined
复制代码

注意细节：m.get([1,2,3])获取不到值的缘由：get()比较的是栈区中的地址。
利用set添加数据时若是有重复的键，后面的会覆盖掉前面的。

Map结构遍历

Map 结构原生提供三个遍历器生成函数和一个遍历方法：

1. keys()：返回键名的遍历器.
2. values()：返回键值的遍历器。
3. entries()：返回全部成员的遍历器。
4. forEach()：遍历 Map 的全部成员。

const map=new Map([
        ["a","hello"],
        ["b","world"]
    ]);
    for(let key of map.keys()){
        console.log(key); // a b
    };
    for(let value of map.values()){
        console.log(value); // hello world
    };
    for(let item of map.entries()){
        console.log(item[0],item[1]); //a hello   b world
    };
    map.forEach((item,index)=>console.log(item,index)); // hello a   world b
复制代码

9、JS中的class类

1.建立class类

       在JavaScript中，建立实例对象的传统方法是经过构造函数生成：

function Hero(name,height,country){
        this.name=name;
        this.height=height;
        this.country=country;
    };
    Hero.prototype.sayInfo=function(){
        console.log(`My name is ${this.name} and come from ${this.country}.`);
    };
    let stark=new Hero("stark",178,"American");
    stark.sayInfo(); // My name is stark and come from American.
复制代码

       上面这种写法与传统的面向对象语言差别很大，很容易让初学者产生困惑。
       基本上，ES6 的class能够看做只是一个语法糖，它的绝大部分功能，ES5 均可以作到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。用class改写传统的构造函数法：

//定义Hero类
    class Hero{
        //定义构造方法
        constructor(name,height,country){
            this.name=name;
            this.height=height;
            this.country=country;
        };
        //定义方法
        sayInfo(){
            console.log(`My name is ${this.name} and come from ${this.country}.`);
        };
    };
    let stark=new Hero("stark",178,"American");
    stark.sayInfo(); // My name is stark and come from American.
复制代码

       ES6中的类，彻底能够能够看作构造函数的另外一种简单写法，类的使用方法也与构造函数一致，直接对类使用new操做符建立实例对象。

2.constructor方法
       constructor方法是类的默认方法，经过new操做符建立实例对象时自动调用该方法。一个类必须有constructor方法，若是没有显式定义，一个空的constructor方法会被默认添加。

class Study{
    }
    //等同于
    class Study{
        constructor(){}
    }
复制代码

       上面定义了一个空的类Study，JS引擎在编译时会自动为它添加一个空的constructor方法。
       constructor方法默认返回实例对象，可是咱们能够在constructor内部指定返回特定对象。

let obj={};
    class Cat{
        constructor(){
            return obj;
        }
    };
    console.log(new Cat() instanceof Cat);//false
复制代码

       上面的类中constructor方法返回了另外一个空对象，因此新建立的实例对象的构造器并不指向Cat类。
       ES6中的类与构造函数有诸多类似之处，它们的一个主要区别就是类必须使用new操做符来调用，而构造函数即便调用时没有new操做符也不会报错。

class Cat{
        constructor(){}
    };
    Cat(); // TypeError: Class constructor Cat cannot be invoked without 'new'
复制代码

3.class表达式
       与函数中同样的是，类也可使用表达式的形式定义：

let NewClass=class OldClass{
        getName(){
            return OldClass.name;
        }
    };
复制代码

       使用表达式定义一个类，这个类的名字是NewClass而不是oldClass,oldClass只在class的内部代码可用，指代当前类。

let class1=new NewClass();
    console.log(class1.getName()); // OldClass
    console.log(OldClass.name); // ReferenceError: OldClass is not defined
复制代码

       输出结果表示，OldClass只在class内部可以访问到。
       采用类的表达式写法，能够写出当即执行的class类：

let Lucy=new class{
        constructor(name){
        this.name=name;
        }
        sayName(){
            console.log(`I am ${this.name}.`)
        }
    }('Lucy');
    Lucy.sayName(); // I am Lucy.
复制代码

4.class中的继承
       ES6以前传统意义上的继承：

function Hero(name,country){
        this.name=name;
        this.country=country;
    };
    Hero.prototype.sayName=function(){
        console.log(`My name is ${this.name} and from ${this.country}.`);
    };
    function HeroAbility(name,country,ability){
        //使用call继承父对象的属性
        Hero.call(this,name,country);
        this.ability=ability;
    };
    //使用浅拷贝继承父对象的方法
    for(let p in Hero.prototype){
        HeroAbility[p]=Hero.prototype[p];
    };
    //定义子对象的方法
    HeroAbility.prototype.sayDetail=function(){
        console.log(`My name is ${this.name} and from ${this.country} and have ability of ${this.ability}.`)
    };
    (new HeroAbility("superman","American","fly").sayDetail());
    //My name is superman and from American and have ability of fly.
复制代码

       使用ES6 class中的extends实现继承：

class Hero{
        constructor(name,country){
            this.name=name;
            this.country=country;
    };
        sayName(){
            console.log(`My name is ${this.name} and from ${this.country}.`);
        };
    };
    class HeroAbility extends Hero{
        constructor(name,country,ability){
            //继承父类的属性
            super(name,country);
            this.ability=ability;
        };
        sayDetail(){
            console.log(`My name is ${this.name} and from ${this.country} and have ability of ${this.ability}.`)
        };
    };
    (new HeroAbility("Batman","American","Batcar").sayDetail());
    //My name is Batman and from American and have ability of Batcar.
复制代码

       constructor方法中出现的super关键字，表示父类的构造函数，用来新建父类的this对象。
       子类必须在constructor方法中调用super方法，不然新建实例时会报错，这是由于子类本身的this对象，必须先经过父类的构造函数完成塑造，获得与父类一样的实例属性与方法，而后再加上自身的属性与方法。若是不调用super方法，子类就得不到this对象。

10、对象的扩展

1.属性相关方法

Object.defineProperty():精细化设置一个对象的属性

let obj={};
    Object.defineProperty(obj,"age",{
        value:20,  //默认值
        writable:true, //可否修改
        enumerable:true, //是否可枚举
        configurable:false //可否删除
    });
    console.log(obj); //{age: 20}
复制代码

Object.getOwnPropertyDescriptor():返回指定对象全部自身属性（非继承属性）的描述对象。

let obj={ name:"Miacael" };
    console.log(Object.getOwnPropertyDescriptor(obj,"name"));
    //{value: "Miacael", writable: true, enumerable: true, configurable: true}
复制代码

Object.defineProperties():精细化设置一个对象的多个属性

let obj={};
    Object.defineProperties(obj,{
        "name":{
            value:"wangcai",
            writable:true,
            enumerable:true,
            configurable:false,
        },
        "address":{
            value:"Canada",
            writable:true,
            enumerable:true,
            configurable:false,
        }
    });
    console.log(Object.getOwnPropertyDescriptor(obj,"name"));
    //{value: "wangcai", writable: true, enumerable: true, configurable: false}
    console.log(Object.getOwnPropertyDescriptor(obj,"address"));
    //{value: "Canada", writable: true, enumerable: true, configurable: false}
复制代码

Object.getOwnPropertyNames():以数组形式返回自身的属性

let obj = {
        name:"Lucy",
        from:"Canada"
    };
    console.log(Object.getOwnPropertyNames(obj)); // ["name", "from"]
复制代码

Object.keys():与Object.getOwnpropertyNames()功能相似

let obj = {
        name:"Kang",
        from:"China"
    };
    console.log(Object.keys(obj)); // ["name", "from"]
复制代码

Object.values():以数组形式返回对象的属性值

let obj = {
        name:"Kang",
        from:"China"
    };
    console.log(Object.values(obj)); // ["Kang", "China"]
复制代码

2.继承相关方法

Object.create():从一个现有对象进行继承获得一个全新的对象，新对象能够访问旧对象的属性与方法

function Person(name){
        this.name=name;
    };
    Person.prototype.Say=function(){
        console.log(`I am ${this.name}.`)
    };
    let p1=new Person("xiaozhang");
    let p2=Object.create(p1);
    p2.name="xiaowang";
    console.log(p2.Say()); // I am xiaowang.
复制代码

Object.getPrototypeOf():用于获取指定对象的构造器的prototype属性

var obj={};
    var arr=[];
    console.log(Object.getPrototypeOf(obj)===Object.prototype); // true
    console.log(Object.getPrototypeOf(arr)===Array.prototype); // true
复制代码

防篡改方法

       Object.preventExtensions():不容许新增，能够删除和修改

let obj={ name:"xiaoming" };
    Object.preventExtensions(obj);
    obj.sex="man";
    console.log(obj); // {name: "xiaoming"}
复制代码

       Object.seal():不容许新增与删除，能够修改

let obj1={name:"xiaoqiang"};
    Object.seal(obj1);
    obj1.sex="man";
    obj1.name="xiaogang";
    delete obj1.name;
    console.log(obj1); // {name: "xiaogang"}
复制代码

       Object.freeze():不容许新增、删除与修改

let obj2={name:"xiaohong"};
    Object.freeze(obj2);
    obj2.hobby="read";
    delete obj2.name;
    obj2.name="xiaoming";
    console.log(obj2); // {name:"xiaohong"}
复制代码

3.对象的简写

对象属性的简写：
       条件：属性的值为变量且变量名称与键名一致

let name="Lucy",age=20;
    let obj={
        name,   //等同于name:name
        age     //等同于age:age
    };
    console.log(obj); // {name: "Lucy", age: 20}
复制代码

对象中方法的简写

let obj1={
        //简写前
        sayHello:function(){
            console.log("Hello...");
        },
        //简写后
        sayHi(){
            console.log("Hi...");
        }
    };
    obj1.sayHello(); // Hello...
    obj1.sayHi(); // Hi...
复制代码

4.Object.assign()

用于对象的合并，将源对象的全部的可枚举属性，复制到目标对象。

let target={};
    let source1={
        name:"Michael",
        age:22
    };
    let source2={
        name:"Mary",
    };
    console.log(Object.assign(target,source1,source2)); // {name: "Mary", age: 22}
复制代码

注意细节：

• 第一个参数是目标对象，assign这个方法把其它的参数中的属性所有加在第一个参数身上。
• 第一个参数在属性复制过程当中，能够会被修改，后面的会覆盖前面的属性。
• assign这个方法的返回值就是第一个参数的引用，也就是返回了第一个参数。
• assign不能拷贝继承过来的属性与不可枚举的属性。

       ES6中的内容远不止列举出的这些，上文仅为前一阶段学习的总结，但愿与正在学习JS的同窗一同进步，一块儿提升。