ES6--变量解构赋值和模板字符串及对象的简写方式

淩亂°似流年 2022-12-06 04:16 176阅读 0赞

变量的解构赋值：从对象或数组中提取数据，并赋值给变量（多个）  
对象的解构赋值：let \{n,a\} = \{n:‘tom’,a:12\}  
数组的解构赋值：let \[a,b\] = \[1,‘atone’\];  
用途：给多个形参赋值

例：

let obj={name:"xiaozhan",age:29};
            // let name = obj.name;
            // let age = obj.age;打开这两句话会报错，重复定义
    
            let {name,age} = obj;//let里面的属性是obj里面有的，可以少写
    
            console.log(name,age);
            let myarr = [1,3,5,"abc",true];
            // let[a,b,c,d,e] = myarr;全取
            // let[a,b] = myarr;//取头两个
            let[,,a,b]= myarr;//取三、四个
    
            console.log(a,b);
            //应用
            function foo({name,age}){//{name,age} = obj;
                console.log(name,age);
            }
            foo(obj);

模板字符串：简化字符串的拼接  
模板字符串必须要用\`\`包含  
变化的部分使用$\{XXX\}定义  
例：

let obj1={name:"wt",age:21};
            let str = `我的名字叫：${obj1.name},我今年年龄是：${obj1.age}`;
            console.log(str);
               /*
            对象的简写方式：省略同名属性值，省略方法的function
            let x=1;
            let y=1;
            let point = {
                x,//this.x = x;
                y,//this.y = y;
                setX(x){this.x = x};//setX:function(x){};
            };
            */
            let username1="LLL";
            let age1=22;
            let obj2 = {
                // username1 = username1,
                // age1 = age1,
               username1,
               age1,
            //    getName:function(){
            //     return this.username1;
            //    }
                getName(){
                    return this.username1;
                } 
            };
            console.log(obj2);
            console.log(obj2.getName());

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 - 变量的解构赋值

数组的解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)： // 请先看一段代码 le

太过爱你忘了你带给我的痛/ 2023年10月11日 12:47/ 0 赞/ 54 阅读

相关【谷粒学院】008-ES6介绍、变量和常量、解构赋值、模板字符串、声明对象简写、定义方法简写、对象拓展运算符、箭头函数

目录一、介绍 1、概述 2、ECMAScript 和 JavaScript 的关系 3、ES6 与 ECMAScript 2015 的关系二、变量与常量 1

清疚/ 2023年10月05日 15:19/ 0 赞/ 9 阅读

相关 ES6--变量解构赋值和模板字符串及对象的简写方式

变量的解构赋值：从对象或数组中提取数据，并赋值给变量（多个）对象的解构赋值：let \{n,a\} = \{n:‘tom’,a:12\} 数组的解构赋值：let \[

淩亂°似流年/ 2022年12月06日 04:16/ 0 赞/ 177 阅读

相关 ES6基础：变量的解构赋值

ES6基础系列之变量的解构赋值 > ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。这种方式的出现大大提高了代码的扩展性前言

浅浅的花香味﹌/ 2022年12月02日 15:12/ 0 赞/ 194 阅读

相关 ES6:变量的解构赋值

本内容摘自阮一峰先生的《ECMAScript6入门》书中第三章 -- 变量的解构赋值。变量的解构赋值用途很多。（1）交换变量的值 let x = 1;

以你之姓@/ 2022年06月14日 01:54/ 0 赞/ 216 阅读

相关 ES6变量的解构赋值

数组的解构赋值基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接

以你之姓@/ 2022年06月08日 00:29/ 0 赞/ 229 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 437 阅读

相关 ES6基础-变量的解构赋值

![file][] 作者 | Jeskson来源 | 达达前端小酒馆解构赋值：数组的解构赋值，对象的解构赋值，字符串的解构赋值，数值与布尔值的解构赋值，函数参数的解构

偏执的太偏执、/ 2021年08月19日 13:03/ 0 赞/ 432 阅读

相关 es6 变量的解构赋值

ES6 变量的解构赋值作用:将对象/数组中的值，同时赋值给多个变量语法: 解构对象: let{属性名,..}=对

川长思鸟来/ 2021年07月24日 23:39/ 0 赞/ 425 阅读

相关 ES6 变量的解构赋值

基本用法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。 v

怼烎@/ 2021年06月24日 16:11/ 0 赞/ 486 阅读