那些你面试必须知道的ES6知识点

目录

  • 1、var、let、const的区别
  • 2、作用域考题
  • 3、合并两个对象
  • 4、箭头函数和普通函数的区别
  • 5、Promise有几种状态
  • 6、find和filter的区别
  • 7、some和every的区别

1、var、let、const的区别

区别一:

var有变量提升,而let和const没有

 	<script>console.log(str); //undefinedvar str = "你好";</script>
 	<script>console.log(str); //let str = "你好";</script><script>console.log(str); //const str = "你好";</script>

在这里插入图片描述

区别二:

var可以多次声明一个变量
let和const不能多次声明一个变量

	<script>var str = "你好";var str = '我好'var str = '大家好'console.log(str); //大家好</script>
	<script>let str = "你好";let str = '我好'let str = '大家好'console.log(str); //大家好</script><script>const str = "你好";const str = '我好'const str = '大家好'console.log(str); //大家好</script>

在这里插入图片描述

区别三:

var、let声明变量、
const声明常量
var和let声明的变量可以再次赋值,但是const不可以再次赋值了。

	<script>var str1 = "你好";let str2 = "我好";const str3 = "大家好";str1 = "哈哈";str2 = "哈哈哈";str3 = "哈哈哈哈";console.log(str1); //哈哈console.log(str2); //哈哈哈console.log(str3); //报错,/*  */Uncaught TypeError: Assignment to constant variable.</script>

区别四:

var声明的变量没有块级作用域
let和const声明的变量有自身块级作用域

	 <script>if (true) {var str = "哈哈哈";}console.log(str);//哈哈哈</script>
	 <script>if (true) {let str = "哈哈哈";}console.log(str);// ReferenceError: str is not defined</script>
	 <script>if (true) {const str = "哈哈哈";}console.log(str);// ReferenceError: str is not defined</script>

2、作用域考题

考题一:let和const没有变量提升性

 	<script>console.log(str); //undefinedvar str = "你好";console.log(num); //报错let num = 10;</script>

