IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6新语法(解构赋值、模板字符串) -> 正文阅读

[JavaScript知识库]ES6新语法(解构赋值、模板字符串)

一、解构赋值

????????解构赋值语法是一种JavaScript表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。
对象和数组逐个对应表达式,或称对象字面量和数组字面量,提供了一种简单的定义一个特定的数据组的方法。

var x = [1,2,3,4,5];

????????解构赋值使用了相同的语法,不同的是在表达式左边定义了要从原变量中取出什么变量。如下:

var x = [1,2,3,4,5];
var [y,z] = x;
console.log(y);
console.log(z);

打印的结果为:
在这里插入图片描述

1、解构数组

1、变量声明并赋值时的解构

如下:

var foo = ['wh','rc','xl'];
var [wh,rc,xl] = foo;
console.log(wh);
console.log(rc);
console.log(xl);

打印结果为:
在这里插入图片描述

2、变量先声明后赋值的解构

通过解构分离变量的声明,可以为一个变量赋值,如下:

var a,b;
[a,b] = [1,2];
console.log(a);
console.log(b)

打印结果为:
在这里插入图片描述

3、默认值

????????为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。如下:

var a,b;
[a=5,b=7] = [1];
console.log(a);
console.log(b);

打印结果为:
在这里插入图片描述

4、交换变量

在一个结构表达式中可以交换讲个变量的值。如下:

var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a);
console.log(b);

打印的结果为:
在这里插入图片描述

5、解析一个从函数返回的数组

例如,让[1,2]成为函数f()的输出值,可以使用解构在一行内完成解析。

function f(){
    return [1,2];
}
var a,b;
[a,b] = f();
console.log(a);
console.log(b);

打印的结果为:
在这里插入图片描述

6、忽略某些返回值

(1)我们可以忽略掉不需要的值,如下:

function f(){
    return [1,2,3];
}
var [a,,b] = f();
console.log(a);
console.log(b)

打印的结果为:
在这里插入图片描述
(2)还可以忽略全部返回值,如下:

[,,] = f();

7、将剩余数组赋值给一个变量

????????当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量,如下:

var [a,...b] = [1,2,3];
console.log(a);
console.log(b)

打印结果为:
在这里插入图片描述
注意:如果剩余元素右侧有逗号,会抛出SyntaxError,因为剩余元素必须是数组的最后一个元素。

2、解构对象

1、基本赋值

 var o = {p:42,q:true};
 var{p,q} = o;
 console.log(p);
 console.log(q);

打印结果为:
在这里插入图片描述

2、无申明赋值

一个变量可以独立于其申明进行解构赋值,如下:

 var a,b;
({a,b} = {a:1,b:2})
console.log(a);
console.log(b);

打印结果为:
在这里插入图片描述
????????需要注意的是,赋值语句周围的圆括号(...)在使用对象字面量无声明解构赋值时是必须的。
????????{a,b} = {a:1,b:2}不是有效的独立语法,因为左边的{a,b}被认为是一个块而不是对象字面量。然而({a,b} = {a:1,b:2})是有效的,正如var {a,b} = {a:1.b:2}。而且(...)表达式之前需要有一个分号,否则可能会被当做上一行中的函数执行。

3、给新的变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var o = {p:42,q:true};
var {p:foo,q:bar} = o;
console.log(foo);
console.log(bar);

打印结果为:
在这里插入图片描述

4、默认值

????????变量可以先赋予默认值当要提取的对象对应属性解析为undefined,变量就被赋予默认值,如下:

var {a = 10,b = 5} = {a:3};
console.log(a);
console.log(b);

打印的结果为:
在这里插入图片描述

5、给新的变量命名并提供默认值

????????一个属性可以同时满足(1)从一个对象解构,并分配给一个不同名称的变量(2)分配一个默认值,以防未解构的值是undefined。如下:

var {a:aa = 10,b:bb = 5} = {a:3}
console.log(aa);
console.log(bb);

打印结果为:
在这里插入图片描述

二、模板字符串

????????ES5标准中一般输出模板是通过字符串拼接的方式进行的。在ES6中可以通过模板字符串简化字符串的拼接,模板字符串通过反引号来表示"``",如果要嵌入变量通过"${ 变量名 }"来实现:

  let arr = [
   {
        name: '小王',
        age: 20
    },
    {
        name: '小冉',
        age: 23
    },
    {
        name: '小熊',
        age: 25
    }
]
let str = "";
for(let i=0;i<arr.length;i++){
    str += `姓名是${ arr[i].name },年龄是${ arr[i].age }岁\n`;
}
console.log(str)

打印结果为:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-08 13:54:34  更:2022-01-08 13:54:38 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 12:51:56-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码