2022前端面试-JS基础篇

1、判断数据类型方法

js中判断数据类型的话可用typeof（xx）来进行判断，它的返回值有六种：
string、Boolean、number、function、object、undefined。但是数组、空值、对象返回的都是 object。这时可用 toString.call( ) 来进行判断。

另外还可以用 instanceof 判断，格式：[1,2,3] instanceof Array,其返回的是布尔值。

typeof 判断所有变量的类型，返回值有 number，boolean，string，function，object，undefined。
typeof 对于丰富的对象实例，只能返回 " Object " 字符串。

详细可以看看本文第18条。

2、强制类型转换和隐式类型转换

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+ 以外的算术运算符比如 - * / 等都会把数据转成数字类型
+ 号作为正号解析可以转换成Number

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

        // let num = '10'  
        // Number(数据)
        console.log(Number('10.01'))//转成number类型
        console.log(Number('10.01abc'))// 返回的是 NaN
        console.log(parseInt('10.111'))// 返回10，即只保留整数，没有四舍五入
        console.log(parseInt('10.999px'))// 返回10，即转换为数字型，同时过滤px单位
        console.log(parseInt('rem10.999px'))// 返回NaN
        console.log(parseFloat('10.999')) // 返回10.999，即转换为数字型，会保留小数
        
        let num = tostring(123)
        console.log(typeof num)//string

3、split() 和 join() 的区别

split() : 把字符串以什么切割数组，如 字符串.split(',')

join() : 把数组以什么串成字符串，如 数组.join(',')

4、数组方法 pop() push() unshift() shift()

pop() : 后面移除

push() : 后面加入

unshift() : 前面移除

shift() : 前面加入

5、传统事件绑定和符合 W3C 标准的事件绑定有什么区别?

DOM L0：
事件源.on事件 = function() { }

只有冒泡阶段，没有捕获阶段

后监听的会覆盖前监听的事件

DOM L2：

事件源.addEventListener(事件，事件处理函数，布尔值)

布尔值省略时默认为false,即默认开启冒泡阶段，为true时开启捕获阶段

监听多少次，执行多少次

6、call() 、 apply() 和 bind() 的区别

function add(c, d) {
    return this.a + this.b + c + d;
}
var strObj = { a: 1, b: 2};
console.log(add.apply(strObj,[3,3])); 
console.log(add.call(strObj,3,3)); 
//以上两个打印结果都是 9

相同：都可以改变 this 的指向，为了让某对象去执行不属于该对象的方法，让这个对象拥有改方法中的属性和功能，也就是三者都可以把一个函数应用到其他对象身上。

详细：https://www.cnblogs.com/suihung/p/16205224.html

7、b继承a的方法

有很多，看看这个：通过extends和super关键字实现继承

另外，可以说说通过改变this指向的那三个方法，其实那三个方法也是属于实现了继承。

8、闭包

看这里：https://www.cnblogs.com/suihung/p/16206198.html

9、事件委托是什么

利用事件冒泡的原理，将子元素不方便干的事件，委托给父元素帮干。比如点击事件，子元素不方便绑定这个事件，就委托（绑定）在父元素身上，此时点击父元素就可以触发，做出相同效果的事情。

10、如何阻止事件冒泡和默认事件

阻止事件冒泡：

1. 用 H5 的事件监听方法，也就是 addEventLisntner() ，来监听事件，第三个参数填 true ，这样就变成只有捕获阶段了

2. e. stopPropagation(); //标准浏览器

event.canceBubble=true; //ie9 之前

阻止默认行为：

（一）右键菜单事件：oncontextmenu；

　　　　阻止：return false；

（二）超链接的默认行为：跳转；

　　　　阻止：标准浏览器：event.preventDefault（）；

　　　　　　　IE8及以下：event.returnValue = false；

　　　　　　　兼容处理：event.preventDefault ？ event.preventDefault（）：event.returnValue = false；

（三）浏览器的拖拽事件：ondragstart；

　　　　阻止：return false；

11、添加（后面）、删除、替换、插入（任意位置）、克隆节点的方法

添加：父节点.appendChild( 要插入的节点 )这是在后面添加
删除：父节点.removeChild( 要移除的节点 )
替换：父节点.replaceChild( newnode , oldnode )
插入：父节点.insertBefore( 要插入的节点，在哪个节点前面 )
克隆：要克隆的节点.cloneNode(布尔值)默认false,浅克隆，true 为深克隆，后代节点也克隆

12、 javascript 的本地对象，内置对象和宿主对象

