IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js基础1 -> 正文阅读

[JavaScript知识库]js基础1

JavaScript 对大小写敏感

注意变量可以有不同的?数据类型?:

字符串 用引号

数字?

布尔值?真 / 假:?true/false

数组?用于在单一引用中存储多个值的结构

对象?JavaScript 里一切皆对象,一切皆可储存在变量里

运算符?(en-US)?是一类数学符号,可以根据两个值(或变量)产生结果

赋值运算符????????=??为变量赋值

等于????????===?测试两个值是否相等,并返回一个?true/false?(布尔)值

不等于?????????!==?和等于运算符相反,测试两个值是否不相等,并返回一个?true/false?(布尔)值??

?取非????????!??返回逻辑相反的值,比如当前值为真,则返回?false

条件语句是一种代码结构,用来测试表达式的真假,并根据测试结果运行不同的代码。一个常用的条件语句是?if ... else

函数?用来封装可复用的功能。如果没有函数,一段特定的操作过程用几次就要重复写几次,而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数,比如:

let myVariable = document.querySelector('h1');
alert('hello!');

document.querySelector?和?alert?是浏览器内置的函数,随时可用。

函数通常包括参数,参数中保存着一些必要的数据。它们位于括号内部,多个参数之间用逗号分开。

?alert()?函数在浏览器窗口内弹出一个警告框,还应为其提供一个字符串参数,以告诉它警告框里要显示的内容。

好消息是:人人都能定义自己的函数。

return?语句告诉浏览器当前函数返回?result?变量。因为函数内定义的变量只能在函数内使用。这叫做变量的?作用域

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应



JavaScript 是一种轻量级的解释型编程语言,具有面向对象的特性,允许各位在其他静态HTML页面中构建交互性。 该语言的通用核心已嵌入Netscape,Internet Explorer和其他Web浏览器中。

JS的特性
 ● JS 是一种轻量级,解释性编程语言。
 ● 为了创建以网络为中心的应用程序而设计。
 ● 补充和集成了 Java
 ● 补充和集成了 HTML
 ● 开放和跨平台

JS 的优势是什么
 ● 更少的服务器交互 - 在将页面发送到服务器之前,可以验证用户输入,节省了服务器流量,意味着服务器的负载更少
 ● 立即反馈 - 用户不需要等待页面重新加载来查看是否忘记输入某些内容。
 ● 增强交互 - 在界面中,当用户使用鼠标悬停或通过键盘激活它们时会做出响应。
 ● 丰富的接口 - 可以使用JS包含拖放组件和滑块等项,为网站提供丰富的界面。

JS 中的命名函数是什么以及如何定义:
命名函数在定义后立即声明名称,可以使用function关键字定义

是否可以将匿名函数分配给变量并将其作为参数传递给另一个函数
可以。一个匿名函数可以分配给一个变量,它也可以作为参数传递给另一个函数。

JS中的参数对象是什么&如何获得传递给函数的参数类型
JS 变量arguments表示传递给函数的参数。 使用typeof运算符,可以获得传递给函数的参数类型。

JS中变量的作用域是什么
变量的作用域是程序中定义它的区域,JS变量只有两个作用域:
 ● 全局变量 - 全局变量具有全局作用域,这意味着它在JS代码中的任何位置都可见。
 ● 局部变量 - 局部变量仅在定义它的函数中可见,函数参数始终是该函数的本地参数

JS 中“this”运算符的用途是什么?
this关键字引用它所属的对象。 根据使用位置,它具有不同的值。 在方法中,这指的是所有者对象,而在函数中,这指的是全局对象。

什么是回调
回调函数是作为参数或选项传递给某个方法的普通JS函数。它是一个函数,在另一个函数完成执行后执行,因此称为回调。在JS中,函数是对象,因此,函数可以接受函数作为参数,并且可以由其他函数返回。

?什么是闭包?举个例子
只要在某个内部作用域内访问在当前作用域之外定义的变量,就会创建闭包。 它允许你从内部函数访问外部函数的作用域。 在JS中,每次创建函数时都会创建闭包。 要使用闭包,只需在另一个函数内定义一个函数并暴露它。

