前端规范ES_5_6_7,详细笔记

最新推荐文章于 2024-02-02 22:56:22 发布

殷丿grd_志鹏

最新推荐文章于 2024-02-02 22:56:22 发布

阅读量962

点赞数 3

分类专栏：前端文章标签： javascript json js java

本文链接：https://blog.csdn.net/grd_java/article/details/105384601

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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集合大小