资讯专栏INFORMATION COLUMN

你需要了解的ES6的新特性(前沿技术)

Nino / 2203人阅读

摘要:年月,的创造者公司,决定将提交给国际标准化组织,希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多,想更加了解新特性的可以自寻查看一下阮一峰的一本入门

ES6新特性
最近在项目中遇到了很多ES6的语法,遇到了不少坑坑洼洼,因此,在这里就简单介绍一下ES6中的一些新特性

如果想真正的了解ES6和ES5有什么不同,这里推荐看一下阮一峰的一本《ECMAScript 6 入门》

在我下面,主要介绍一下ES6标准下的let, const, "=>", "..."的介绍和用法

ES6背景介绍

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

那么,ECMAScriptJavaScript 到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版

let命令 基本用法

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。看到这里,是不是觉得let和C语言还有其他语言的语言很像了呢,确实,其实原理基本都差不多。

使用注意

不存在变量提升:var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

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

// 报错
function () {
  let a = 10;
  var a = 1;
}

// 报错
function () {
  let a = 10;
  let a = 1;
}

快级作用域:这个特性是我觉得最奇怪的,原本javascript是作用域链的形式,为什么无缘无故要突然改变了自己之前的主意呢。不过这个也很容易理解,有过C语言和C++等语言基础的就会很了解快级作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。

const命令 基本用法

const声明一个只读的常量。一旦声明,常量的值就不能改变。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
使用注意

仅仅保证地址不变const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。

const a = [];
a.push("Hello"); // 可执行
a.length = 0;    // 可执行
a = ["Dave"];    // 报错
箭头函数"=>" 基本用法

ES6 允许使用“箭头”(=>)定义函数

var f = v => v;

//等同于
var f = function(v) {
  return v;
};
使用注意

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

这里说一下最重要的第一点吧
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。

数组拓展运算符"..." rest 参数 基本用法

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

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll("div")]
// [
,
,
]

也可以运用于函数及其他

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

文中就简单介绍这么多,想更加了解ES6新特性的可以自寻查看一下阮一峰的一本《ECMAScript 6 入门》

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

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

相关文章

  • 前端周刊第40期

    摘要:注意本文为前端周刊早期整理的旧文重发,不过大部分内容并没有过时,已经看过的同学可以直接去文末订阅前端周刊微信公众号。想和我面对面交流扫下方二维码添加我为好友。 注意:本文为前端周刊早期整理的旧文重发,不过大部分内容并没有过时,已经看过的同学可以直接去文末订阅前端周刊微信公众号。 文章教程 号外:ES6 模块语法已定稿 www.2ality.com ES6 模块语法已定稿,和之前所看到的...

    Carbs 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    happen 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    余学文 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    Jochen 评论0 收藏0

发表评论

0条评论

Nino

|高级讲师

TA的文章

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