TypeOf 运算符是如何工作的
typeof运算符用于获取其操作数的数据类型。 操作数可以是文字或数据结构,例如变量,函数或对象。 它是一个一元运算符,放在它的单个操作数之前,可以是任何类型。 它的值是一个字符串,表示操作数的数据类型。

JS中的变量命名约定是什么?
不应该使用任何JS保留关键字作为变量名。例如,break或boolean变量名无效。
JS 变量名不应该以数字(0-9)开头。它们必须以字母或下划线开头。例如,123name是一个无效的变量名,但123name或name123是一个有效的变量名。
JS 变量名区分大小写。

如何使用 JS 创建 cookie
创建cookie的最简单方法是为document.cookie对象分配一个字符串值

如何使用JS读取cookie
 ● document.cookie的值是由分号分隔的name=value对的列表,其中name是cookie的名称,value是其字符串值。
 ● 可以使用split()方法将字符串分解为键和值。

如何使用 JS 删除 cookie
如果要删除cookie以便后续尝试读取cookie,则只需将过期日期设置为过去的时间。 咱们应该定义cookie路径以确保删除正确的cookie。 如果未指定路径,某些浏览器将不允许咱们删除cookie

Attribute 和Property之间有什么区别
 ● Attribute——提供关于元素的更多细节,如id、类型、值等。
 ● Property —— 分配给属性的值,如type =“text”,value ='Name'等。

列出在JS代码中访问HTML元素的不同方式
下面是在JS代码中访问 html 元素的方法列表:
 ● getElementById(‘idname’): 按id名称获取元素
 ● getElementsByClass(‘classname’): 获取具有给定类名的所有元素
 ● getElementsByTagName(‘tagname’): 获取具有给定标记名称的所有元素
 ● querySelector(): 此函数采用css样式选择器并返回第一个选定元素

JS代码在HTML文件中可以以多少种方式使用
三种: ● 行内 ● 内部 ● 外部

在JS中定义变量的方法有哪些
在 JS 中声明变量有三种方式:
 ● var – var 语句用于声明一个变量,咱们可以选择初始化该变量的值。例子:var a =10;变量声明在代码执行之前处理。
 ● const - 常量的值不能通过重新赋值来改变,并且不能重新声明。
 ● let - 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。

什么是类型化语言
类型化语言中,值与值关联,而不是与变量关联,它有两种类型:
动态:在这种情况下,变量可以包含多种类型,如在JS中,变量可以取number, string 类型。
静态:在这种情况下,变量只能包含一种类型,就像在Java中声明为string的变量只能包含一组字符,不能包含其他类型。

Cookie 与 Local storage 与 Session storage 区别
特性 Cookie localStorage sessionStorage
数据的生命期 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为 5MB
与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 需要程序员自己封装,源生的Cookie接口不友好 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

null 和 undefined 区别
undefined是基本数据类型 表示未定义 缺少的意思。
null是引用数据类型,是对象,表示空对象
undefined是从null派生出来的 所以undefined==null 为 true

JS中的事件冒泡是什么
事件冒泡是HTML DOM API中事件传播的一种方式,当一个事件发生在另一个元素中的一个元素中,并且两个元素都注册了该事件的句柄时。通过冒泡,事件首先由最内部的元素捕获和处理,然后传播到外部元素。执行从该事件开始,并转到其父元素。然后执行传递给父元素,以此类推,直到body元素

NaN 是什么
NaN 即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。
NaN 属性 与 Number.Nan 属性相同。
提示: 请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。

JS的原始/对象类型如何在函数中传递?
两者之间的一个区别是,原始数据类型是通过值传递的,对象是通过引用传递的。
 ● 值传递:意味着创建原始文件的副本。把它想象成一对双胞胎:他们出生的时候一模一样,但是双胞胎中的老大在战争中失去了一条腿,而老二却没有。
 ● 引用传递: 意味着创建原始文件的别名。当我妈妈叫沙雕的时候,虽然我的名字叫小智,但这并不是说我就突然就克隆了一个自己:我仍然是我,只是可以用不同名字来称呼我而已。

如何在JS中将任意基的字符串转换为整数
parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数

export 和 import 是什么
import和export有助于咱们编写模块化JS代码

