ES6-对象、函数、数组的扩展

对象的扩展

ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

ES6允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

let name ='tom'
let age =12
let obj = {
   name,
   age
}
console.log(obj)  //{name:'tom',age:12}   

let propKey ='foo';
let obj ={[propKey]:true,['a'+'bc']:123};
console.log(obj) //{foo:true,abc:123}

函数的name属性，返回函数名。在下面的代码中，获取的变量的值作属性名。

let text='hello'
let obj ={
     age:12,
     text,
     [text]:123
 }
 console.log(obj) // { age: 12, text: 'hello', hello: 123 }

1) Object.is() 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

let a =10
let b =20
console.log(Object.is(a,b));  //false
console.log(a===b) //false 

不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

let a =-0
let b =+0
console.log(Object.is(a,b));  //false
console.log(a===b) //true

let a =NaN
let b =NaN
console.log(Object.is(a,b));  //true
console.log(a===b) //false
console.log(a==b) //false

2) Object.assign(target,o1,o2…) 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

let a ={age:12}
let b ={age:14,name:'tom'}
let c={
     text(){

     }
 }
let target ={}
Object.assign(target,a,b,c)
console.log(target) //{ age: 14, name: 'tom', text: [Function: text] }

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

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。

let a = {age:12}
let b = {age:14,name:'tom'}
let c = {
    test(){

    }
}
let target = {}
function assing (target,...item){
//    console.log(item)
   item.forEach(function(i){//对数组item进行遍历
       //console.log(i)  //a,b,c三个对象
         for (key in i){
            //  console.log(key)
             target[key]=i[key]
         }
   })
   return target
}
let res =assing(target,a,b,c)
console.log(res)  //{ age: 14, name: 'tom', test: [Function: test] }

3) Object.keys(obj) 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

4) Object.values(obj) 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值

5) Object. entries(obj) 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

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

箭头函数

特点：

1）箭头函数不可以作为构造函数，所以不可以使用new命令，否则会抛出错误

var f = v => v;  等价于
var f = function(v) { 
	return v; 
};

2）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

3）如果函数的代码体内只有一句代码,那么大括号也可以省略

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

4）内部没有arguments对象，可以用Rest参数代替
5）内部没有this,this指向的上一层的作用域的this

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

数组的扩展

1）扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3,4])//1 2 3 4

let arr=["a","b","c"]
let [...test] =arr
console.log(test)//[ 'a', 'b', 'c' ]

let {...obj} ={name:"tom",age:12}
console.log(obj) //{ name: 'tom', age: 12 }

函数的调用

下面的代码将整个arr看成一个整体赋值给了a, 这样b，c的结果就成了undefined

let test =(a,b,c) =>{
    console.log(a,b,c)
}
let arr=[1,2,3]
test(arr)//[ 1, 2, 3 ] undefined undefined
test(...arr)//1 2 3

将字符串转化为数组

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

let str=1234.234+''
console.log(str.split('.')[0]) //1234 取出小数点前的数字

let arr=['a','b',2,3,4]
console.log(arr.join('%'))//a%b%2%3%4 

let obj={
     name:'tom',
     age:12
 }
 let obj2 ={
    ...obj,
    gender:'male'
 }
console.log(obj2)//{ name: 'tom', age: 12, gender: 'male' }

2）Array.from() 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; 
console.log(Array.from(arrayLike))  //[ 'a', 'b', 'c' ]

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

let arr = new Array(1,2,3,true,'a')
console.log(arr)  //[ 1, 2, 3, true, 'a' ]

let arr =new Array(3)
console.log(arr.length)  //3   数组的长度

3）Array.of() 用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

console.log(Array.of(3))  // [ 3 ]
console.log(Array.of(3,'a',true))  //[ 3, 'a', true ]

4）find() 只返回一个符合条件的值,如果没有符合条件的成员，则返回undefined ,find接受一个回调函数作为参数,回调函数 (当前值 当前所处位置 原数组)

let arr=[5,6,3,8,9,1]
let  res =arr.find((item,index,arr)=>{
   return item > 5
})
console.log(res)  //6  

5)findIndex() 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

let res =arr.findIndex((item)=>{
    return item>5
})
console.log(res)  //1  返回6的下标索引1

6)fill() 方法使用给定值，填充一个数组，fill方法会改变原数组。

let arr= [1,2,3,4]
let res =arr.fill(9)
console.log(res)  //[ 9, 9, 9, 9 ]
console.log(res===arr)

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

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

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

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

7）includes() 该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

let arr=[4,5,6,7,1,2]
console.log(arr.includes(10))  //false
console.log(arr.includes(1))  //true