ES6

详细参考页面

简介

  • ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。一般来说,这两个词是可以互换的。

let命令

  • ES6新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
} a // ReferenceError: a is not defined.
b // 1
  • let命令避免了循环变量泄露为全局变量
var s = 'hello';

for (var i = 0; i < s.length; i++) {
console.log(s[i]);
} console.log(i); // 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

变量的解构赋值

  • ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  • 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3 let [ , , third] = ["foo", "bar", "baz"];
third // "baz" let [x, , y] = [1, 2, 3];
x // 1
y // 3 let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4] let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // [] 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
  • 解构赋值允许指定默认值。
var [foo = true] = [];
foo // true [x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

模版字符串

传统的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!
`);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is
not legal.` console.log(`string text line 1
string text line 2`); // 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

Number全局对象

ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。

函数变化

  • ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
} log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
  • 参数默认值可以与解构赋值的默认值,结合起来使用。
function foo({x, y = 5}) {
console.log(x, y);
} foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
  • ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0; for (var val of values) {
sum += val;
} return sum;
} add(2, 5, 3) // 10
  • 箭头函数
    ES6允许使用“箭头”(=>)定义函数。
var f = () => 5;
// 等同于
var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
}; const full = ({ first, last }) => first + ' ' + last; // 等同于
function full(person) {
return person.first + ' ' + person.last;
}

扩展运算符

扩展运算符(spread)是三个点(…)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

function push(array, ...items) {
array.push(...items);
} function add(x, y) {
return x + y;
} var numbers = [4, 38];
add(...numbers) // 42

扩展运算符的应用

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more] var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e']; // ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ] // ES5
a = list[0], rest = list.slice(1)
// ES6,与解构赋值结合
[a, ...rest] = list //函数的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields);

对象

  • ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
var birth = '2000/01/01';

var Person = {

  name: '张三',

  //等同于birth: birth
birth, // 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); } };
  • 属性名表达式,ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let propKey = 'foo';

let obj = {
[propKey]: true,
['a' + 'bc']: 123
};

ES6新用法的更多相关文章

  1. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  2. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  3. ES6入门五:箭头函数、函数与ES6新语法

    箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...

  4. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  5. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  6. 总结常见的ES6新语法特性

    前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

  7. 常见ES6新属性

    ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=& ...

  8. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  9. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

随机推荐

  1. Vue于React特性简单对比(一)

    一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...

  2. C#的垃圾回收

    C#中垃圾回收 GC.Collect();强制进行内存回收.

  3. windows下apache+php安装

    1.安装apache 通过exe安装,如果80端口被占用,修改httpd.conf中的Listen,然后再次用exe安装,选择repaire 2.安装php 解压php包,添加系统变量 path,加上 ...

  4. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  5. 主流 Kubernetes 发行版梳理

    2014 年,Kubernetes 作为内部 Google orchestrator Borg 开源版本推出,目前已是最成功和发展最快的 IT 基础架构项目之一.2018 年,Kubernetes 已 ...

  6. 第52天:offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  7. python函数调用关系图(python call graph)

    由于要重构项目的部分代码,要整理好主要的函数调用关系,不想自己看代码慢慢画出结构,想找出一种通用的,节省人力的方法得出函数间的调用关系图,于是发现以下几个工具.(内网没装好graphviz,还没真正用 ...

  8. 关于Python的 a, b = b, a+b

    Python中有一种写法:多个值同时赋给多个变量,如:a, b = b, a+b 1. A写法 a = 0, b = 1 a, b = b, a+b print a, b #结果为:1 1 这种写法, ...

  9. SOA,ESB,WebService的关系

    1. 什么是SOA SOA(Service-Oriented Architecture)既服务导向架构,是指为了解决在inernet环境下业务集成的需要,通过连接能完成特定任务的独立功能实现的一种软件 ...

  10. BZOJ2527 & 洛谷3527:[Poi2011]Meteors——题解

    +++++++++++++++++++++++++++++++++++++++++++ +本文作者:luyouqi233. + +欢迎访问我的博客:http://www.cnblogs.com/luy ...