ES5 ES6 ES7

发表于 | Comments： | 阅读次数：

理解ES

  1. 全称: ECMAScript
  2. js语言的规范
  3. 我们用的js是它的实现
  4. js的组成
    • ECMAScript(js基础)
    • 扩展–>浏览器端
      • BOM
      • DOM
    • 扩展–>服务器端
      • Node.js

ES5

1.严格模式

  • 运行模式: 正常(混杂)模式与严格模式
  • 应用上严格式: ‘strict mode’;
  • 作用: (简而言之，让语言更优雅，更严谨，更合理)
    • 使得Javascript在更严格的条件下运行
    • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
    • 消除代码运行的一些不安全之处，保证代码运行的安全
    • 需要记住的几个变化
      • 声明定义变量必须用var
      • 禁止函数中的this关键字指向全局对象
      • 创建eval作用域, 更安全

2.JSON对象

  • 本质：有特定结构的字符串
  • why：承载数据只能是字符串，为了更清晰展示，让数据有一定结构，使用了json
  • where ：用于服务器和前端数据交互
  • 作用: 用于在json对象/数组与js对象/数组相互转换
  • JSON.stringify(obj/arr)
    js对象(数组)转换为json对象(数组)
  • JSON.parse(json)
    json对象(数组)转换为js对象(数组)
    *备注‘[{}]’或者‘{[]}’内部{},[]不需要加""，函数不能转JSON

3.Object扩展

  • Object.create(prototype[, descriptors]) : 创建一个新的对象
    • 以指定对象为原型创建新的对象
    • 指定新的属性, 并对属性进行描述
      • value : 指定值
      • writable : 标识当前属性值是否是可修改的, 默认为true
      • get方法 : 用来得到当前属性值的回调函数, 当读取当前属性值时自动调用
      • (newvalue)方法 : 用来监视当前属性值变化的回调函数, 当更新当前属性的值时(已经)自动调用
      • vue 框架的双向数据绑定与这个类似
  • Object.defineProperties(object, descriptors) : 为指定对象定义扩展多个属性

4.Array扩展

  • Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
  • Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
  • Array.prototype.forEach(function(item, index){}) : 遍历数组
  • when：遍历数组某一个元素时，调用回调函数 ，将元素本省和下标传进来
  • 返回符合要求的数组项，组装成新数组返回
  • Array.prototype.map(function(item, index){ return xxx}) : 遍历数组返回一个原来长度的新数组
  • Array.prototype.filter(function(item, index){return true/false}) : 遍历过滤出一个为true的子数组

5.Function扩展

  • Function.prototype.bind(obj)
    • 将函数内的this绑定为obj, 并将函数返回
  • 面试题: 区别bind()与call()和apply()?
    • fn.call(obj)和fn.call(obj) : 指定函数中的this,第二个参数不同，call参数是逗号隔开，apply是数组
    • fn.bind(obj) : 将函数内的this绑定为obj, 并返回函数，call和apply都是调用函数

6.Date扩展

  • Date.now() : 得到当前时间值

ES6

1.2个新的关键字

  • let/const
  • 块作用域
  • 没有变量提升
  • 不能重复定义
  • 值不可变

2.变量的解构赋值

  • 将包含多个数据的对象(数组)一次性结构出来赋值给多个变量
    let {n, a} = {n:’tom’, a:12} consle.log({n, a} )
  • 数据源: 对象/数组
  • 目标: {a, b}/[a, b]
  • 用途
    • 给多个形参赋值
    • 交换2个变量的值

