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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/195745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

沿着马可·波罗的足迹,看数字云南

刚入行的时候&#xff0c;有位前辈跟我说过一句话&#xff1a;去现场“要像外国人一样去看”&#xff0c;重新审视那些自己可能早已“熟视无睹”的事物。 前不久&#xff0c;我跟随“看见数字云南——云南数字经济媒体探营活动”&#xff0c;奔赴昆明、大理、西双版纳等地&…

多路径传输(MPTCP MPQUIC)数据包调度研究总结

近些年来&#xff0c;以5G和Wifi6为代表的无线通信技术发展迅速&#xff0c;并已经在全世界实现了大规模部署。此外&#xff0c;智能手机等移动设备不断迭代更新&#xff0c;其网络通信能力也持续演进&#xff0c;使得应用同时利用多个不同网卡在多条不同物理链路上&#xff08…

性价比开放式蓝牙耳机推荐哪款、性价比最高的开放式耳机

传统的耳机设计虽然便携&#xff0c;但却可能给一些需要长时间佩戴的用户带来不适。长时间封闭在耳机内可能导致耳朵不透气&#xff0c;甚至引起疼痛。这就是为什么近年来开放式耳机越来越受欢迎的原因。这种耳机设计无需直接插入耳道&#xff0c;采用挂耳的佩戴方式&#xff0…

Python3+selenium自动化测试框架详解

背景 为了更好的发展自身的测试技能&#xff0c;应对测试行业以及互联网行业的迭代变化。自学python以及自动化测试。 虽然在2017年已经开始接触了selenium&#xff0c;期间是断断续续执行自动化测试&#xff0c;因为还有其他测试任务&#xff0c;培训任务要执行… 前期建议大…

W11+Ipv6+可道云+PHPstudy实现私人云盘搭建

W11Ipv6可道云PHPstudy实现私人云盘搭建 一、搭建原因二、搭建过程软件选择服务器环境管理软件私人云盘 可道云搭建小皮面板搭建 三、相关配置程序开机自启远程关机远程开机 四、相关参考 一、搭建原因 工位电脑上一些文件想备份到家里电脑&#xff0c;购买NAS又有点多余&…

获取安卓的Facebook Developer的hashCode

先决条件: Java Development Kit (JDK) 已安装并配置好环境变量。OpenSSL 安装在你的系统上,并且其可执行文件路径也被添加到系统环境变量中。步骤1:创建批处理文件 打开文本编辑器,如Notepad,并输入以下代码: @echo off set /p alias="Enter keystore alias: &quo…

protobuf动态库和静态编译

protobuf-3.6.1路径下&#xff1a; #protobuf-3.6.1 路径下 mkdir build && cd build mkdir release && cd release mkdir -p ../../../install/release#动态库 cmake -G "Unix Makefiles" -DCMAKE_BUILD_TYPERelease -DCMAKE_INSTALL_PREFIX../../…

solidity实现ERC1155多代币标准

文章目录 1、NFT - 维基百科2、IERC1155MetadataURI3、IERC1155Receiver4、IERC11555、ERC11556、NFT11557、开源地址 1、NFT - 维基百科 ERC-1155 标准于2018年6月由Witek Radomski、Andrew Cooke、Philippe Castonguay、James Therien、Eric Binet及Ronan Sandford提出。此标…

CSS新手入门笔记整理:CSS列表样式

列表项符号&#xff1a;list-style-type 在HTML中&#xff0c;对于有序列表和无序列表的列表项符号&#xff0c;都是使用type属性来定义的。 语法 list-style-type:取值; list-style-type属性是针对ol或者ul元素的&#xff0c;而不是li元素。 有序列表属性 属性值 说明 …

RabbitMQ常用命令(二)

用户管理 RabbitMQ安装成功后使用默认用户名guest登录 账号&#xff1a;guest 密码&#xff1a;guest 注意&#xff1a;这里guest只允许本机登录访问需要创建用户并授权远程访问命令如下 添加用户&#xff1a;rabbitmqctl add_user {username} {password} rabbitmqctl add_…

