【Exam_02】

原創 Lovely Ruby 2020-06-15 08:40

文章目錄

1. 三目運算

var name = “abcd”;
console.log(“name is” + (name == “abcd”) ? “張三”:“李四”);
這段代碼的運行結果是多少？

主要考察優先級，三目運算會把前面所有的東西 "name is" + (name == "abcd") 解析成 判斷語句，

	var name = "abcd";
    console.log("name is" + (name == "abcd") ? "張三":"李四");
    
    //張三
    
    //錯因分析：我不知道前面的都要解析，所以我以爲name is 也要輸出，其實不是這樣的
    //三目運算符的優先級是最低的，慢慢體會
    //他會把前面所有的東西都當成條件

如果是這樣的話

	var name = "abcd";
    console.log("name is" + (name == "abcd" ? "張三":"李四"));
    
    //name is張三

2. 保留字

下列字符中那些是保留字？( )
A.abstract
B.goto
C.if
D.else
E.int

知識點：保留字(reserved word)，指在高級語言中已經定義過的字，使用者不能再將這些字作爲變量名或過程名使用。

答案：CD

3. This 指針

	//題目
	var obj = {
        a:function () {
            return function () {
                console.log(this)
            }
        }
    };
    var fn = obj.a();
    fn();
    obj.b = obj.a();
    obj.b();

	//答案
    //window
    //object
	
	//錯因分析：沒讀懂題考的是啥

答：fn()是 obj.a() 執行後的返回值，a執行之後返回的是如下

			function () {
                console.log(this)
            }

這個函數，我們知道，this 是誰最終調用，就指向誰，fn() 就相當於 window.fn();
它 obj.b 其實也是上面的函數，但是最終調用的是 obj，所以 this 會指向 obj

4. 數組判斷

	//題目
	var a = [1,2,3];
    var b = [1,2,3];
    var c = [1,2,4];
    console.log(a == b);
    console.log(a === b);
    console.log(a > c);
    console.log(a < c);
	
	//答案
    //false
    //false
    //false
    //true
	
	//錯因分析：不知道對象的判斷，比較的是地址

引用，複雜對象這類的，比較的是地址
你 var 了一個變量，那麼他的地址肯定不能一樣，雖然內容是一樣的。

如果是這樣，那就一樣了

	var a = [1,2,3];
    var b = a;
    console.log(a == b);
    console.log(a === b);
    
    //true
    //true

5. switch

6. 自加

var num = 1;
num++ + ++num;
console.log(num);

	//這個是原題
	var num = 1;
    num++ + ++num;
    console.log(num);
	
	//3
	
	//錯因分析：沒有錯，但是要注意！！

後來覺得需要更好的理解這道題

	var num = 1;
    var b = num++ + ++num + num;
    console.log(b);
    
    //7

首先，這個是 從左到右 算的（而我剛開始是以爲從右往左算的），相當於 b = 1 + 3 + 3
首先 num++ 是先賦值，在自增，所以是 1，num 的值現在是 2
然後 ++num 是先自增，在賦值，所以是 3，num 的值現在是 3
最後在加個 num，就是 1 + 3 + 3 = 7

7. 概念題

有關 Javascript 變量描述不正確的是（ AD ）
A. 在 Javascript 中必須爲變量設置具體的數據類型
B. 如果變量沒有被初始化，則是 undefined
C. Javascript 中提供的關鍵字 var，用於變量的聲明，所以使用變量前，儘量使用 var 進行聲明
D. 在 JS 中所有的變量和方法都會在預解析是獲得提升

錯因分析：D 沒有選出來，不知道 JavaScript 只有聲明的變量會提升，初始化的不會。

A選項，必須，說的過於絕對，數據類型不需要設置啊
D選項，所有 ，說的也過於絕對，JavaScript 只有聲明的變量會提升，初始化的不會。

//這個就不會變量提升，
var a = function(){}

8. 隱式轉換

var c = “10”,d = 5;
document.write(c - d);

	var c = "10",d = 5;
    document.write(c - d);
    
    //5
    //錯因分析：不知道 "10"會轉換成數字

如果是這樣的

	var c = "10",d = [5];
    document.write(c - d);

    //5

這樣

	var c = ["10"],d = [5];
    document.write(c - d);

    //5

這樣

	var c = "10",d = [5,6];
    document.write(c - d);

    //NaN

這樣

	var c = "sss",d = 1;
    document.write(c-d);
    document.write(typeof (c-d));

    //NaN
    //number

所以，單個的數組，也存在隱式轉換，而數組有兩個或兩個以上就不行了。

9. Bom 對象有那些？分別是什麼作用

錯因：這個題目我就沒答上來，不知道啥是 Bom

瀏覽器對象模型 (BOM)

