【ES6】对象、函数、数组的扩展

对象的扩展

• ES6允许直接写入变量和函数，作为对象的属性和方法。这时，属性名为变量名, 属性值为变量的值。

let name = 'tom';
let age = 12;
let obj = {
    name,
    age,
    gender:"男",
    sayname(){
        console.log("Hello!")
    }
}
//等同于...
let obj = {
    name:'tom',
    age:12,
    gender:'男',
    sayname:function(){
        console.log("Hello!")   
    }
}

• 属性名表达式。（定义对象时，可以把表达式放在方括号内）。

let test = 'hello';
let obj = {
    name:'tom',
    test,
    //获取test的变量值当做属性名
    [test]:'123'
}
console.log(obj)    //{ name: 'tom', test: 'hello', hello: '123' }

• 函数的name属性，返回函数名。

function test(){ }
console.log(test.name)  //test

let p = {
    test(){}
}
console.log(p.test.name)  //test

• Object.is(value1,value2)： 判断两个值是否相等，与===类似，但不完全相同。

console.log(Object.is(10,10))   //true
console.log(+0 === -0)          //true
console.log(Object.is(+0,-0))   //false
console.log(NaN === NaN)        //false
console.log(Object.is(NaN,NaN)) //true  

• Object.assign(target,o1,o2…)： 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象（target）。

let obj1 = {
    name:'tom'
}
let obj2 = {
    name:'larry',
    age:12
}
let obj3 = {
    gender:'男',
    sayname(){
        console.log('hello')
    }
}
let target = {}
Object.assign(target,obj1,obj2,obj3)
console.log(target) //{ name: 'larry', age: 12, gender: '男', sayname: [Function: sayname] }

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

我们也可以自己定义一个myAssign() 方法来实现对象的合并。

let obj1 = {
    name:'tom'
}
let obj2 = {
    name:'larry',
    age:12
}
let obj3 = {
    gender:'男',
    sayname(){
        console.log('hello')
    }
}
let target = {}
function myAssign(target,...temp){
    temp.forEach(function(item){
        for(var key in item){
            target[key] = item[key]
        }
    })
    return target
}
myAssign(target,obj1,obj2,obj3)
console.log(target)	//{ name: 'larry', age: 12, gender: '男', sayname: [Function: sayname] }

• Object.keys(obj)、Object.values(obj)、Object.entries(obj)： 分别返回由参数对象的属性名、属性值、键值对组成的数组。

let obj = {
    name:'tom',
    age:12,
    gender:'男'
}
console.log(Object.keys(obj))       //[ 'name', 'age', 'gender' ]
console.log(Object.values(obj))     //[ 'tom', 12, '男' ]
console.log(Object.entries(obj))    //[ [ 'name', 'tom' ], [ 'age', 12 ], [ 'gender', '男' ] ]

函数的扩展

• ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x,y='World') { 
	console.log(x,y,log.length);
}
log()   //undefined World 1

通常情况下，定义了默认值的参数，应该是函数的尾参数。函数的length属性，将返回没有指定默认值的参数个数。

• 参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x,y=5}) { 
	console.log(x,y); 
}
foo({})          // undefined 5 
foo({x:1})       // 1 5 
foo({x:1,y:2})   // 1 2

• 箭头函数。ES6 允许使用“箭头”（=>）定义函数。

let test = (a,b)=>console.log(a+b)
//等价于...
let test = function(a,b){
    console.log(a+b)
}
test(1,2)   //3

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

let obj = {
    name:'tom',
    sayname(){
        console.log(this)
    }
}
//调用对象中的方法
obj.sayname()   //{ name: 'tom', sayname: [Function: sayname] }

let obj = {
    name:'tom',
    sayname:()=>console.log(this)  
}
obj.sayname()   //{}

箭头函数不能用于构造函数，没有内部属性arguments。

let test = function(){
    console.log(arguments)
}
test()  //[Arguments] {}

let test = ()=>{
    console.log(arguments)
}
test()

数组的扩展

• 扩展运算符（…）。

let arr = [1,2,3]
console.log(...arr) //1 2 3

console.log(...'hello') //h e l l o
console.log([...'hello']) //[ 'h', 'e', 'l', 'l', 'o' ]

• Array.from()： 将类数组对象和可遍历的对象转化为数组。

let obj = {'0':'hello','1':'world','2':'nice',length:3}
console.log(Array.from(obj))    //[ 'hello', 'world', 'nice' ]
console.log(Array.from('hello'))    //[ 'h', 'e', 'l', 'l', 'o' ]

• Array.of()： 将一组值转换为数组。

console.log(Array.of(1,2,3,4))  //[ 1, 2, 3, 4 ]
console.log(Array.of(true,false,true))  //[ true, false, true ]
console.log(Array.of('hello','world','nice'))  //[ 'hello', 'world', 'nice' ]

Array.of()方法的主要目的，是弥补数组构造函数Array()的不足——因为参数个数的不同，会导致Array()的行为有差异。

• find()： 遍历数组，拿到第一个符合条件的值并返回，如果没有符合条件的值，返回undefined。

let arr = [12,3,2,4,56,7]
let res = arr.find((item,index,arr)=>{
    return item < 10
})
console.log(res)    //3

• findIndex()： 遍历数组，拿到第一个符合条件的值的索引并返回，如果没有符合条件的值，返回-1。

let arr = [12,3,2,4,56,7]
let res = arr.findIndex((item,index,arr)=>{
    return item < 10
})
console.log(res)    //1

• fill()： 使用固定的值填充数组。

let arr = []
arr.length = 5
let res = arr.fill(10)  
console.log(res)    //[10, 10, 10, 10, 10]

• entries()，keys()，values()： 遍历数组，返回一个遍历器对象，可以用for…of循环进行遍历。

let arr = [12,42,3,43,56,4]
let keys = arr.keys()
let values = arr.values()
let entries = arr.entries()
for(let key of keys){
    console.log(key)    //0 1 2 3 4 5
}
for(let value of values){
    console.log(value)   //12 42 3 43 56 4
}
for(let [key,value] of entries){
    console.log(key,value)    
}

• includes()： 判断数组中是否包含给定值，返回一个布尔值。

let arr = [1,2,3,4]
let res = arr.includes(5)
console.log(res)    //false