ES6(这是我见过写的最好的)!推荐

2023-11-14

ES6总结

var,let,const的区别

1.var 变量可以提升,let,const变量不可以提升
2.var 没有暂时性死区,let,const有暂时性死区
3.var 允许重复声明,let,const不可以重复声明
4.var 和let可以修改声明的变量,const不可以修改
5.var 没有块级作用域,let和const有块级作用域

箭头函数和function的区别

1.箭头函数是匿名函数,不能作为构造函数,不能使用new
2.箭头函数内没有arguments,可以用展开运算符...解决
3.箭头函数的this,始终指向父级上下文(箭头函数的this取决于定义位置父级的上下文,跟使用位置没关系,普通函数this指向调用的那个对象)
4.箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数,但是可以正常传参)
5.箭头函数没有原型属性

结构赋值

1 结构赋值就是从对象或数组中提取值,吧右边的值赋给左边
2 分为数据结构,对象结构,结构赋值,结构对象,从方法中返回

原型

实例化对象和原型的constructor指向构造函数
构造函数的prototype属性指向原型对象
实例化对象的__proto__属性指向原型对象
JavaScript里面每个对象都有一个__paoto__属性,这个属性就是他的原型
每个方法里面都有一个prototype属性,也是他的原型
constructor
prototype
实例化对象的__proto__
实例化对象和原型
构造函数的
原型对象
原型对象

原型链

实例化对象的__proto__指向构造函数的prototype
构造函数prototype的__proto__指向Object.prototype
Object.prototype的__proto__指向null

__proto__
__proto__
__proto__
实例化对象
构造函数的prototype
Object.prototype
null

继承

1.原型链继承

父类的实例做为子类的原型

function Fu(){
	this.arr=['red','blue','green']
}
function Zi(){}
Zi.prototype=new Fu();
var a=new Zi
a.arr.push('black')
2.构造函数继承

在子类内,使用call调用父类方法,并将父类的this修改为子类的this,相当于是吧父类的实例属性复制了一份放到子类的函数内

function Fu(){
	this.arr=['red','blue','green'];
}
function Zi(){
	Fu.call(this);
}
var a=new Zi();
a.arr.push('black')
console.log(a.arr)
3.组合式继承

既能调用父类实例属性,又能调用父类原型属性

function Fu(name){
	this.name=name;
	this.arr=['red','blue','green'];
}
Fu.prototype.say=function(){
	console.log(this.name)
}
function Zi(name,age){
	Fu.call(this,name);
	this.age=age;
}
Zi.prototype=new Fu();
var a=new Zi('black',21,'女')
a.say()//成功继承
4.class类继承

相当于es5中构造函数
class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
class中定义的所有方法是不可枚举的
class中只能定义方法,不能定义对象,变量等
class和方法内默认都是严格模式
es5中constructor为隐式属性

class Fu(){
	constructor(name){
		this.name=name
	}
	say(){
		console.log(this.name)
	}
}
class Zi extends Fu{
	constructor(name,age){
		super(name)
		this.age=age
	}
	say(){super.say()}
}
var a=new Zi('张三')
a.say()

Promise

1.概述:Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,可以获取异步操作的消息
2.目的: (1)、避免回调地狱的问题(2)、Promise对象提供了简洁的API,使得控制异步操作更加容易
3.Promise有三种状态:pendding //正在请求,rejected //失败,resolved //成功
4.基础用法:new Promise(function(resolve,reject){ })
resolved,rejected函数:在异步事件状态pendding->resolved回调成功时,通过调用resolved函数返回结果;当异步操作失败时,回调用rejected函数显示错误信息

$(function(){
    // 封装一个promise;将url提取出来;
    var  p  = function(url){
        return new Promise(function(resolve,reject){
            $.get(url,function(data){
            resolve(data);
            })
        })
    }
    Promise.all([
            p("https://cnodejs.org/api/v1/topics?tab=good"),
            p("https://cnodejs.org/api/v1/topics?tab=share"),
        ]).then(function(result){
            console.log(result);
        })
})

async和await

async 其实就是promise的语法糖,可以让普通函数变为一个异步函数,返回的是一个promise对象

