新疆建设工程信息网联系电话_上海百度seo公司_学生个人网页制作教程_有哪些网页设计公司

一、模板字符串

ES6模板字符串用反引号 `` 标识，${}这样的方式简化了字符串中嵌入变量的写法。

           const oBox = document.querySelector('.box');let text = "hello,es6!";//传统写法//let htmlTel = "<p>" + text + "</p>";//模板字符串写法let htmlTel = `<p>${text}</p>`;oBox.innerHTML = htmlTel;

二、解构赋值

解构赋值是对赋值运算符的一种扩展，通常是针对数组和对象进行操作。优点是使得代码书写简洁易读性高。

2.1、数组解构

在以前，为变量赋值，只能直接指定值

            let a=1;let b=2;let c=3;

ES6允许我们这样写:

         let [a,b,c]=[1,2,3];

如果解构不成功，变量的值就等于undefined,例如：

	let [a,b,c,d]=[1,2,3];

2.2、对象解构

          let book={name:'ES入门学习',price:'20.99'}let{name,price}=book;

对象的解构赋值时，可以对属性忽略和使用剩余运算符

            let obj = {a: {name: '张三'},b: [],c: 'hello world'}//可忽略 忽略b,c属性let {a} = obj;console.log(a);

2.3、函数参数解构

        function demo([x,y]) {return x+y;}    console.log(demo([1,3]));

2.4、解构用途

2.4.1、交换变量值

            let a=2;let b=5;[a,b]=[b,a];

上面代码交换变量a和b的值，这样的写法简单易读，但是要注意变量重复声明问题。

2.4.2、从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

        function demo() {return [1,2,3]} let [a,b,c]=demo();

2.4.3、提取JSON数据

解构赋值对提取 JSON 对象中的数据，尤其有用

            let jsonData = {id: 42,status: "OK",data: [867, 5309]};let { id, status, data: number } = jsonData;console.log(id, status, number);