变量声明
变量可能具有的特性
块级作用域,变量提升(变量声明之前使用该变量),全局属性,重复声明,暂时性死区(变量声明之前的区域无法使用该变量),初始值设置,指针指向(重复赋值)
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() 函数与加载的模块没有静态连接关系
import() 函数是同步加载
if (condition) {import('moduleA').then(...);
} else {import('moduleB').then(...);
}