js程序設計考試題及答案,js代碼題

本文目錄一覽：

• 1、js基礎面試題1-10道
• 2、JavaScript的兩道編程題有大佬會嗎？感激不盡！
• 3、js做一些編程題。

js基礎面試題1-10道

1.document load 和 document ready 的區別

參考答案：文檔解析過程中，ready在加載圖片等外部資源前觸發，load在之後觸發。如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的，但是頁面中有文件就不一樣了，所以還是推薦大家在工作中用ready

解析：

DOM文檔解析：

頁面加載完成有兩種事件

1.load是當頁面所有資源全部加載完成後（包括DOM文檔樹，css文件，js文件，圖片資源等），執行一個函數

缺點：如果圖片資源較多，加載時間較長，onload後等待執行的函數需要等待較長時間，所以一些效果可能受到影響

代碼形式：

2.$(document).ready()是當DOM文檔樹加載完成後執行一個函數 （不包含圖片，css等）所以會比load較快執行

在原生的jS中不包括ready()這個方法，Jquery才有，jquery中有 $().ready(function)。

代碼形式為：

參與互動

2.JavaScript 中如何檢測一個變量是一個 String 類型？

參考答案：三種方法（typeof、constructor、Object.prototype.toString.call()）

解析：

參與互動

3.請用 js 去除字符串空格？

參考答案：replace 正則匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法

解析：

方法一：replace 正則匹配方法

去除字符串內所有的空格：str = str.replace(/s*/g, “”);

去除字符串內兩頭的空格：str = str.replace(/^s*|s*$/g, “”);

去除字符串內左側的空格：str = str.replace(/^s*/, “”);

去除字符串內右側的空格：str = str.replace(/(s*$)/g, “”);

示例：

方法二：str.trim()方法

trim()方法是用來刪除字符串兩端的空白字符並返回，trim 方法並不影響原來的字符串本身，它返回的是一個新的字符串。

缺陷：只能去除字符串兩端的空格，不能去除中間的空格

示例：

方法三：JQ 方法：$.trim(str)方法

$.trim() 函數用於去除字符串兩端的空白字符。

注意：$.trim()函數會移除字符串開始和末尾處的所有換行符，空格(包括連續的空格)和製表符。如果這些空白字符在字符串中間時，它們將被保留，不會被移除。

示例：

參與互動

4.js 是一門怎樣的語言，它有什麼特點

參考答案：

1.腳本語言。JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯後執行, 而 JavaScript 是在程序的運行過程中逐行進行解釋。

2.基於對象。JavaScript 是一種基於對象的腳本語言, 它不僅可以創建對象, 也能使用現有的對象。

3.簡單。JavaScript 語言中採用的是弱類型的變量類型, 對使用的數據類型未做出嚴格的要求, 是基於 Java 基本語句和控制的腳本語言, 其設計簡單緊湊。

4.動態性。JavaScript 是一種採用事件驅動的腳本語言, 它不需要經過 Web 服務器就可以對用戶的輸入做出響應。

5.跨平台性。JavaScript 腳本語言不依賴於操作系統, 僅需要瀏覽器的支持。

參與互動

5.== 和 === 的不同

參考答案： == 是抽象相等運算符，而 === 是嚴格相等運算符。 == 運算符是在進行必要的類型轉換後，再比較。 === 運算符不會進行類型轉換，所以如果兩個值不是相同的類型，會直接返回 false 。使用 == 時，可能發生一些特別的事情，例如：

如果你對 == 和 === 的概念不是特別了解，建議大多數情況下使用 ===

參與互動

6.怎樣添加、移除、移動、複製、創建和查找節點？

參考答案：

1）創建新節點

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

3）查找

參與互動

7.事件委託是什麼

參考答案：利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

解析：

1、那什麼樣的事件可以用事件委託，什麼樣的事件不可以用呢？

2、為什麼要用事件委託

3、事件冒泡與事件委託的對比

4、事件委託怎麼取索引？

拓展：

參考

參與互動

8.require 與 import 的區別

參考答案：兩者的加載方式不同、規範不同

第一、兩者的加載方式不同，require 是在運行時加載，而 import 是在編譯時加載

require(‘./a’)(); // a 模塊是一個函數，立即執行 a 模塊函數

var data = require(‘./a’).data; // a 模塊導出的是一個對象

var a = require(‘./a’)[0]; // a 模塊導出的是一個數組 ====== 哪都行

import $ from ‘jquery’;

import * as _ from ‘_’;

import {a, b, c} from ‘./a’;

import {default as alias, a as a_a, b, c} from ‘./a’; ======用在開頭

第二、規範不同，require 是 CommonJS/AMD 規範，import 是 ESMAScript6+規範

第三、require 特點：社區方案，提供了服務器/瀏覽器的模塊加載方案。非語言層面的標準。只能在運行時確定模塊的依賴關係及輸入/輸出的變量，無法進行靜態優化。

import 特點：語言規格層面支持模塊功能。支持編譯時靜態分析，便於 JS 引入宏和類型檢驗。動態綁定。

參與互動

9.javascript 對象的幾種創建方式

參考答案：

第一種：Object 構造函數創建

這行代碼創建了 Object 引用類型的一個新實例，然後把實例保存在變量 Person 中。

第二種：使用對象字面量表示法

對象字面量是對象定義的一種簡寫形式，目的在於簡化創建包含大量屬性的對象的過程。也就是說，第一種和第二種方式創建對象的方法其實都是一樣的，只是寫法上的區別不同

