变量声明
变量可能具有的特性
块级作用域,变量提升(变量声明之前使用该变量),全局属性,重复声明,暂时性死区(变量声明之前的区域无法使用该变量),初始值设置,指针指向(重复赋值)
let
块级作用域,不存在变量提升,不能重复声明,不能重复赋值
const
块级作用域,不存在变量提升,不能重复声明,不能重复赋值
声明的为常量,值不可更改;常量名一般大写,且必须设置初始值
对数组和对象元素的修改,不算做对常量的修改,不会报错;修改的只是堆中的数据,不会改变栈中的指针
声明数组和对象使用 const,可以避免一些误操作
解构赋值
按照一定的模式将数组或对象中的元素提取出来,并将元素作为一个变量进行赋值
解构对象:数组、对象
// 1.数组的解构
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
let [xiao, liu, zhao, song] = F4
// 2.对象的解构
const person = {
name: '张三',
age: 35,
crime: function () {
console.log('无法无天!')
},
}
let { name, age, crime } = person
模板字符串
声明方式:【` `】
字符串内部可以直接换行;使用 `${变量名}` 进行变量拼接
let comedian = `<ul>
<li>沈腾</li>
<li>马丽</li>
<li>艾伦</li>
<li>魏翔</li>
</ul>`
console.log(comedian)
// 可以直接进行变量拼接
let favorite = `沈腾`
let sentence = `${favorite}是我最喜欢的喜剧演员!`
扩展运算符
【...】 扩展运算符将数组元素从数组中释放出来
const escort = ['王朝', '马汉', '张龙', '赵虎']
console.log(...escort) // '王朝' '马汉' '张龙' '赵虎'
应用
// 1.数组的合并
const kuaizi = ['王太利', '肖央']
const fenghuang = ['曾毅', '玲花']
// 字符串拼接
const singer = kuaizi.concat(fenghuang)
console.log(singer) // ["王太利", "肖央", "曾毅", "玲花"]
// 扩展运算符合并数组
const singer1 = [...kuaizi, ...fenghuang]
console.log(singer1) // ["王太利", "肖央", "曾毅", "玲花"]
// 2.数组的克隆
const general = ['关羽', '张飞', '赵云']
// 如果数组中的数据有引用类型的数据,则此处的克隆属于浅拷贝
// 如果没有,则属于深拷贝
const general1 = [...general]
console.log(general1)
// 3.将伪数组转换为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs] // 也可以使用 arguemnts
console.log(divArr)
模块化
将一个复杂的系统分解成多个独立的模块的代码组织方式
优点:防止命名冲突、代码复用、高维护性
模块化功能主要由两个命令构成:export 和 import
export
导出数据和功能
export 导出的三种方式:分别暴露,统一暴露,默认暴露
// 分别暴露
export let majorMan = '沈默'
export function wifeInfo() {
let wife = {
name: '殷若涵',
job: '汇联号掌权人',
}
console.log(wife)
}
// 统一暴露
let master = '徐阶'
function masterInfo() {
let age = 50,
job = '大明次辅'
console.log(`年龄:${age};工作:${job}`)
}
export { master, masterInfo }
// 默认暴露
export default {
friend: ['徐渭', '姚长子'],
outPut: function () {
this.friend.forEach((item) => {
console.log(item)
})
},
}
import
导入数据和功能
注意点:import * 和 as 关键字
<!-- module 的加载实现是 es6 语法,需要添加 type="module" -->
<script src="./father.js" type="module"></script>
// import * 一次性导入模块中的所有变量
import * as child1 from './child1.js'
console.log(child1.majorMan)
child1.wifeInfo()
// as 关键字,将输入的变量重命名
import { master, masterInfo as getInfo } from './child2.js'
console.log(master)
getInfo()
import child3 from './child3.js'
child3.outPut()
输出结果
import()
支持动态加载模块,可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用
在运行时执行,也就是说,什么时候运行到该语句,就会加载指定的模块
import() 函数与加载的模块没有静态连接关系文章来源:https://www.toymoban.com/news/detail-434576.html
import() 函数是同步加载文章来源地址https://www.toymoban.com/news/detail-434576.html
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
到了这里,关于ES6 基础复习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!