浅谈ECMAScript新特性

2020-06-27  本文已影响0人  望月从良glh

1.新的标准规范

ECMAScript2015 是 js 的一种的新的标准规范，就是对 js 的写法上提出了新的语法要求和写法格式。

2.ECMAScript 和 javaScript 关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。javascript 是 netscape 创 造的并交给了国际标准化组织 ECMA，之所以不叫做 JavaScript 由于商标的问题，java 是 sun 公司的商标，根据 授权协议只有 Netscape 公司可以合法使用 JavaScript 这个名字，另外就是为了体现 JavaScript 的标准的制定者 不是 ECMA 所以取名为 ECMAScript。


web.png node.png

3.ES6 与 ECMAScript 2015 的关系

ES6 是 ECMA 为 JavaScript 制定的第 6 个版本的标准，标准委员会最终决定，标准在每年的 6 月份正式发布一 次，作为当年的正式版本。ECMAscript 2015 是在 2015 年 6 月份发布的 ES6 的第一个版本。依次类推 ECMAscript 2016 是 ES7, ECMAscript 2017 是 ES8, 后续版本都以年份为命名

块级作用域

1.块级作用域的种类

ECMAScript2015 为 js 提出的第三个作用域，凡是带{}的都是一个块级作用域。

if 语句的{},for 循环中的{},while 中的{},或者是我们单独写的{} try{}catch(error){}这些都提供了块级作用域。

块级作用域

为什么需要块级作用域

这是因为 fn 函数体内以及有 var 声明的变量 a，只是还没有赋值，默认为 undefined。

let const

1.let

基本用法

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

let 主要声明块级作用域下的成员，这个成员变量的作用域范围只能在当前块级作用域以及子作用域链中。

2.const

const 声明变量的同时必须要赋值。

const 声明之后，不允许去修改它的值，这里面的值说的是不允许修改它，是声明之后不允许重新指向一个新

的内存地址，可以去修改内存地址中的属性成员。

数组

1.数组解构

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

2.数组的扩展

对象

1.对象解构赋值

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { name, work } = { name: 'glh', work: 'code' };
console.log(name, work); // glh code

2.对象的扩展

3.扩展运算符

字符串

1.字符串模板

2.标签模板

const name = 'Tony';
const age = 18;

// const string = `My name is ${name}, Age is ${age}`;
// console.log(string);

// 标签函数
// const str = console.log`My name is ${name}, Age is ${age}`;

// 标签函数作用是对字符串加工 返回一个新值。利用这个特性可以做语言切换(国际化)，模板引擎插件
const Tag = (string, ...rest) => {
  console.log(string);
  console.log(rest);
  return string.join();
};
const result = Tag`My name is ${name}, Age is ${age}`;
console.log(result);

3.扩展的方法

函数

参数默认值

rest 参数

function add(...values) {
  //这是rest参数
  console.log(values);
}
add(2, 5, 3); // [2, 5, 3]

var arr = [1, 2, 3];
function fn(a, b, c) {
  console.log(a + b + c);
}
fn(...arr); //6  这是参数的解构

箭头函数

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

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

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

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function (num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => {
  return num1 + num2;
};

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

let getItem = id => { id: id, name: "Temp" }; //报错

let getItem = id => ({ id: id, name: "Temp" });//不报错

var name = "web"
var obj={
    name: "a",
    fn(){
        var t = setTimeout(function() {
            console.log(this.name)// web  this是window(浏览器环境)
        },1000)
    }
}
obj.fn()
-----------------------------------
var name = "web"
var obj={
    name: "a",
    fn(){
        var t = setTimeout(() => {
            console.log(this.name)// a this是obj
        },1000)
    }
}
obj.fn()

Object

Object.assign()

Object.is()

Proxy

概述

Proxy 可以理解成一个快递员，我们发快递还是接受快递，都需要这个快递员充当一个代理的作用。ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例，这个实例就是一个代理对象（快递员）。

 var proxy = new Proxy(target, handler);

目标对象

这个代理对象有两个参数，一个是代理的目标对象，第二个也是一个对象，它是配置对象，用来定制代理的拦截行为。

const person = {
  name: 'glh',
  age: 20,
};
const personProxy = new Proxy(person, {
  get(target, property) {
    console.log(target, property); //person{name:"glh",age:20}
    return 100;
  },
  set() {},
});

配置对象

注意，这个get方法的返回值就是我们获取的这个属性的返回值。

Reflect

概述

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。

静态方法

Promise

概述

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

promise 特点

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

promise 使用方法

class

概述

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

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

基本介绍

static

继承

Set

基本用法

属性和方法

Map

概述

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

基本用法

属性和方法

遍历

Symbol

概述

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

var obj = {
  say: 'a',
};
var say = Symbol(); //say 是symbol类型
obj[say] = 'web';
console.log(obj); //{say: "a", Symbol(): "web"}

语法

可迭代接口

Iterater 的概念

Iterater 接口

Modules

概述

语法

浏览器端加载实现

上一篇下一篇

猜你喜欢

热点阅读