1.async使用在函数前面,把函数变成一个异步函数,返回值是个promise对象。
2.await只能使用在async声明的函数里,不能使用在普通函数里。
3.异步操作方法的前面要加关键字await 意思就是等一下,是可以等到你的数据加载过来以后才会去运行下边的 js 内容,而且 await 接收的 对象必须还是个 promise 对象。,注意:async和await必须一起使用,否则会报错。
4.async/await 可以解决异步,回调地域

Generator

要了解Generator 就要先了解他出现的原因

1.当初设计是为了解决地域回调问题的
2.因为当时的promise解决地域回调代码量过多
3.出现generator没多久async/await就出来了
4.于是generator就处于一个尴尬的境地,慢慢的被人遗忘了

语法上,Generator 函数是一个状态机,封装了多个内部状态。
形式上,Generator是一个函数。不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。
整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器,异步操作需要暂停的地方,都用yield语句。

1.function 关键字和函数之间有一个星号(*),且内部使用yield表达式,定义不同的内部状态。
2.调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象。
3.Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

总结一波

从回调函数,到promise,再到generator,再到Async/await,这四种分别代表了JavaScript异步编程解决方案的进化路程。async和generator函数主要就是为了解决异步的并发调用使用的 ,直接将参数从then里取出来,相比promise的链式调用,传参更加方便,异步顺序更加清晰

深拷贝和浅拷贝

//深拷贝
 let obj=[0,1,2,5]
 let arr=JSON.stringify(obj)
 let es=JSON.parse(arr)
 es[0]=99
 console.log(obj,es);
//浅拷贝
let a=[0,2,3,4]
let b=a.slice()
a[1]=000000000;
console.log(a,b)
//浅拷贝
 let a=[0,1,2,3]
 var b=a;
 b[0]=000000000000000
 console.log(a,b);

闭包

//方法一
function foo(){
       var a=111;
       return function (){
            console.log(a+333);
       }
   }
   let q=foo()
   q()
//方法二
var es=(function(){
      var i=222;
      return function(){
          console.log(i)
      }
  })()
  es()
//方法三
function foo(){
       var a=111;
       function es(){
            console.log(a+333);
       }
       return{
       		es
       }
   }
   foo().es()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ES6(这是我见过写的最好的)!推荐 的相关文章

  • Hexo博客搭建(简化版)

    Hexo博客搭建 简化版 一 环境搭建 1 1 Git Git官网 下载界面 gt git version 1 2 Node js 1 2 1 下载安装Node js Node js官网下载界面 gt node version 1 2 2

