ES6 基础复习

news/2024/11/15 7:21:00/

变量声明

变量可能具有的特性

块级作用域,变量提升(变量声明之前使用该变量),全局属性,重复声明,暂时性死区(变量声明之前的区域无法使用该变量),初始值设置,指针指向(重复赋值)

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(...);
}


http://www.ppmy.cn/news/56716.html

相关文章

老外从神话原型中提取的12个品牌个性

老外从神话原型中提取的12个品牌个性 也是西方视角&#xff0c;需要本土化 参照心理学大师荣格的理论&#xff1a;心理学潜意识派 趣讲大白话&#xff1a;品牌的调调是啥 【趣讲信息科技151期】 **************************** 12种原型又归属于4种人性动机。 1、稳定&#xff0…

「C/C++」C/C++静态链接库与动态链接库

博客主页&#xff1a;何曾参静谧的博客 文章专栏&#xff1a;「C/C」C/C学习 目录 相关术语案例环境&#xff1a;Win10VS2019一、链接库介绍二、静态链接库&#xff08;Static Library&#xff09;2.1、静态库优缺点2.2、静态库的创建2.2.1、创建静态库项目2.2.2、添加.h头文件…

Anaconda安装教程

最新Anaconda3安装教程 1.Anaconda3下载 官网下载地址 缺点&#xff1a; 下载速度比较慢&#xff0c;对速度有要求的小伙伴往下看 通过清华镜像加速的方式下载比较快 清华镜像加速地址 2.Anaconda3安装 双击安装包&#xff0c;点击next 点击 I agree 选择使用的用户&am…

使用ALLpairs完成正交表测试法练习题

该实验报告需要完成如下三个正交表测试法练习题 1、为了测试一个游戏软件的安装过程&#xff0c;需要考虑如下因素&#xff1a; (1) 操作系统: win2008、win7、win10、RedHat、Linux (2) 杀毒软件:瑞星、卡巴斯基、诺顿、江民、360 杀毒 (3) 数据库: oracle10g、SQLServer200…

正则表达式基础一

BRE(basic regular expression)&#xff1a;匹配数据流中的文本字符 普通文本匹配 特殊字符 正则表达式存在一些特殊字符&#xff0c;如需当成普通文本来匹配&#xff0c;必须加上转义&#xff0c;即反斜杠\&#xff0c;如下所示 .*[]^${}?|() 指定出现位置的字符 ^ 指定行首…

SpringCloud详解

SpringCloud是一个基于SpringBoot的分布式系统开发框架&#xff0c;它能够帮助我们快速、稳定地构建分布式系统。本篇博客将对SpringCloud进行详细解析&#xff0c;介绍SpringCloud的主要组件和相关应用场景&#xff0c;同时提供代码示例以帮助读者更好地掌握SpringCloud的实际…

Linux命令集(Linux常用命令--cat指令篇)

Linux命令集&#xff08;Linux常用命令--cat指令篇&#xff09; Linux常用命令集&#xff08;cat指令篇&#xff09;4.cat(concatenate)1. 查看文件内容&#xff1a;2. 连接多个文件&#xff1a;3. 创建文件并通过终端写入内容4. 输出内容编号 Linux常用命令集&#xff08;cat指…

驾考系统C#winform驾照考试系统

驾考系统C#winform驾照考试系统 c#&#xff0c;sqlite&#xff0c;winform &#xff0c;.net framwork4.0驾照考试系统 有兴趣的朋友可以修改源代码玩玩!我用的数据库是sqlite &#xff08;随着我国社会的不断进步和发展&#xff0c;越来越多的家庭拥有汽车&#xff0c;人们…