var str = “<div>这里是div<p>里面的段落</p></div>”;
<script type=”text/javascript”>
  var reg = /<\\/?\\w+\\/?>/gi;
  var str = “<div>这里是div<p>里面的段落</p></div>”;
  alert(str.replace(reg,”"));
</script>

2.完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

<body>
  <img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
  <br />
  <select id=”sel”>
    <option value=”img1“>城市生活</option>
    <option value=”img2“>都市早报</option>
    <option value=”img3“>青山绿水</option>
  </select>
</body>
<script>
  function showImg(oSel) 
    //在此处添加代码 
    var str = oSel.value;
    document.getElementById(“pic”).src = str + ”.jpg”;
  
</script>

3.列举浏览器对象模型BOM里常用对象，并列举window对象的常用方法

对象：window、document、location、screen、history、navigator
方法：alert()、confirm()、prompt()、open()、close()

4.列举文档对象模型DOM里document的常用的查找访问节点方法

Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素

5.希望获取到页面中所有的checkbox，应该怎么做

<script>
  var domList = document.getElementsByTagName(‘input’)
  var checkBoxList = [];
  var len = domList.length; //缓存到局部变量
  while (len--)  //使用while的效率会比for循环更高
    if (domList[len].type == ‘checkbox’) 
      checkBoxList.push(domList[len]);
    
  
</script>

6.简述创建函数的几种方式

<script>
  //第一种（函数声明）： 
  function sum1(num1, num2) 
    return num1 + num2;
  
  //第二种（函数表达式）：
  var sum2 = function (num1, num2) 
    return num1 + num2;
  
  //第三种（函数对象方式）：
  var sum3 = new Function("num1", "num2", "return num1+num2");
</script>

7.Javascript如何实现继承？

（1）构造继承法；
（2）原型继承法；
（3）实例继承法。

8.Javascript创建对象的几种方式

<script>
  //1.使用json创建对象
  var obj = ;
  obj.name = '张三';
  obj.action = function () 
    alert('吃饭');
  ;

  //2.使用Object创建对象
  var obj = new Object();
  obj.name = '张三';
  obj.action = function () 
    alert('吃饭');
  ;

  //3.通过函数创建对象。
  //(1)使用this关键字
  var obj = function () 
    this.name = '张三';
    this.age = 19;
    this.action = function () 
      alert('吃饭');
    ;
  
  //(2)使用prototype关键字
  function obj() 
  obj.prototype.name = '张三';
  obj.prototype.action = function () 
    alert('吃饭');
  ;

  //4.通过Window创建对象
  window.name = '张三';
  window.age = 19;
  window.action = function () 
    alert('吃饭');
  ;

  //5.使用内置对象创建对象
  var str = new String("实例初始化String");
  var str1 = "直接赋值的String";
  var func = new Function("x", "alert(x)"); //示例初始化func
  var obj = new Object(); //示例初始化一个Object
</script>

9.iframe的优缺点

优点：
（1）解决加载缓慢的第三方内容如图标和广告等的加载问题；
（2）Security sandbox；
（3）并行加载脚本。

缺点：
（1）iframe会阻塞主页面的Onload事件；
（2）即时内容为空，加载也需要时间；
（3）没有语意。

10.请你谈谈Cookie的弊端

（1）Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

（2）安全性问题。如果cookie被人拦截了，拦截者就可以取得所有的session信息，即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

（3）有些状态不可能保存在客户端。例如为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

11.js延迟加载的方式有哪些？

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

12.documen.write和 innerHTML 的区别是什么？

document.write 只能重绘整个页面；

innerHTML 可以重绘页面的一部分。

13.哪些操作会造成内存泄漏？

内存泄漏指任何对象在不再拥有或需要它之后仍然存在。

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

14.判断一个字符串中出现次数最多的字符并统计这个次数

<script>
  var str = 'asdfssaaasasasasaa';
  var json = ;
  for (var i = 0; i < str.length; i++) 
    if (!json[str.charAt(i)]) 
      json[str.charAt(i)] = 1;
     else 
      json[str.charAt(i)]++;
    
  ;
  var iMax = 0;
  var iIndex = '';
  for (var i in json) 
    if (json[i] > iMax) 
      iMax = json[i];
      iIndex = i;
    
  
  alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

15.事件委托是什么？

让利用事件冒泡的原理，让自己的所触发的事件的父元素代替执行。

16.闭包是什么，有什么特性，对页面有什么影响？

闭包就是能够读取其他函数内部变量的函数，在本质上闭包就是将函数内部和函数外部连接起来的一座桥梁。

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

jsonp就是动态创建script标签，回调函数；
Ajax是页面无刷新请求数据操作。

18.javascript的本地对象，内置对象和宿主对象各有什么？

本地对象：array、obj、regexp等可以new实例化的；
内置对象：gload、Math等不可以实例化的；
宿主对象：浏览器自带的document、window等。

19.将数字12345678转化成RMB形式：12,345,678

<script>
  //思路：先将数字转为字符， str= str + '' ;
  //利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
  function re(str) 
    str += '';
    return str.split("").reverse().join("");
  
  function toRMB(num) 
    var tmp = '';
    for (var i = 1; i <= re(num).length; i++) 
      tmp += re(num)[i - 1];
      if (i % 3 == 0 && i != re(num).length) 
        tmp += ',';
      
    
    return re(tmp);
  
</script>

20.生成5个不同的随机数

<script>
  //思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
  var num1 = [];
  for (var i = 0; i < 5; i++) 
    num1[i] = Math.floor(Math.random() * 10) + 1; //范围是 [1, 10]
    for (var j = 0; j < i; j++) 
      if (num1[i] == num1[j]) 
        i--;
        //重新覆盖第i（ 重复） 个值， 可以将其删除或是重新的生成这个i值就会替换掉这个重复的值
      
    
  
</script>

21.去掉数组中重复的数字

<script>
  //思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中
  Array.prototype.unique = function () 
    var len = this.length,
      newArr = [],
      flag = 1;
    for (var i = 0; i < len; i++, flag = 1) 
      for (var j = 0; j < i; j++) 
        if (this[i] == this[j]) 
          flag = 0; //找到相同的数字后，不执行添加数据
        
      
      //For 循环会遍历完所有的条件值才会跳出for循环， 除非有一个跳出循环的语句才会提前终止循环
      flag ? newArr.push(this[i]) : '';
    
    return newArr;
  
</script>

22.javascript中的垃圾回收机制是指？

        在Javascript中，如果一个对象不再被引用，那么这个对象就会被回收。

        如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

        函数a被b引用，b又被a外的c引用，这样函数a执行后就不会被回收。

23.解释以下代码

<script>
  function f1() 
    var tmp = 1;
    this.x = 3;
    console.log(tmp); //代码A
    console.log(this.x); //代码B
  
  var obj = new f1(); //代码1
  console.log(obj.x) //代码2
  console.log(f1()); //代码3
</script>
这道题让我重新认识了对象和函数，首先代码1实例化了f1这个类，相当于执行了f1函数；所以这个时候 A 会输出1，而代码B这个时候的this代表的是实例化的当前对象obj，B输出3；代码2毋庸置疑会输出3；而代码3这里将不再是一个类，只是一个函数，所以A输出1，代码B的this代表的其实就是window对象，那么this.x 就是一个全局变量，相当于在外部的一个全局变量，所以B输出3。最后代由于f1没有返回值所以将会返回underfined。

答案：1， 3， 3， 1， 3， underfined 。

24.以下代码输出结果为

var o1 = new Object();
var o2 = o1;
o2.name = "CSSer";
console.log(o1.name);
js中有两种数据类型，分别是基本数据类型和引用数据类型（object Array）；对于保存基本类型值的变量变量是按值访问的，因为实际操作的是变量实际保存的值；对于保存引用类型值的变量，变量是按引用访问的，我们操作的是变量值所引用（指向）的对象。

答案：CSSer;

25.JS的继承性

<script>
  window.color = 'red';
  var o = 
    color: 'blue'
  ;

  function sayColor() 
    alert(this.color);
  
  sayColor(); //red
  sayColor.call(this); //red，this指向window对象
  sayColor.call(window); //red
  sayColor.call(o); //blue
</script>

26.加减运算

alert('5'+3);    //53 string
alert('5'+'3');  //53 string
alert('5'-3);    //2 number
alert('5'-'3');  //2 number

27.什么是同源策略？

同协议、端口和域名的安全策略，由王景公司提出来的安全协议。

28.声明对象，添加属性，输出属性

<script>
  var obj = 
    name: 'leipeng',
    showName: function () 
      alert(this.name);
    
  
  obj.showName();
</script>

29.匹配输入的字符：第一个必须是字母或下划线开头，长度5-20

<script>
  var reg = /^[a-zA-Z_][a-zA-Z0-9_]5,20/,
    name1 = 'leipeng',
    name2 = '0leipeng',
    name3 = '你好leipeng',
    name4 = 'hi';
  alert(reg.test(name1)); //true
  alert(reg.test(name2)); //false
  alert(reg.test(name3)); //false
  alert(reg.test(name4)); //false
</script>

30.如何在HTML中添加事件，几种方法？

（1）标签之中直接添加，οnclick="fun()";

（2）JS添加，obj.onclick = method;

（3）现代事件

IE： obj.attachEvent('onclick', method)；
FF: obj.addEventListener('click', method, false);

31.BOM对象有哪些，列举window对象

（1）window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
（2）document对象，文档对象；
（3）location对象，浏览器当前URL信息；
（4）navigator对象，浏览器本身信息；
（5）screen对象，客户端屏幕信息；
（6）history对象，浏览器访问历史信息；

32.bind(), live(), delegate()的区别

bind：绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

live：将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。

delegate：方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上。

33.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以像对真正数组遍历一样来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName、document.childNodes之类的，它们都返回NodeList对象且都属于伪数组。

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

34.如何优化自己的代码？

（1）代码重用；

（2）避免全局变量（命名空间，封闭空间，模块化mvc..）；

（3）拆分函数避免函数过于臃肿；

（4）注释。

35.怎样实现两栏等高？

<div id="container" style="display: table;width: 100%;">
    <div id="left" style="background-color: red;display: table-cell;">
      内容<br />
      内容<br />
      内容<br />
      内容<br />
      内容<br />
      内容<br />
    </div>
    <div style="display:table-cell;"></div>
    <div id="right" style="background-color: blue;display: table-cell">
      内容
    </div>
  </div>

36.简述readyonly与disabled的区别

        ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容；但是二者还是有着一些区别的：

        Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。

        在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

37.尽可能详尽的解释ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

38.为什么扩展javascript内置对象不是好的做法？

因为并不知道哪一天浏览器或javascript本身就会实现这个方法，而且和你扩展的实现很可能有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年，而浏览器的实现则会导致所有使用扩展原型的代码都崩溃。

39.浏览器标准模式和怪异模式之间的区别是什么？

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

40.下列关于IE的window对象表述正确的有

A. window.opener属性本身就是指向window对象 √
B. window.reload()方法可以用来刷新当前页面应该是location.reload或者window.location.reload
C. window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面 √
D. 定义了全局变量g；可以用window.g的方式来存取该变量 √

以上是关于前端领域高频笔试面试—— JavaScript相关的主要内容，如果未能解决你的问题，请参考以下文章

前端领域高频笔试面试—— Vue相关

javaScript面试题2023前端最新版javaScript模块，高频24问

2021年中级前端笔试面试题总结（含答案解析）

Python八股文系列：100个Python的面试/笔试高频考点

前端面试&笔试爬坑算法 Algorithm

前端CSS面试题2023前端最新版css模块，高频15问