JS 中的 prompt 框是什么
提示框是允许用户通过提供文本框输入输入的框。 prompt() 方法显示一个对话框,提示访问者输入。 如果您希望用户在输入页面之前输入值,则通常会使用提示框。 弹出提示框时,用户必须在输入输入值后单击“确定”或“取消”才能继续。

call 和 apply有什么区别
call和apply可以用来重新定义函数的执行环境,也就是this的指向;call和apply都是为了改变某个函数运行时的context,即上下文而存在的,换句话说,就是为了改变函数体内部this的指向。
call()调用一个对象的方法,用另一个对象替换当前对象,可以继承另外一个对象的属性,它的语法是:
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
说明:call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象,如果没有提供obj参数,那么Global对象被用于obj


apply() 和call()方法一样,只是参数列表不同,语法:
Function.apply(obj[, argArray]);
说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和obj任何一个参数,那么Global对象将用作obj。

创建JavaScript对象的两种方法是什么?
使用“new”关键字来调用函数。
open/close花括号。

2.如何创建数组?
?????????var myArray = new Array();
????????var myArray = [];

js 如何实现数组去重整理出5种方法。
1).遍历数组法
?实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;

注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,

2).对象键值对法
该方法执行的速度比其他任何方法都快, 就是占用的内存大一些;

实现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增该键并放入新数组。注意点: 判断是否为js对象键时,会自动对传入的键执行“toString()”,不同的键可能会被误认为一样

3).数组下标判断法
还是得调用“indexOf”性能跟方法1差不多,

实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组。

4).排序后相邻去除法
虽然原生数组的”sort”方法排序结果不怎么靠谱,但在不注重顺序的去重里该缺点毫无影响。

实现思路:给传入数组排序,排序后相同值相邻,然后遍历时新数组只加入不与前一值重复的值。

5).优化遍历数组法
实现思路:获取没重复的最右一值放入新数组。(检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)

3.什么是变量提升(Variable Hoisting)?
变量提升指的是,无论是哪里的变量在一个范围内声明的,那么JavaScript引擎会将这个声明移到范围的顶部

4.全局变量有什么风险,以及如何保护代码不受干扰?

其中最常用的方法是创建一个包含其他所有变量的全局变量:
var applicationName = {};
然后,每当你需要创建一个全局变量的时候,将其附加到对象上即可。
applicationName.myVariable = "abc";
还有一种方法是将所有的代码封装到一个自动执行的函数中,这样一来,所有声明的变量都声明在该函数的范围内。
(function(){
?var a = "abc";
})();

5.如何通过JavaScript对象中的成员变量迭代?
for(var prop in obj){
?// bonus points for hasOwnProperty
?if(obj.hasOwnProperty(prop)){
? // do something here
?}}

6.什么是闭包(Closure)?
闭包允许一个函数定义在另一个外部函数的作用域内,即便作用域内的其他东西都消失了,它仍可以访问该外部函数内的变量。

如果应聘者能够说明,在for/next循环中使用闭包却不声明变量来保存迭代变量当前值的一些风险,

:你将如何验证一个素数?
A:一个素数只能被它自己和1整除。所以,我将运行一个while循环并加1

除数一次增加1个。 在3之后我可以增加2.如果一个数可以被任何偶数整除,它将被2整除。
补充:如果你不需要把除数增加到这个数。你可以更早停止。

如何求出一个数的所有素数因子?
A:执行一个while循环。开始除以2,如果不能整除,记录这个除数,直到完成。

可以将除数从3开始,累加2。因为,如果一个数被任何偶数整除,它将被2整除

如何获得第n个斐波纳契数字?
A: 我创建一个数组并从迭代开始。

你将如何从数组中删除重复的成员?
A: 执行一个循环,并保存一个对象/关联数组。如果我第一次找到一个元素,我会设置它的值为真(这将告诉我元素添加一次)。如果我在对象中找到这个元素,我不会将它插入到返回数组中。

怎样合并两个已排序数组?
A: 我将为每个数组保留一个指针

如何在JavaScript中反转字符串?
A:可以遍历字符串并将字母连接到新字符串。??可以使用数组,也可以添加一些检查

你可以做反向函数作为字符串扩展吗?
A:我需要将这个函数添加到String.prototype,而不是使用str作为参数,我需要使用this

如何在句子中颠倒单词?
A:必须检查整个字符串的空白区域。确定是否可能有多个空格。

