JS面试题-01

JS习题整理

1.输出结果

  var A = {
            n: 4399
        };
        var B = function () {
            this.n = 9999
        };
        var C = function () {
            var n = 8888;
        };
        B.prototype = A;
        C.prototype = A;
        var b = new B();
        var c = new C();
        A.n++;
        console.log(b.n);
        console.log(c.n); 
原型链的继承问题，B、C都继承了A中的属性，找B的n属性时，
    this指向对象， c中 只是定义了一个局部变量 和C没有绑定，没有任何关系（执行思路： 先去找自己的对象有没有属性 如果有则）
  console.log(b.n);  在查找 b.n 是首先查找 b 对象自身有没有 n 属性，如果没有会去原型（prototype）上查找  当执行 var b = new B() 时，函数内部 this.n=9999(此时this指向b) 返回b对象，b对象有自身的n属性，所以返回 9999    
console.log(c.n); 同理 当执行 var c = new C() 时，c对象没有自身的n属性，向上查找，找到原型      （prototype）上的 n 属性，因为 A.n++(此时对象A中的n为4400)，所以返回4400

2.input节点获取

<form class="file" name="upload">
<input id="file" name="file" class="file"/>
</form

正确方法  document.getElementById("file")[1];

3. alert(undefined==null)的输出结果是 true

4. 下列不属于javascript内置对象的是 Window

5. Math  Date  RegExp  Window   Error
   
   Js中的内置对象都有：  Arguments Array Boolean Date Error function Math Number Object ReExp String
   
   

   6.下面哪些代码执行后i的值为10

let i =1 + {
valueOf() { return 9; }
};

{ valueOf() { return 9; } } 是一个匿名对象，该对象有一个名为valueOf的方法，对象与数字相加时，对象调用自身的valueOf方法转换为数字，故输出 i == 1 + 9 == 10;
 let i = 5;

        function a(i) {
            i *= 2;
        }
        a(i); //i=5;
       i是形参，，属于局部变量，不影响全局变量i的值
        
   let i = 0;
new Array(10).forEach(() => {
i++;
});     
orEach方法按升序为数组中含有效值的每一项执行一次 callback函数，那些未初始化的项将被跳过。new Array(10)创建的数组默认值都是undefined，所以回调函数都会被跳过。

7.当用户打开一个网页时，想一直停留在当前打开的页面，禁止页面前进和后退，以下正确的是

window.history.forward(1);  window.history.forward(-1);

8. Math.round(-2019.5)等于多少( ) -2019 如果是2019.51 则 答案为-2020

9.以下哪些方法会返回一个数组？ 1 、2

1.Object.keys() 
方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
参数：Object.keys(obj) 要返回其枚举自身属性的对象。
返回值：一个表示给定对象的所有可枚举属性的字符串数组。
2.String.prototype.split()  
split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置 返回源字符串以分隔符出现位置分隔而成的一个 Array 
3.Array.prototype.join()
将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串
4.Promise.all()  
Promise.all(iterable);iterable一个可迭代对象，如 Array 或 String。
Promise.all(iterable) 方法返回一个 Promise 实例，
返回值：promise对象

10.对于代码 var a = 10.42; 取出 a 的整数部分

parseInt(a); 转换为整数      Math.floor(a);向下取整，   Math.ceil(x) 向上取整
 Math.round(x) 四舍五入  Math.random(x) 返回0~1 之间随机数， 包含0和不包含1
 例如a=10.51时，如果使用Math.round(a)==11   10.5时，则为10

11.用户在登陆某个账号时，通常是将账号名和密码分别输入到对应的文本框中，现要将账号名和密码连接起来作为用户的唯一标识符 userName.concat(pwd);

append()在被选元素的结尾（仍然在内部）插入指定内容

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容

pop() 方法用于删除并返回数组的最后一个元素。

12.下面哪些方式在同一个窗口下能够检测一个js对象是数组类型？

Array.isArray() 
instanceof 运算符返回一个布尔值，表示对象是否为某个构造函数的实例
let arr=[1,2,3];
arr instanceof Array; //true 可以检测对象是数组类型
typeof可以判断的类型有number、string、boolean、symbol、undefined、function；   object、array、null 的变量都返回 object
Object.prototype.toString.call([1,2,3])  //返回结果则为 [Object Array] 

13.angularjs1中control间通信最好使用什么方式 ------广播

14.var foo = "10" + 3 - "1"; console.log(foo);

