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. 获得system32等系统文件权限

    SYSTEM是至高无上的超级管理员帐户.默认情况下,我们无法直接在登录对话框上以SYSTEM帐户的身份登录到Windows桌面环境.实际上SYSTEM帐户早就已经“盘踞”在系统中了.根据http:// ...

  2. JVM(一)运行机制

    1.启动流程 2.JVM基本结构 PC寄存器 >每个线程拥有一个PC寄存器 >在线程创建时创建 >指向下一条指令的地址 >执行本地方法时,PC的值为undefined 方法区 ...

  3. ICE checkbox 用法

    Hello everybody, I have a datable which contain multiple lines gotten from database, in the header o ...

  4. byte字节的输入流 建议使用字节数组形式接受内容 因为当输入流是汉字时候 会超出字节的范围 出现无法读取的现象

    byte字节的输入流 建议使用字节数组形式接受内容 因为当输入流是汉字时候 会超出字节的范围 出现无法读取的现象

  5. 【bzoj4721】[Noip2016]蚯蚓 乱搞

    题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓.蛐 ...

  6. 前端开发学习之——dom ready和window onload的区别

    1.ready事件是在页面中所有DOM结构已完全加载时执行,监听的是 DomContentload 事件,初始化并解析完成时触发,不需要等待样式表.图片和 iframes 加载完,也就是说当这个事件触 ...

  7. [luogu5176] 公约数

    题目描述 求 \[ \sum_{i=1}^n\sum_{j=1}^m\sum_{k=1}^p\gcd(i\cdot j,i\cdot k,j\cdot k)\times \gcd(i,j,k)\tim ...

  8. BZOJ2752:[HAOI2012]高速公路——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2752 https://www.luogu.org/problemnew/show/P2221#sub ...

  9. PE格式示意图

  10. HDOJ.1228 A + B (map)

    A + B 点我挑战题目 点我一起学习STL-MAP 题意分析 讲字符串和数字用map对应即可 代码总览 /* Title:HDOJ.1228 Author:pengwill Date:2016-11 ...