本地对象：如数组Array、对象Object等，可以 new 实例化的
内置对象：如 Math、Date等，直接 new 就可以用，不需要实例化
宿主对象：如浏览器对象 document、Windows等；node.js也有

13、 document.onload 和 windows.onload 的区别

document.onload : HTML结构和 CSS样式加载完成再执行 js 文件。

windows.onload ：不仅要结构和样式加载完，还要执行完所有的样式、图片这些资源文件

14、 == 和 === 的区别

除了常说的值和数据类型之说之外，另外要知道它的比较过程。
前者会自动转换成相同类型，再比较。后者直接比较类型，相同则继续比较值，否则直接返回 false 。

15、同源策略和跨域方法

同源策略：一段脚本只能读取来自于同一来源的资源。协议、域名、端口要相同。

跨域方法：前端JSONP；后端服务器CROS，即请求头设置允许跨域，或

16、写一个数组去重方法

      // 数组去重的方法
      function quchong(arr) {
        const newArr = []
        var json = {}
        for (let i = 0; i < arr.length; i++) {
          if (!json[arr[i]]) {
            newArr.push(arr[i])
            json[arr[i]] = 1
          }
        }
        return newArr
      }

17、怎么理解js是一门动态语言？

var num = 10；//num 是数字类型
num = "abc"; //num 变成字符串类型
// 我们把一个变量用类存不同数据类型的语言称为动态语言

// 静态语言的变量在声明的时候就已经指定它的类型了，在生命周期内不再改变。
// 静态语言：Java、c# c c++

18、 js中的数据类型有？如何判断？

5种简单数据类型、1种复杂数据类型。

基本数据类型：String、Boolean、 Number、null、undefined （5种）➕ ES6新增的 symbol （6种）

引用数据类型：Object ( Function、Array、Date、RegExp ）

如何判断：

先用typeof 判断，它的返回结果只包括 number,boolean,string,function,undefined，object。

typeof 1           //number
typeof 'a'         //string
typeof true        //boolean
typeof undefined   //undefined
 
typeof null        //object
 
typeof {}          //object
typeof [1,2,3]     //object
 
function Fn(){}
typeof new Fn()    //object
 
typeof new Array() //object

所有用 type 判断出是 object 的时候，用 toString.call() 就好了。

Object.prototype.toString.call();
console.log(toString.call(123));          //[object Number]
console.log(toString.call('123'));        //[object String]
console.log(toString.call(undefined));    //[object Undefined]
console.log(toString.call(true));         //[object Boolean]
console.log(toString.call({}));           //[object Object]
console.log(toString.call([]));           //[object Array]
console.log(toString.call(function(){})); //[object Function]

19、不用框架获得 <input id="ipt"> 的值

getElementById('ipt').value

20、看下面代码，解释一下。

var a;
alert(typeof a); // “undefined” 
//alert(b); // 控制台报错，提示 not defined
b=10;
alert(typeof b); // "number" 
var c = null;
alert(typeof c);  // ''object''

解释：a 声明了，但未赋值，这个值就是 undefinde ，b 报错因为它从未声明。null 是一个只有一个值的数据类型，这个值就是 null。表示一个空指针对象，所以用 typeof 检测会返回”object”。

通俗：

null ，c这个房间内住了 null
undefinde , a这个房间没有任何任何东西
not defnied ，没有开放，所以没有房间

有三种情况会产生 undefined ：

一个变量声明了但未赋值
想要获得一个对象上不存在的属性或方法
一个数组中没有被赋值的元素

注意区分 undefined 跟 not defnied(语法错误)是不一样的

注意：undefined 与 null 相等(==)，但不恒等(===)

21、解释下面代码，给出法案。

1 == true; // true
2 == true； // false
0 == false; // true
NaN == NaN; // false

var foo = "11"+2-"1";
console.log(foo);//111
console.log(typeof foo); // number

尝试将 boolean 转换为 number，0 或 1
一个是 number 一个是 string 时，会尝试将 string 转换为 number
尝试将 Object 转换成 number 或 string，取决于另外一个对比量的类型

var a = new Object();
    a.value = 1;
    b = a;
    b.value = 2;
    alert(a.value);//2
// 答案:2 (考察引用数据类型细节)
// a b 指向同一个空间地址，改谁都会改变地址内的值

22、有关数组的方法

增：

开头增：arr.push()
末尾增：arr.unshift()

删：

开头删：arr.pop()
末尾删：arr.shift()
其他删：arr.splice(开始删的位置，删的个数) // 注意位置从0开始的

其他：forEach() map() some() every() filter() redece() reverse()颠倒数组

还有：split()注意：split() 把一个字符串(根据某个分隔符)切割成若干个字符串并存放在一个数组里。而 join() 把数组中的字符串(根据某个分隔符)连成一个长串。

23、关于变量声明提升

var foo = 1
function fn() {
    console.log(foo)  
    var foo = 2
    console.log(foo)
}
// 提升后
var foo = 1
function fn() {
    var foo
    console.log(foo)  // undefined
    foo = 2
    consloe.log(foo)  // 2
}
// 函数不调用不执行
fn()  // 输出 undefined、2

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域顶部，但是只提升的声明，不会提升赋值部分，赋值部分在原地。

24、合并两个数组

var array1 = ['a','b','c'];
var array2 = ['d','e','f'];
var array3 = array1.concat(array2) // 方法1
var array4 = [...array1,...array2]  // ES6展开运算符

25、查找节点

看：https://www.cnblogs.com/suihung/p/16040200.html

26、创建函数的几种方式

第一种(函数声明):
function sum1(num1,num2){ return num1+num2;}

第二种(函数表达式):
var sum2 = function(num1,num2){ return num1+num2;}

匿名函数: function(){}:只能自己执行自己

第三种(函数对象方式):
var sum3 = new Function("num1","num2","return num1+num2");

27、把 Script 标签放在页面的最底部的 body 封闭之前和封闭之后有什么区别?浏览器会如何解析它们?

如果说放在 body 的封闭之前，将会阻塞其他资源的加载

如果放在 body 封闭之后，不会影响 body 内元素的加载

28、 iframe 的优缺点?

优点:
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点:
1. iframe 会阻塞主页面的 Onload 事件
2. 即时内容为空，加载也需要时间 3. 没有语意

29、js 延迟加载的方式有哪些?

1. defer 和 async
2. 动态创建 DOM 方式(创建 script，插入到 DOM 中，加载完毕后 callBack)
3. 按需异步载入 js

30、 document.write 和 innerHTML 的区别?

document.write 会重绘整个页面
innerHTML 可以重绘页面的一部分

31、哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象)，或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环(在两个对象彼此引用且彼此保留时，就会产生一个循环)

