ES6 字面量增强的写法 + 解构

1. 字面量增强的写法

属性的简写

var name = 'why' var age = 18

var obj1 = {
    name: name,
    age: age
}

console.log(obj1.name) //why
console.log(obj1.age) //18

使用属性的简写

var obj2 = {
    name,
    age
}
console.log(obj1.name) //why
console.log(obj1.age) //18

方法的简写

var obj1 = {
  foo: function() {
    console.log('obj1 foo')
  },
}

//简写方法
var obj2 = {
  foo() {
    console.log('obj2 foo')
  },
}

obj1.foo() //obj1 foo
obj2.foo() //obj2 foo

特别注意 下面的是绑定箭头函数，不是方法属性的简写

var obj1 = {
  bar: () => {
    console.log(this)
  }
}

计算属性名

var name = 'why'
var obj1 = {
  [name + 123]: 'hehehe',
  [18 + true]: 'is 18 ?'
}

console.log(obj1)
//{ '19': 'is 18 ?', why123: 'hehehe' }

2. 解构

数组结构，对象结构，函数参数结构

数组结构

普通结构

var names = ['abc', 'cba', 'nba']
var item1 = names[0]
var item2 = names[1]
var item3 = names[2]
console.log(item1, item2, item3)//abc cba nba
//结构数组
var [item11, item22, item33] = names
console.log(item11, item22, item33)//abc cba nba

只解构后面的元素

var names = ['abc', 'cba', 'nba']
var [, itemA, itemB] = names
console.log(itemA, itemB)//cba nba

var [, , itmeC] = names
console.log(itmeC)//nba

将后面的元素放到一个新的数组中

var names = ['abc', 'cba', 'nba']
var [item1, ...newNames] = names
console.log(item1)//abc
console.log(newNames)//[ 'cba', 'nba' ] 是一个数组

解构的多了,被解构的数组值不够用了？

var names = ["abc", "cba", "nba"];

//item4 不会被分配到names的值，默认为undefined
var [item1, item2, item3, item4] = names;
console.log(item1, item2, item3, item4);//abc cba nba undefined


//给item4添加一个默认值， 当item4没有分配到值时，自动赋值给item4
var [item1, item2, item3, item4 = 'aaa'] = names;
console.log(item1, item2, item3, item4);//abc cba nba aaa

对象的解构

普通对象解构

var obj = {
  name: 'why',
  age: 18,
  height: 1.88
}
//对象解构使用： {}
var {name, age, height} = obj
console.log(name, age, height)//why 18 1.88

对象解构不像数组解构那样看重顺序，对象解构更看重属性名字

在{}中通过属性名字对应，对obj进行精准的解构

var obj = {
  name: "why",
  age: 18,
  height: 1.88,
};
//对象解构使用： {}
var { age, height, name } = obj;
console.log(name, age, height);////why 18 1.88

对解构的属性名赋值新的名字

var obj = {
  name: "why",
  age: 18,
  height: 1.88,
};
//对象解构使用： {}
var { age, height, name: newNmae} = obj;
console.log(age, height,  newNmae);//18 1.88 why

//如果继续打印name，会报错
//console.log(name)

函数的参数解构

1.对象参数结构

const user = {
  name: "Alice",
  age: 25,
};
function printUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

printUser(user); // 输出：Name: Alice, Age: 25

2. 对象解构 + 默认值

function createUser({ name = "Guest", role = "user" } = {}) {
  console.log(`User: ${name}, Role: ${role}`);
}

createUser({ name: "Bob" });     // User: Bob, Role: user
createUser();                    // User: Guest, Role: user

3. 数组参数解构

function sum([a, b]) {
  return a + b;
}

console.log(sum([3, 4])); // 输出：7

4. 结合普通参数解构

function greet(name, { age, city }) {
  console.log(`Hi, I'm ${name}, ${age} years old from ${city}.`);
}

greet("Tom", { age: 30, city: "Shanghai" });
// 输出：Hi, I'm Tom, 30 years old from Shanghai.