​ // 因为前面有字符串，字符串+Number,数字将转换为字符串， ，而 -字符串则转换为Number ，10+(3-1)=12

15.JS中function能够访问他们的 参数、 局部变量或函数、全局变量、外部函数、的变量或函数

16.下面有关JavaScript中 call和apply的描述，错误的是

call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是 （X）

apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

target属性：

_blank 在新窗口打开网页   _self  在当前窗口打开网页   _top 在当前窗口打开网页，并且替换当前窗口的整个网页  _parent在父窗口中打开网页

css 属性overflow属性定义溢出元素

参数为scroll时，必会出现滚动条
参数为auto时候，子元素内容大于父元素时出现滚动条
参数为visible时，溢出的内容出现在父元素之外
参数为hidden时，溢出隐藏

border:0 和 border:none区别

border：0 只是像素为0在页面看不见，但浏览器对border-width/border-color进行了渲染，已经占内存值了，
border：none   相当于没有，浏览器解析的时候就不会作出渲染动作，不会消耗内存值
兼容性差异
 对于IE6、IE7与标签button、input而言，会出现此情况。
 如何让border：none实现全兼容，只需要在哦同一个选择符上添加背景属性即可。

下列函数那些是JavaScript的全局函数？

encodeURI  parseFloat  setTImeout eval   只有setTImeout不是全局函数
记忆： 6编码+2数据处理+4数字相关+1特殊编码相关
escape()、unescape()、encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponet()
2数据 Number()、String()
数字相关 isFinite()、isNAN()、parseFloat()、parseInt()
特殊相关： eval()

该函数返回结果

  console.log('one');
        setTimeout(function () {
            console.log('two');
        }, 0);
        console.log('three');//one three two
回调，被回调的函数会被放在event loop里，等待线程里的任务执行完之后才执行event loop里的代码，因此，
先执行线程里的，再执行event loop里的setTimeout函数

以下代码执行后的值为

 var result = "75team2017".match(/\d+\w*/g);
 console.log(result);
 //返回结果 ["75team2017"] 
 ["75team2017"]
 
 \d  匹配一个数字，等价于[0-9]
 \w  匹配字母、数字或者下划线，等价于[A-Za-z0-9_]
 +  匹配前面的一个表达式一次或者多次，
 *  匹配前一个表达式0次或者多次
 /g 全局匹配  
 &quot 形式为引号，表达含义 转义字符
 &&左为真返回右边，|| 左为假返回右边

下面关于promise的all方法说法错误的是

触发then时可以只带上iterable参数中的部分值，也可以带所有值。(X)
iterable是一个全部为promise对象的数组，只要数组中有一个promise实例被reject，那么最终的promise触发catch，只有数组中全部promise实例都resolve才会触发then，并且要带上iterable中全部promise，其中promise实例将会被结果代替

this对象理解

this总是指向函数的间接调用者（而非间接调用者）
在不手动改变this指向的前提下，this总是指向函数的直接调用对象
IE中attachEvent中的this总是指向全局对象window

js原型遵循5个规则： 1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null”以外）； 2、所有的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象； 3、所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通对象； 4、所有的引用类型（数组、对象、函数），proto__属性值指向（完全相等）它的构造函数的“prototype”属性值； 5、当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去__proto（即它的构造函数的prototype中）寻找。

每个对象都具有一个名为__proto__的属性
每个对象都具有一个名为prototype的方法 (x)
每个对象的__proto__属性指向自身构造函数的prototype
对象不具有prototype属性，只有函数才有prototype属性

JS中实现继承的6种方式

 原型链继承、借用构造函数继承、组合继承、原型链继承、寄生式继承、寄生组合式继承

a(10)执行结果

 function a(a) {
            a ^= (1 << 4) - 1;
            return a;
        }
// 1<<4 左移相当于1*2……4=16 
//a^16-1=15   a=a^15=10^15
//^ 异或运算
10的二进制00001010
15的二进制00001111  
===========>00000101  转换为10进制：  5  所以结果为5

指令种哪种作用域可以继承父scope 答案：scope: true

scope: true 和transclude:true会创建新的子作用域，并且进行原型继承
scope:{....}会创建新的独立作用域，不会进行原型继承
默认情况下创建directive使用了scope：false，不会创建子作用域

获取ID为a的DOM元素

document.getElementById('a');      document.querySelector('#a')

//------------------------------------------------------------------------------