Window 對象

  • 所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
  • 所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
  • 全局變量是 window 對象的屬性。
  • 全局函數是 window 對象的方法。

Window 子對象

Window的子對象主要有如下幾個：

  • JavaScript document 對象
  • JavaScript frames 對象
  • JavaScript history 對象：window.history 對象包含瀏覽器的歷史。
  • JavaScript location 對象
  • JavaScript navigator 對象：window.navigator 對象包含有關訪問者瀏覽器的信息。
  • JavaScript screen 對象

BOM整體對象圖如下
BOM整體對象圖

10. 你知道CSS的佈局方案麼？請介紹一下你知道的佈局方案

  • 雙飛翼佈局
  • 聖盃佈局
  • 彈性盒子
  • li都算個佈局（只是不說）
  • 浮動

11. 簡述一下雙飛翼佈局，並實現（代碼）

  • 簡述：三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固佈局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙飛翼</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            background-color: skyblue;
        }
        .text{
            float: left;
            margin: 0 300px 0 300px;
            height: 200px;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: #7aff9b;
            /*margin-left 一個負值，就會擠到上邊*/
            margin-left: -100%;

        }
        .right{
            width: 300px;
            height: 200px;
            background-color: rgba(0,0,0,.1);
            /*右邊的框，只需給他的margin-left一個負的寬度，就能擠上去*/
            margin-left: -300px;
            opacity: 0.6;
        }
        .col{
            float: left;
        }
    </style>
</head>
<body>
<div class="box col">
    <div class="text">
        main
    </div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</body>
</html>

12. 子元素如何在父元素中水平垂直居中（手寫代碼）

彈性盒子居中

<head>
    <meta charset="UTF-8">
    <title>彈性盒子居中</title>
    <style>
        .fa{
            width: 555px;
            height: 555px;
            border: 2px skyblue solid;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 2px skyblue solid;

        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

定位居中

<head>
    <meta charset="UTF-8">
    <title>定位居中</title>
    <style>
        .fa{
            height: 600px;
            width: 600px;
            border: 2px skyblue solid;
            position: relative;
        }
        .son{
            height: 50px;
            width: 50px;
            border: 2px skyblue solid;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

13. 請簡述一下閉包

函數內部的子函數才能讀取局部變量

function father() {
        var far1 = "我是father的變量";
        function son() {
            var son1 = "我是son子函數的局部變量";
            console.log(far1);
            //我是father的變量
        }
        son();
        console.log(son1);
        //Uncaught ReferenceError: son1 is not defined
    }
    father();

14. 如何創建一個對象？

	//1.構造函數
    function Person() {
        this.name = "Stephen Curry";
        this.habit = ["sing","jump","rap"];
    }
    var p1 = new Person();
    console.log(p1.name);
    //Stephen Curry

    console.log(p1.habit);
    //(3) ["sing", "jump", "rap"]

	//2.原型
	function Person() {
        
    }
    var p1 = new Person();
    Person.prototype.sing = ("青藏高原");
    console.log(p1.sing);

	//3.工廠模式
	function Person() {
        var obj = new Object();
        obj.name = "Stephen Curry";
        obj.habit = ["sing","jump","rap"];
        return obj;
    }
    var p = new Person();
    console.log(p.name);
    //Stephen Curry

    console.log(p.habit);
    //(3) ["sing", "jump", "rap"]

15. JS 中如何實現繼承

https://blog.csdn.net/u010263423/article/details/102683093

16. JS 的數據類型有那些？NULL 和 Undefined 有什麼區別？請列舉一些場景分別返回 Undefined 和 NULL

數據類型

  • number
  • string
  • boolean
  • null
  • object
  • undefined

Undefind

  • 只聲明不賦值

NULL

  • 使用 getAttribute()，獲取不到屬性的時候
	var div = document.querySelector("div");
    console.log(div.getAttribute(""));
  • 節點找不到
	var div = document.querySelector("div");
    console.log(div);

17. 用純 JS 實現，點擊一個列表時，輸出對應的索引（不能用 JQuery）

https://blog.csdn.net/u010263423/article/details/102740606

18. CSS 僞元素實現矩形按鈕右邊緣的中間有個往裏凹的小半圓

19. 實現一個算法在一個字符串當中（例如：“sasadsaadjl”），求出出現頻率最多的字符

	var str = "aasssddff";
    str = str.split('');
    var result = str.reduce(function (prev,next) {
        if(next in prev){
            prev[next]++
        }else{
            prev[next] = 1;
        }
        return prev;
    },{});
    console.log(result);

20. 設計一個算法原生實現 arr.sort 方法

https://blog.csdn.net/u010263423/article/details/102743047

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【Exam_03】

Lovely Ruby 2020-02-21 09:35:00

【Exam_03】

Lovely Ruby 2020-02-21 09:35:00