31、解释 jsonp 的原理，以及为什么不是真正的 ajax

动态创建 script 标签，回调函数

Ajax 是页面无刷新请求数据操作

32、window.location.search 返回的是什么?

查询(参数)部分。下面返回值: ?number=1&year=2022 也就是问号后面的!

//url:http://www.sina.com/getage?number=1&year=2022

33、 window.location.hash 返回的是什么?

锚点，下面返回值: #age

/url:http://www.sina.com/getage?#age

34、 window.location.reload() 作用?

刷新当前页面。

35、为什么不能定义 1px 左右的 div 容器?

IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如: overflow:hidden | zoom:0.08 | line-height:1px

36、请简要描述 web 前端性能需要考虑哪方面，你的优化思路是什么?

减少 http 请求
小图弄成大图（精灵图）
合理的设置缓存
资源合并、压缩
将外部的 js 文件置底

37、 HTTP 协议中，GET 和 POST 有什么区别?分别适用什么场景?

get 参数在请求地址中，数据长度有限。一般用于获取数据。
post 参数在请求报文中，数据长度大。一般用于提交数据。

38、 HTTP 状态消息 200 302 304 403 404 500 分别表示什么

200:请求已成功，请求所希望的响应头或数据体将随此响应返回。302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的
304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容(自上次访问以来或者根据请求的条件)并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。403:服务器已经理解请求，但是拒绝执行它。404:请求失败，请求所希望得到的资源未被在服务器上发现。500:服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

39、关于link和@import的区别

link 属于 XHTML 标签，而@import 是 CSS 提供的

40、同步和异步的区别?

同步：有强迫症，而且不轻，必须从头到尾干下去，中间有一件事情没干完就不继续。

异步：我管你，这个难干，那我委托给宿主环境去干，我继续干下面的，等我干完了这些，再来接宿主帮我干完的活。

41、原型和原型链

https://blog.csdn.net/weixin_56505845/article/details/119683904

42、 split(),slice(),splice(),join()?

join() 用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于 Array

split() 即把字符串分离开，以数组方式存储。归属于 Stringstring

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。

43、定时器 setInterval 有一个有名函数 fn1，setInterval(fn1,500)与 setInterval(fn1(),500) 有什么区别?

第一个是重复执行每 500 毫秒执行一次，后面一个只执行一次。

posted @ 2022-04-29 23:17 RHCHIK 阅读(132) 评论(0) 编辑收藏举报

刷新页面返回顶部

百索园前端

懂一点代码的程序员