开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-es6 语法-解构模板和声明对象】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11300
前端技术-es6 语法-解构模板和声明对象
内容简介:
一、数组解构
二、对象解构
三、模板字符串
四、声明对象简写
一、数组解构
<script>
//传统写法
let a=1,b=2,c=3
console.log(a, b, c)
//es6写法
let [x,y,z] = [10,20,30]
console.log(x, y, z)
</script>
执行: 点击右键 Open with Live Server
1 2 3
10 20 30
二、对象解构
1.<script>
//定义对象
let user = { "name" : "lucy" , "age" : 20}
//传统从对象里面获取值
let name1 = user. name
let age1 = user. age
console. log(name1+ "==" +age1)
</script>
执行: 点击右键 Open with Live Server
lucy==20
2.<script>
//定义对象
let user = { "name" : "lucy" , "age" : 20}
//传统从对象里面获取值
let name1 = user. name
let age1 = user. age
console. log(name1+ "==" +age1)
//es6获取对象值
let {name,age} = user //结构的变量必须是user中的属性
console.log(name+"**"+age)
</script>
执行: 点击右键 Open with Live Server
lucy**20
三、模板字符串
模板字符串相当于加强版的字符串,用反引号 ` ,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
1.<script>
//使用"符号实现换行
let str1 = `hello,
es6 demo up! `
console. log(str1)
</script>
执行: 点击右键 Open with Live Server
hello,
es6 demo up!
2.<script>
//在 ` 符号里面使用表达式获取变量值
let name = "Mike"
let age = 20
let str2 = `hello,${name},age is ${age+1} `
console.log(str2)
</script>
执行: 点击右键 Open with Live Server
hello,Mike,age is 21
3.<script>
//在 ` 符号调用方法
function f1() {
return "hello f1"
}
let str3 = `demo, ${f1()} `
console.log(str3)
</script>
执行:
点击右键 Open with Live Server
demo,hello f1
四、声明对象简写
<script>
const age = 12
const name = "Amy"
//传统方式定义对象
const person1 = {age: age, name: name}
console.log(person1)
//es6定义变量
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"]
</script>
