一、解构表达式
①数组解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//数组解构
let arr = [1,2,3];
//以前我们想获取其中的值,只能通过下角标
let a=arr[0];
let b=arr[1];
let c=arr[2];
console.log(a,b,c);
//ES6可以这样
const [x,y,z] = arr;//x,y,z将与arr中的每个位置对应来取值
//然后打印
console.log(x,y,z);
</script>
</body>
</html>
②对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对象解构
const person = {
name: "jack",
age: 20,
language: ['java', 'js', 'css']
}
//解构表达式获取值,将person里面每一个属性和左边对应赋值
// const name = person.name;
// const age = person.age;
// const language = person.language;
//等价于下面的对象解构
const { name, age, language } = person;
//可以分别打印
console.log(name, age, language);
//扩展:如果想要将name的值赋值给其他变量,可以如下,nn,aa,ll是新的变量名
const { name: nn, age: aa, language: ll } = person;
console.log(nn, aa, ll);
</script>
</body>
</html>
二、字符串扩展
①几个新的API
ES6为字符串扩展了几个新的API:
‘includes()’:返回布尔值,表示是否找到了参数字符串。
‘startsWith()’:返回布尔值,表示参数字符串是否在原字符串的头部。
‘endsWith()’:返回布尔值,表示参数字符串是否在原字符串的尾部。
let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true
②字符串模板
模板字符串相当于加强版的字符串,用反引号`,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
//1.多行字符串
let ss=`<div>hello world
</div>`;
console.log(ss);
//2.字符串插入变量和表达式。变量名写在${}中,${}中可以放入JavaScript表达式
let name="张三";
let age=18;
let info=`我是${name},今年${age+10}了`;
console.log(info);
//3.字符串中调用函数
function fun(){
return "这是一个函数"
}
let sss=`哈哈哈,${fun()}`;
console.log(sss);//哈哈哈,这是一个函数