ES5及ES6

cancer
218 阅读8分钟

概述

（全称ECMAscript ECMA是一个组织名 （欧洲计算机协会）,scipt指代脚本）.利用babel.js的第三方库可以完成ECMAScript的版本转换 。它是javaScript的基础语法支持（除bom，dom相关内容都是es的内容）。

javascript 的组成

  • dom （操作HTML文档）
  • bom （操作浏览器的）
  • ECMAScript（基础语法）

ECMAScript版本

  • ES3基础 内容 （基础一些对象及方法）
  • ES5 进阶内容 （es3新增的队友方法及特性 es5是2009出的 ）
  • ES6加强内容 （在es5的基础上新增内容及特性 把se6以后都称为es6 兼容部分的浏览器（最新的浏览器版本支持）es6是2015出的 ）

ES5新增特性

es5主要对于es3的内容进行增强 ，主要增强有对象、数组、严格模式、相关高阶函数.

严格模式

严格模式是se5的一个新特性 ，他可以提高代码的执行效率，他对应相关的内容进行了规范（规范性更高 执行效率更快）（普通的写法被称为怪异模式），它使用user strict 进行声明。

严格模式具备的特性 **

image.png

  • 对于任何不符合规范的地方全部抛出错误
  • 声明变量必须使用var 关键词

image.png

  • 函数内的this 指向 不能指向widnow 如果指向了widndow值为nudefined

image.png

  • 函数的声明只能在对应上下文内声明

image.png

  • 禁止八进制

image.png

  • 形参名不能重名 ，及对象内容的属性也不能重名

image.png

  • arguments中的clleer无法方法对应的函数相关内容

image.png

  • 无法删除对象自带的属性

image.png

  • arguments中的形参和实参不同步

image.png

- 数组的高阶函数

  • foreach 遍历无返回值
  • map 遍历有返回值（返回值的长度和对应的遍历数组长度一致）
  • filter 过滤的 根据传入条件返回满足条件的内容 返回的是一个新的数组）
  • reduce 计算的 （传入对应的计算方式 返回结果（如果传入了初始值那么从下标0开始）
  • reduceright 计算的 （跟reduce一致 计算方向从右到左，从后面算起）
  • some判断是否有满足条件的内容 （有返回true 没有就返回false）
  • every 判断是否全部都满足条件（都满足返回true 否则返回falsede）
注意事项
  • 数组的高阶函数都是会忽略对应的空值（empty）
  • foreach常用于要更改原本数组的情况下 map用于无需更改原本数组且需要一个新的数组的时候
  • reduce方法传入对应的初始值是从下标0开始 未传入是从下标1开始

字符串的字符串模版

image.png

手写与源码实现高阶函数

foreach实现

image.png map实现

image.png

reduce实现

image.png

filter 实现

image.png

some 实现

image.png

every 实现

image.png

对象的get set 方法

  • get是用于获取数据的 里面返回的值就是得到的数据
  • set适用于设置数据的

利用set get更改数据 驱动 视图变化

image.png

注意事项

  • 不要在get 或set方法中使用本身的这个属性，造成内存泄漏。
  • 如果只有get没有set那么对应的属性就是只读属性（无法赋值）
更改函数中this指向的方法
Function的方法
  • bind 返回一个新的函数

image.png

  • call 更改this指向执行当前的函数

image.png

  • apply 更改this指向执行当前函数

image.png

区别

  • bind 方法返回一个函数 不会自动调用 需要手动调用 而call及apply会自动调用
  • call传递的是一个个的参数 apply 传递是一个参数数组
  • call及apply 不会更改bind返回的函数的this指向

以及部分的方法

  • 字符串的 trim
  • 数组的indexOf 及lastindexOf等
  • JSON的两个序列化反序列化方法 JSON.stringify JSON.parse
  • obejct 类中的大部分方法
  • ....

ES6新增内容

主要在es5的基础上，对于对象、数组、变量修饰符、字符串、循环、函数....进行了增强

新增基础数据类型
es3的值类型

string，number，boolean，undefend ，null

新增基础值类型
  • symbol 独一无二的值

image.png

image.png

  • bigint 大 整型

image.png

image.png

新增变量声明修饰符

let 块级作用域
let 关键词的特性
  • 在同一块内 不允许重复声明
  • let 关键词不会进行预编译（变量提升）
  • 在循环内处理异步问题
const 块级作用域变量
  • const 具备块级作用域
  • const修饰的内容为常量 常量地址不可变
  • 声明变量必须赋值 不能重新赋值
  • const 关键词不会进行预编译（变量提升
数组增强

相关增强方法 静态方法

  • Array.of 将多个内容填入到对应的数组 返回一个新的数组
  • Array.from 将对应的伪数组转为一个数组 并返回

image.png

对象方法

find 根据条件

image.png

扁平化方法书写

image.png

