JS 면접 질문 (인터뷰를 위해 읽어야 함)

1.JavaScript의 typeof는 어떤 데이터 유형을 반환합니까?

  alert(typeof [1, 2]); //object 
    alert(typeof 'leipeng'); //string 
    var i = true;  
    alert(typeof i); //boolean 
    alert(typeof 1); //number 
    var a;  
    alert(typeof a); //undefined
    function a(){};
    alert(typeof a) //function

2. 3가지 유형의 강제 유형 변환과 2가지 유형의 암시적 유형 변환을 제공합니까?
Forcing(parseInt(),parseFloat(),Number())
Implicit( == ,!!)

3.split()과 Join()의 차이점
전자는 배열을 배열로 자르는 것이고, 후자는 배열을 문자열로 변환하는 것입니다

4. ) push() unshift () Shift()
Push() 삭제하려면 pop() 꼬리를 추가하세요.
Unshift() 삭제하려면 Shift() 머리에 머리를 추가하세요.

5. 이벤트 바인딩과 일반 이벤트의 차이점은 무엇인가요? 이벤트를 추가하는 일반적인 방법:

var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}

위 코드를 실행하면 2에만 경고가 발생합니다.

이벤트를 추가하는 이벤트 바인딩 방법:

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);

위 코드를 실행하면 먼저 경고 1이 발생한 다음 경고 2에 경고가 발생합니다.

일반적인 추가 방법 이벤트는 여러 이벤트 추가를 지원하지 않으며, 맨 아래의 이벤트가 위 이벤트를 재정의하며, 이벤트 바인딩(addEventListener)을 사용하여 여러 이벤트를 추가할 수 있습니다.
addEventListener는 하위 버전의 IE와 호환되지 않습니다.
일반 이벤트는 취소할 수 없습니다.
addEventListener는 이벤트 버블링 + 이벤트 캡처도 지원합니다.

6 IE와 DOM 이벤트 스트림의 차이점은
1입니다. 매개변수가 다릅니다
3.이벤트를 추가할지 말지
4.문제가 있는 부분

7.IE와 표준의 호환성 작성 방법은 무엇입니까

var ev = ev || window.event 
document.documentElement.clientWidth || document.body.clientWidth 
var target = ev.srcElement||ev.target

8.call과 Apply의 차이점

call 방법 :

구문: call(thisObj, Object1, Object2 ...)
정의: 현재 개체를 다른 개체로 대체하려면 개체의 메서드를 호출합니다.
설명:
call 메서드는 다른 개체 대신 메서드를 호출하는 데 사용할 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다.
thisObj 매개변수가 제공되지 않으면 전역 개체가 thisObj로 사용됩니다.

적용 방법:
구문: apply(thisObj, [argArray])
정의: 개체의 메서드를 적용하고 현재 개체를 다른 개체로 바꿉니다.
참고:
argArray가 유효한 배열이 아니거나 인수 개체가 아닌 경우 TypeError가 발생합니다.
argArray나 thisObj가 모두 제공되지 않으면 전역 개체가 thisObj로 사용되며 매개 변수를 전달할 수 없습니다.

9.b a

