1.ES6新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
const声明常亮,不可改变
2.变量的解构赋值
(1)数组的解构赋值:
以前,为变量赋值,只能直接指定值。
var a = 1;
var b = 2;
var c = 3;
ES6允许写成下面这样。
var [a, b, c] = [1, 2, 3];
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。(如果解构不成功,变量的值就等于undefined
。)
var [foo] = [];
var [bar, foo] = [1];
以上两种情况都属于解构不成功,foo
的值都会等于undefined
。
(2)对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined
。
(3)字符串解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
(4)函数解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
上面代码中,函数add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x
和y
。对于函数内部的代码来说,它们能感受到的参数就是x
和y
。
下面是另一个例子。
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
函数参数的解构也可以使用默认值。
3.字符串扩展
(1)ES6为字符串添加了遍历器接口,使得字符串可以被for...of
循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
(2)repeat
方法返回一个新字符串,表示将原字符串重复n
次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
(3)模板字符串
传统的JavaScript语言,输出模板通常是这样写的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
(4)模板编译
下面,我们来看一个通过模板字符串,生成正式模板的实例。
var template = `
<ul>
<% for(var i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%...%>
放置JavaScript代码,使用<%= ... %>
输出JavaScript表达式。
ES6详解的更多相关文章
-
ES6详解八:模块(Module)!--各种导入导出方法
[-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结 modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...
-
ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
-
[js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
-
[js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
-
Es6主要特征详解
一.简介 本文将对es6的最佳特性进行分享和讲解.es6也称ES6/ECMAScript2015,在2015年诞生,但是目前实际开发中还很多用的是ES5(2009年),原因就是很多的浏览器不支持新的语 ...
-
JavaScript ES6 新特性详解
JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const , let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...
-
es6入门4--promise详解
可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...
-
【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
-
详解 ES6 Modules
详解 ES6 Modules 对于新人朋友来说,想要自己去搞定一个ES6开发环境并不是一件容易的事情,因为构建工具的学习本身又是一个非常大的方向,我们需要花费不少的时间才能掌握它. 好在慢慢的开始有大 ...
随机推荐
-
BZOJ的两道osu概率DP easy与osu
坑 http://blog.csdn.net/CreationAugust/article/details/49516415 http://blog.csdn.net/braketbn/article ...
-
classpath: VS classpath*:
同名资源存在时,classpath: 只从第一个符合条件的classpath中加载资源,而classpath*: 会从所有的classpath中加载符合条件的资源 classpath*:需要遍历所有的 ...
-
Sqlserver数据库总结
由于公司项目需要这段时间一直在做有关于数据库方面的工作.趁这段时间有空,对数据库方面的知识进行一个梳理和归纳,以便以后需要时,查看起来方便. 使用的数据库主要有ORACLE10g和Sqlserver2 ...
-
iOS开发网络篇—网络编程基础(二)
下面叙述的是关于几个必须要知道的iOS网络编程入门级别的要点: 1.客户端如何找到连接的服务器 客户端通过URL找到想要连接的服务器 2.什么是URL URL的全称是Un ...
-
android读取data下得数据
拥有Root权限的情况 adb shell su cd /data/data/com.package 然后就可以直接读取 没有Root的情况 adb shell run-as com.package ...
-
AndroidApplication Fundamentals(Android应用基础)
AndroidApplication Fundamentals(Android应用基础) Android应用采用Java编程语言来编写,AndroidSDK工具编译我们的代码,连同任何数据和资源文件一 ...
-
Role Object(角色对象)
Role Object(角色对象) 索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Role Object 的示例实现. 意图 通过明确地附加角色对象到目标对象中,以使对象可以 ...
-
B趣味求和
编写一个程序,求Sn=a+aa+aaa+--+aa-aaa(有n个a)的值,其中a是一个数字. Input 输入数据含有不多于50组的数据,每组数据由两个正整数(0<a, n < 10)组 ...
-
Linux pip 命令无法使用问题
Linux pip 命令无法使用问题 pip 命令无法使用,说明 pip 没有安装,我们可以使用终端命令进行安装. sudo apt-get installl python-pip 安装成功之后,可以 ...
-
Mac使用终端安装Homebrew(brew)
Homebrew简称brew,OSX上的软件包管理工具,在Mac终端可以通过brew安装.更新.卸载软件. 1.打开终端直接输入下面指令回车: // ruby -e "$(curl -fsS ...