码迷,mamicode.com
首页 > 其他好文 > 详细

【ES6】ECMA Script 6_简单介绍

时间:2020-07-26 23:16:09      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:名称   blog   组成   否支持   大于   作用   服务器端   现象   es2015   

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);        // 从 右 开始迭代

【ES6】ECMA Script 6_简单介绍

标签:名称   blog   组成   否支持   大于   作用   服务器端   现象   es2015   

原文地址:https://www.cnblogs.com/mailyuan/p/13381764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!