ES6简单入门
let
let命令用来声明块级作用域. 以前的JavaScript只有全局作用域和函数作用域, 没有块级作用域.
// 示例1:
if (1) {
var a = "hello";
let b = "world";
}
console.log( a ); // hello
console.log( b ); // b is not defined
// 示例2:
for (let i = 0; i < 10; i++) {
// do something
}
console.log(i); // ReferenceError: i is not defined
// 示例3.1:
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
console.log( i );
console.log( a[6]() ); // 10
// 循环结束后i的值为10, a[6](), 相当于a[6](10), 所以输出10
// 示例3.2:
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
console.log( a[6]() ); // 6
// 循环结束后, i不再能够被访问, 此时调用a[6](), 则相当于a[6](6), 输出6
不存在变量提升
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
// 什么都不定义而直接输出
console.log(foo2); // 报错ReferenceError
报错与输出undefined大不一样, undefined是JavaScript里的值, 而报错则程序中断运行.
const
const声明一个只读的常量. 一旦声明, 常量的值就不能改变.
const PI = 3.1415;
PI // 3.1415
// 为const变量重新赋值报错
PI = 3; // TypeError: Assignment to constant variable.
// 由const变量不能在其后赋值, 所以在声明的同时必须同时赋值, 否则报错
const foo; // SyntaxError: Missing initializer in const declaration
const的变量作用域等其它特性都与let相同
箭头函数
ES6允许使用箭头(=>
)定义函数. 一个箭头函数表达式的语法比一个函数表达式更短.
语法
首先箭头函数一般用来简化使用函数表达式来定义的函数, 总体理解就是箭头左边是函数的参数, 箭头
右边是函数的返回值或者函数体.
var func1 = (param1, param2, paramN) => expression; // 相当于
var func2 = function (param1, param2, paramN) { return expression };
// 注意下面的statements加了大括号
var func10 = (param1, param2, paramN) => { statements }; // 相当于
var func11 = function (param1, param2, paramN) { statements };
// Parentheses are optional when there's only one parameter name:
// 函数参数只有1个, 则参数外层的括号可省略
var func3 = (singleParam) => { statements }; // 相当于
var func4 = singleParam => { statements } // 相当于
var func5 = function (singleParam) { statements };
// A function with no parameters should be written with a pair of parentheses.
// 函数没有参数, 参数外层的括号不可省略
var func6 = () => { statements }; // 相当于
var func7 = function () { statements };
// Parenthesize the body of function to return an object literal expression:
// 函数的返回值是1个对象, 则需要额外加一层小括号(因为原来的大括号当包围函数体的用途)
var func8 = params => ({name: sheng});
var func9 = function (params) { return {name: sheng} };
强烈推荐这个网站http://babeljs.io/repl, 把自己写的箭头函数, 复制粘贴到该网站左边的框
里, 该网站就会自动帮你解析成ES3/5版本.
简单示例
var sayHello = () => "hello-world";
console.log( sayHello() );
Class
ES6标准的定义的class
并不是推翻了已经存在JavaScript基于原型的继承方式, 新的class
,
写法只是让我们看起来更清晰, 更像传统的面向对象编程.class
, 实际上是1个特殊的函数.
// 传统写法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
// class写法
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
模板字符串
模板字符串是增强版的字符串, 使用反引号标识. 提供嵌入表达式, 插入变量, 保留换行等功能.
语法
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text` // ${} 是固定用法
用法
// 在字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// 多行字符串
console.log(`
string text line 1
string text line 2
string text line 3
`);
console.log("\
string text line 1\
string text line 2\
string text line 3\
");
//
相关链接
Babel REPL: http://babeljs.io/repl, 该工具非常强大, 在线把ES6语法解析成其兼容版本.
本文大部分内容都参考自此书: http://es6.ruanyifeng.com/
箭头函数 - MDN
ES6简单入门的更多相关文章
- koa2入门--01.ES6简单复习、koa2安装以及例子
1.ES6简单复习 /*let 和 const: let用于定义一个块作用域的变量,const 定义一个常量 */ let a = 'test'; const b = 2; /*对象的属性和方法的简写 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)
BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...
- es6 快速入门 系列
es6 快速入门(未完结,持续更新中...) 前言 为什么要学习es6 es6对于所有javaScript开发者来说,非常重要 未来,es6将构成javaScript应用程序的基础 es6中很多特性, ...
- es6 快速入门 系列 —— 变量声明:let和const
其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
- es6快速入门 系列 - async
其他章节请看: es6 快速入门 系列 async 前文我们已经知道 promise 是一种异步编程的选择.而 async 是一种用于执行异步任务更简单的语法. Tip:建议学完 Promise 在看 ...
- es6 快速入门 系列 —— 类 (class)
其他章节请看: es6 快速入门 系列 类 类(class)是 javascript 新特性的一个重要组成部分,这一特性提供了一种更简洁的语法和更好的功能,可以让你通过一个安全.一致的方式来自定义对象 ...
- es6 快速入门 系列 —— 对象
其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...
随机推荐
- hadoop节点挂死的一次分析报表。
hadoop的一个节点unused了.然后重启启动hadoop的服务,仍有有一个hadoop的节点起不来.多次重启hadoop和杀进程之后,发现hadoop的master和slave节点上的状态在切换 ...
- python 差分包制作-如何来制作差分包?
继百度网盘爬虫,百度图片爬虫后这是本人第三篇有关python的文章了,由于本人之前做过嵌入式的一些东西,其中会涉及到差分包的制作,所以这篇文章想谈谈如何利用python来制作差分包,如果你对嵌入式的东 ...
- c# 中的UserControl是什么 用户控件和自定义控件有什么区别
用户控件是许多控件的集成 自定义控件是自己写一个控件类,或者继承已有的控件类 复合控件是封装在公共容器内的 Windows 窗体控件的集合.这种控件有时称为“用户控件”.包含的控件称为“构成控件”. ...
- 解决Deepin每次打开Chome都提示解锁登录密钥环的麻烦
密钥环是linux系统用于安全保存程序私密数据的模块,可以用于加密保存密码.证书.密钥等安全数据.chrome的密钥环用于保存本地访问站点密码或缓存从google服务器同步下来的访问站点的密码. De ...
- jQuery常用技巧
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用 ...
- linux之挂载硬盘
sudo gedit /etc/fstab中添加 UUID=190534e2-d8ae-4928-94b7-0f4d4209a3ab /data ext4 defaults ...
- java 理解java的三大特性之封装
使用封装有三大好处: 1.良好的封装能够减少耦合. 2.类内部的结构可以自由修改. 3.可以对成员进行更精确的控制. 4.隐藏信息,实现细节. public class Wife { private ...
- 【Raspberry Pi】读取DHT11温度湿度波折
从网上找到了DHT11厂家说明书,尝试用python根据时序图写数据获取驱动,但发现python的高层特性导致在做底层代码时例如控制20us时延这类需求就没什么好的办法. 还是得回到C-wiringP ...
- vue生成图片验证码
最近做项目接触Vue,前端生成验证码.原理其实很简单,首先是生成随机数,然后用canvas绘制. 网上有一些现成的资料,没必要重复造轮子,我是在他们基础上完善了父组件,简化了子组件的调用: ident ...
- 第9步:ASMCA创建磁盘组
注意,创建磁盘组时需要以grid用户身份执行,在那之前可能需要以root身份执行xhost+,即命令: 代码1 [root@sgdb1~]# xhost+ [root@sgdb1~]# su – gr ...