前端规范ES_5_6_7,详细笔记

ES5

严格模式

• 对JavaScript语法的要求更为严格，消除JavaScript语法的一些不合理，不规范的语法
• 全局或函数第一条语句使用 ‘use strict’; 标注
• 严格模式规定：
  • 必须使用var关键字声明变量
  • 禁止自定义函数中this关键字指向windows
  • 创建eval作用域
  • 对象名不能重复

json对象扩展

• json.stringify(obj/arr); 将JavaScript对象或数组转换为json对象或数组
• json.parse(json); json对象或数组转换为js对象或数组

Object扩展

• Object.create()

ES6

let & const关键字

• let
  • 和var相同，用于声明变量，逐渐会取代var
  • 在块作用域内有效
  • 变量名不能重复
  • 不进行预处理，不存在提升
• const
  • 用于定义常量
  • 值一经定义，便无法修改，用来保存在程序运行过程中其值不会改变的量
  • 其它特点与let相同

解构赋值

• 定义
  • 用来解构对象或数组，将里面的数据提取出来
  • 然后赋值给多个变量
• 解构对象
  • let {name,age}={name:‘xiaom’,age:14};
  • name的值为’xiaom’ ，age的值为14
  • 需要注意，这是我们最常用的一种解构形式，但是解构对象时，变量名必须和对象中函数名一致，才能取到值，否则会对应不上
  • 当然，如果你只需要age就可以写
    • obj={name:‘xiaom’,age:14}；
    • let {age}=obj；这样就只取出了age的值赋值给变量age
• 解构数组
  • let[a,b]=[‘xiaom’,14]；
  • a的值为数组下标为0的元素’xiaom’ ，b的值为数组下标为1的元素14
  • 数组通过下标索引取值，与变量名无关，可用逗号占位
  • 例如：let[,a]=[‘xiaom’,14]；
  • a的值为下标为1的元素14，而下标为0的元素被逗号滤过了

模板字符串

• 作用：
  • 简化字符串拼接
• 使用方法
  • 用两个“ ` ”符号将模板字符扩起来，注意这个符号不是单引号，而是tab键上面的键
    
  • 可变字符串用${XXX}的形式括起来
• 举例：
  • let {name,age}={name:“小明”,age:14}
  • let str= `我的名字叫${name},我今年 ${age}岁了 ``
  • 输出结果为：我的名字叫小明，我今年14岁了

对象的简写

• 作用：
  • 简化定义对象的代码
  • 同名的属性可以进行简化，例如（没有简化时）：
    • let name=“小芳”;
    • obj={ name:name}; //这里就将name变量值赋值给了obj对象的name属性
  • ES6中简化后可以这样写
    • obj={name}; //同样将name变量的值赋值给了obj对象的name属性
  • 定义函数可以简化省略function关键字，例如（没有简化时）：
    • let={
      name，
      getName: function(){
      return this.name;
      }
      }
  • 简化后：
    • let={
      name，
      getName(){//去掉了：function关键字
      return this.name;
      }
      }

箭头函数（lambda表达式）

• 作用：
  • 定义函数的极简形式，和写表达式一样简洁轻松
  • 用=>作为定义符
  • 直接执行方法体，将结果返回，所以称为表达式
• 用法
  • 没有参数时：
    • let sum = () => alert(“我是没有参数的lambda表达式”);
    • sum(); //调用
  • 有参数时：
    • let sum = (x,y) => x+y; //直接返回x+y的结果赋值给sum变量
    • sum(1,2);
  • 一个参数时的简写形式：
    • let sum = x => return x; //一个参数时可以省略
    • sum(1); //传参调用
• 函数体解析
  • 1、不写{}括住函数体
    • 会直接将结果返回，不用且不能写return语句
    • let sum = (x,y) => x+y; //直接返回x+y的结果赋值给sum变量，自动return回结果，无需再写，写了就报错
    • sum(1,2);
  • 2、写{} 括住函数体
    • let sum = (x,y) => { s=x+y; return s;}
    • 或者let sum = (x,y) => { return x+y;}//结果必须return，不会自动生成return语句
    • console.log(sum(1,3));
  • lambda表达式的this关键字
    • 没有自己的this，不是调用时候决定的，而是在定义的时候，自身所处对象就是它的this
    • 例如，我们的lambda表达式定义在obj对象内部，那么，this就指向obj对象
    • 如果外层没有对象，那么，我们知道JavaScript直接对象时window，所以this指向window
    • 通俗的将，箭头函数就看自己外层有没有函数，如果有，那么它的this就是外层函数的this
    • 如果没有，this就指向window

不定长参数，点表达式

• 类似java的不定长参数，用…作为符号，存储函数调用时传来的形参，或者执行数组一系列运算
• 作用：
  • 解决形参个数不固定的问题
  • 简洁，明了
  • 将形参保存到特定数组中
  • 方便实现数组复杂运算
• 举例：
  
• 数组插入运算
  • let arr1=[2,3]；
  • let arr2=[1,…arr1,4,5,6];
  • arr2的值为1,2,3,4,5,6

形参默认值

• 当一个函数用户没有传入任何参数时，给这些参数赋一个默认值
• 举例：
  • function sum(x=1,y=2){return x+y;}//若没有传参，此时会采用默认的1和2
  • sum();//没有传入任何参数

