ES6ECMA Script 6_简单介绍

Posted 2020-12-18 mailyuan

ECMAScript 6

ECMA 组织 前身是 欧洲计算机制造商协会

指定和发布脚本语言规范，标准在每年的 6 月份正式发布一次，作为当年的正式版本

这样一来，就不需要以前的版本号了，只要用年份标记就可以了.

ES6 既是一个历史名词，也是一个泛指“下一代 javascript 语言”，

含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，

而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）        到这一阶段，差不多肯定是要包裹在以后的标准里面的
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

js 包含三个部分（ECMAScript 、BOM、DOM）

• ECMAScript         新功能的开发，语法的简化，性能优化

2009年发布了 ES5.1，并且成为 ISO 国际标准（ISO/IEC 16262:2011）

2015年6月 ES6       

还在实现中ing， 从开始 制定 到 最后 发布，正式通过，成为国际标准，整整用了 15 年

目标： 是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

2016年ES7（变化不大，很多草案待实现）

2017年ES8

2018年ES9

• 扩展浏览器端
• BOM        window
• DOM        document
• 扩展服务器端

Node

Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。

除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。

• 使用下面的命令，可以查看 Node 已经实现的 ES6 特性

 $ node --v8-options | grep harmony

Babel 转码器

是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

• 注意：

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API

比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全局对象

以及一些定义在全局对象上的方法（比如Object.assign）都不会转码

• 比如
• 

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

  
• 安装:  npm install --save-dev @babel/core
• 配置文件.babelrc
• 基本配置格式：

• {
      "presets": [],
      "plugins": []
  }

• presets 设定转码规则

官方提供以下的规则集，你可以根据需要安装

• # 最新转码规则
  $ npm install --save-dev @babel/preset-env
  
  # react 转码规则
  $ npm install --save-dev @babel/preset-react

  然后，将这些规则加入.babelrc

  

   {
      "presets": [
        "@babel/env",
        "@babel/preset-react"
      ],
      "plugins": []
    }

  

1

1

1

1

 

• ‘use strict‘;

严格模式，消除 js 语法的一些不合理、不严谨之处，减少一些怪异现象。

当浏览器识别，则进入严格模式解析运行。不识别的浏览器则忽略。

• 变量必须先声明，在使用。
• 禁止自定义的函数中的 this 指向 window       

默认指向 window 时，this 被赋值为 undefined

如果再函数中需要访问 全局时，直接用 window 就好

• eval();    将会创建一个作用域，即不会影响全局同名变量
• 对象禁止出现同名属性
• 

  var person = {
      name: "Tom",
      age: 22,
      
      get age (){
          return this.age;
      },
      set age (newAge){
          this.age = newAge;
      }
  };

  
• JSON

是一种轻量级的数据格式。        ‘{"name":"Ryen Toretto", "age": 22}‘    属性名，必须双引号包裹

用来 作为前后台交互的数据格式        （前台发送请求，后台返回响应）

• 使用
• 

  var obj = {name: "Tom", age: 18};
  
  var arr = [1, 3, 5, 7];
  
  var json = JSON.stringify(obj);    // 对象 处理成 JSON 数据
  console.log(json);
  
  json = JSON.stringify(arr);    // 数组 处理成 JSON 数据
  console.log(json);
  
  
  // 解析 JSON
  var newArr = JSON.parse(json);
  console.log(newArr);

  
• ES6 新加入 Object.create(obj);

将传入的新对象 作为 新对象 的原型对象        // var newObj = {}; newObj.__proto__ = person; return newObj;

• 使用：
• 

  var newObj = Object.create(person, {
      age:{
          value: 22
      },
      sex:{
          value: "男"
      }
  });

  
• ES6 对于数组的扩展

var arr = [1, 6 ,8, 6, 9, 8, 5, 3, 2];

• 输出第一个 6 的下标索引

arr.findIndex(function(item){ item === 6; });            // 适用于 对象数据类型

等同于 arr.indexOf(6);      // 找不到返回 -1            适用于 基本数据类型

• 输出最后一个 6 的下标索引

arr.lastIndexOf(6);

• 输出元素所有元素的值和下标

arr.forEach(function(item, index){... ...});

• 将所有元素 值+10，产生并返回这个新数据

var newArr = arr.map(function(item, index){ return item+10; });        // 不影响原数组

• 过滤出 原数组 中值大于 4 的元素，作新数组返回

var newArr = arr.filter(function(item, index){ return item>4; });        // 不影响原数组, 将 返回值为 true 的元素组成一个新数组

• 输出 数组 各个元素的累加和

var sum = arr.reduce(function(prev, cur){ return prev+cur; }, 0);        // 从 左 开始迭代。 第二参数，是指第一次进入，prev 的值

var sum = arr.reduceRight(function(prev, cur){ return prev+cur; }, 0);        // 从 右 开始迭代