Java教程

ES6知识点一

本文主要是介绍ES6知识点一,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.ES6介绍
    ES6是ES2015、ES2016、ES2017他们的统称
    官方名字:《ECMAScript 2015 标准》=> ES6

 2.Babel安装与使用
    安装
      cnpm install --global babel-cli
      简写:cnpm i -g babel-cli

      预设(转码标准)
      cnpm install --save-dev babel-preset-latest
      简写:cnpm i -D bebel-preset-latest
    使用
      1)在项目的根目录新建文件.babelrc文件
        {
          "presets": ["latest"]
        }
       2)转码命令   
          1.转码并输出到控制台
           babel ./1-es6.js
          2.转码并输出到新的文件
           babel ./es6.js --out-file es5.js
           简写:babel ./es6.js -o es5.js

           3.转码整个文件夹并输出到新的文件夹
           babel src --out-dir dist
            简写:babel src -d dist
  3.包管理机制(npm)
    1)项目初始化
      npm init -y  初始化nodejs项目
     项目初始化完毕后,在项目的根目录创建一个package.json文,该文件中保存了项目所有相关信息
     依赖安装完毕后,在项目的根目录下创建了node_modules

    2)安装依赖
      全局依赖
        保存在全局的包(依赖),任何地方都能使用
        npm install --global xxx
        简写:npm i -g xxx

      局部依赖
        开发依赖 devDependencies
          npm install --save-dev xxx
          简写:npm i -D xxx
        产品依赖 dependencies
          npm install --save xxx
          简写:npm i -S xxx
        卸载依赖
          npm uninstall xxx
    3)yarn使用
      初始化一个新项目
        yarn init
      添加包
        yarn add [package]
          --dev
      更新包
        yarn upgrade [package]
      删除
        yarn remove [package]
      安装项目的全部依赖
        yarn
        或者yarn install
  4.模块化机制
    1)CommonJS 模块化规范()
       CommonJS 模块就是对象,输入时必须查找对象属性。
      导入
        let { firstName, lastName } = require('./1-module.js')
        等同于
        let obj = require('./1-module.js')
        let first = obj.firstName;
        let last = obj.lastName;

        对象解构(模式匹配)
        let data = {
          username: '张三',
          age: 12
        }
        let { username, age } = data
    2)AMD      模块化规范  客户端的浏览器的
            AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。
      它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,
      都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

    3)ES6      模块化规范
       export用来从模块中导出
       import用来从模块中导入。

      导入
        import { firstName, lastName, a, post } from './module1.js';
        import { firstName as first, lastName as last } from './module1.js';
        导入默认
        import data from './module1.js'
        导入全部
        import * as data from './module1.js';
        导入执行(模块加载)
        import './module1.js';
        导入第三方模块(去项目的根目录找node_modules)
        import 'babel-preset-latest';
      导出
        export { firstName, lastName };
        export { firstName as fist, lastName as last };
        export let a = 1;
        export function post() {

        }
        默认导出(一个模块有且只能有1个默认导出,默认导出与普通导出可以共存)
        export default {

        }
    4)CommonJS与ES6模块化规范区别
      CommonJS
        var a = {age:12}; a.age = 13 b = a;
        对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出的变量重新赋值。
        对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。
        当使用require命令加载某个模块时,就会运行整个模块的代码。
        当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。
        运行时加载
      ES6
        ES6模块中的值属于【动态只读引用】。
        对于只读来说,即不允许修改引入变量的值,import的变量是只读的,不论是基本数据类型还是复杂数据类型。当模块遇到import命令时,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
        对于动态来说,原始值发生变化,import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
        编译时输出接口。
    模拟环境
      a.js
        name,age,gender
      b.js
        number
        只想用name变量
      1)
        index.html
          <script src="./a.js"></script>
          <script src="./b.js"></script>
      2)模块化机制(按需引入,按需导出

这篇关于ES6知识点一的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!