zoukankan      html  css  js  c++  java
  • 【ES6】ECMA Script 6_简单介绍

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

  • 相关阅读:
    [C#网络编程系列]专题一:网络协议简介
    也谈校园应用微同济的用户体验
    iOS 富文本类库RTLabel
    遥控三通直升机飞行原理简介
    A Distributed Algorithm Exercise
    在Ubantu 下下载代码 android源码 2
    新手模拟器训练指南(固定翼版)
    datasnap 2010 利用心跳包清除TCP死连接
    datasnap 2011 连接池
    datasnap 2010 利用JSON序列化和反序列化任何类型的对象
  • 原文地址:https://www.cnblogs.com/mailyuan/p/13381764.html
Copyright © 2011-2022 走看看