ES6与ES5的区别？

本文介绍: 3.导出单个属性 export let a =1;import person fro m ‘xxx.js‘ person —-&g t;默认导出内容。2.重命名导出 export {first a s fi,last a s la}1.列表导入 import {first,last} fro m ‘xx.js‘2.重命名导入 import {first a s f,las t as l};3.单个属性导入 import {a,get} fro m ‘xxx.js‘1.列表导出 e x port {first,las t}

一、模块化区别

一、模块化 区别

1.ES6模块化

导出：

1.列表导出 e x port {first,las t}
2.重命名导出 e x port {first as fi,las t as la}
3.导出单个属性 e x port let a =1; e x port function get(){}
4.默认导出一个模块只能有一个默认导出 exp o rt default {
first,
func t ion get(){},
}

let firstName = 'zhao';
let lastName = 'larry';
//1.列表导出
// export { firstName, lastName }
//2.重命名导出
export { firstName as first, lastName as last };

//3.导出单个属性
export let a = 1;
export function foo(){
    console.log('我是foo函数');
    return 'hello'
}
//4.默认导出 一个模块只能有一个默认导出
export default {
    obj:{
        name:'zhangsan',
        age:12
    },
    b:'我是字符串b'
}

导入:

1.列表导入 imp ort {first,last} from ‘x x.js‘
2.重命名导入 imp ort {first as f,last as l};
3.单个属性导入 import {a,get} from ‘xxx.js‘
4.默认导入需要重命名
 import person from ‘xxx.js‘ person —->默认导出内容
5.引入模块中所有内容
 import * as all from ‘xxx.js‘

//1.列表导入  es6编译时加载
// import { firstName, lastName } from "./1-ES6模块化导出";
// console.log(firstName, lastName);

//列表导入的时候导入新的变量名
// import { first, last } from "./1-ES6模块化导出";
// console.log(first, last);

//2.重命名导入 first last pageQuery
import { first as f, last as l } from "./1-ES6模块化导出.js";
console.log(f, l, '重命名导入');

//3.导入单个属性
import { a, foo } from "./1-ES6模块化导出.js";
console.log(a, foo());

//4.默认导入
import person from "./1-ES6模块化导出.js"
console.log(person);

//5.引入文件中所有导出的内容
import * as obj from './1-ES6模块化导出.js'
console.log(obj);

2.Commonjs模块化

导出：
当前模块
 module.exports.first = ‘zhao’;
mod ule.exports = {
first,
last,
….
}

// console.log(module,'当前模块','node内部提供了Module构造函数');
//相当于 var module = new Module();//Moudule代表当前模块

let first = 'ren';
let last = 'terry';

// module.exports.first = first;
// module.exports.last = last;

//向外输出对象
module.exports = {
    first,
    last
}

导入：
var _ = require(‘xx.js’)
_ 导出{first,
last,
….}

// commonjs 模块化导入
// let { first, last } = require('./3-commonjs模块化导出');
// console.log(first, last);

let _ = require('./3-commonjs模块化导出');
console.log(_);

默认nodejs 使用 commonjs模块化规范在package.json 中设置 type属性为module

区别？

1.ES6编译时加载模块,com monjs运行时加载模块
2.ES6使用export导出 import关键字导入
3.Commonjs使用module.exports导出 req ui re导入
4.ES6模块化输出的是值得引用,com monjs输出的是值得复制

二、声明 变量 方式 区别?

ES5： var

ES6 新增声明变量方式：let const

/**
 * es5声明变量  var
 * 特点：1.会变量提升，不存在暂时性死区
 * 2.可以重复声明变量
 * 3.不存在块级作用域 if() for()
 */

/**
 * es6声明变量 let const
 * let特点：
 * 1.不可以变量提升，存在暂时性死区(在声明之前无法访问)
 * 2.可以在声明变量的同时不进行赋值
 * 3.使用let不可以重复声明变量，但是可以重新赋值
 * 4.使用let声明的变量存在块级作用域
 */

//1.
// console.log(a);
// let a = 1;

//2.
// let a;//undefined
// console.log(a);

//3.
// let a = 'hello';
//  a = 'world';
// let a = 'world';
// var b = 'hello';
// var b = 'world';

//4.
// if(true){
//     let a = 1;
// }
// console.log(a);
// for(let i=0;i<5;i++){
//     console.log(i);
// }
// console.log(i,'外部打印');

/**
 * const
 * 特点：
 * 1.使用const不可以重复声明变量
 * 2.不会变量提升，存在暂时性死区
 * 3.必须在声明的时候进行初始化
 * 4.使用const声明基本数据类型值，一旦声明，不可以修改  声明引用数据类型属性是可以修改删除的
 * 5.存在块级作用域
 * 6.一般用于声明常量
 */

//1.
// const a = 'hello';
// const a = 'world';

//2.
// console.log(a);
// const a = 10;

//3.
// const a;

//4.
// const a = 'hello';
// a = 'world';
// console.log(a);

// const obj = {
//     name:'zhangsan',
//     age:12
// }
// obj.name = 'lisi';
// delete obj.age;
// //obj = 'hello';   会报错
// console.log(obj);

//5.
// if(true){
//     const a = 1;
// }
// console.log(a);
// for(const i=0;i<5;i++){
//     console.log(i);
// }
// console.log(i,'外部打印');