ES6-数组和对象的解构以及应用

解构Destructuring

• ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring
  • 解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中
• 我们可以划分为：数组的解构和对象的解构
• 数组的解构：
  • 基本解构过程
  • 顺序解构
  • 解构出数组：…语法
  • 默认值
• 对象的解构：
  • 基本解构过程
  • 任意顺序
  • 重命名
  • 默认值

数组解构

var names = ["草莓","汤姆","班花姐姐","小满","超级满","挖机哥"]

//数组的解构(不使用解构方式)
// var name1 = names[0]
// var name2 = names[1]
// var name3 = names[2]
// var name4 = names[3]
// var name5 = names[4]
// var name6 = names[5]
//数组使用解构方式(会自动从头按顺序填入)，[]是固定格式
var [name1,name2,name3,name4,name5,name6] = names
console.log(name1,name2,name3,name4,name5,name6);//草莓 汤姆 班花姐姐 小满 超级满 挖机哥

//顺序问题：严格的顺序(对于我们中间不想要的属性需要留出位置)
var [name1, ,name3, ,name5,name6] = names
console.log(name1,name3,name5,name6);//草莓 班花姐姐 超级满 挖机哥

//解构出数组(前面两个单独放，后面4个我希望放在一个数组里面)，使用剩余
var [name1,name2,...newNames] = names
console.log(name1,name2,newNames);//草莓 汤姆 [ '班花姐姐', '小满', '超级满', '挖机哥' ]

//解构的默认值(如果数组里面有undefined，解构不出来的时候，可以给出默认值)，测试不生效，这里我跟coderwhy的情况发生了不一致的情况，需要明确的在某一个内容上进行赋值默认值，比如现在下面是obj2为undefined，那就需要将默认值写在obj2那里
var obj = ["小满",undefined,"康老师"]
var [obj1,obj2="小余",obj3="default"] = obj
console.log(obj1,obj2,obj3);

对象解构

var obj = {name:"小余",age:18,height:1.75}
//对象的解构(不使用解构方式)
// var name = obj.name
// var age = obj.age
// var height = obj.height
//对象使用解构方式(基本使用)，使用{}
var {name,age,height} = obj
console.log(name,age,height);//小余 18 1.75

//顺序问题：对象的解构是没有顺序的，根据key解构，也就是说解构的key是跟对象里面的键一一对应的。要是写错了，可就undefined了，不需要按顺序就意味着我们不用像数组解构那样要给中间不想要的属性留出空位了
var {age,height,name} = obj
console.log(age,height,name);//18 1.75 小余

//对变量进行重命名(这里对身高height部分进行重命名)，然后我们在使用的时候，就可以使用新的命名了
var {age,height:xiaoyu_height,name} = obj
console.log(xiaoyu_height);//1.75

//默认值
var {
    name,
    age,
    height,
    address="福建"
} = obj

console.log(name,age,height,address);//小余 18 1.75 福建，我们对address设置了默认值为福建

(掌握)补充-函数对象的原型和Function的关系

//new Function()
//foo.__proto__ === Function.prototype
function foo(name,age){
    console.log(this,name,age);
}

//1.对象中的某些属性和方法是来自Function.prototype
//test.__proto__ === Function.prototype
function test(){}

//foo当作一个对象，获取apply方法
foo.call("abc",["小余",20])
console.log(Function.prototype.call);//ƒ call() { [native code] }
console.log(Function.prototype.apply);//ƒ apply() { [native code] }，native意思为原生

//2.在Function.prototype中添加的属性和方法，可以被所有的函数获取
Function.prototype.info = "你好，小余"
console.log(test.info);//你好，小余
console.log(foo.info);//你好，小余