ES6 基础复习

这篇具有很好参考价值的文章主要介绍了ES6 基础复习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

变量声明

变量可能具有的特性

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

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()

输出结果

ES6 基础复习

import()

支持动态加载模块,可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用

在运行时执行,也就是说,什么时候运行到该语句,就会加载指定的模块

import() 函数与加载的模块没有静态连接关系

import() 函数是同步加载文章来源地址https://www.toymoban.com/news/detail-434576.html

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

到了这里,关于ES6 基础复习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6如何声明一个类?类如何继承?

    引言 在ES6(ECMAScript 2015)中,引入了类(class)的概念,使得JavaScript的面向对象编程更加直观和易于理解。类提供了一种结构化的方式来定义对象的属性和方法,并且支持继承。在本文中,我们将深入探讨如何在ES6中声明一个类以及如何实现类的继承。 1. 声明一个类 在ES6中

    2024年02月08日
    浏览(23)
  • ES6 新特性

    🎄欢迎来到@边境矢梦°的csdn博文🎄  🎄本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下 🫰🫰🫰 ,下次更新不迷路🎆  Ps: 月亮越亮说明知识点越重要 (重要

    2024年02月10日
    浏览(31)
  • ES6 特性

    1.1.1 什么是 ES ES 全称 EcmaScript 是脚本语言的规范 JavaScript 是 EcmaScript 的一种实现 ES 新特性就是指 JavaScript 的新特性 1.1.2 为什么要使用 ES 语法简单,功能丰富 框架开发应用 前端开发职位要求 1.1.3 为什么要学习 ES6 ES6 的版本变动最多,具有里程碑的意义 ES6 加入许多新的语法

    2024年02月07日
    浏览(34)
  • ES6新特性

    1、初识ES6 ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言;   ECMAScript是JavaScript的规范,而JavaScript是ECMAScript的实现;   ES6是一个历史名词,泛指 5.1 版本后

    2024年02月07日
    浏览(28)
  • 【ES6 新特性】

    ES6 为字符串扩展了几个新的 API: includes() :返回布尔值,表示是否找到了参数字符串。 startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部。 endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部。 模板字符串相当于加强版的字符串,用反引号 `,除了

    2024年02月11日
    浏览(32)
  • ES6的重要特性

    1. 块级作⽤域:引⼊ let 和 const ,允许在块级作⽤域中声明变量,解决了变量提升和作⽤域污染的问题。 2. 箭头函数:使⽤箭头( = )定义函数,简化了函数的书写,并且⾃动绑定了 this 。 3. 模板字符串:使⽤反引号(`)包裹字符串,可以在字符串中使⽤变量和表达式

    2024年02月19日
    浏览(33)
  • ES6常用新特性

    ES6改动很大,可以简单分为四类 1、解决原有语法的缺陷和不足 例如:let,const 2、对原有语法进行增强 解构、扩展、模板字符串 3、新增对象、全新的方法,全新的功能 Object.assign()、Proxy对象代理、Reflect 等等 4、全新的数据类型和数据结构 set、map、class、迭代器、生成器 等

    2024年02月09日
    浏览(28)
  • 【ES】笔记-let 声明及其特性

    声明变量 变量赋值、也可以批量赋值 变量不能重复声明 块级作用域,let声明的变量只在块级作用域内有效 注意:在 if else while for 中使用 let 都是块级作用域 不存在变量提升 使用 var (存在变量提升) 使用 let (不存在变量提升) 注:变量提升就是在变量创建之前使用(比如输出

    2024年02月14日
    浏览(27)
  • ES6及以上新特性

    ES6(ECMAScript 2015)及以上版本引入了许多新特性,每个版本都有不同的增强和改进。以下是 ES6 及以上版本的新特性的详细描述: ES6(ECMAScript 2015): let 和 const 声明:引入块级作用域的变量声明,用于替代 var 声明,解决了变量提升的问题。 箭头函数:用 “=” 符号定义函

    2024年02月14日
    浏览(29)
  • 【ES6】—【新特性】—Symbol详情

    定义:独一无二的字符串 PS: Symbol 声明的值是独一无二的 PS: 无论Symbol.for()在哪里声明,都属于全局环境声明 当一个对象的key值有重复时,后面的值会覆盖前面的值 PS: 使用Symbol的独一无二的特性来解决

    2024年02月10日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包