JS:ES6-3 解构赋值与模板字符串
什么是解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
代码演示及相关说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解构赋值</title>
</head>
<body>
<script>
// ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
// 1、数组的解构赋值
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4;
// 这就相当于我们声明4个变量a,b,c,d,其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
name : "大哥",
age : 22,
sex : "男",
xiaopin : function(){ // 常用
console.log("我会演小品!");
}
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用
</script>
</body>
</html>
应用场景: 频繁使用对象方法、数组元素,就可以使用解构赋值形式;
模板字符串 :增强版的字符串,用反引号(`)标识,特点:
字符串中可以出现换行符; 可以使用 ${xxx} 形式引用变量;
代码演示及相关说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 声明字符串的方法:单引号('')、双引号("")、反引号(``)
// 声明
let string = `我也一个字符串哦!`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =
`<ul>
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
</ul>`;
console.log(str);
// 2、可以使用 ${xxx} 形式引用变量
let s = "大哥";
let out = `${s}是我最大的榜样!`;
console.log(out);
</script>
</body>
</html>
应用场景: 当遇到字符串与变量拼接的情况使用模板字符串;
JS:ES6-3 解构赋值与模板字符串相关推荐
- ES6新特性总结(2)解构赋值、模板字符串、Symbol
ES6新特性总结(2)解构赋值.模板字符串.Symbol 1 解构赋值 1.1 Spread / Rest 操作符 1.2 数组的解构 1.3 对象的解构 1.4 解构的默认值和参数的解构 2 模板字 ...
- ES6基础语法(let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符)(一)
系列文章目录 第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...
- ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
- ES6常用解构赋值有哪几种?
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
- ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
- es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
- ES6语法---解构赋值
解构赋值概念 按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构 正常 ...
最新文章
- HDU4857拓扑排序模版题
- MSDN-9月杂志推荐
- 计算机虚拟建造创新实践英语,《信息技术促进初中英语学科教学的实践研究》结题报告...
- 高手整理培训笔记(服务篇)
- endnote使用经验总结
- 【五校联考6day2】yi
- Eclipse Memory Analyzer 安装(Update Site: http://download.eclipse.org/mat/1.3.1/update-site/ )
- 白鹭引擎解决微信小游戏切换背景音乐无法播放的问题。
- 一对多的两个表,查询主表的信息和主表在子表中的记录条数
- JavaScript数据类型之Number
- selenium RC优化代码3
- 转速器盘课程设计 大批量
- emouse思·睿—评论与观点整理之四
- jeeSite起步初始化数据库安装 (my.ini)
- PhpSpreadsheet 设置常用格式
- Linux系统下为WPS添加字体,实现WPS输入中文
- 【RuoYi-Vue-Plus】学习笔记 02 - OSS模块(二)之文件上传(使用MinIO基于Win10环境)
- 光标右侧小圆圈一直闪,输入法一直不停中英文切换
- Python判断节假日 chinese_calendar
- 限电模块的在学生宿舍管理中的功能要求
热门文章
- nginx 日志格式设置 和 负载均衡下 获取真实ip
- 解决Android 输入法InputMethodService 显示时让原Activity大小计算错误问题
- android sqlite 数据库中使用的类型
- Ripple(Glance)
- java对象初始化顺序的简单验证
- [置顶] Ubuntu 12.04中文输入法的安装
- THE PRESENT (礼物)
- word无所不能之在word中浏览网页看电影
- VTP 的TRUNK 协议
- Android项目同步,如何通过gradle任务同步Android项目?