前端规范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
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

殷丿grd_志鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值