资讯专栏INFORMATION COLUMN

es6快速入门

liujs / 3073人阅读

摘要:快速入门简介以下简称是语言的下一代标准,已经在年月正式发布了。而且声明后必须立即初始化赋值,不能后面赋值。方法默认返回实例对象即,可以指定返回另外一个对象。参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

es6快速入门

ES6简介

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ES6与ECMAScript2015的关系

ES6的第一个版本,就这样在2015年6月发布了,正式名称就是《ECMAScript 2015标准》(简称ES2015)。,ES6既是一个历史名词,也是一个泛指,含义是5.1版以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、ES2017等等,而ES2015则是正式名称,特指该年发布的正式版本的语言标准。

所以,我们可以认为ES6 = ES2015

Babel

由于不是目前所有的浏览器都能兼容ES6的全部特性,所以实际的项目还是主要有ES5语法来开发。

这里可以看到 es6在各大浏览器的支持程度http://kangax.github.io/compat-table/es6/

但是ES6毕竟是以后的标准,而且约来越多的项目已经在用ES6开发了,你需要看懂别的人写的代码,同时让自己写的代码让别人看懂,最重要的是如果有天妹子问你,啥是ES6呀?

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。可以去官网了解一下https://babeljs.io/

Babel做的事情很简单,将ES6语法写出的代码,解析成ES5的语法,从而使得目前所有的浏览器都能正常运行。

比如:

</>复制代码

  1. // 转码前
  2. input.map(item => item + 1);
  3. // 转码后
  4. input.map(function (item) {
  5. return item + 1;
  6. });

可以在babel官网上,在线查看ES6代码转换成ES5是什么样子的。

http://babeljs.io/repl/ 有时候不太稳定,可能需要翻一下 ┑( ̄Д  ̄)┍

在项目中使用babel需要配置.babelrc文件,存放在项目根目录下。

先安装 bable-cli

</>复制代码

  1. npm install babel-cli -g

然后安装一个将es6编译成es5的插件

</>复制代码

  1. npm install --save-dev babel-preset-es2015

将.babelrc中添加这个配置

</>复制代码

  1. {
  2. "presets": ["es2015"],
  3. "plugins": []
  4. }

然后运行

</>复制代码

  1. babel es6.js -o es5.js

就可以看到es5.js就是解析过后的脚本

babel有大量的插件,还需要大家自己去了解。

常用语法 let,const
let

let和const的用法都类似var。let是块级作用域声明,所声明的变量,只在let所在的代码块内有效。

</>复制代码

  1. {
  2. let a = 10;
  3. var b = 1;
  4. }
  5. a // ReferenceError: a is not defined.
  6. b // 1

最为典型的例子,for循环

</>复制代码

  1. var a = [];
  2. for (var i = 0; i < 10; i++) {
  3. a[i] = function () {
  4. console.log(i);
  5. };
  6. }
  7. a[6](); // 10

我们往往需要使用闭包的手法来处理

</>复制代码

  1. var a = [];
  2. for (var i = 0; i < 10; i++) {
  3. (function(i){
  4. a[i] = function () {
  5. console.log(i);
  6. };
  7. })(i);
  8. }
  9. a[6](); //6

换成let会方便很多

</>复制代码

  1. var a = [];
  2. for (let i = 0; i < 10; i++) {
  3. a[i] = function () {
  4. console.log(i);
  5. };
  6. }
  7. a[6](); // 6

变量提升问题

var声明会存在变量提升的问题,如果变量在声明前使用,其值则会输出 undefined。let声明则改变了这种奇怪的逻辑,let所声明的变量必须先声明,后使用,否则就会报错。

</>复制代码

  1. // var 的情况
  2. console.log(foo); // undefined
  3. var foo = 2;
  4. // let 的情况
  5. console.log(bar); // ReferenceError
  6. let bar = 2;

不能重复声明

和var不同,let不允许在相同作用域中,重复声明同一个变量。

</>复制代码

  1. // 正常
  2. function () {
  3. var a = 10;
  4. var a = 1;
  5. }
  6. // 报错
  7. function () {
  8. let a = 10;
  9. var a = 1;
  10. }
  11. // 报错
  12. function () {
  13. let a = 10;
  14. let a = 1;
  15. }
const

const用来声明一个常量。一旦声明,常量的值就不能改变。而且声明后必须立即初始化赋值,不能后面赋值。

</>复制代码

  1. //报错
  2. const PI = 3.1415;
  3. PI // 3.1415
  4. PI = 3;
  5. //报错
  6. const DOMAIN;
  7. DOMAIN = "jd.com";

