说明
1.数组解构
在es6之前，想要获取数组中的元素只能通过下标， es6中可以如下做
let arr = [1, 2, 3]; const [x, y, z] = arr; console.log(x, y, z); //输出1,2,3
如果是下面情况，就只会输出1 2
const [x, y] = arr; console.log(x, y); //输出1,2
当然，如果你只想拿其中的一个元素也是可以
const [a] = arr; console.log(a); // 输出1
2.对象解构
ES6中可以对对象进行解构，可以将对象中属性解构为变量，也可以对其属性进行取别名
const person = { name: "lili", age: 21, language: ["c", "c++", "java"] } let { name, age, language } = person; console.log(name, age, language); let { name: l, age: g, language: h } = person console.log(l, g, h);
const也是也可以的
// 解构 const {name, age, language} = person; console.log(name, age, language); // jack, 21, ['java','js','css'] // 取别名 const {name:abc, age, language} = person; console.log(abc, age, language); // jack, 21, ['java','js','css']
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 数组解构 let arr = [1,2,3]; let [a,b,c] = arr; console.log(a,b,c); // 1,2,3 // 解构对象 let person = { name: 'jack', age: 21, language: ['java','js','css'] }; // const {name, age, language} = person; // console.log(name, age, language); // jack, 21, ['java','js','css'] // 取别名 const {name:abc, age, language} = person; console.log(abc, age, language); // jack, 21, ['java','js','css'] // 字符串扩展 let str = "hello.vue"; console.log(str.startsWith("hello")); // true console.log(str.endsWith(".vue")); // true console.log(str.includes("e")); // true // 字符串模板 let ss = `<div> <span>hello world</span> </div>`; console.log(ss); // 字符串插入变量和表达式。变量名写在 ${}中，${}中可以放入JavaScript表达式 function func() { return "this is a function" } let info = `我是${abc}, 今年${age}了, 我想说： ${func()}`; console.log(info); </script> </body> </html>
