ES6与ES5的区别？

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'

javascript 复制代码

//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,

....

}

javascript 复制代码

// 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,

....}

javascript 复制代码

// 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'

javascript 复制代码

/**
 * 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,'外部打印');