前言:
如今大家对“javascript解码与编码”大体比较关切,大家都想要分析一些“javascript解码与编码”的相关资讯。那么小编同时在网上收集了一些有关“javascript解码与编码””的相关资讯,希望小伙伴们能喜欢,姐妹们快快来学习一下吧!Version:0.9 StartHTML:0000000105 EndHTML:0000002583 StartFragment:0000000141 EndFragment:0000002543
1、JavaScript有⼏种数据类型?
number:数字类型string:字符串类型boolean:布尔值类型undefined:未定义类型null:空值类型object:对象类型symbol:symbol类型bigint:⼤数字类型
2、JavaScript最⼤安全数字与最⼩安全数字?
console.log(Number.MAX_SAFE_INTEGER)// 9007199254740991console.log(Number.MIN_SAFE_INTEGER)// -9007199254740991
3、深拷⻉与浅拷⻉的区别?
深拷⻉层层拷⻉,浅拷⻉只拷⻉第⼀层,深层只是引⽤在深拷⻉中,新对象中的更改不会影响原始对象,⽽在浅拷⻉中,新对象中的更改,原始对象中也会跟着改。在深拷⻉中,原始对象不与新对象共享相同的属性,⽽在浅拷⻉中,它们具有相同的属性。
4、闭包是什么?
闭包是⼀个能读取其他函数内部变量的函数
优点:使外部能访问到局部的东⻄
缺点:使⽤不当容易造成内存泄漏的问题 例⼦:
function a () {let num = 0// 这是个闭包return function () {return ++num}}const b = a()console.log(b()) // 1console.log(b()) // 2
6、什么是变量提升?函数提升?
变量提升
console.log(name) // undefinedvar name = 'Sunshine_Lin'if (false) { var age = 23}console.log(age) // undefined 不会报错
函数提升
console.log(fun) // function fun() {}function fun() {}if (false) {function fun2(){}}console.log(fun2) // undefined 不会报错
函数提升优先级 > 变量提升优先级
7、isNaN 与 Number.isNaN的区别?
isNaN:除了判断NaN为true,还会把不能转成数字的判断为true,例如'xxx'Number.isNaN:只有判断NaN时为true,其余情况都为false
Version:0.9 StartHTML:0000000105 EndHTML:0000005871 StartFragment:0000000141 EndFragment:0000005831
8、解决遍历对象时,把原型上的属性遍历出来了咋办?
使⽤ hasOwnProperty 判断function Person(name) {this.name = name}Person.prototype.age = 23const person = new Person('Sunshine_lin')for (const key in person) { console.log(key) } // name age// 使⽤ hasOwnPropertyfor (const key in person) {person.hasOwnProperty(key) && console.log(key)} // name
9、valueOf 与 toString
1、 valueOf 偏向于运算, toString 偏向于显示2、对象转换时,优先调⽤ toString3、强转字符串优先调⽤ toString ,强转数字优先调⽤ valueOf4、正常情况下,优先调⽤ toString5、运算操作符情况下优先调⽤ valueOf
调⽤valueOf
调⽤者 返回值 返回值类型Array 数组本身 ArrayBoolean 布尔值 BooleanDate 毫秒数 NumberFunction 函数本身 FunctionNumber 数字值 NumberObject 对象本身 ObjectString 字符串 String
调⽤toString
调⽤者 返回值返回值类型Array 数组转字符串,相当于Array.join() StringBoolean 转字符串'true'、'false' StringDate字符串⽇期,如'Fri Dec 23 2016 11:24:47 GMT+0800 (中国标准时间)'StringNumber 数字字符串 StringObject '[object Object]' String
10、JavaScript变量在内存中具体存储形式?
基本数据类型:存在 栈内存 ⾥引⽤数据类型:指针存 栈内存 ,指向 堆内存 中⼀块地址,内容存在堆内存中也有说法说其实JavaScript所有数据都存 堆内存 中,我也⽐较赞同这种说法
11、讲⼀讲JavaScript的装箱和拆箱?
装箱:把基本数据类型转化为对应的引⽤数据类型的操作看以下代码,s1只是⼀个基本数据类型,他是怎么能调⽤ indexOf 的呢?const s1 = 'Sunshine_Lin'const index = s1.indexOf('_')console.log(index) // 8原来是JavaScript内部进⾏了装箱操作1、创建String类型的⼀个实例;2、在实例上调⽤指定的⽅法;3、销毁这个实例;var temp = new String('Sunshine_Lin')const index = temp.indexOf('_')temp = nullconsole.log(index) // 8拆箱:将引⽤数据类型转化为对应的基本数据类型的操作通过 valueOf 或者 toString ⽅法实现拆箱操作var objNum = new Number(123);var objStr =new String("123");console.log( typeof objNum ); //objectconsole.log( typeof objStr ); //objectconsole.log( typeof objNum.valueOf() ); //numberconsole.log( typeof objStr.valueOf() ); //stringconsole.log( typeof objNum.toString() ); // stringconsole.log( typeof objStr.toString() ); // string
12、null和undefined的异同点有哪些?
相同点都是空变量都是假值,转布尔值都是falsenull == undefined 为 true 不同点typeof判断null为object,判断undefined为undefinednull转数字为0,undefined转数字为NaNnull是⼀个对象未初始化,undefined是初始化了,但未定义赋值null === undefined 为 false
13、如何判断数据类型?
typeof xxx:能判断出number,string,undefined,boolean,object,function(null是object)Object.prototype.toString.call(xxx):能判断出⼤部分类型Array.isArray(xxx):判断是否为数组
14、为什么typeof null 是object?
不同的数据类型在底层都是通过⼆进制表示的,⼆进制前三位为 000 则会被判断为 object 类型,⽽null底层的⼆进制全都是0,那前三位肯定也是 000 ,所以被判断为 object
15、== 与 === 的区别?
==:在⽐较过程中会存在隐式转换===:需要类型相同,值相同,才能为true
16、JavaScript的隐式转换规则?
1、转成string类型:+(字符串连接符)2、转成number类型:++/--(⾃增⾃减运算符) + - * / %(算术运算符) > < >= <= == != ===!=== (关系运算符)3、转成boolean类型:!(逻辑⾮运算符)
17、双等号左右两边的转换规则?
1、null == undefined 为 true1、如果有⼀个操作数是布尔值,则在⽐较相等性之前先将其转换为数值——false转换为0,⽽true转换为1;2、如果⼀个操作数是字符串,另⼀个操作数是数值,在⽐较相等性之前先将字符串转换为数值3、如果⼀个操作数是对象,另⼀个操作数不是,则调⽤对象的toString()⽅法,⽤得到的基本类型值按照前⾯的规则进⾏⽐较
18、undefined >= undefined 为什么是 false ?
按照 隐式转换规则 ,可转换成 NaN >= NaN ,NaN 不等于 NaN,也不⼤于,所以是 false19、null >= null 为什么是 true?按照 隐式转换规则 ,可转换成 0 >= 0 ,0 等于 0,所以是 true
20、[] == ![] 为什么是 true ?
按照 双等号左右两边的转换规则1、 ! 优先级⾼于 == , [] 不是假值,所以先转换成 [] == false2、右边为布尔值, false 先转数字 0 ,所以可转换为 [] == 03、左边为对象, [] 调⽤ toString 转为 '' ,转换为 '' == 04、左边为字符串, '' 转换为 0 ,最终为 0 == 0
21、0.1 + 0.2 === 0.3,对吗?
不对,JavaScript的计算存在精度丢失问题console.log(0.1 + 0.2 === 0.3) // false原因:JavaScript中⼩数是浮点数,需转⼆进制进⾏运算,有些⼩数⽆法⽤⼆进制表示,所以只能取近似值,所以造成误差解决⽅法:先变成整数运算,然后再变回⼩数toFixed() 性能不好,不推荐
22、什么是匿名函数?
匿名函数:就是没有函数名的函数,如:(function(x, y){alert(x + y);})(2, 3);这⾥创建了⼀个匿名函数(在第⼀个括号内),第⼆个括号⽤于调⽤该匿名函数,并传⼊参数。
23、绑定点击事件有⼏种⽅式?
三种
xxx.onclick = function (){}
<xxx onclick=""></xxx>
xxx.addEventListence('click', function(){}, false)
24、addEventListence的第三个参数是⼲嘛的?
第三个变量传⼀个布尔值,需不需要阻⽌冒泡,默认是false,不阻⽌冒泡
25、函数声明和函数表达式的区别?
函数声明:享受函数提升函数表达式:归类于变量声明,享受变量提升函数提升优先级 > 变量提升优先级console.log(fun) // fun () {}// 函数表达式var fun = function(name) {}// 函数声明function fun () {}console.log(fun) // fun (name) {}
26、JavaScript的事件流模型有哪些?
事件冒泡:由最具体的元素接收,并往上传播事件捕获:由最不具体的元素接收,并往下传播DOM事件流:事件捕获 -> ⽬标阶段 -> 事件冒泡
27、Ajax、Axios、Fetch有啥区别?
Ajax:是对XMLHttpRequest对象(XHR)的封装Axios:是基于Promise对XHR对象的封装Fetch:是window的⼀个⽅法,也是基于Promise,但是与XHR⽆关,不⽀持IE
28、load、$(document).ready、DOMContentLoaded的区别?
DOM⽂档加载的步骤为:
1、解析HTML结构。
2、加载外部脚本和样式表⽂件。
3、解析并执⾏脚本代码。
4、DOM树构建完成。// DOMContentLoaded 触发、 $(document).ready 触发
5、加载图⽚等外部⽂件。
6、⻚⾯加载完毕。// load 触发
29、如何阻⽌事件冒泡?
function stopBubble(e) {if (e.stopPropagation) {e stopPropagation()e.stopPropagation()} else {window.event.cancelBubble = true;}}
30、如何阻⽌事件默认⾏为?
function stopDefault(e) {if (e.preventDefault) {e.preventDefault();} else {window.event.returnValue = false;}}
31、什么是事件委托?
当所有⼦元素都需要绑定相同的事件的时候,可以把事件绑定在⽗元素上,这就是 事件委托 ,
优点有:
绑定在⽗元素上只需要绑定⼀次,节省性能
⼦元素不需要每个都去绑定同⼀事件
如果后续⼜有新的⼦元素添加,会由于事件委托的原因,⾃动接收到⽗元素的事件监听
32、如何实现数组去重?
// 使⽤ Map 去重function quchong1(arr) {const newArr = []arr.reduce((pre, next) => {if (!pre.get(next)) {pre.set(next, 1)newArr.push(next)}return pre}, new Map())return newArr}// 使⽤ Set 去重function quchong (arr) {return [...new Set(arr)]}
33、Set与Array的区别是什么?
建议看阮⼀峰⽼师的⽂章:Set 和 Map 数据结构
34、Map与Object的区别是什么?
建议看阮⼀峰⽼师的⽂章:Set 和 Map 数据结构
35、NaN是什么?有什么特点?
NaN不等于⾃身,也就是 NaN === NaN 为 false
NaN为假值,转布尔值为 false
NaN本质是⼀个number, typeof NaN === number
36、处理异步的⽅法有哪些?
回调函数
promise
事件监听
发布订阅
async await
37、JavaScript继承⽅式有⼏种?
前置⼯作
// 定义⼀个动物类function Animal (name) {// 属性this.name = name || 'Animal';// 实例⽅法this.sleep = function(){this.sleep function(){console.log(this.name + '正在睡觉!');}}
// 原型⽅法
Animal.prototype.eat = function(food) {console.log(this.name + '正在吃:' + food);};
1、原型链继承
核⼼:将⽗类的实例作为⼦类的原型
function Cat(){}Cat.prototype = new Animal();Cat.prototype.name = 'cat';var cat = new Cat();console.log(cat.name); // catcat.eat('fish') // cat正在吃:fishcat.sleep() // cat正在睡觉!console.log(cat instanceof Animal); //trueconsole.log(cat instanceof Cat); //true优点:1、⾮常纯粹的继承关系,实例是⼦类的实例,也是⽗类的实例2、⽗类新增原型⽅法/属性,⼦类都能访问到3、简单,易于实现 缺点:1、要想为⼦类新增属性和⽅法,必须要在 new Animal() 这样的语句之后执⾏,不能放构造器中2、来⾃原型对象的所有属性被所有实例共享3、创建⼦实例时,⽆法向⽗类构造函数传参4、不⽀持多继承2、构造继承核⼼:使⽤⽗类的构造器来增强⼦类实例,等于是复制⽗类的实例属性给⼦类(没⽤到原型function Cat(name) {Animal.call(this);this.name = name || 'Tom';}var cat = new Cat();console.log(cat.name); // Tomcat.sleep() // Tom正在睡觉!console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true优点:1、解决了 原型链继承 中,⼦类实例共享⽗类引⽤属性的问题2、创建⼦类实例时,可以向⽗类传递参数3、可以实现多继承(call多个⽗类对象) 缺点:1、实例并不是⽗类的实例,知识⼦类的实例2、是能继承⽗类的实例属性和⽅法,不能继承原型属性/⽅法3、⽆法实现函数复⽤,每个⼦类都有⽗类实例函数的副本,影响性能3、实例继承核⼼:为⽗类实例添加新特性,作为⼦类实例返回function Cat(name){var instance = new Animal();instance.name = name || 'Tom';return instance;}var cat = new Cat();console.log(cat.name) // Tomcat.sleep() // Tom正在睡觉!console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // false优点:1、不限制调⽤⽅式,不管是 new ⼦类() 还是 ⼦类() ,返回的对象具有相同效果 缺点:2021/11/3 上午9:46 工作中遇到的50个JavaScript的基础知识点,满分找我拿奖品! 14/231、实例是⽗类的实例,不是⼦类的实例2、不⽀持多继承4、拷⻉继承核⼼:就⼀个⼀个拷⻉function Cat(name){var animal = new Animal();for(var p in animal){Cat.prototype[p] = animal[p];}this.name = name || 'Tom';}var cat = new Cat();console.log(cat.name); // Tomcat.sleep() // Tom正在睡觉!console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true优点:1、⽀持多继承 缺点:1、效率低,内存占⽤⾼(因为要拷⻉⽗类的属性)2、⽆法获取⽗类不可枚举⽅法(不可枚举⽅法,不能使⽤for in访问到)5、组合继承核⼼:通过⽗类构造,继承⽗类的属性并保留传参的有点,然后通过将⽗类实例作为⼦类原型,实现函数复⽤function Cat(name){Animal.call(this);this.name = name || 'Tom';}Cat.prototype = new Animal();Cat.prototype.constructor = Cat;var cat = new Cat();console.log(cat.name); // Tomcat.sleep() // Tom正在睡觉!console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // true优点:1、弥补了 构造继承 的缺陷,可以继承实例属性/⽅法,也可继承原型属性/⽅法2、既是⼦类的实例,也是⽗类的实例3、不存在引⽤属性共享问题4、可传参5、函数可复⽤ 缺点:1、调⽤了两次⽗类构造函数,⽣成了两份实例(⼦类实例将⼦类原型上的那份屏蔽了)6、寄⽣组合继承核⼼:通过寄⽣⽅式,砍掉⽗类的实例属性,这样,在调⽤两次⽗类的构造时,就不会初始化两次实例⽅法/属性,避免 继承组合 的缺点function Cat(name) {Animal.call(this);this.name = name || 'Tom';}// 创建⼀个没有实例⽅法的类var Super = function () { };Super.prototype = Animal.prototype;//将实例作为⼦类的原型Cat.prototype = new Super();// Test Codevar cat = new Cat();console.log(cat.name); // Tomcat.sleep() // Tom正在睡觉!console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); //true
1、实现复杂
38、创建⼀个对象的⽅式有哪⼏种?
new Object创建const obj = new Object()obj.name = 'Sunshine_Lin'
字⾯量创建
const obj = { name: 'Sunshin_Lin' }
⼯⼚模式创建
function createObj(name) {const obj = new Object()obj.name = namereturn obj}const obj = createObj('Sunshine_Lin')
构造函数创建
function Person(name) {this.name = name}const person = new Person('Sunshine_Lin')
39、this指向的四种情况?
1、new操作符创建实例function Person(name) {this.name = nameconsole.log(this)}// this指向当前person实例对象const person = new Person('Sunshine_Lin')
2、指向window
function fn() {console.log(this)}fn() // 浏览器window,node⾥global
3、对象调⽤⽅法
const target = {fn: function () { console.log(this) }}target.fn() // target// 这种就是改变了this了const fn = target.fnfn() // 浏览器window,node⾥global4、call、apply、bind改变this
const obj1 = {name: '林三⼼',sayName: function() {console.log(this.name)}}const obj2 = {name: 'Sunshin_Lin'}// 改变sayName的this指向obj2obj1.sayName.call(obj2) // Sunshin_Lin// 改变sayName的this指向obj2obj1.sayName.apply(obj2) // Sunshin_Lin// 改变sayName的this指向obj2const fn = obj1.sayName.bind(obj2)fn() // Sunshin_Lin
40、数组的常⽤⽅法有哪些?
⽅法 作⽤ 是否影响原数组push 在数组后添加元素,返回数组⻓度 ✅pop 删除数组最后⼀项,返回被删除项 ✅shift 删除数组第⼀项,并返回数组 ✅unshift 数组开头添加元素,返回添加的元素 ✅reserve 反转⼀个数组,返回修改后的数组 ✅sort 排序⼀个数组,返回修改后的数组 ✅splice 截取数组,返回被截取的区间 ✅join 将⼀个数组所有元素连接成字符串并返回这个字符串 ❌concat arr1.concat(arr2, arr3) 连接数组 ❌join arr.join(x)将arr数组元素连接成字符串并返回这个字符串 ❌map 操作数组每⼀项并返回⼀个新数组 ❌forEach 遍历数组,没有返回值 ❌filter 对数组所有项进⾏判断,返回符合规则的新数组 ❌every 数组每⼀项都符合规则才返回true ❌some 数组有符合规则的⼀项就返回true ❌reduce 接收上⼀个return和数组的下⼀项 ❌flat 数组扁平化 ❌slice 截取数组,返回被截取的区间 ❌
41、Math的常⽤⽅法有哪些?
⽅法 作⽤Math.max(arr) 取arr中的最⼤值Math.min(arr) 取arr中的最⼩值Math.ceil(⼩数) ⼩数向上取整Math.floor(⼩数) ⼩数向下取整Math.round(⼩数) ⼩数四舍五⼊⽅法 作⽤Math.sqrt(num) 对num进⾏开⽅Math.pow(num, m) 对num取m次幂Math.random() * num 取0-num的随机数
44、JS中有哪些不同类型的弹出框?
在JS中有三种类型的弹出框可⽤,分别是:
Alert
Confirm
Prompt
45. 如何将 JS ⽇期转换为ISO标准
toISOString() ⽅法⽤于将js⽇期转换为ISO标准。它使⽤ISO标准将js Date对象转换为字符串。
如:
var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZ
46、如何在JS中编码和解码 URL
encodeURI() 函数⽤于在JS中对URL进⾏编码。它将url字符串作为参数并返回编码的字符串。注意:encodeURI()不会编码类似这样字符: / ? : @ & = + $ #,如果需要编码这些字符,请使⽤encodeURIComponent()。⽤法:var uri = "my profile.php?name=sammer&occupation=pāntiNG";var encoded_uri = encodeURI(uri);decodeURI() 函数⽤于解码js中的URL。它将编码的url字符串作为参数并返回已解码的字符串,⽤法:var uri = "my profile.php?name=sammer&occupation=pāntiNG";var encoded_uri = encodeURI(uri);decodeURI(encoded_uri);47、什么是BOM?有哪些api?
BOM就是 browser object model , 浏览器对象模型
api 作⽤ 代表⽅法或属性
window.history 操纵浏览器的记录 history.back()
history.go(-1)
window.innerHeight 获取浏览器窗⼝的⾼度
window.innerWidth 获取浏览器窗⼝的宽度
window.location 操作刷新按钮和地址栏
location.host:获取域名和端⼝
location.hostname:获取主机名
location.port:获取端⼝号
location.pathname:获取url的路径
location.search:获取?开始的部分
location.href:获取整个url
location.hash:获取#开始的部分
location.origin:获取当前域名
location.navigator:获取当前浏览器信息
48、BOM 和 DOM 的关系
BOM全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗⼝和框架。2021/11/3 上午9:46 工作中遇到的50个JavaScript的基础知识点,满分找我拿奖品!
21/23
标签: #javascript解码与编码