3.各种数据类型的扩展

  • 字符串
    • 模板字符串
      • 作用: 简化字符串的拼接
      • 模板字符串必须用
      • 变化的部分使用${xxx}定义
        *
    • contains(str) : 判断是否包含指定的字符串
    • startsWith(str) : 判断是否以指定字符串开头
    • endsWith(str) : 判断是否以指定字符串结尾
    • repeat(count) : 重复指定次数
  • 对象
    • 简化的对象写法
      • Object.assign(target, source1, source2..): 将源对象的属性复制到目标对象上
      • Object.is(v1, v2) : 判断2个数据是否完全相等
      • proto属性 : 可以操作隐式原型属性
        let name = ‘Tom’; let age = 12;
        *let person = {
        • name,
        • age,
        • setName (name) {
        • this.name = name;
        • }
          *};
  • 数组
    • Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
    • Array.of(v1, v2, v3) : 将一系列值转换成数组
    • find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
    • findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
  • 函数
    • 箭头函数
      • 用来定义匿名函数
      • 基本语法:
        • 没有参数: () => console.log('xxxx')
        • 一个参数:i => i + 2
        • 大于一个参数: (i, j) => i + j
        • 不想return用大括号{} 默认返回结果
        • 函数体如果有多个语句, 需要用{}包围
        • 使用场景: 多用来定义回调函数
      • 形参的默认值
        *function Point(x = 1,y = 2) {
        • this.x = x;
        • this.y = y;
          *}
      • 定义形参时指定其默认的值
    • rest(可变)参数
      • 通过形参左侧的…来表达, 取代arguments的使用
        *function add(…values) {
        • let sum = 0;
        • for(value of values) {
        • sum += value;
        • }
        • return sum;
          *}
    • 扩展运算符(…)
      • 可以分解出数组或对象中的数据
        let arr1 = [1,3,5]; let arr2 = [2,…arr1,6];
        *arr2.push(…arr1);

4.set/Map容器结构

  • 容器: 能保存多个数据的对象, 同时必须具备操作内部数据的方法
  • 任意对象都可以作为容器使用, 但有的对象不太适合作为容器使用(如函数)
  • Set的特点: 保存多个value, value是不重复 ====>数组元素去重
  • Map的特点: 保存多个key–value, key是不重复, value是可以重复的
  • API
    • Set()/Set(arr) //arr是一维数组
    • add(value)
    • delete(value)
    • clear();
    • has(value)
    • size
      *
    • Map()/Map(arr) //arr是二维数组
    • set(key, value)
    • delete(key)
    • clear()
    • has(key)
    • size

5.for–of循环

  • 可以遍历任何容器
  • 数组/伪数组 通过$(“”)获得jQuery对象
  • 对象
  • 伪/类对象
  • 字符串
  • 可迭代的对象
  1. Promise
    • 解决回调地狱(回调函数的层层嵌套, 编码是不断向右扩展, 阅读性很差)
    • 能以同步编码的方式实现异步调用
    • 在es6之前原生的js中是没这种实现的, 一些第三方框架(jQuery)实现了promise
    • ES6中定义实现API:
      *// 1. 创建promise对象
      • var promise = new Promise(function(resolve, reject){
      • // 做异步的操作
      • if(成功) { // 调用成功的回调
      • resolve(result);
      • } else { // 调用失败的回调
      • reject(errorMsg);
      • }
      • })
      • // 2. 调用promise对象的then()
      • promise.then(function(
      • result => console.log(result),
      • errorMsg => alert(errorMsg)
      • ))

7.class类

  • 用 class 定义一类
  • 用 constructor() 定义构造方法(相当于构造函数)
  • 一般方法: xxx () {}
  • 用extends来定义子类
  • 用super()来父类的构造方法
  • 方法重写: 将从父类中继承来的方法重新实现一遍
  • js中没有方法重载(方法名相同, 但参数不同)的语法

8.模块化

JS模块化

  • 模块化的理解
  • 什么是模块?
    • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
    • 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
  • 一个模块的组成
    • 数据—>内部的属性
    • 操作数据的行为—>内部的函数
  • #####模块化
    • 编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目
  • 模块化的进化过程
    • #####全局function模式 :
      • 编码: 全局变量/函数
      • 问题: 污染全局命名空间, 容易引起命名冲突/数据不安全
    • #####namespace模式 :
      • 编码: 将数据/行为封装到对象中
      • 解决: 命名冲突(减少了全局变量)
      • 问题: 数据不安全(外部可以直接修改模块内部的数据)
    • #####IIFE模式/增强
      • IIFE : 立即调用函数表达式—>匿名函数自调用
      • 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
      • 引入依赖: 通过函数形参来引入依赖模块

ES7

  • 指数运算符: **
  • Array.prototype.includes(value) : 判断数组中是否包含指定value
  • 区别方法的2种称谓
    • 静态(工具)方法
      • Fun.xxx = function(){}
    • 实例方法
      • 所有实例对象 : Fun.prototype.xxx = function(){} //xxx针对Fun的所有实例对象
      • 某个实例对象 : fun.xxx = function(){} //xxx只是针对fun对象
-------------本文结束感谢您的阅读-------------
来而不往，非礼也！
分享到： 更多