如果你有一个字符串如”I am the good boy”, 怎样变为 “I ma eht doog yob”? 注意这些单词位置不变但是被反转了。
A: 要做到这一点,我必须做字符串反向和字反转。

如何检查一个字符串是否是回文?
A: 把字符串反转,如果反转前后相等,那么它就是回文。

在一个未排序的数组中找出是否有任意两数之和等于给定的数?
A: 双重循环。????????用一个对象来存储当前元素和和值的差值。当我拿到一个新元素,如果这个元素的差值在对象中存在,那么我就能判断出是否存在

找到任意两个元素的最大总和?
A: 这实际上非常简单直接。 找到两个最大的数字并返回它们的总和

在字符串中匹配子字符串?
A: 在迭代字符串时将使用指针(一个用于字符串,另一个用于子字符串)。 然后用另一个变量来保存初始匹配的起始索引。

eval是做什么的?
它的功能是把对应的字符串解析成JS代码并运行;
应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。
由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval(‘(‘+ str +’)’);

5DOM怎样添加、移除、移动、复制、创建和查找节点
// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() //通过元素Id,唯一性

6null和undefined的区别?
null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。
undefined:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。
null:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。

7new操作符具体干了什么呢?
(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

8JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式:采用键值对,例如:{‘age’:’12’, ‘name’:’back’}

9call() 和 apply() 的区别和作用?
apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。
call()的第一个参数是上下文,后续是实例传入的参数序列。

原型链
每个对象都有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。
prototype属性,函数的原型对象,它是函数所独有的,它是从一个函数指向一个对象。
__proto__是指向构造函数的原型对象,它是对象独有的。


8.继承的几种方式
构造函数继承:在Child里面,把Parent的this指向改为是Child的this指向,从而实现继承
缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承
原型链继承:把Child的原型改为是Parent的实例,从而实现继承
缺点:因为Child的原型对象都是New Parent,所以实例化出来的对象的属性都是一样的,而且Parent上面的引用类型只要有一个实例对象修改了,其他也会跟着修改.因为他们原型对象都是共用的
组合方式继承(组合前两种):
缺点:父类的原型对象调用了两次,没有必要,而且student实例的构造函数是来自于Person
还有两种组合式继承优化

.事件委托理解
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件.
原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。
target 事件属性可返回事件的目标节点(触发 该事件的节点)

.图片的懒加载和预加载
预加载:常用的是new Image();,设置其src来实现预载,再使用onload方法回调预载完成事件。

懒加载:主要目的是作为服务器前端的优化,缓解服务器前端压力,一次性请求次数减少或延迟请求。
实现方式:
1.第一种是纯粹的延迟加载,使用setTimeOut、setInterval进行加载延迟.
2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

13.bind,apply,call的区别
都可以改变函数内部this指向
区别:
callcall传递参数aru1, aru2… 形式
apply传递参数必须数组形式[arg]
bind不会调用函数,可以改变函数内部this指向
主要应用场景:
1、call经常做继承。
2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。
3、bind不会调用函数,可以改变函数内部this指向。


14.js的节流和防抖
防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
节流:当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次。时间戳和定时器
区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行。


15.前端模块化和组件化
模块化:可复用,侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。
组件化:可复用,更多关注的UI部分,页面的每个部件,比如头部,弹出框甚至确认按钮都可以成为一个组件,每个组件有独立的HTML、css、js代码。


16.js单线程怎么执行异步操作
Js作为浏览器脚本语言,它的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。
js怎么异步:浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,执行效率会非常的低,甚至导致页面的假死。
所以,浏览器为这些耗时任务开辟了另外的线程,主要包括http请求线程,浏览器定时触发器,浏览器事件触发线程,这些任务是异步的。这些异步任务完成后通过回调函数让主线程知道。

17.手写promise函数
三种状态:pending(过渡)fulfilled(完成)rejected(失败)

数组去重
1.遍历并两个对比,splice删除重复的第二个????????2.indexOf????????3.sort????????4.includes (ES6)

.数组排序
冒泡排序?????????选择排序:(相邻对比)????????sort():??????

去除首尾空格
JavaScript 本身并不提供 trim() 方法,不过可以用正则表达式(其中一种)

解决跨域方案
jsonp:包含回调函数和数据

window.name + iframe
location.hash+iframe
window.postMessage(HTML5中的XMLHttpRequest Level 2中的API)
通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)
使用跨域资源共享(CORS)来跨域
使用Web sockets来跨域
使用flash URLLoader来跨域

