ES6-----6种变量

这一个系列是ES6的全解析,不一定是完全的目录,希望记录一些自己的理解


ES5一共有两种变量的声明方法,即var和function;到了ES6这里,除了增加的常用的let和const之外,还添加了import和class命令。我们逐一来看:


var

这个想必大家都很清楚,也用的很多。var 是存在var变量不存在块级作用域,是函数作用域;可以多次重复声明同一变量,而且有变量提升的效果。

let

let 是ES6中新增的一种变量命名方式,其作用域也是ES6中特色的块级作用域,某种程度上来说,ES6相当于严格模式中的var,因此不存在变量提升的问题,例如在for循环中,就很适合let声明临时变量。let还有一个特性就是暂时性死区,当存在全局变量的时候,再去块级作用域中用let声明一个相同的变量就会存在暂时性死区。

const

const多用于声明只读的常量,且声明过后,常量的值不能改变;与let一样,只在块级作用域中生效,同样不存在变量提升;同样存在暂时性死区,且不可重复声明同一变量。慎用const声明对象

import

import同样也是ES6中新增的一种方式,不同的是用来处理模块化的函数以及对象,其本质是实现按需加载的思想。静态的import导入与另一个模块的导出绑定,导入的模块运行在严格模式下,且可以向后兼容。这对于项目的模块化,为整体代码缩水有很大的用处。import可以接收一个对象,用对象表示;具有变量提升的效果。

class

按照js中万物皆对象的思想,是不应该有类的这个东西的。但ES6为了更接近传统语言的写法,引入例如类(class)这个概念。class这个其实还是旧瓶装新酒,是为了让整体看起来更像面向对象的写法。有一点注意的是类的内部所定义的所有方法是不可枚举的,可以通过getter和setter访问属性。类不存在变量提升,在内部都是默认的严格模式,但是存在继承。后续会说,这里不多说

function

function声明主要是对函数的管理;在ES6中,声明函数时可以使用默认参数,声明后的默认参数不能用let、const进行二次声明。同样是不能有同名参数,不具有传值的功效;设置完默认参数就会形成函数作用域;这些都是常用的特性,ES6中引入了rest参数(形式为“...变量名”),用于获取函数的其余参数,与其搭配的通常是数组;第二个新特性是扩展运算符(spread)是三个点(...)。这相当于rest参数的逆运算,将一个数组转为用逗号分隔的参数序列,该运算符主要用于函数调用。第三个是判断函数的调用,第四个是比较常用的箭头函数。


最后总结一下,粗略的划分可以如下:let与var主要是针对变量作用,const多服务于常量,import则针对模块化处理,class侧重于伪类的抽象,function则坚守对函数的处理,按照js中万物皆对象,凡是皆可函数的思想,基本上相对于ES5来说,ES6对变量命名的方式做了进一步的细化,可能ES7还会进一步抽象,这里先不表,待看了ES7再回来说

 

 

 

 

 

ES6模块化是 JavaScript 发展历程中的一个重要里程碑,它为代码的组织和管理提供了更高效、更合理的方式。 ### ES6模块化介绍 ES6 模块化是 ECMAScript 2015(ES6)引入的官方模块系统,它解决了之前 JavaScript 在大型项目中代码组织和依赖管理的难题。在此之前,JavaScript 缺乏原生的模块化支持,开发者通常借助 CommonJS(用于服务器端,如 Node.js)或 AMD(用于浏览器端)等规范来实现模块化,但这些规范并非语言原生支持,存在一定的局限性。ES6 模块化则是语言层面的标准,具备更好的静态分析能力和兼容性,使得代码的可维护性和复用性大幅提升。ES6 模块化弥补了 ES5 的缺陷,带来了现代编程特性,其官方名称为 ECMAScript 2015,于 2015 年 6 月发布,若遇到兼容问题可使用 Babel 转译器进行处理[^1]。 ### ES6模块化使用方法 #### 导出 在 ES6 中,使用 `export` 关键字来导出模块中的变量、函数或类。有两种导出方式: - 命名导出:可以导出多个变量、函数或类,使用时需要使用对应的名称进行导入。 ```javascript // module.js // 定义变量 const message = 'Hello, ES6 Modules!'; // 定义函数 const sayHello = () => { console.log(message); }; // 命名导出 export { message, sayHello }; ``` - 默认导出:每个模块只能有一个默认导出,使用时可以自定义导入的名称。 ```javascript // module.js const defaultMessage = 'This is a default export.'; // 默认导出 export default defaultMessage; ``` #### 导入 使用 `import` 关键字来导入模块。 - 导入命名导出的模块: ```javascript // main.js // 导入命名导出的变量和函数 import { message, sayHello } from './module.js'; console.log(message); sayHello(); ``` - 导入默认导出的模块: ```javascript // main.js // 导入默认导出的模块 import customName from './module.js'; console.log(customName); ``` - 混合导入:当模块中既有命名导出又有默认导出时,可以混合导入。 ```javascript // module.js const defaultMessage = 'This is a default export.'; const namedMessage = 'This is a named export.'; export default defaultMessage; export { namedMessage }; // main.js import customName, { namedMessage } from './module.js'; console.log(customName); console.log(namedMessage); ``` ### ES6模块化相关知识 #### 与 CommonJS 的对比 - CommonJS 是服务器端模块规范,主要用于 Node.js 环境,采用同步加载模块的方式。在 CommonJS 中,使用 `module.exports` 导出模块,使用 `require` 导入模块。 ```javascript // CommonJS 导出 // module.js const data = 'CommonJS data'; module.exports = { data }; // CommonJS 导入 // main.js const m = require('./module.js'); console.log(m.data); ``` - ES6 模块化是语言原生支持的模块规范,支持静态分析,在浏览器和服务器端都可以使用,采用异步加载模块的方式。 #### 动态导入 ES6 还支持动态导入模块,通过 `import()` 函数实现,它返回一个 Promise,可以在需要的时候动态加载模块。 ```javascript // main.js // 动态导入模块 import('./module.js') .then((module) => { console.log(module.message); module.sayHello(); }) .catch((error) => { console.error('Error loading module:', error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值