ES6学习模板字符串、解构赋值(三)

这里写目录标题

一、模板字符串

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

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

二、解构赋值

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

2.1、数组解构

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

js 复制代码
            let a=1;
            let b=2;
            let c=3;

ES6允许我们这样写:

js 复制代码
         let [a,b,c]=[1,2,3];

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

js 复制代码
	let [a,b,c,d]=[1,2,3];

2.2、对象解构

js 复制代码
          let book={
                name:'ES入门学习',
                price:'20.99'
            }
            let{name,price}=book;

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

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

2.3、函数参数解构

js 复制代码
        function demo([x,y]) {
            return x+y;
        }    
        console.log(demo([1,3]));

2.4、解构用途

2.4.1、交换变量值

js 复制代码
            let a=2;
            let b=5;
            [a,b]=[b,a];

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

2.4.2、从函数返回多个值

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

js 复制代码
        function demo() {
            return [1,2,3]
        } 
        let [a,b,c]=demo();

2.4.3、提取JSON数据

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

js 复制代码
            let jsonData = {
                id: 42,
                status: "OK",
                data: [867, 5309]
            };
            let { id, status, data: number } = jsonData;
            console.log(id, status, number);
相关推荐
前端 贾公子8 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆12 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山20 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45329 分钟前
css模块化以及rem布局
前端·javascript·css
Chef_Chen35 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
天水幼麟7 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟9 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
沧海一笑-dj9 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水10 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js