const和let很相似:1.只在块级作用域中有效,2.不会提升变量,3.不能重复定义变量。

const声明的变量虽然无法改变,但是const命令只是保证所赋值的变量指向的地址不变,并不保证改地址的数据不变,所以当赋值的变量是一个值引用型的变量的时候,要格外的小心。

Class

JavaScript语言的传统方法是通过构造函数,定义并生成新对象。

</>复制代码

  1. function Human(name) {
  2. this.name = name;
  3. }
  4. Human.prototype.sayName = function () {
  5. return "(My name is" + this.name + )";
  6. };
  7. var zhang3 = new Human("zhang3");
  8. var li4 = new Human("li4");
  9. var wang5 = new Human("wang5");

ES6提供了更接近传统语言(C++和Java)的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。

</>复制代码

  1. class Human {
  2. constructor(name) {
  3. this.name = name;
  4. }
  5. sayName() {
  6. return "(My name is" + this.name + )";
  7. }
  8. }
  9. var zhang3 = new Human("zhang3");
  10. var li4 = new Human("li4");
  11. var wang5 = new Human("wang5");

constructor

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

constructor方法默认返回实例对象(即this),可以指定返回另外一个对象。

</>复制代码

  1. class Foo {
  2. constructor() {
  3. return Object.create(null);
  4. }
  5. }
  6. new Foo() instanceof Foo
  7. // false

extends

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。

</>复制代码

  1. class Woman extends Human {
  2. constructor(name) {
  3. super(name); // 调用父类的constructor(name);
  4. this.sex = "female";
  5. }
  6. }
  7. let hanmeimei = new Woman("hanmeimei");
=>

需要用函数表达式的地方,可以用=>代替,代码简洁,而且绑定了this.

</>复制代码

  1. // bad
  2. [1, 2, 3].map(function (x) {
  3. return x * x;
  4. });
  5. // good
  6. [1, 2, 3].map((x) => {
  7. return x * x;
  8. });
  9. // best
  10. [1, 2, 3].map(x => x * x);

箭头函数取代Function.prototype.bind

</>复制代码

  1. // bad
  2. const self = this;
  3. const boundMethod = function(...params) {
  4. return method.apply(self, params);
  5. }
  6. // acceptable
  7. const boundMethod = method.bind(this);
  8. // best
  9. const boundMethod = (...params) => method.apply(this, params);
解构

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

没明白啥意思,show me the code

数组解构赋值

</>复制代码

  1. // before
  2. let a = 1;
  3. let b = 2;
  4. let c = 3;
  5. //after
  6. let [a, b, c] = [1, 2, 3];
  7. let [foo, [[bar], baz]] = [1, [[2], 3]];
  8. let [ , , third] = ["foo", "bar", "baz"];

对象解构赋值

</>复制代码

  1. let { foo, bar } = { foo: "aaa", bar: "bbb" };
  2. let { bar, foo } = { foo: "aaa", bar: "bbb" };
  3. //变量名和属性名如果不一样,可以这样写
  4. var { foo: baz } = { foo: "aaa", bar: "bbb" };

字符串解构赋值

</>复制代码

  1. const [a, b, c, d, e] = "hello";

还可以对数值和布尔值,函数参数解构赋值。

Set和Map

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

</>复制代码

  1. // 例一
  2. var set = new Set([1, 2, 3, 4, 4]);
  3. [...set]
  4. // [1, 2, 3, 4]
  5. // 例二
  6. var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
  7. items.size // 5
  8. // 例三
  9. function divs () {
  10. return [...document.querySelectorAll("div")];
  11. }
  12. var set = new Set(divs());
  13. set.size // 56
  14. // 类似于
  15. divs().forEach(div => set.add(div));
  16. set.size // 56

Map

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。

</>复制代码

  1. var m = new Map();
  2. var o = {p: "Hello World"};
  3. m.set(o, "content")
  4. m.get(o) // "content"
  5. m.has(o) // true
  6. m.delete(o) // true
  7. m.has(o) // false
字符串模板

传统的JavaScript语言,输出模板通常是这样写的。

</>复制代码

  1. $("#result").append(
  2. "There are " + basket.count + " " +
  3. "items in your basket, " +
  4. "" + basket.onSale +
  5. " are on sale!"
  6. );

ES6是这样解决的

</>复制代码

  1. $("#result").append(`
  2. There are ${basket.count} items
  3. in your basket, ${basket.onSale}
  4. are on sale!
  5. `);

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

</>复制代码

  1. $("#list").html(`
    • first
    • second
  2. `);

