你须要相识的ES6的新特征（前沿技术）

2024年3月7日 127次阅读 来源: 广工小成

ES6新特征

最近在项目中遇到了许多ES6的语法，遇到了不少坑坑洼洼，因而，在这里就简朴引见一下ES6中的一些新特征

  • 假如想真正的相识ES6和ES5有什么差别，这里引荐看一下阮一峰的一本《ECMAScript 6 入门》
  • 在我下面，主要引见一下ES6规范下的let, const, “=>”, “…”的引见和用法

ES6背景引见

ECMAScript 6.0（以下简称 ES6）是 JavaScript 言语的下一代规范，已经在2015年6月正式宣布了。它的目的，是使得 JavaScript 言语可以用来编写庞杂的大型应用程序，成为企业级开辟言语。

那末，ECMAScript 和 JavaScript 究竟是什么关系？

要讲清晰这个题目，须要回顾历史。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言语另有其他言语的言语很像了呢，确切，实在道理基本都差不多。

运用注重

  1. 不存在变量提拔：var敕令会发作”变量提拔“征象，即变量可以在声明之前运用，值为undefined。这类征象多多少少是有些新鲜的，根据平常的逻辑，变量应当在声明语句今后才可以运用。为了改正这类征象，let敕令转变了语法行动，它所声明的变量肯定要在声明后运用，不然报错。
// var 的状况
console.log(foo); // 输出undefined
var foo = 2;

// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;
  1. 暂时性死区：只需块级作用域内存在let敕令，它所声明的变量就“绑定”（binding）这个地区，不再受外部的影响。
var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
  1. 不许可反复声明：let不许可在雷同作用域内，反复声明同一个变量。
// 报错
function () {
  let a = 10;
  var a = 1;
}

// 报错
function () {
  let a = 10;
  let a = 1;
}
  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.

运用注重

  1. 仅仅保证地点稳定const实际上保证的，并非变量的值不得修改，而是变量指向的谁人内存地点不得修改。关于简朴范例的数据（数值、字符串、布尔值），值就保存在变量指向的谁人内存地点，因而等同于常量。
const a = [];
a.push('Hello'); // 可实行
a.length = 0;    // 可实行
a = ['Dave'];    // 报错

箭头函数”=>”

基本用法

ES6 许可运用“箭头”（=>）定义函数

var f = v => v;

//等同于
var f = function(v) {
  return v;
};

运用注重

  1. 函数体内的this对象，就是定义时地点的对象，而不是运用时地点的对象。
  2. 不可以看成组织函数，也就是说，不可以运用new敕令，不然会抛出一个毛病。
  3. 不可以运用arguments对象，该对象在函数体内不存在。假如要用，可以用 rest 参数替代。
  4. 不可以运用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')]
// [<div>, <div>, <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://segmentfault.com/a/1190000010365014
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