ES6基础

今天晚上一定要早睡

已于 2022-12-05 19:29:49 修改

阅读量187

点赞数

分类专栏： es6 文章标签： javascript

于 2021-10-08 23:19:35 首次发布

本文链接：https://blog.csdn.net/qq_48192192/article/details/120645436

版权

es6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ECMA协议制定标准，ECMA-262是对JavaScript的标准。
TC39由各大浏览器产商组织成的，维护ECMA-262的标准。

1.ES6简介

es5为JavaScript2015年前的版本 , es6为2015年之后的版本。
JavaScript = ECMAScript + DOM +BOM.
es6只是对语法和句法进行更新，即只改变了ECMAScript , 未改变DOM和BOM。
es6主要为了解决es5的先天不足，典型是增加了es5中没有的类的概念。

2.ECMAScript版本

第一版本 97年基本语法句法
…
第五版本 09年我们之前学习的JS语法
第六版本 15年做出重大改变，加入新的语法特性

3.ECMAScript 改变

语法方面
let ；（）=> {}
功能方面
数组扩展；对象扩展；字符串扩展
扩展方面（在babel转化时，不对这方面进行转化（使用垫片帮助转化））
set/map ； symbol ；promise

4.环境对ES6的支持

浏览器对ES6的支持情况：

Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）。

服务器对ES6的支持情况

Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）
大部分的ES6语法在新版本的node环境中都可以支持(99%)

5.模块化开发

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。

5.1特点

将一些特定功能的方法组合实现一个模块。

维护性较高

当引入很多JS文件时，可能会不清楚这些JS文件之间的依赖关系，从而导致加载顺序出错。
使用模块化开发可以避免这个问题。

相互独立

JS本身没有命名空间，为了减少命名冲突，经常使用对象或闭包来减少命名冲突。
对象只能减少命名冲突的概率，闭包的过多使用会造成内存泄露。
模块化开发后，在模块内任何形式的命名都不会与其他模块的命名发生冲突，有效解决命名冲突问题。

代码复用

当想要实现某个功能时，若某模块正好有这个功能，我们可以直接引用该模块，不必写多余的代码，可以提高整体效率，可以减少重复冗余代码。

5.2node对模块化的支持

node实现了commonJS模块化
node支持CommonJS模块化语法；浏览器不支持CommonJS的语法

node v13.2.0 版本之前对ES6模块化的支持

在package.json中配置

 {   
 "type": "module",   
     "scripts": {     
         "start": "node --experimental-modules index.js"   
     }
 }

node v13.2.0 版本之后对ES6模块化的支持

在package.json中配置
```
 {
 "type": "module"
 }
```

5.3 es6之前的模块化

CommonJS

通过 require 来引入模块，通过 module.exports 定义模块的输出接口。
这种模块加载方案是服务器端的解决方案（同步），node完成了对它的实现

AMD

采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行。
require.js 实现了 AMD 规范。
对浏览器端的异步加载尤其适用,是一个浏览器端模块化开发的规范。

CMD

和 AMD 方案都是为了解决异步模块加载的问题。
sea.js 实现了 CMD 规范。
和AMD语法相似。

AMD和CMD区别

AMD是依赖前置，在定义模块的时候就要声明其依赖的模块。即在解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块。
CMD是就近依赖，只有在用到某个模块的时候再去require

5.4 ES6和CommonJS的区别

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

CommonJS 整体加载模块（加载所有方法），生成一个对象（_fs），然后从对象上读取方法，这种加载称为运行时加载。
ES6模块化在代码编译阶段从fs模块加载需要的方法，不加载其他方法，这种加载称为编译时加载或静态加载。即ES6可以在编译时就完成模块加载，因此要比CommonJS模块加载方式效率高。

5.5 CommonJS的模块化

// CommonJS模块 
 let { stat, exists, readfile } = require('fs');
 // 等同于如下代码块
 let _fs = require('fs'); //首先JS会先创建一个对象，获取fs中所有的属性和方法。ES6模块不做这个事（静态加载）。
 let stat = _fs.stat;
 let exists = _fs.exists; 
 let readfile = _fs.readfile; 

//模块导出（a.js）
module.exports = {
  firstName: 'Michael',
  lastName: 'vicky'
};
//模块导入(b.js)
const { firstName, lastName } = require('./testExports');
console.log(firstName, lastName);

5.6 浏览器端对ES6模块化的支持

//1.在script标签中使用
<script type="module">
//模块的导入及使用
</script>  
//2.文件引入的方式
<script type="module" src="index.js"></script>   <!-- 入口文件 -->

5.7 模块导出（export）

分别导出
统一导出
默认导出（export default）

5.8 模块导入（import）

通用导入
关于别名
解构导入

默认导入（export default）

 //导出
 var name='zhangsan';
 var age=10;
 function sayHello(){
     console.log('hello')
 }
 
 //统一导出（把需要导出的对象放到一个大的对象中进行导出）
 export {name,age,sayHello};
 
 //分别导出（把需要导出的方法分别进行导出）
 export function get(){
     console.log('get')
 }
 export function post(){
     console.log('post')
 }


 //导入
 import {name,age,sayHello,post,get} from './es6_b.js'
 //导出name属性
 //解构导入
 import {name} from './es6_b.js'
 console.log(name);
 
 //重命名name属性
 import {name as n} from './es6_b.js'
 console.log(n);
 
 //重命名整个对象
 //通用导入
 import * as obj from './es6_b.js'
 console.log(obj);
 obj.sayHello();
 obj.post();