同时字符串模板中还可以嵌入变量,变量可以写在${}里面。

</>复制代码

  1. var x = 1;
  2. var y = 2;
  3. `${x} + ${y} = ${x + y}`
  4. // "1 + 2 = 3"
  5. `${x} + ${y * 2} = ${x + y * 2}`
  6. // "1 + 4 = 5"
  7. var obj = {x: 1, y: 2};
  8. `${obj.x + obj.y}`
  9. // 3

字符串模板还支持嵌套

</>复制代码

  1. const tmpl = addrs => `
  2. ${addrs.map(addr => `
  3. `).join("")}
  4. ${addr.first}
    ${addr.last}
  5. `;
  6. const data = [
  7. { first: "", last: "Bond" },
  8. { first: "Lars", last: "" },
  9. ];
  10. console.log(tmpl(data));
  11. //
  12. //
  13. //
  14. //
  15. //
  16. //
  17. //
  18. //
  19. //
    Bond
    Lars
默认值

在以前,我们声明了一个有很多参数的函数时,无法直接指定默认值,所有会很很多default配置来处理。

</>复制代码

  1. function log(x, y) {
  2. y = y || "World";
  3. console.log(x, y);
  4. }

但是这种处理方法是不安全的,如果我们这样赋值

</>复制代码

  1. log("Hello") // Hello World
  2. log("Hello", "China") // Hello China
  3. log("Hello", "") // Hello World

ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

</>复制代码

  1. function log(x, y = "World") {
  2. console.log(x, y);
  3. }
  4. log("Hello") // Hello World
  5. log("Hello", "China") // Hello China
  6. log("Hello", "") // Hello
rest参数

ES6 引入 rest 参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

</>复制代码

  1. function add(...values) {
  2. let sum = 0;
  3. for (var val of values) {
  4. sum += val;
  5. }
  6. return sum;
  7. }
  8. add(2, 5, 3) // 10

扩展运算符 ...

它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

</>复制代码

  1. console.log(...[1, 2, 3])
  2. // 1 2 3
  3. console.log(1, ...[2, 3, 4], 5)
  4. // 1 2 3 4 5
  5. [...document.querySelectorAll("div")]
  6. // [
    ,
    ,
    ]

参考资料

http://es6.ruanyifeng.com/

http://www.jianshu.com/p/ebfe...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81814.html

相关文章

  • Babel 快速入门

    摘要:快速体验安装依赖新建文件夹,在命令行里进入该文件夹,并执行如下命令生成文件是内置的一个,可通过命令行操作来编译文件。入门为了确保转换后的代码能正常的运行,最好在代码之前引入这是一个实现了部分特性的包。参考中文网入门 简介 Babel 是一个 JavaScript 编译器,可将我们代码中的 ES6 语法转换为 ES5 的语法,使我们的代码能在不支持 ES6 语法的环境中正常运行。配合一些...

    NoraXie 评论0 收藏0
  • 前端计划——JavaScript正则表达式快速入门

    摘要:前言正则表达式时处理字符串中常用的手法,本文以简单的方式,快速展示了中正则相关的基础知识点。文末还提供了几个简单的正则相关面试题。接下来是正则部分,注意后面的并不匹配,也就是比如,实际匹配的值是和,在和后面加上,就完成了预期。 前言:正则表达式时处理字符串中常用的手法,本文以简单的方式,快速展示了JavaScript中正则相关的基础知识点。文末还提供了几个简单的正则相关面试题。个人总结...

    Xufc 评论0 收藏0
  • 新手快速学习ES6语法,用最快的速度入门ES6就看这里

    摘要:的作用域与命令相同只在声明所在的块级作用域内有效。数值和布尔值的解构赋值解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。上面代码中,数值和布尔值的包装对象都有属性,因此变量都能取到值。默认值解构赋值允许指定默认值。 最近正在学习ES6,对于ES6的语法有一些自己的理解, 想写这篇文章帮助跟我一样的新手快速入门ES6而不至于连代码都看不懂. 至于开发环境的搭建什么...

    vspiders 评论0 收藏0
  • [ ES6 ] 快速掌握常用 ES6 (二)

    摘要:本系列文章适合快速掌握入门语法,想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充,可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0
  • [ ES6 ] 快速掌握常用 ES6 (一)

    摘要:常量变量先说说常量和变量的概念吧,常量是说那种进行一次赋值后不会更改的值,比如说游戏账户的,变量是说赋值后有更改的需求的,比如游戏名,游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据,尤其有用。 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 学习 20% 的知识完成 80% 的工作 关于 ...

    ispring 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<