ES6【三】

ES6为数组做的扩展

Array.of()函数

作用：将一组值，转换成数组。

Array.from()函数

作用：可以将类似数组的对象或者可遍历的对象转换成真正的数组。

1
2
3

let str = 'hello';
Array.from(str);
//结果：["h", "e", "l", "l", "o"]

find()函数

作用: 找出数组中符合条件的第一个元素。若数组中没有符合条件的函数，则返回undefind

findIndex()函数

作用：返回符合条件的第一个数组成员的位置。若没有元素符合条件，则返回-1

fill()函数

用指定的值，填充到数组。

1
2
3

let arr = [1,2,3];
arr.fill(4,1,3);
//结果：[1,4,4]

注意：第2个参数和第3个参数的意思是：从位置1的元素开始填充数字4，截止到位置3之前，所以是位置1和位置2的元素被数字4填充了。

entries()函数

作用：对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。

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

keys()函数

作用：对数组的索引键进行遍历，返回一个遍历器。

for(let index of ['a', 'b'].keys())
    {
        console.log(index);
    }
    //0
    //1

values()函数

对数组的元素进行遍历，返回一个遍历器。

for(let value of ['a', 'b'].values())
    {
        console.log(value);
    }
    //a
    //b

数组推导

用简洁的写法，直接通过现有的数组生成新数组。

var array1 = [1, 2, 3, 4];
    var array2 = [for(i of array1)  if(i>3) i];
    console.log(array2);
    //结果： [4]

小结

ES6为数组带来了很多很实用的方法：Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values()，不仅如此，还带来一个更简洁的语法：数组推导，能让我们更方便地生成一个新数组。

ES6为对象带来的扩展

属性简写

var name = "Zhangsan";
   var age = 12;
   //传统写法
   var person = {
       "name":name,
       "age":age
   };
   console.log(person);
   //结果：{name: "Zhangsan", age: 12}
   //ES6写法
   var person = {name,age};
   console.log(person);
   //结果：{name: "Zhangsan", age: 12}
方法简写
//传统的表示法
   var person = {
       say:function(){
           alert('这是传统的表示法');
       }
   };
   //ES6的表示法
   var person = {
       say(){
           alert('这是ES6的表示法');
       }
   };

属性名可以是表达式

var f = "first";
    var n = "Name";
    var s = "say";
    var h = "Hello";
    var person = {
        [ f+n ] : "Zhang",
        [ s+h ](){
            return "你好吗？";
        }
    };
    console.log(person.firstName);
    //结果：Zhang
    console.log(person.sayHello());
    //结果：你好吗？

Object.is( )函数

作用: 比较两个值是否严格相等，或者说全等。

Object.assign()函数

将源对象的属性赋值到目标对象上。对象的属性出现了相同的名字,后面的属性值会覆盖前面的属性值

 //目标对象
let target = {"a":1};
//源对象
let origin1 = {"b":2,"c":3};
//源对象
let origin2 = {"d":4,"e":5};
Object.assign(target,origin1,origin2);
console.log(target);
//结果 {a: 1, b: 2, c: 3, d: 4, e: 5}

Object.getPrototypeOf( )函数

作用：获取一个对象的prototype属性。

Object.setPrototypeOf()函数

//自定义一个Person类（函数）
    function Person(){
    }
    //函数都有一个预属性prototype对象
    Person.prototype = {
        //给prototype对象添加一个say方法
        say(){
            console.log('hello');
        }
    };
    //实例化Person对象，赋值给变量allen
    let allen = new Person();
    //调用类的say方法
    allen.say();
    //结果：打印出hello
    //使用Object.setPrototypeOf
    Object.setPrototypeOf(
            allen,
            {say(){console.log('hi')}
    });
    //再次调用类的say方法
    allen.say();
    //结果：打印出hi

javascript的面向对象

Javascript本身不是一种面向对象的编程语言,但可以模拟。

步骤：1、构造函数；2、给prototype对象添加属性和方法；3、实例化；4、通过实例化后的对象调用类的方法或者属性。

//构造函数模拟创建一个Dog类
   function Dog(name){
       this.name = name;
   }
   //把一些属性和方法，定义在prototype对象上
   Dog.prototype = {
       "type":"动物",
       "say":function(){
           alert("名字叫"+this.name);
       }
   };
   //实例化
   var dog = new Dog('旺财');
   //调用say方法
   dog.say();
   //结果：名字叫旺财

小结

ES6给我们带来的新特性包括：简洁的表示法，属性名方法可以是表达式、Object.is( ) 函数、Object.assgin( ) 函数、Object.setPrototypeOf( ) 函数，Object.getPrototypeOf() 函数。