默认导出

 //默认导出（比如有一些封装的文件，默认只导出一个对象，我们可以使用默认导出的方法）
 //一个文件只能有一个默认导出
 //工具导出就是这么封装的
 export default {
     name:'zhangsan',
     age:20,
     sayHello(){}
 }
 
 //导入
 import * as user from './es6_b.js'
 console.log(user.default.name); //二级对象，不能直接访问里面的内容，要通过default属性

 import  qs from './es6_b.js'  //可以将导入内容随意命名，默认导入
 console.log(qs);  //可以直接访问内容

在这里插入图片描述

6.Bable

es6转换器，可以将es6代码转换为es5，从而使其可以在低版本浏览器上运行。
就可以使用es6进行程序编写，又不用担心没有环境的支持。

使用

初始化项目（不包括启动服务器）
```
 npm init 
```
安装babel-cli工具
```
 npm i -g balel-cli
```
安装转换规则
项目在开发中用的 -D 上线后仍然需要使用 -S
```
 npm i -D babel-preset-env
```

配置 . babelrc 文件

 {
   "presets": [
     "env"  //和转换规格对应
   ]
 }

进行转换
转换文件：

 	babel  es6文件.js  -o  es5文件.js

转换目录

 	babel  es6文件夹  -d  新的es5文件夹

关于打包（轻量级工具 browserify）
安装 npm i -D browserify
若使用-g安装（全局安装），则使用时不用加npx
若使用-D安装，则只在项目中使用，使用时需要加npx
```
 npx browserify dist/a.js -o dist/index.js 
```

入口文件a和出口文件b放在dist 文件夹中，将入口文件进行打包即可

垫片（babel-polyfill）

babel 只会转换es6的语法和句法，不会转换新的API。
使用core-js 为当前环境提供垫片。

安装core-js (-S后期上线后仍然依赖）
```
 npm i -S core-js
```
es6模块使用core-js
```
 import 'core-js'; 
```

7.包管理器

NPM 是 Node.js 标准的软件包管理器。
cnpm 是 npm 的一个替代选择，yarn 也是 npm 的一个替代选择。

安装cnpm

npm install -g cnpm

安装yarn

npm install -g yarn

7.1 npm 依赖安装方式

本地安装（安装到当前文件夹）

npm install  <module_name>

全局安装 -g 全局使用（所有项目通用），一般为工具

npm install -g <module_name> 
npm install --global <module_name>

生产依赖 需要发布到生产环境中（发布时需要使用）

npm install -S <module_name> 
npm install --save <module_name>

开发依赖 只用于开发环境，不用于生产环境

npm install -D <module_name> 
npm install --save-dev  <module_name>

更新依赖

npm update  <module_name>

卸载依赖

npm uninstall  <module_name>

7.2 cnpm 依赖安装方式

同npm

7.3 yarn 依赖安装

安装

npm install -g yarn

初始化项目

yarn init

生产依赖

yarn add <module_name>

开发依赖

yarn add  <module_name>   --dev

更新依赖

yarn update <module_name>

删除依赖

yarn remove  <module_name>

7.4 常用模块补充

path

path.basename() 返回一个参数路径的最后一部分（文件名）

path.dirname() 返回一个URL参数的路径部分

path.extname() 返回url参数的扩展名

import path from 'path'
var p='D:/git/es6/dist/index.html'
var file_name=path.basename(p);  //返回参数路径的最后一部分（文件名）
var p_name=path.dirname(p);  //返会参数的路径部分
var ext_name=path.extname(p);  //返回参数的扩展名
console.log(file_name)  //index.html
console.log(p_name);  //D:/git/es6/dist
console.log(ext_name)  //.html

qs.stringify() 将对象序列化成URL的形式，以&进行拼接

import qs from 'qs'
var obj ={
    name:'zhangsan',
    age:10
}
var obj_str=qs.stringify(obj) 
console.log(obj_str);  //name=zahngsan&age=10

url

url.parse() 将一个URL地址转换为一个解析对象

import url from 'url'
var u='http://www.baidu.com:8080/login.php?username=zhangsan';
var obj =url.parse(u); //解析参数url地址
console.log(obj);

/ * Url {
  auth: null,
  port: '8080',
  hostname: 'www.baidu.com',
  hash: null,
  search: '?username=zhangsan',
  query: 'username=zhangsan',
  pathname: '/login.php',
  path: '/login.php?username=zhangsan',
  href: 'http://www.baidu.com:8080/login.php?username=zhangsan'   }  * /

今天晚上一定要早睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6基础

es6ES6简介模块化开发es6之前的模块化CommonJSAMDCMDAMD和CMD区别ES6和CommonJS的区别ECMA协议制定标准，ECMA-262是对JavaScript的标准。TC39由各大浏览器产商组织成的，维护ECMA-262的标准。ES6简介es5为JavaScript2015年前的版本 , es6为2015年之后的版本。JavaScript = ECMAScript + DOM +BOM.es6只是对语法和句法进行更新，即只改变了ECMAScript , 未改变DOM和
复制链接

扫一扫