ajax
ajax的技术核心是 XMLHttpRequest 对象;
ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

ES6
字符串扩展
解构表达式
函数优化
函数参数默认值
箭头函数
对象的函数属性简写
箭头函数结合解构表达式
map:接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce:接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:(上一次reduce处理的结果,数组中要处理的下一个元素)
promise

set:本质与数组类似。不同在于Set中只能保存不同元素,如果元素相同会被忽略。
map:本质是与Object类似的结构。不同在于,Object强制规定key只能是字符串。而 Map结构的key可以是任意对象。
模块化:把代码进行拆分,方便重复利用
对象扩展
数组扩展


24.BOM,DOM
BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”
DOM:是指文档对象模型,通过它,可以范文HTLM文档的所有元素
window对象:是客户端JavaScript最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的应用。


25.jQuery选择器
元素选择器:$("p.intro")选取所有 class=“intro” 的元素。
属性选择器:$("[href='#']")选取所有带有 href 值等于 “#” 的元素。
css选择器:$("p").css("background-color","red");


26.隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程,给匹配到的所有元素进行循环遍历,执行相应的方法,而不需要我们自己进行循环遍历

JavaScript 中的强制转型(coercion)是指什么?
在 JavaScript 中,两种不同的内置类型间的转换被称为强制转型

JavaScript 中的作用域(scope)是指什么?
在 JavaScript 中,每个函数都有自己的作用域。作用域基本上是变量以及如何通过名称访问这些变量的规则的集合。只有函数中的代码才能访问函数作用域内的变量。
同一个作用域中的变量名必须是唯一的。一个作用域可以嵌套在另一个作用域内。如果一个作用域嵌套在另一个作用域内,最内部作用域内的代码可以访问另一个作用域的变量。

“use strict”的作用是什么?
use strict 出现在 JavaScript 代码的顶部或函数的顶部,可以帮助你写出更安全的 JavaScript 代码。如果你错误地创建了全局变量,它会通过抛出错误的方式来警告你

解释事件冒泡以及如何阻止它?
事件冒泡是指嵌套最深的元素触发一个事件,然后这个事件顺着嵌套顺序在父元素上触发。
防止事件冒泡的一种方法是使用 event.cancelBubble 或 event.stopPropagation()(低于 IE 9)。

Q10:JavaScript 中的 let 关键字有什么用?
除了可以在函数级别声明变量之外,ES6 还允许你使用 let 关键字在代码块({..})中声明变量。

Q11:如何检查一个数字是否为整数?
检查一个数字是小数还是整数,可以使用一种非常简单的方法,就是将它对 1 进行取模,看看是否有余数。

什么是 IIFE(立即调用函数表达式)?
它是立即调用函数表达式(Immediately-Invoked Function Expression),简称 IIFE。函数被创建后立即被执行:
在避免污染全局命名空间时经常使用这种模式,因为 IIFE(与任何其他正常函数一样)内部的所有变量在其作用域之外都是不可见的。

你能解释一下 ES5 和 ES6 之间的区别吗?
ECMAScript 5(ES5):ECMAScript 的第 5 版,于 2009 年标准化。这个标准已在所有现代浏览器中完全实现。
ECMAScript 6(ES6)或 ECMAScript 2015(ES2015):第 6 版 ECMAScript,于 2015 年标准化。这个标准已在大多数现代浏览器中部分实现。
以下是 ES5 和 ES6 之间的一些主要区别:
箭头函数和字符串插值:

常量
常量在很多方面与其他语言中的常量一样,但有一些需要注意的地方。常量表示对值的“固定引用”。因此,在使用常量时,你实际上可以改变变量所引用的对象的属性,但无法改变引用本身。

块作用域变量。
新的 ES6 关键字 let 允许开发人员声明块级别作用域的变量。let 不像 var 那样可以进行提升。
默认参数值
默认参数允许我们使用默认值初始化函数。如果省略或未定义参数,则使用默认值,也就是说 null 是有效值。