了解flat的重构 字符串新增方法

  • startWith 判断当前是否以传入的字符开头
  • endsWith 判断当前是否以传入的字符结尾
  • includes 是否包含
  • repeat 返回一个新的字符串将原来的字符串进行平铺

image.png

简单回顾

es5相关新增 严格模式

  • 数组的高阶函数（redyce foreach map fulter some every map）
  • 字符串模版（ ）
  • 对象的get、set
  • 数组的相关方法 indexOf lastindexOf Array.isArray
  • 字符串的相关方法（trim（））
  • 更改this指向的方法（bind call apply）
  • object的大部分方法（getOwnProperty.defineproperty...）
  • ....

es6相关新增

  • 基础值类型（symbol、bigint）
  • 变量声明修饰关键词（let、const）
  • 数组新增（array.of、array.from、find、findindex、fill、flat、includes）
  • 字符串新增（startswith、endwith、includes、repeat）

ES6新增

对象新增
  • 对象内的简写 （属性值为变量 如果属性名和属性值的变量名一致 就可以省略对应的值）
  • 方法简写 （方法可以省略对应的function 直接使用属性名（0{}））

image.png

解构赋值
对象的解构赋值{}
  • 对象的解构是通过对应的key来指定的 也就是位置随便变化 (声明的变量名得是对象key得名字）

image.png

数组的解构赋值使用 []
  • 数组的结构赋值通过对应的下标位置来指定的，也就是说位置需要一一对应 （声明的变量名随便定义）

函数新增 默认函数（在定义形参的时候指定默认值）

image.png

箭头函数

箭头函数都是匿名函数，需要具备名字实现其复用性 name需要将它赋值给对应的变量，其变量名就是他的函数名

基础书写 var 函数名=（形参，形参....）=>{函数体}

示例

image.png

箭头函数的特性
  • 没有argument
  • 没有this （根据作用域查找）
  • 没有原型 （不能被new）

箭头函数的简写 如果有且只有一个形参 可以省略（） 如果函数体只有一句代码 name可以省略{} 如果函数体只有一句代码 且你需要返回值 name可以省略teturn 返回值

image.png

拓展运算符（...）

主要是用于打开数组，暴露里面的内容

image.png

对象新增

静态方法

  • object.is 判断两个对象是否是一个
  • object .assign 将后面的参数对象内容拷贝到第一个参数对象中
  • object.keys 获取对象中的所有key组成的数组
  • object.values 获取对象的所有值组成的数组
  • object.entries 获取对象中所有的key value组成的数组

image.png

class 类

class关键词是es6新增的用于类（构造对象的模版）声明的关键词。 （类的对象模版，对象是类的示例）

image.png

  • class 适用于构造对象的 它只能使用new关键词调用
  • class中contructor方法表示当前的构造方法 在new的时候会调用这个方法
  • class 的名字首字母必须大写
  • class使用extends来实现继承 他可以继承父类的非私有属性和方法
  • class如果使用extends关键词实现继承 name当前类中的cibtructor中必须调用super方法
  • class中使用static 关键词来声明静态属性及方法 通过类名可以直接调用
generator方法

用于控制代码的执行顺序的一个方法 （将异步代码同步执行）

基础定义

image.png

主要方法

  • next 下一步
  • return 返回一个值 结束当前的generator对象
  • throw 抛出一个错误（打印错误 结束整个enerator对象）
promise

es6新增的一个类，主要是用于异步代码同步执行

set set是一个储存结果，它主要特点是存储的数据不重复 （地址唯一）

set的构建

使用new关键词进行构建

image.png

相关属性

  • size属性（里面存储的内容个数）
  • 相关方法
  • add 添加
  • has 判断是否存在
  • keys 获取所有的key的set
  • values 获取所有的值的set
  • entries 获取所有的键值对的set
  • foreach 遍历方法

image.png

weakset 用于储存对象的set

image.png Map

是一个储存结构，里面的储存也是使用键值对进行储存

map的构建

使用new 关键词

image.png

相关属性 size表示长度

相关方法

  • get 通过key来获取value
  • set 传入key：value 进行设置
  • delete 根据key删除对应的内容
  • keys 获取所有的key
  • values 获取所有的key
  • entries 获取所有的键值队
  • has 判断key 是否存在
  • clear 清空
  • foreach 遍历

image.png

weakMap key为对象的map

image.png

模块化

将对应的文件分开模块，进行相关的分类及使用。提高性能及对应的复用性 模块化规范

AMD（代表作require.js） 预加载 CMD（代表作sea.js） 懒加载

AMD跟CMD的区别

  • AMD 是将对应的js模块先进行优先加载，在使用
  • CMD 就近加载 在使用的时候才进行加载
  • CMD 性能更优 AMD用户体验更佳
ES6的模块
  • export 导出模块
  • import 导入模块
ES6模块化使用

在浏览器使用es6的模块化技术在script标签中声明 type=module

image.png image.png

avatar
文章
阅读
粉丝