1. 程式人生 > >前端面試題(三)

前端面試題(三)

temp fin selector 地址 指定 code 報錯 排序 pre

  • js的基本數據類型

 Undefined、Null、Boolean、Number、String
ECMAScript6 新增:Symbol(創建後獨一無二且不可變的數據類型 )
  • call和apply的區別

var obj1 = {
  say:function(){
    console.log("say");
  }
}
var obj2 = {
  eat:function(name, age){
    console.log(this);
    console.log(name, age);
  }
}
//obj1.say();
//obj2.eat(); //obj2.eat.call(obj1);//為了讓obj1執行eat方法,this的指向改變了 obj2.eat.call(obj1, "zh", 17);
obj2.eat.apply(obj1,["wang", 21]);
區別:call第二個參數開始接受一個參數列表
   apply第二個參數開始接受一個參數數組
  • JavaScript如何實現繼承?

原型鏈繼承、借用構造函數繼承、原型+構造函數組合繼承、寄生式繼承

//原型鏈繼承
//構造方法繼承
function Animal(){
  this.age = 20;
}
function
Cat(){ this.name = "jj"; Animal.call(this);//這一步讓Cat的對象借用了Animal對象的構造方法 } //Cat.prototype = new Animal();//這一步讓Cat的對象擁有Animal對象的屬性、方法 var cat = new Cat(); //console.log(cat.name); console.log(cat.age);
  • JavaScript創建對象的幾種方式?

1、對象字面量、object構造函數
2、構造函數
3、純構造函數
4、空構造函數+原型
5、混合構造函數+原型
6、動態原型 7、寄生構造函數 8、Object.create() -- ES5
//對象字面量
var obj = {};
obj.gender = "girl";
console.log(obj.gender);
console.log(obj["gender"]);//獲取到obj的gender屬性

//構造函數
var obj2 = new Object();//利用Object構造函數進行創建對象

//動態原型

  • JavaScript閉包
閉包:內層作用域可以訪問外層作用域的變量
function doSth(){
    var len = 10;
    function step(){ //step函數為閉包函數
        console.log(len); //利用JavaScript的變量搜索機制,打印10;
     }  
}
閉包的意義:
1、讓step這個函數只能在doSth裏被調用,而且有封裝了細節,如果把step放在全局作用域中,會汙染全局作用域,並且占用了內存。
2、用來實現模塊化

var common = (function(){
var name = "通用模塊";
function initPage(){
console.log(name)
}
return{
initPage
}
})();
common.initPage();

3、例如一個頁面有多個li標簽,實現點擊某一個彈出它是第幾個
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>


var lis = document.querySelectorAll("li");//ES5支持的一個類似jQuery的復雜選擇器的來選取DOM元素

for (var i = 0;i < lis.length;i++ ){
  var li = lis[i];
  //li.onclick=function(){
    //alert(i);//在觸發這個函數時,i已經等於5了
    
  //}
  li.onclick = (function(index){
  //利用閉包函數實現了點擊某個li標簽的時候彈出他的真實索引
    return function(){
      alert(index);
    }
  })(i)
}
  • JavaScript的作用域

var num1 = 55;
var num2 = 66;

function f1(num, num1){//相當於在函數中先聲明num,num1
  //var num = 55;
  //var num1 = 66;
  num = 100;
  num1 = 100;
  num2 = 100; //函數中沒有聲明num2,num2會訪問函數外中的num2變量,此時num2的全局變量已經被改變為100
  console.log(num); //100
  console.log(num1); //100
  console.log(num2); //100
}
f1(num1,num2);//相當於把55和66傳到f1函數當中
console.log(num1); //55
console.log(num2); //100
console.log(num); //報錯
  • JavaScript值類型和引用類型的傳遞
function Person(name, age, salary){//構造函數首字母大寫
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person){
  //var person = p1;
  person.name = "lee";
  //person指向新的地址,但name值已經打印
  person = new Person(‘wang‘, 12, 10000);
}
var p1 = new Person(‘jia‘, 88, 90000);
console.log(p1.name);//jia
f1(p1);
console.log(p1.name);//lee
console.log(p1.age);//88
  • 封裝一個函數,將字符串轉化成駝峰表示法,如get-element-by-id 轉化為 getElementById

原始方法:

var foo = "get-element-by-id";
var arr = foo.split("-");
//獲取每個元素的第一個字符,並轉換為大寫
console.log(arr[1].charAt(0).toUpperCase() + arr[1].substr(1, arr[1].length-1));
//charAt() 方法可返回指定位置的字符。
//substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。
for (var i = 1;i <arr.length;i++) {
  arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[1].length-1)
}
console.log(arr.join(""));
封裝之後:
function toStr(foo){
    var arr = foo.split("-");
    for (var i = 1;i <arr.length;i++) {
          arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[1].length-1)
    }
    return arr.join("");
}
console.log(toStr("get-element-by-id"));
  • JavaScript冒泡排序

var arr = [5,4,8,2,1]
//輪數
for (var i = 0; i < arr.length;i++){
  //次數
  for(var j = 0;j < arr.length-1-i;j++){
    //前一個數和後一個數比較
    if(arr[j]>arr[j+1]){
      var temp = arr[j];
      arr[j] = arr[j+1];
      arr[j+1] = temp;
    }
  }
}
console.log(arr);

前端面試題(三)