function A( age, name ){ 
this.age = age;
this.name = name;
A.prototype.show = function(){
alert('父级方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
B.prototype = new A();
var b = new A(14,'侠客行');
var a = new B(15,'狼侠','侠客');

10. 이벤트 버블링 및 기본 이벤트 방지 방법

canceBubble()只支持IE,return false,stopPropagation()

11. 특정 접점에 메소드 추가, 삭제, 교체 및 삽입

obj.appendChid() 
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

12. 로컬 개체, 내장 개체 및 호스트 개체

로컬 개체는 배열 obj regexp 등으로 새로 인스턴스화할 수 있습니다.

내장 개체는 gload Math 등으로 인스턴스화할 수 없습니다.
호스트는 문서, 창입니다. , 등 브라우저와 함께 제공되는

13.window.onload와 document Ready
window.onload의 차이점은 DOM 문서 트리가 로드되고 모든 파일이 로드된 후에 Document.ready 함수를 실행한다는 것입니다. jquery에는 $().ready(function)가 있습니다. dom 문서 트리가 로드된 후 함수를 실행합니다(여기서 문서 트리를 로드한다고 해서 모든 파일이 로드되었다는 의미는 아닙니다).
$(document).ready는 window.onload보다 먼저 실행됩니다. window.onload는 한 번만 나타날 수 있고, $(document).ready는 여러 번 나타날 수 있습니다

14. "=="와 "==="
전자는 유형을 자동으로 변환하지만 후자는 그렇지 않습니다.

15.javascript의 동일 출처 정책
스크립트는 동일한 소스에서 창과 문서의 속성만 읽을 수 있습니다. 여기서 동일한 소스는 호스트 이름, 협상 포트를 참조합니다. 숫자조합

16.자바스크립트는 어떤 언어이고 특징은 무엇인가요?
표준적인 답변은 없습니다.
javaScript는 기본적으로 유형을 지원하는 동적 유형, 약한 유형의 프로토타입 기반 언어입니다. 해당 인터프리터는 브라우저의 일부이며 클라이언트 측 스크립팅 언어에서 널리 사용되는 JavaScript 엔진이라고 하며 HTML 웹 페이지에 동적 기능을 추가하기 위해 처음으로 사용되었습니다. JavaScript는 ECMA 표준과 호환되므로 ECMAScript라고도 합니다.
기본 기능
1. 이는 해석된 스크립팅 언어입니다(코드는 미리 컴파일되지 않음).
2． 주로 HTML(Standard Universal Markup Language의 응용 프로그램) 페이지에 대화형 동작을 추가하는 데 사용됩니다.
3. HTML 페이지에 직접 삽입할 수 있지만 별도의 js 파일로 작성하면 구조와 동작을 쉽게 분리할 수 있습니다.
4． 대부분의 브라우저를 지원하는 크로스 플랫폼 기능으로 여러 플랫폼(예: Windows, Linux, Mac, Android, iOS 등)에서 실행할 수 있습니다.

17.JavaScript의 데이터 유형은 무엇인가요?
기본 데이터 유형: 문자열, 부울, 숫자, 정의되지 않음, Null
참조 데이터 유형: 객체(Array, Date, RegExp, Function)
그럼 변수가 배열 데이터 유형인지 어떻게 판단할 수 있을까요?
방법 1. Slice() 메서드와 같은 "배열 속성"이 있는지 확인합니다. 변수에 대한 슬라이스 방법을 정의할 수 있으므로 일부 IE 버전에서는 방법 2가 올바르지 않습니다. 방법 1과 2 모두 ECMA에 정의되어 있습니다. Script5.()의 호환성을 보장하는 가장 좋은 방법은 다음과 같습니다.

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

18. 알려진 ID를 가진 입력 입력 상자가 있는데 이 입력 상자의 입력 값을 가져오고 싶습니다. ? (타사 프레임워크를 사용하지 않음)

document.getElementById(“ID”).value

19.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

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

20.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”); 
dom.innerHTML = “xxxx”
dom.style.color = “#000”

21.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test 
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) 
那么问题来了，Javascript的事件流模型都有什么？ 
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播 
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的 
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

22.看下列代码输出为何？解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

23.看下列代码,输出什么？解释原因。
var a = null; 
alert(typeof a); //object 
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

24.看下列代码,输出什么？解释原因。

var undefined; 
undefined == null; // true 
1 == true;   // true 
2 == true;   // false 
0 == false;  // true 
0 == '';     // true 
NaN == NaN;  // false 
[] == false; // true 
[] == ![];   // true

undefined与null相等，但不恒等（===） 
一个是number一个是string时，会尝试将string转换为number 
尝试将boolean转换为number，0或1 
尝试将Object转换成number或string，取决于另外一个对比量的类型 
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。 
那么问题来了，看下面的代码，输出什么，foo的值为什么？ 
var foo = "11"+2-"1"; 
console.log(foo); 
console.log(typeof foo); 
执行完后foo的值为111，foo的类型为String。

25.看代码给答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案：2（考察引用数据类型细节）

26.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))

27.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

(考察基础API)
28.var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3] 
numberArray.reverse()
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})

29.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date(); 
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month // 获取日
var day = d.getDate();
day = day alert(year + '-' + month + '-' + day);

30.将字符串”

{$id} {$name} ”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案：" {$id} {$id}_{$name} ".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

31.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将, &, “进行转义

function escapeHtml(str) { 
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “<”;
                   case “>”:
                      return “>”;
                   case “&”:
                      return “&”;
                   case “\””:
                      return “"”;
      }
  });
}

32.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

33.看下列代码，将会输出什么?(变量声明提升)

var foo = 1; 
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2; 
  })()

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

34.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

function randomNub(aArray, len, min, max) {
  if (len >= (max - min)) {
  return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
  }
  if (aArray.length >= len) {
  aArray.sort(function(a, b) {
  return a - b
  });
  return aArray;
  }
  var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
  for (var j = 0; j < aArray.length; j++) {
  if (nowNub == aArray[j]) {
  randomNub(aArray, len, min, max);
  return;
  }
  }
  aArray.push(nowNub);
  randomNub(aArray, len, min, max);
  return aArray;
  }
  var arr=[];
  randomNub(arr,10,10,100);

35.把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

36.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性

37.有这样一个URL：，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案： 

function serilizeUrl(url) { 
var urlObject = {}; 
if (/\?/.test(url)) { 
var urlString = url.substring(url.indexOf("?") + 1); 
var urlArray = urlString.split("&"); 
for (var i = 0, len = urlArray.length; i < len; i++) { 
var urlItem = urlArray[i]; 
var item = urlItem.split("="); 
urlObject[item[0]] = item[1]; 
} 
return urlObject; 
} 
return null; }

38.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。 
邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

39.看下面代码，给出输出结果。

for(var i=1;i<=3;i++){ 
  setTimeout(function(){
      console.log(i);  
    },0); 
};

答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};

40.写一个function，清除字符串前后的空格。（兼容所有浏览器）
使用自带接口trim()，考虑兼容性： 

if (!String.prototype.trim) {
 String.prototype.trim = function() {
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 }
}
  // test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

위 내용은 JS 면접 질문 (인터뷰를 위해 읽어야 함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!