考题二:

 <script>function demo() {var n = 2;if (true) {var n = 1;}console.log(n); //1}demo();</script>
<script>function demo() {let n = 2;if (true) {let n = 1;}console.log(n); //2}demo();
</script>

考题三:可以修改引用对象里面的值,不能直接修改本身

 <script>const obj = {a: 1,};obj.a = 11111;console.log(obj);const arr = ["a", "b", "c"];arr[0] = "aaaaa";console.log(arr);</script>

在这里插入图片描述

 <script>const obj = {a: 1,};obj = {a: 2,};console.log(obj);const arr = ["a", "b", "c"];arr = ["hh"];console.log(arr);</script>

在这里插入图片描述
直接报错。

3、合并两个对象

方式一:Object.assign

 <script>let a = {a: 1,b: 2,};let b = {a: 4,b: 5,c: 6,};const obj1 = Object.assign(a,b);console.log(obj1);</script>

如果有相同的属性值,后者覆盖前者。

方式二:…扩展运算符

<script>let a = {a: 1,b: 2,};let b = {a: 4,b: 5,c: 6,};const obj1 = {...a,...b};console.log(obj1);</script>

方式三:自己封装方法

	<script>let a = {a: 1,b: 2,};let b = {a: 4,b: 5,c: 6,};function merge(target, source) {for(let key in source) {target[key] = source[key];}return target;}console.log(merge(a, b));</script>

4、箭头函数和普通函数的区别

1、this指向问题

箭头函数的this指向在定义的时候就决定了,不能通过(call、apply、bind)改变
箭头函数的this指向定义的时候,指向外层第一个普通函数,如果为最顶层则指向window。

 <script>let obj = {a: function () {console.log(this);},b:()=>{console.log(this);}};obj.a();obj.b();</script>

在这里插入图片描述
使用call改变this指向,无效果.
apply和bind同样。

 <script>let obj = {a: function () {console.log(this);},b:()=>{console.log(this);}};obj.a();obj.b.call(obj);</script>

在这里插入图片描述
2、箭头函数不能new(不能实例化成构造函数)

<script>let obj = {a: function () {console.log(this);},b:()=>{console.log(this);}};let objA = new obj.a();let objB = new obj.b();</script>

在这里插入图片描述
3、箭头函数没有prototype(原型)

<script>let obj = {a: function () {console.log(this);},b:()=>{console.log(this);}};console.log(obj.a.prototype)console.log(obj.b.prototype)
</script>

在这里插入图片描述
4、箭头函数没有arguments

	<script>let ff = function () {console.log(arguments);};let fn = () => {console.log(arguments);};ff();fn();</script>

在这里插入图片描述

 <script>let ff = function () {return fn = () => {console.log(arguments);};};ff()();</script>

如果箭头函数的外层第一个普通函数有arguments,则改箭头函数的arguments为父级作用域的arguments。

我们可以通过Rest(剩余)运算符解决箭头函数没有arguments的问题。

<script>let ff = function() {console.log(arguments);} let fn = (...res) => {console.log(res);};ff(1)fn(1)</script>

在这里插入图片描述

5、Promise有几种状态

  1. 使用promise的时候,给它一个承诺,我们可以将他划分为三个阶段
  • pending(待定),执行了executor,状态还在等待中,没有被兑现,也没有被拒绝
  • fulfilled(已兑现),执行了resolve函数则代表了已兑现状态
  • rejected(已拒绝),执行了reject函数则代表了已拒绝状态
  1. 简单理解:
  • 你承诺自己明天开始好好学习(还未到明天,此时为待定状态
  • 时光飞逝,到了第二天你去图书馆好好学习了(已兑现状态
  • 时光飞逝,到了第二天你因为某些事情而无法去图书馆学习(已拒绝状态
  1. 状态只要从待定状态,变为其他状态后,则状态不能再改变。
  • 比如从pengding状态变为fulfilled状态后,则不能在从fulfilled状态变为rejected状态
  • 同样从pengding状态变为rejected状态后,则不能在从rejected状态变为fulfilled状态

举个栗子:

	const p = new Promise((resolve,reject)=>{setTimeout(()=>{resolve('成功了')reject('失败了')},1000)})p.then(resolve=>console.log(resolve)).catch(reject=>console.log(reject))//成功了

当我调用resolve之后,在调用reject是无效的,因为状态已经发生改变,并且是不可逆的。

6、find和filter的区别

区别一:返回的内容不同

filter 返回是新数组
find 返回具体的内容

区别二:

find :匹配到第一个即返回
filter : 返回整体(每一个匹配到的都返回)

	<script>let arr = [1, 2, 3, 4, 5];let newArr1 = arr.find((item) => {return item > 2;});let newArr2 = arr.filter((item) => {return item > 2;});console.log(newArr1);console.log(newArr2);console.log(arr);//都不改变原数组</script>

在这里插入图片描述

7、some和every的区别

some ==》 如果有一项匹配则返回true
every ==》 全部匹配才会返回true

<script>let arr = [1, 2, 3, 4, 5];let newArr1 = arr.some((item) => {return item > 2;});let newArr2 = arr.every((item) => {return item > 2;});console.log(newArr1);console.log(newArr2);</script>

在这里插入图片描述

 <script>let arr = [1, 2, 3, 4, 5];let newArr1 = arr.some((item) => {return item > 0;});let newArr2 = arr.every((item) => {return item > 0;});console.log(newArr1);console.log(newArr2);</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164499.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过核密度分析工具建模,基于arcgis js api 4.27 加载gp服务

一、通过arcmap10.2建模&#xff0c;其中包含三个参数 注意input属性&#xff0c;选择数据类型为要素类&#xff1a; 二、建模之后&#xff0c;加载数据&#xff0c;执行模型&#xff0c;无错误的话&#xff0c;找到执行结果&#xff0c;进行发布gp服务 注意&#xff0c;发布g…

美创科技入选“内蒙古自治区第一届网络安全应急技术支撑单位”

近日&#xff0c;内蒙古自治区党委网信办、国家网络应急技术处理协调中心内蒙古分中心评选“内蒙古自治区网络安全应急技术支撑单位”结果公布。 经自治区各地区、各部门和单位推荐各单位自主申报&#xff0c;资料审查和专家评审等环节&#xff0c;美创科技成功入选“内蒙古自治…

[HCTF 2018] Hide and seek(buuctf),Unzip(ctfshow)

考核完对python软连接还是不熟悉&#xff0c;把这两道题在做一下 [HCTF 2018]Hideandseek 登录注册之后发现可以上传文件&#xff0c;随便上传一个 回显说不是zip文件 上传一个zip文件&#xff0c;发现他会自动解析 上传了一个 GIF89a <?php eval($_POST[zxc]); ?> …

5秒盾,加速乐

5秒盾 1.先清除网站cooke在刷新&#xff0c;如果出现的稍等就有可能是5秒盾 2.用fd抓搜索参数关键字定位到包 3.抓到包后查找加密参数 4.搜索看那个位置在赋值 5.搜索赋值的参数.去找加密的js 6.删除没用的代码&#xff0c;把检测指纹的赋值过去 7.还原代码在网站的页面…

束从轩的“网红人设”,正在加重老乡鸡的割裂

文 | 螳螂观察 作者 | 图霖 “老乡鸡20周年&#xff0c;我请大家免费吃饭。” 和以往的每场活动一样&#xff0c;“网红老板”束从轩穿着印有老乡鸡品牌Logo的大红短袖T恤&#xff0c;向广大网友发出热情邀请&#xff0c;真诚得像是自家村口小卖部好客的大叔。 这并不是束从…

小A对我说,他现在快想钱想疯了…

昨天晚上11点&#xff0c;小A给我打电话 小A问&#xff1a;橙哥&#xff0c;有没有赚钱的事做&#xff1f; 他说&#xff0c;实在不想上班了&#xff0c;每天起早贪黑挤地铁 辛辛苦苦干一个月&#xff0c;到手工资三四千块钱&#xff0c;房租一交&#xff0c;日常开支一花&a…

01认识微服务

一、微服务架构演变 1.单体架构 将所有的功能集中在一个项目开发&#xff0c;打成一个包部署。优点架构简单&#xff0c;部署成本低。缺点耦合度高&#xff0c;不利于大型项目的开发和维护 2.分布式架构 根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立的项目…

redis底层数据结构

总所周知&#xff0c;redis支持五种数据类型String、Hash、List、Set、ZSet。在支持这些复杂数据结构的同时&#xff0c;redis不仅需要保证读写的性能&#xff0c;还能提供各种微操作&#xff0c;比如直接修改Hash字典中的某个field的值&#xff0c;或者直接往ZSet中插入某个值…

vue3 列表页开发【选择展示列】功能

目录 背景描述&#xff1a; 开发流程&#xff1a; 详细开发流程&#xff1a; 总结&#xff1a; 背景描述&#xff1a; 这个功能是基于之前写的 封装列表页 的功能继续写的&#xff0c;加了一个选择展示列的功能&#xff0c;可以随时控制表格里展示那些列的数据&#xf…

Redis设计与实现笔记 - 数据结构篇

Redis设计与实现笔记 - 数据结构篇 相信在我们日常使用中&#xff0c;会经常跟 Redis 打交道。数据结构 String、Hash、List、Set 和 ZSet 都是常用的数据类型。对于使用场景&#xff0c;我们可以滔滔不绝地说很多&#xff0c;但是我们从来就没有关心过它们的底层实现&#xf…

RSTP详解:对比STP,到底改进了什么?

一、RSTP概述 IEEE 802.1W中定义的RSTP可以视为STP的改进版本&#xff0c;RSTP在许多方面对STP进行了优化&#xff0c;它的收敛速度更快&#xff0c;而且能够兼容STP。 二、RSTP对STP的改进 改进点1&#xff1a;端口角色 、 改进点2&#xff1a;端口状态 RSTP的状态规范缩…

信息系统项目管理师有什么用?

导语&#xff1a; 在当今数字化时代&#xff0c;信息系统项目管理师扮演着至关重要的角色。他们负责规划、组织和管理信息系统项目&#xff0c;确保项目按时、按质、按预算完成。本文将探讨信息系统项目管理师的重要性和作用&#xff0c;以及他们对组织和项目成功的贡献。 一、…

数据库系列之MySQL中Join语句优化问题

最近使用MySQL 8.0.25版本时候遇到一个SQL问题&#xff0c;两张表做等值Join操作执行很慢&#xff0c;当对Join连接字段添加索引优化后&#xff0c;执行效率反而变得更差&#xff0c;其中的原因值得分析。因此本文介绍下MySQL中常见的Join算法&#xff0c;并对比使用不同Join算…

百度文心一言 4.0 :如何申请百度文心一言 4.0

本心、输入输出、结果 文章目录 百度文心一言 4.0 &#xff1a;如何申请百度文心一言 4.0前言文心一言 4.0 ERNIE-Bot 4.0 &#xff1a;ERNIE-Bot 4.0 大模型深度测试体验报告如何申请千帆大模型试用百度文心一言 4.0 主要功能介绍配套发布的十余款AI原生应用插件、API 生态 百…

图论相关算法

一、迪杰斯特拉(Dijkstra)算法 迪杰斯特拉算法使用类似广度优先搜索的方法解决了带权图的单源最短路径问题。这是一个贪心算法。 1.核心思想 &#xff08;1&#xff09;每次选中一个点&#xff0c;这个点满足两个条件&#xff1a; 未被选过距离最短 &#xff08;2&#xf…

如何使用 MiniGPT-v2

MiniGPT-v2 是一个基于视觉语言模型&#xff08;LLM&#xff09;的多任务学习系统。它可以用于各种视觉语言任务&#xff0c;包括图像描述、图像识别、图像-文本对话等。 本文将介绍如何使用 MiniGPT-v2。 MiniGPT-v2 提供了一个简单的在线演示&#xff0c;可以用于测试模型。…

ENVI IDL:对于GEOTIFF结构体的说明

Tag标签-前言 其中最关键的只有两个标签Tag&#xff0c;一个是MODELPIXELSCALETAG&#xff0c;一个是MODELTIEPOINTTAG。 至于ModelTransformationTag我没用过不了解&#xff0c;但是应该是关于仿射变换相关的&#xff0c;用于将像素坐标与地理/投影坐标进行转换的矩阵。 对于…

k8s kubernetes 1.23.6 + flannel公网环境安装

准备环境&#xff0c;必须是同一个云服务厂商&#xff0c;如&#xff1a;华为&#xff0c;阿里、腾讯等&#xff0c;不要存在跨平台安装K8S&#xff0c;跨平台安装需要处理网络隧道才能实现所有节点在一个网络集群中&#xff0c;这里推荐使用同一家云服务厂商安装即可 这里使用…

黄金眼PAAS化数据服务DIFF测试工具的建设实践 | 京东云技术团队

一、背景介绍 黄金眼PAAS化数据服务是一系列实现相同指标服务协议的数据服务&#xff0c;各个服务间按照所生产指标的主题作划分&#xff0c;比如交易实时服务提供实时交易指标的查询&#xff0c;财务离线服务提供离线财务指标的查询。黄金眼PAAS化数据服务支撑了黄金眼APP、黄…

用Python获取网络数据

用Python获取网络数据 网络数据采集是 Python 语言非常擅长的领域&#xff0c;上节课我们讲到&#xff0c;实现网络数据采集的程序通常称之为网络爬虫或蜘蛛程序。即便是在大数据时代&#xff0c;数据对于中小企业来说仍然是硬伤和短板&#xff0c;有些数据需要通过开放或付费…