类定义和继承
ES6 引入了对类(关键字 class)、构造函数(关键字 constructor)和用于继承的 extend 关键字的支持。
for…of 操作符
for…of 语句将创建一个遍历可迭代对象的循环。
用于对象合并的 Spread 操作

promise
promise 提供了一种机制来处理异步操作结果。你可以使用回调来达到同样的目的,但是 promise 通过方法链接和简洁的错误处理带来了更高的可读性。

解释 JavaScript 中“undefined”和“not defined”之间的区别。
在 JavaScript 中,如果你试图使用一个不存在且尚未声明的变量,JavaScript 将抛出错误“var name is not defined”,让后脚本将停止运行。但如果你使用 typeof undeclared_variable,它将返回 undefined。

如何在 JavaScript 中创建私有变量?
要在 JavaScript 中创建无法被修改的私有变量,你需要将其创建为函数中的局部变量。即使这个函数被调用,也无法在函数之外访问这个变量

请解释原型设计模式。
原型模式可用于创建新对象,但它创建的不是非初始化的对象,而是使用原型对象(或样本对象)的值进行初始化的对象。原型模式也称为属性模式。
原型模式在初始化业务对象时非常有用,业务对象的值与数据库中的默认值相匹配。原型对象中的默认值被复制到新创建的业务对象中。
经典的编程语言很少使用原型模式,但作为原型语言的 JavaScript 在构造新对象及其原型时使用了这个模式。

Q20:判断一个给定的字符串是否是同构的。
如果两个字符串是同构的,那么字符串 A 中所有出现的字符都可以用另一个字符替换,以便获得字符串 B,而且必须保留字符的顺序。字符串 A 中的每个字符必须与字符串 B 的每个字符一对一对应。
paper 和 title 将返回 true
egg 和 sad 将返回 false。
dgg 和 add 将返回 true。

“Transpiling”是什么意思?
对于语言中新加入的语法,无法进行 polyfill。因此,更好的办法是使用一种工具,可以将较新代码转换为较旧的等效代码。这个过程通常称为转换(transpiling),就是 transforming + compiling 的意思。
通常,你会将转换器(transpiler)加入到构建过程中,类似于 linter 或 minifier。现在有很多很棒的转换器可选择:
Babel:将 ES6+ 转换为 ES5
Traceur:将 ES6、ES7 转换为 ES5

Q22:“this”关键字的原理是什么?请提供一些代码示例。
在 JavaScript 中,this 是指正在执行的函数的“所有者”,或者更确切地说,指将当前函数作为方法的对象

什么是 JavaScript 中的提升操作?
提升(hoisting)是 JavaScript 解释器将所有变量和函数声明移动到当前作用域顶部的操作。有两种类型的提升:
变量提升——非常少见
函数提升——更常见
无论 var(或函数声明)出现在作用域的什么地方,它都属于整个作用域,并且可以在该作用域内的任何地方访问它。
?

请描述一下 Revealing Module Pattern 设计模式。
暴露模块模式(Revealing Module Pattern)是模块模式的一个变体,目的是维护封装性并暴露在对象中返回的某些变量和方法。

原型链
原型链是指对象之间通过prototype链接起来,形成一个有向的链条。当访问一个对象的某个属性的时候,JavaScript引擎会首先查看该对象是否包含该属性。如果没有,就去查找对象的prototype中是否包含。以此类推,直到找到该属性或则找到最后一个对象。最后一个对象的prototype默认为null。

异步JavaScript
JavaScript是一个单线程程序语言,也就是说JavaScript引擎一次只能执行某一段代码。它导致的问题就是:如果有一段代码需要耗费很长的时间执行,其它的操作就被卡住了。JavaScript使用Call Stack来记录函数的调用。一个Call Stack可以看成是一摞书。最后一本书放在最上面,也最先被移走。最先放的书在最底层,最后被移走。
为了避免复杂代码占用CPU太长时间,一个解法就是定义异步回调函数

函数节流的目的
从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。又例如,我们常见的一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。为了解决这些问题,就可以使用定时器对函数进行节流。
函数节流的原理
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

dom事件流原理是什么,分为那几个阶段?
事件捕获 处于目标阶段 事件冒泡

8. dom事件委托什么原理,有什么优缺点
事件委托原理:事件冒泡机制
优点
1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适
缺点
事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

