ES6(部分学习笔记)

最新推荐文章于 2024-03-19 18:43:29 发布

彡大梦想家

最新推荐文章于 2024-03-19 18:43:29 发布

阅读量469

点赞数

文章标签： es6 学习前端

本文链接：https://blog.csdn.net/m0_65025563/article/details/127837391

版权

po上ES6一些内容的思维导图，记录学习足迹，欢迎大佬们多多指教。大家的交流也会是我在学习JS路上的一盏明灯

一、JavaScript的组成

1.ECMAScript：JavaScript的基本语法

2.BOM：浏览器对象模型(操作浏览器)--核心对象window

3.DOM：文档对象模型(操作html文档)--核心对象document

二、ECMAScript

1.ECMAScript5：脚本语言。不需要独立的编译器，通过浏览器加载运行。实现用户和页面的交互

2.ECMAScript6：是JavaScript的下一代语法标准，于2015年6月发布。是JavaScript正式成为企业级的开发语言

3.ECMAScript和JavaScript的关系：

ECMAScript是一个语法规范，JavaScript是该语法规范的实现

三、ES6的语法

1.let 和const

let：用来声明块级变量。var声明的变量会出现作用域的提升(会出现变量的污染)
const：声明的变量必须要初始化(赋值)
const声明的对象：
1. 可以修改对象的属性值，但是不能修改对象本身
2. 冻结对象：不能修改对象的属性。使用Object.freeze(对象名)
3. deepFreeze冻结多层对象
  
  hasOwnProperty(key)函数：判断key是否是对象的属性，若是返回true，不是返回false

四、DOS的基本命令

1.DOS：Disk Operating System，磁盘操作系统

MS-DOS、PC-DOS、UC-DOS

2.操作系统：

单用户单任务的操作系统：DOS
单用户多任务的操作系统：windows系列
多用户多任务的操作系统：unix

3.基本概念

4.基本指令

目录转换：从一个目录转换到另一个目录(从一个文件夹进入到另一个文件夹)
- cd 目录名 -->进入到指定的目录中
- cd.. 返回当前目录的上一级目录(父目录)
- cd\ 表示退回到根目录(\ 代表根目录)
列举当前目录下的子目录和文件：
- dir ：在名称前带<DIR>的是目录，不带<DIR>的是文件
- dir/p：分屏显示(子目录和文件)
- dir/w：宽屏显示(用[]括起来的都是目录)
创建目录(新建文件夹)
- md 目录名
删除目录(删除文件夹)
- rd 目录名

五、ES6的新特性

1.临时死区：用let和const声明的变量，放在"临时死区"，使用let声明的变量、const声明的常量的作用域不会被提升

2.在循环中使用var的情况：

let arr = []
        for (let i = 0; i < 5; i++) {
            arr.push(function () {
                console.log(i);
            })
        }
        arr.forEach(function (item) {
            item()
        })

解构赋值：Rest运算符："..."

当迭代器使用：会按顺序遍历容器中的元素

 function fun(x,y,z){
  console.log(x,y,z);
    }
    let arr = [11,22,33]
    fun(...arr)

替代函数的内置属性arguments

function fun(...args) { console.log(args);
 }
let arr = [11, 22, 33]
fun(arr)

通过Rest运算符(...)可以简化变量的赋值
通过解构赋值可以简化变量的赋值
通过"..."把特定的元素放在变量里
通过解构来交换变量的值

集合运算

并集：

let setA = new Set([4,5,6])
let setB = new Set([5,6,7])
let bj = new Set([...setA,...setB])
console.log(bj)

交集：

let arr = [...setA]  //解构集合setA，将其转换成数组  
       //对arr进行过滤：使用filter函数
       //依次从arr中取出元素传递给item,在函数体内设置筛选条件，将满足条件的元素返回给temp
 let temp = arr.filter(function(item){
     if(setB.has(item)){ 
        return item
           }
       })
    console.log(temp)

差集:

let arr = [...setA]  //解构集合setA，将其转换成数组  
       //对arr进行过滤：使用filter函数
       //依次从arr中取出元素传递给item,在函数体内设置筛选条件，将满足条件的元素返回给temp
       let temp = arr.filter(function(item){
           if(setB.has(item)==false){ 
              return item
           }
       })
    console.log(temp)

map集合

1.数据的存放格式：采用key-value的方式进行存放。采用这种方式存放数据的有

对象：属性对应的是key()，属性值对应的是value(值)
```
let obj = {

name :'张三'

age:25

}
```
JSON：是常用的一种前后台数据交换的格式(键值对)
Map

2.Map定义：Map是一种数据结构(Hash结构)，在ES6中是一种许多键值对的有序列表

3.Map的使用方法

(1)属性：size ...存放的是Map中的元素个数

(2)方法：

