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