在介紹第三種的創建方法之前，我們應該要明白為什麼還要用別的方法來創建對象，也就是第一種，第二種方法的缺點所在：它們都是用了同一個接口創建很多對象，會產生大量的重複代碼，就是如果你有 100 個對象，那你要輸入 100 次很多相同的代碼。那我們有什麼方法來避免過多的重複代碼呢，就是把創建對象的過程封裝在函數體內，通過函數的調用直接生成對象。

第三種：使用工廠模式創建對象

在使用工廠模式創建對象的時候，我們都可以注意到，在 createPerson 函數中，返回的是一個對象。那麼我們就無法判斷返回的對象究竟是一個什麼樣的類型。於是就出現了第四種創建對象的模式。

第四種: 使用構造函數創建對象

對比工廠模式，我們可以發現以下區別：

1.沒有顯示地創建對象

2.直接將屬性和方法賦給了 this 對象

3.沒有 return 語句

4.終於可以識別的對象的類型。對於檢測對象類型，我們應該使用 instanceof 操作符，我們來進行自主檢測：

同時我們也應該明白，按照慣例，構造函數始終要應該以一個大寫字母開頭，而非構造函數則應該以一個小寫字母開頭。

那麼構造函數確實挺好用的，但是它也有它的缺點：

就是每個方法都要在每個實例上重新創建一遍，方法指的就是我們在對象裡面定義的函數。如果方法的數量很多，就會佔用很多不必要的內存。於是出現了第五種創建對象的方法

第五種：原型創建對象模式

使用原型創建對象的方式，可以讓所有對象實例共享它所包含的屬性和方法。

如果是使用原型創建對象模式，請看下面代碼：

當為對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性。

這時候我們就可以使用構造函數模式與原型模式結合的方式，構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享的屬性

第六種：組合使用構造函數模式和原型模式

解析： 參考

參與互動

10.JavaScript 繼承的方式和優缺點

參考答案：六種方式

JavaScript的兩道編程題有大佬會嗎？感激不盡！

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

titleTitle/title

/head

body

/body

form

div

h11/h1

!–

1．JavaScript編程編程計算1+1/2+1/3+…+1/n的和。按下圖頁面效果，編程實現所需功能。

（1）使用循環結構進行編程，形式不限；

（2）通過表單中文本輸入框輸入數n，n不能為空或null；

（3）表單中添加2個文本輸入框，用於輸入數n和顯示累加和；添加1個普通按鈕和重置按鈕。

（3）單擊“計算倒數的和”按鈕，可以通過函數sum()將計算結果回填到累加和文本輸入框中，計算結果保留2位小數。

—

label輸入數N: /labelinput type=”number” id=”n”br/

label累加和: /labelinput type=”number” id=”result”br/

button type=”button” onclick=”sum()”計算倒數的和/button

button type=”reset”重置/button

/div

hr/

div

h12/h1

!–

2、JavaScript編程編程實現計算n個隨機3位數的和，如下圖所示。

（1）在body標記中通過提示框輸入數N；

（2）編寫computer_sum(num)函數。採用do while循環結構實現計算num個隨機3位整數的和；用隨機函數產生隨機的3位正整數，並逐個輸出到頁面上；

（4）將計算結果直到輸出在頁面上。

—

label id=”result2″/label

/div

/form

script

// 1

function sum(){

var nInput = document.getElementById(“n”)

var resultInput = document.getElementById(“result”)

var n = nInput.value

var sum = 0

for(var i=1;i=n;i++){

sum+=(1/i)

}

sum = Math.round(sum*100)/100

resultInput.value = sum

}

// 2

computer_sum(prompt(‘輸入數N:’))

function computer_sum(n){

var sum = 0

var numbers = []

var i=0

do {

var num = Math.round(Math.random()*900+100) // 生成一個3位隨機數

sum+=num

numbers.push(num)

i++

} while(in)

var outputStr = n+”個3位隨機數: “+ numbers.join(” “)+”br/”+n+”個3位隨機數之和=”+sum

document.getElementById(“result2”).innerHTML = outputStr

}

/script

/html

js做一些編程題。

//1.

var A = prompt(“輸入A的值”,””);

var B = prompt(“輸入B的值”,””);

var tmp = A;

A = B;

B = tmp;

console.log(“A:” + A + “,B:” + B);

//2.

var num = 1234;

var str = num + “”;

console.log(“是” + str.length + “位數”);

for(var i = str.length – 1; i = 0; i–){

    console.log(str.charAt(i));

}

//3.

var sum = 0;

for(var i = 0; i  100; i++){

    var rand = Math.floor(Math.random() * 10);

    sum += rand;

}

console.log(sum);

//4.

var A;

while(true){

    A = prompt(“輸入一個整數”,””);

    if(A % 1 != 0){

        continue;

    }

    var isPrime = true;

    for(var i = 2; i = A/2; i++){

        if(A % i == 0){

            isPrime = false;

            break;

        }

    }

    if(isPrime){

        alert(A + “是素數”);

    }else{

        alert(A + “不是素數”);

    }

    break;

}

//5.

var n = 2,

    a = 1,

    b = 2,

    c = b / a;

while (n = 20) {

    var tmp = a;

    a = b;

    b = tmp + b;

    c += b / a;

    n++;

}

console.log(c);