Map()：构造方法，用来创建Map对象，不带参数表示创建空的Map,即size属性值为0
set(key,value)：向Map中添加数据
get(key)：获取键为key的value
has(key)：判断Map中是否存在key
delete(key)：删除key
clear：清空Map
keys()：返回Map中的所有key

强调：(1)Map中的key不能重复，但是value可以重复

(2)keys()返回的是是Map中所有key集合——keys()返回的集合类型是Set

(3)在map中通过key可以得到对应的value，反之则不行

values()：返回Map中的所有value
entries()：可以获取Map的所有成员(即所有的key-value)

forEach循环遍历：

  m1.forEach(function (value,key){    
  console.log(`${key}:${value}`);
        })

4.Map转换为数组

(1)解构整个Map

  let m3 = new Map([
  ['one','北京'],
  ['two','上海'],
   ])
   console.log(m3);
 let arr =[...m4.entries()]

(2)解构keys()

let a1 = [...m4.keys()]
console.log(a1)

(3)解构values()

let a1 = [...m4.values()]
console.log(a1)

函数

1.ES5中的函数：

通过function关键字定义函数

function 函数名([参数]){}
函数表达式

let 变量 = function([参数]){}

注意：(1)形参和实参的区别

(2)函数的返回值：return语句来实现

2.ES6中对函数的扩展

函数形参的默认值
箭头函数：在定义函数时使用"=>"符号。在定义回调函数(高阶函数)、函数表达式时使用。可以简化代码

类

1.面向对象：是一种开发思想，一切皆为对象。对象是属性和行为的结合体

2.面向过程：也是一种开发思想。开发中的每个细节，开发者都要考虑到

(面向接口)

3.类：具有相同属性和行为的对象的集合

4.ES5中实现类的功能：构造函数，在构造函数中封装了属性和方法。却显示构造函数和普通函数的定义方式是一样的

5.ES6中类的定义方式：语义性更强、语法更简洁

6.ES6中支持getter/setter来获取属性值、设置属性值

(1)定义get方法、set方法的目的是：用于隐藏对象的属性名

(2)在使用get方法、set方法时不用带'()'

类的继承

1.基本的概念：

父类(基类)：可以派生子类的类
子类(派生类)：由父类派生而来的类

2.面向对象的三大特性

封装性：对象是属性和行为的封装体 ---数据安全
继承性：子类可以继承父类的属性和方法---代码复用
多态性：同一个消息传递给不同对象，出现的效果不同 ---应用灵活、可以适应不同的需求

3.继承的实现

ES5中继承的实现：没有类的概念
- 构造函数：构造函数名就是类名，在ES5中类的继承实际就是构造函数的继承
- 实现：通过call、apply、bind函数来实现构造函数的继承
ES6中的继承：通过extends

A:super:指向父类。super([参数])表示调用父类的构造函数

B:如果在子类的构造函数中调用父类的构造函数，那么super()必须作为子类构造函数中的第一条语句，在执行子类的构造函数之前必须先执行父类的构造函数(先有父，再有子)

C:方法覆盖(Overwrite)：在继承过程中，若父类的方法与子类的某个方法同名，则子类方法覆盖父类的同名方法

D:在子类的方法中可以使用super调用父类中的某个方法

E:不允许多继承，只能单继承

多继承：类的直接父类有多个

单继承：类的直接父类只有一个父类

ES6类的继承

1.继承的好处：在父类中定义的属性和方法，子类继承后就可以直接使用

2.类继承过程中的向上转型：

子类的对象一定是父类的类型，父类的类型不能是子类的类型

typeof：用于判断变量的数据类型(基本数据类型)
- typeof 变量名 == '数据类型'
instanceof：用于判断变量的数据类型(类类型)
- 对象名 instanceof 类名
- 判断'对象'是否给定的类的对象

ES6的模块化

1.模块化管理的方式

ES6的方式：一个.js文件就是一个模块。采用"module"方式管理。即用exports导出、用import...from导入
Node的方式：采用'CommonJs'方式。即export.module = '变量名'导出，用require导入

2.在VScode中配置ES6的模块管理环境

在指定文件夹下执行初始化指令：npm init -y 会在文件夹下生成package.json文件
在package.json中加入："type":"module"

3.导入/导出变量

4.导出/导入整个模块：使用*通配符，表示导入所有

5.默认导出(export default)

一个模块只能有一个默认导出，对于默认导出，导入的名称和导出的名称不一致。
混合导出
重命名export和import

立即执行函数(IIFE)

1.实现方式

用圆括号将函数的定义包裹起来

先用圆括号将函数的定义部分包裹起来，然后再加上调用的圆括号

2.立即执行函数的作用

不需要为函数命名，避免污染全局变量。
创建一个独立作用域，这个作用域里面的变量，外部访问不到，避免变量污染。

3.使用场景

在页面加载完成后，需要立即执行的一些初始化设置，例如时间处理，创建对象等。
在应用中只执行一次的代码