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

代码007普通

打赏 收藏 海报 链接