ES6与ES5的区别？
目录
一、模块化区别
1.ES6模块化
2.Commonjs模块化
区别？
二、声明变量方式区别?
var特点：
let特点:
const特点:
一、模块化区别
1.ES6模块化
导出：
1.列表导出 export {first,last}
2.重命名导出 export {first as fi,last as la}
3.导出单个属性 export let a =1; export function get(){}
4.默认导出 一个模块只能有一个默认导出 export default {
first,
function 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.列表导入 import {first,last} from 'xx.js'
2.重命名导入 import {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';
module.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编译时加载模块,commonjs运行时加载模块
2.ES6使用export导出 import关键字导入
3.Commonjs使用module.exports导出 require导入
4.ES6模块化输出的是值得引用,commonjs输出的是值得复制
二、声明变量方式区别?
ES5： var
ES6 新增声明变量方式 ：let const
var特点：
1.会变量提升，不存在暂时性死区
2.可以重复声明，可以重新赋值
3.不存在块级作用域
let特点:
1.不会变量提升,存在暂时性死区(声明变量之前无法直接访问)
2.不可以重复声明,但是可以重新赋值
3.可以在声明时候不进行赋值
4.存在块级作用域 if for
const特点:
1.不会变量提升,存在暂时性死区(声明变量之前无法直接访问)
2.不可以重复声明,不可以重新赋值
3.声明同时必须进行初始化
4.存在块级作用域
5.对于引用数据类型属性和元素可以修改
6.一般用于声明常量
const a = 'hello';a=10; 报错
const obj = {name:"zhangsan"} obj.name ='lisi'
/**
* 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,'外部打印');