从微软官网下载系统镜像重装的方法

一、制作系统镜像介质U盘 1、在一台能够正常进入系统的电脑中登录以下网址&#xff1a;https://www.microsoft.com/zh-cn/software-download/windows10&#xff0c; 点击立即下载工具。 2、在下载完成后&#xff0c;双击打开&#xff0c;选择为另一台电脑创建安装介质&#xf…

2023下半年网络规划设计师上午真题答案及解析

1 eMMB使用的复用技术&#xff1a;OFDM 2.并发性是指同一时间不同时刻 3.无法排除交换机丢包措施&#xff1a;查看交换机路由配置 4.海明码&#xff1a;C0C13&#xff0c;第三位出错1010101 5奎诺斯特定理规定&#xff1a;2W&#xff0c;应该是2倍信道带宽 6安全电子邮件&am…

controller能接收到数据有数据但是前端无法显示数据

又是制作系统时遇到的问题。只是想做个查询商品的页面&#xff0c;结果弄了一天&#xff0c;在网上各种查问题&#xff0c;各种解决办法用在我的代码上&#xff0c;换了无数种关键词搜索终于找到了一条成功解决了问题。 问题描述&#xff1a; 事情是这样的&#xff1a;我要写一…

云原生之深入解析Kubernetes策略引擎对比:OPA/Gatekeeper与Kyverno

一、前言 ① Kubernetes 策略 Kubernetes 的 Pod Security Policy&#xff0c;正如其名字所暗示的&#xff0c;仅是针对 Pod 工作的&#xff0c;是一种用来验证和控制 Pod 及其属性的机制。另外 PSP 只能屏蔽非法 Pod 的创建&#xff0c;无法执行任何补救/纠正措施。而 Gatek…

如何将Java条码Dynamsoft Barcode Reader集成到命令行、GUI和Web应用程序中

Dynamsoft Barcode Reader SDK一款多功能的条码读取控件&#xff0c;只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。能支持多种图像文件格式以及从摄像机或扫描仪获取的DIB格式。使用Dynamsoft Barcode Reader SDK&#xff0c;…

实验案例二:多表查询

1、表联接类型。 表联接类型可以分为内联接&#xff0e;外联接和交叉联接等。 1&#xff0e;内联接。 内联接〈 inner join&#xff09;是最常用的-一-种联接方式&#xff0c;只返回两个数据集合之间匹配关系的行&#xff0c;将位于两个互相交叉的数据集合中重叠部分以内的数…

ROS第一个程序——helloworld

目录 一、工作空间的创建 1.创建工作空间并初始化 2.进入 src 创建 ros 包并添加依赖 二、C实现helloworld C源码实现 编辑 ros 包下的 Cmakelist.txt文件 进入工作空间目录并编译 执行 三、python实现helloworld 进入 ros 包添加 scripts 目录并编辑 python 文件 …

推荐6个AI相关开源项目

1.GPT 学术优化 - 一个专注优化论文的 AI 工具 &#x1f310;开源地址&#xff1a;https://github.com/binary-husky/gpt_academic &#x1f5a5;️体验地址&#xff1a;https://huggingface.co/spaces/qingxu98/gpt-academic &#x1f4c4;该工具可以为你的论文提供一键润色…

BLUE引擎开始游戏没反应如何解决

很常见的架设配置出错导致blue引擎开始游戏按钮灰色选择服务器断开点开始游戏没反应怎么办&#xff1f;简单说下这类问题通常 是网关与登录器不配套,替换生成登录器同上生成的网关以及logingate网关IP给占用了或者客户端文件bluem2_client.dat是否和登录器版本不一致。 1、开始…

flink安装与配置-脚本一键安装(超简单)

文章目录 前言使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 执行脚本4. 加载用户环境变量5. 浏览器访问 总结 前言 本文介绍了使用shell脚本一键安装和配置Apache Flink单机版的方法。通过复制并执行提供的安装脚本&#xff0c;可以自动下载、安装和配置Flink。脚本会检…