使用浏览器访问五http://baidu.com/时，浏览器端会发生什么过程？

浏览器端构建HTTP请求，并发送->服务器端接收到HTTP请求，并进行解析->服务器端发送HTTP响应->浏览器接收到响应，并进行页面渲染
构建HTTP请求， 渲染页面

关于HTTP/2的描述

解决浏览器线头阻塞的问题、使用了头部压缩、使用了二进制分帧封装HTTP消息
HTTP/0.9 功能捡漏，只支持GET方法 只能发送HTML格式字符串
HTTP/1.0 支持多种数据格式，增加了POST、HEAD等方法，增加了头信息、每次只能发送一个请求(无持久连接)
HTTP/1.1 默认持久连接、请求管道化、增加缓存处理、增加了Host字段、支持断点传输分块传输等
HTTP/2.0 二进制分帧、多路复用、头部压缩、服务器推送

服务端渲染和客户端渲染正确的是

服务端渲染对SEO更加友好，而且首屏渲染通常更快一些
SPA是客户端渲染的

客户端渲染： 浏览器中输入Vue组件、进行生成DOM和操作DOM
服务器渲染: 将组件渲染位服务器端的HTML字符串,将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序
服务器端渲染优点：
更好的SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的JS都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速的看到完整的渲染页面
缺点：
开发条件所限，浏览器特定的代码，只能在某些生命周期子函数中使用，
设计构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序SPA不同，服务器渲染应用程序，需要处于Node.js server运行环境，
更多的服务器端负载。在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件的server更加大量占用cpu资源，因此如果在高流量环境下使用，请准备相应的服务器负载，并明智地采用缓存策略。

有效防止XSS的手段

过滤用户请求中的非法字符、对请求中的特殊字符进行转译、配置CSP(Content Security  Policy)

排序算法中，时间复杂度不超过nlogn

堆排序、归并排序、   （快速排序、冒泡排序）不符合

transform正确的是

只对受控于盒模型的元素生效、可以通过matrix函数整合多种变形效果、transform变形的几点可以通过transform-origin设置，变形的默认系中心点

webpack

webpack是一个模块打包工具、webpack可以实现热更新，开发更加高效 、小项目用webpack，大的项目用脚手架，vue-cli，create-react-app

那些方法会中断js执行

alert、sync ajax请求

ES6规范中，基本数据类型

基本数据类型： Number、String、Null、Undefined、Boolean、Symbol
引用数据类型： Object、Function、Array

下列哪些协议是应用层协议

HTTP、SSH、FTP   

进程

进程有独立的地址空间、进程间可以通过网络通信、进程是系统进行资源分配和调度的基本单位
内存可以在不同进程间共享

关于TCP与UDP的描述

HTTP是基于TCP，  但是 HTTP3 基于UDP
TCP提供可靠度的字节流服务，，使用UDP传输数据，源端和终端不建立连接

浏览器缓存

浏览器会先在浏览器缓存中查询是否有要请求的文件满足需求，再决定是否发送请求
缓存位置： service Worker.Memory Cache.Disk Cache.Push Cache ，浏览器请求会按该优先级顺序，进行查找缓存，都没有命中时，才回去请求网络

可以解决跨域问题的是

 CORS、代理、JSONP 

排序算法中不稳定的有

快速排序、选择排序、
数据结构中 排序算法，稳定排序算法： 冒泡、插入、计数、合并、基数、桶排序、鸡尾酒排序
不稳定排序： 选择排序、希尔排序、组合排序、堆排序、平滑排序、快速排序

关于GBK和UTF-8

UTF-8 中文3个字节，英文1个字节 UTF8编码占2个字节

JS模块化规范

AMD、CMD、CommonJs、UMD、ES6

CSS中触发GPU硬件加速的

transform、 opacity、filter、will-change

可逆的算法

即能够加密用解密的 RSA/DES/3DES/AES/SM4  BASE64

哪种语法会创建宏任务

setTimeout

  var fizzBuzz = function (n) {
            var arr = [];
            for (var i = 1; i <= n; i++) {
                if ((i % 3) == 0 && (i % 5) == 0) {
                    arr.push('FizzBuzz');
                } else if ((i % 3) == 0) {
                    arr.push('Fizz');
                } else if ((i % 5) == 0) {
                    arr.push('Buzz');
                } else {
                    arr.push(i.toString())
                }
            }
            return arr
        };

        console.log(fizzBuzz(15));