随机推荐

  • sublime代码自动补全

    html标签自动补全 在preferences sublime settings里面加上 作者 茉花 链接 https www zhihu com question 21628492 answer 131097215 来源 知乎 著作权归作
  • windows系统中docker部署mysql后,使用navicate链接

    一 Windows系统启动docker中mysql 通过docker桌面版启动 二 通过命令行 查看是否开启远程连接授权 依次输入mysql命令 mysql uroot p show databases use mysql show tab
  • 【工具】——VSCODE调试C++时无法显示Vector,map等容器的值

    转载自 VScode调试C 代码时无法查看STL容器 string vector等 原始状态 解决方法 编辑launch json 加入如下设置 setupCommands description Test text python impo
  • error The engine "node" is incompatible with this module. Expected 解决方法

    1 如果是部署在服务器上 看下服务器node版本 版本过低会导致这种问题 2 如果使用构建工具 需要确定构建中的环境node版本 构建中的版本可能跟服务器版本也会有差别 如jekins中有设置node环境的配置
  • 为什么要 API 优先?

    最近关于 API First API优先 作为设计和开发方法的讨论很多 虽然通向 API First 的途径有很多 但通常推动 API First 的一般都是 API 架构师 API 设计师和 API 平台负责人等 很好理解 因为他们对组织
  • 【服务器】将u盘挂载到服务器上并上传文件

    如果想将u盘上的东西上传到服务器 首先需要将u盘挂载到服务器 建议 在执行以下步骤时先别插u盘 更方便看出你的u盘在哪一个区 因为下面的操作需要管理员权限 所以可以直接登录服务器的管理员账号 或者进入自己的账号之后先 sudo xxx 其中
  • WIFI相关的缩写

    SIFS 短帧间间隔简称SIFS Short interframe space 是指用来分隔开属于一次对话的各帧 在这段时间内 一个站应当能够从发送方式切换到接收方式 使用SIFS的帧类型有 ACK帧 CTS帧 由过长的MAC顿分片后的数据
  • Android 宽高相等的adapter item内容

    使用一张网上的图 很多时候 我们需要用使用这样的排列 宽高固定 然后是中间留有一定的边距 毫无疑问 这里我们需要用到gridadapter GridView的item是正方形 而android需要适配不同尺寸的手机 所以不能写死item的高
  • HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    web前端开发技术期末大作业 网页规划与制造 做得不深 但是还是满足期末大作业的 分享一下 题目 此次课程设计的题目是网页规划与设计 html css js image video audio 确定每个页面将使用的页面布局技术 如结合使用C
  • 统计机器学习方法简述

    2013 01 28 09 04 分类 机器学习 序 建议阅读的同学要一点概率论和信息论的基础 参考文献的PDF版本我会尽快放在我的服务器上 我也仅仅是研一初学者 非常欢迎大家批评指正 赫尔伯特 西蒙对 学习 这个学习比较抽象 适合人 机器
  • Git使用(2)多人协作:与远程仓库之间的沟通

    简单版本连接到github等服务器 远程和本地都没有分支 1 git checkout b newbranch 新建一个newbranch 2 git push origin newbranch 3 git pull origin newb
  • 文献综述写作模板1.0

    参考视频 基础模板框架 https www bilibili com video BV1E54y1U7SM spm id from 333 337 search card all click vd source e5e46a7b9d3909
  • SpringBoot开发符合S3协议的文件存储服务

    背景 公司最近的业务大量涉及安可项目 要求避免使用第三方组件 原有开发框架支持本地文件存储 Minio 各类云存储 现在要求文件独立存储且文件服务需要自研 经调研评估后决定基于SpringBoot开发文件存储服务 使用s3协议标准 这样可以
  • 集成AI的移动自动化测试

    集成AI的 移动自动化测试 前一阵子小编看到了爱奇艺Android架构师的一篇文章 爱奇艺基于AI的移动自动化框架的设计与实践 介绍了了一种基于AI算法的自动化测试框架Aion 该框架融合了传统图像处理和深度学习方案 虽然目前该框架还未开源
  • chatgpt赋能python:Python长浮点型介绍

    Python长浮点型介绍 Python是一种强大的编程语言 通过其众多的数据类型 使开发人员可以快速开发复杂的应用程序 其中 Python长浮点型就是Python支持的一种数据类型 长浮点型是指Python可以处理的浮点数的精度可以高达25
  • ubuntu运行python程序 已杀死_一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃

    由于 Ubuntu 中的汉字输入实在是太不友好了 所以装了个 搜狗输入法 好不容易把 搜狗输入法装好 本以为可以开开心心的搞代码了 然而 pycharm 一打开 就崩溃 关不掉 进程杀死还是不行 只能关机重启 本以为 pycharm 出现了
  • 半导体创业

    synosis系列 芯耀辉 芯华章 芯原 dsp 壁仞科技 主要负责人华为mobile gp ps 华为升腾的大佬是liaoheng和tujiajun Mikehong在MobileGpu oppo 哲库科技 GPU摩尔线程 NB 芯翼信息
  • Android中apk的名称被Module下相同的app_name替换时,正确的更改方式

    错误产生原因 android 中 寻找资源文件 首先会寻找本机语言下的资源文件 例如 如果手机是中文版 则会优先选择res下面values有中文资源的进行匹配 这也是导致我的app name被module下的中文app name替换的原因
  • Python:Anaconda安装&常用库(selenium,pymysql)离线安装

    因为网络限制 所以用很多库用pip安装不成功 只能采用离线安装了 方法也简单 按照下面步骤来就好了 1 Anaconda下载安装 下载地址 https www anaconda com products individual 下载后 傻瓜式
  • ES6(这是我见过写的最好的)!推荐

    文章目录 ES6总结 var let const的区别 箭头函数和function的区别 结构赋值 原型 原型链 继承 1 原型链继承 2 构造函数继承 3 组合式继承 4 class类继承 Promise async和await Gene