Promise对象（了解即可）

• 作用：
  • 此对象代表未来某个将要发生的事件，比如异步通信操作
  • 此对象可以将异步操作以同步操作的方式表达，避免一直嵌套回调函数
  • Promise是构造函数，用来生成对象
• 使用方法：
  • 1、利用Promise构造函数创建promise对象
    • 此构造函数的参数是一个lambda表达式，lambda表达式有两个参数，这两个参数也是两个函数
      • resolve ：此参数表示成功状态fullfilled
      • reject：表示为失败状态rejected
  • 2、调用promist的then()函数，
    • 此函数有两个参数，都是lambda表达式，一个表示异步成功调用的函数，一个表示异步失败调用的函数
  • promise的3个状态
    • pending：初始化状态
    • fullfilled: 成功状态
    • rejected：失败状态
  • 举例:

Symbol（了解即可）

• 作用：
  • 在ES5中，对象的属性名都是字符串，，容易重名，污染环境
  • ES6中添加了一种数据类型Symbol，和String，Number，Boolean，null，undefined，对象，是相同的基本数据类型
• 特点：
  • 每个Symbol都是唯一的，解决命名冲突问题
  • 不能与其他类型数据进行运算，和字符串拼串也是不允许的
  • for in，for of遍历时，不会遍历symbol属性
  • 可以用const关键字定义常量
• 使用

for of遍历语句

• 可以变量任何实现iterator接口的对象
• 可以遍历数组、字符串、arguments、set容器、map容器，但不能遍历普通对象，因为对象没有实现iterator接口
• 三点运算符和解构表达式默认调用iterator接口实现

Generator函数（了解即可）

• 作用：
  • ES6提供的解决异步编程的方案之一
  • 是一个状态机，封装了不同状态的数据
  • 用来生成遍历器对象
  • 可以暂停，就像java中的线程暂停一样，yield暂停，next方法启动，每次返回都是yield的表达式结果
• 特点
  • function与函数名之间有一个星号
  • 内部用yield表达式来定义不同状态
  • 返回值是指针对象，例如iterator，而不执行函数内部逻辑
  • 调用next方法后，函数内部逻辑开始执行，遇到yield表达式暂停
  • 再次调用next后，会继续执行函数，直到再遇见yield暂停，然后又需要next启动，依次类推直到函数结束
  • 如果next中设置参数，那么上一次yield的返回值就会赋值给这个参数。
• 测试

async函数（真正解决了异步回调问题）

• 作用：

  • 可以和同步一样处理异步
  • 使用Generator实现

• 语法：

    async function foo(){
    	await 异步操作;
    	await 异步操作;
    	...
    }
  

• 特点

  • 无需像Generator一样调用next
  • 遇到await会等待，当前异步执行成功，会自动向下执行
  • 返回的总是promise对象，可以使用then方法进行下一步操作

针对字符串扩展的方法

• str1.include(str2); //判断str1是否包含str2字符串，返回布尔值
• str1.startsWith(str2);//判断str1是否以str2开头，返回布尔值
• str1.endsWith(str2);//判断str1是否以str2结尾，返回布尔值
• str1.repeat(count);//将str1重复指定次数，并返回拼接后的字符串

针对数值扩展的方法

• 二进制用0b开头，八进制用0o开头表示
• Number.isFinite(i): 判断 i 是否是有限大的数
• Number.isNaN(i): 判断 i 是否是NaN
• Number.isInteger(i):判断 i 是否是整数
• Number.parseInt(str):将字符串转换为对应的数值，并返回一个数值型
• Math.trunc(i):直接去除小数部分，返回整数

针对数组扩展的方法

• Array.from(arr): 将伪数组或可遍历对象转换为真数组（…Value和arguments就是伪数组）
• Array.of(a,b,c)；将传入的一堆值，转换成一个数组
• find(function(value,index,arr){return 条件}):找出第一个满足条件返回true的元素
• findIndex(function(value,index,arr){return 条件}):找出第一个满足条件返回true的元素下标

针对对象扩展的方法

• Object.is(v1,v2): 判断两个数据是否完全相等
• Object.assign(obj1,obj2,obj3…):将obj2，obj3,…,这些对象的属性，复制给obj1

set & map容器

• Set容器：元素不可重复，无序集合
  • new Set([1,2,34,5]):使用构造函数创建一个set集合,具有1，2,34,5这几个元素
  • Set(array):将数组转换为set集合
  • add(value):添加一个数据到set集合
  • delete(value):从集合中删除指定数据
  • has(value):判断指定值是否存在
  • clear()：清除集合
  • size：集合长度
• Map容器：键值对形式存储数据，键key不可重复，无序
  • new Map([[“name”,“张三”],[14，“age”],[“sex”,‘男’]]):使用构造函数创建一个Map集合，包含3个键值对，二维数组，里面每一个数组都是一个键值对
  • Map(array):将数组转换为Map集合
  • set(key,value):添加一个值（key：value），要以键值对形式添加
  • get(key):根据key获取指定值
  • delete(key):删除指定键和其对应值
  • has(key)：判断指定key是否存在
  • clear()：清除Map集合
  • size：Map集合大小

ES7

• 指数运算符 * * 例如let a=5**，那么a的值为25
• Array.prototype.include(value):判断数组中是否包含指定value