vue双向数据绑定的原理是什么
首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性(此时应注意description中get和set不能与描述属性共存)
数组的实现与对象不同。
同时运用观察者模式实现wather,用户数据和view视图的更新

react和vue比较来说有什么区别
1 component层面,web component和virtual dom
2 数据绑定(vue双向,react的单向)等好多
3 计算属性 vue 有,提供方便;而 react 不行
4 vue 可以 watch 一个数据项;而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易;react 没有
6 生命周期函数名太长 directive

网页布局有哪几种,有什么区别
静态、自适应、流式、响应式四种网页布局
静态布局:意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
自适应布局:就是说你看到的页面,里面元素的位置会变化而大小不会变化;
流式布局:你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局:每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

不是,dom节点的根节点是html(包含head和body,head中分为meta、title等。body又分为一组)

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

http协议属于七层协议中的哪一层,下一层是什么
七层结构:物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层;http属于应用层。
表现层

js垃圾回收机制知道哪些,v8引擎使用的哪一种
js的两种回收机制
1 标记清除(mark and sweep)
2 引用计数(reference counting)
javascript与V8引擎
垃圾回收机制的好处和坏处
好处:大幅简化程序的内存管理代码,减轻程序猿负担,并且减少因为长时间运转而带来的内存泄露问题。
坏处:自动回收意味着程序猿无法掌控内存。ECMAScript中没有暴露垃圾回收的借口,我们无法强迫其进行垃圾回收,更加无法干预内存管理。
V8 自动垃圾回收算法
https://segmentfault.com/a/11...

26. 作用域什么时候生成的?
页面加载-->创建window全局对象,并生成全局作用域-->然后生成执行上下文,预解析变量(变量提升),生成全局变量对象;
$scope

27. websocket长连接原理是什么
含义
Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。
原理
类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息

讲一下事件循环机制
执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise

get和post有什么区别?get可以通过body传递数据吗
把数据放到 body 里面,必须用 POST 方式取,这是 HTTP 协议限制的。

重排和重绘
部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。

13.什么情况会触发重排和重绘
添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘,因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表,调整样式属性
用户行为,例如调整窗口大小,改变字号,或者滚动。

setTimeout 和 setInterval 细谈
常问的点,前者是在一定时间过后将函数添加至执行队列,执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
后者是不管前一次是否执行完毕,每隔一定时间重复执行,用于精准执行互相没有影响的重复操作。
如果需要控制前后执行顺序,最好使用setTimeout模拟setInterval

WebSocket
HTML5带来的新协议,通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll(即不中断连接一直等待数据),或者是ajax轮询的方式(每隔一段时间发送请求,建立连接,询问是否有新的数据)。这两种方式的缺点在于long poll的阻塞,以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调,在发送请求升级服务端的协议并收到确认信息后,服务端一有新的信息/数据就会主动推送给客户端,至于要一次HTTP握手便可以建立持久连接

跨域相关
只要协议、域名、端口有不同,则视为不同的域。(域名和域名对应的IP也是跨域)
1.CORS: Cross-Origin Resource Sharing
基于服务器支持的跨域,服务器设置Access-Control-Allow-Origin响应头,浏览器可允许跨域
2.设置domain
能从子域设到主域,如a.b.c.com—>b.c.com—>c.com
具体情况:在页面中用iframe打开了另一个页面(前提:两个页面主域是相同的)
利用frameElement.contentWindow.document.domain设置frame子页面的主域,document.domain设置主页面的主域,之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。
3.例如拥有src属性的img标签,每次改变src属性,都会发起http请求。

缺点是只能使用GET请求,不能获取数据,一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求
4.HTML5 postMessage
支持IE8+和主流浏览器,写法也简单..

5.window.name
即使在页面打开多层iframe后,每个iframe中window.name 属性值都是相同的,以此用作数据传输的工具。
但由于跨域的限制,是无法获取另一个frame中的window.name数据,所以要使用一个同域的代理(proxy.html):
6. jsonp
目前主流跨域方法
调用其他域的脚本获取数据,前提是另一个域能知道回调函数名,这个可以通过请求发送给目标域。
直接写jQuery封的jsonp

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-04 13:21:37  更:2021-12-04 13:22:36 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:26:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码