JavaScript 概括

時間 2019-12-10

原文原文鏈接

MDN

本文以 NodeJS 爲交互解釋器實驗儘可能遵循 ES6 標準

javascript 重點

一、javascript 是單線程，經過 EventLoop 實現模擬異步，其中包括宏任務，微任務
二、儘量最多使用 let , var 縮小做用域
三、原型鏈
四、寫 javascript 在大多數時候咱們是在 避免如何陷入陷阱 (難怪別人在說 辣雞語言，毀我青春。。。)
五、期待 js 新的標準會愈來愈規範，畢竟 javascript 已經盤踞許久，在瀏覽器端具備不少優點

較快： JavaScript語言精粹 
經典： JavaScript 紅寶書 javascript 高級程序設計

一些缺陷

false == 0; // true
false === 0; // false


> console.log(isNaN(NaN))
true
undefined
> console.log(NaN===NaN)

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true


null和undefined
null表示一個「空」的值，它和0以及空字符串''不一樣，0是一個數值，''表示長度爲0的字符串，而null表示「空」。

在其餘語言中，也有相似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。可是，在JavaScript中，還有一個和null相似的undefined，它表示「未定義」。

JavaScript的設計者但願用null表示一個空的值，而undefined表示值未定義。事實證實，這並無什麼卵用，區分二者的意義不大。大多數狀況下，咱們都應該用null。undefined僅僅在判斷函數參數是否傳遞的狀況下有用。

'use strict';
var arr = [[1, 2, 3], [400, 500, 600], '-'];
var x = arr.splice(1,1).pop().splice(1,1)
console.log(x); // x應該爲500

arr.splice(1,1).pop().slice(1,2)



Array提供了一種順序存儲一組元素的功能，並能夠按索引來讀寫。

練習：在新生歡迎會上，你已經拿到了新同窗的名單，請排序後顯示：歡迎XXX，XXX，XXX和XXX同窗！：

'use strict';
var arr = ['小明', '小紅', '大軍', '阿黃'];

first = arr.sort().slice(0,arr.length-1).join(',');
last = arr.sort()[arr.length-1];
console.log(`歡迎${first}和${last}同窗!`);

> xiaoming = { name: '小明',
...   birth: 1990,
...   school: 'No.1 Middle School',
...   height: 1.7,
...   weight: 65,
...   score: null }
{ name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.7,
  weight: 65,
  score: null }
> for(var key in xiaoming){
... if(xiaoming.hasOwnProperty(key)){
..... console.log(key);}
... }
name
birth
school
height
weight
score


JavaScript把null、undefined、0、NaN和空字符串''視爲false，其餘值一律視爲true

'use strict';

var height = parseFloat(prompt('請輸入身高(m):'));
var weight = parseFloat(prompt('請輸入體重(kg):'));

var bmi = Math.pow(weight/height,2);
if (bmi<18.5){
    console.log('過輕')
}else if(bmi<25&&bmi>=18.5){
    console.log('正常')
}else if(bmi>=25&&bmi<28){
    console.log('太重')
}else if(bmi>=28&&bmi<32){
    console.log('肥胖')
}else{
    console.log('嚴重肥胖')
}

利用for循環計算1 * 2 * 3 * ... * 10的結果：

var i;
arr = [1]
for(i=2;i<=10;i++){
     arr = arr.concat(i);
}

x = arr.reduce((x,y)=>x*y);

if (x === 3628800) {
    console.log('1 x 2 x 3 x ... x 10 = ' + x);
}
else {
    console.log('計算錯誤');
}

內置foreach遍歷， for(var x of arr) 反而用得少

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象自己
    console.log(element + ', index = ' + index+'---'+array);
});

> arr.forEach(function(element,index,array){
... console.log(`${element}, index = ${index} array = ${array}`)
... })
大軍, index = 0 array = 大軍,小明,小紅,阿黃
小明, index = 1 array = 大軍,小明,小紅,阿黃
小紅, index = 2 array = 大軍,小明,小紅,阿黃
阿黃, index = 3 array = 大軍,小明,小紅,阿黃

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
> m.forEach(function(value,key,map){
... console.log(`key=${key},value= ${value},map = ${map}`)})
key=1,value= x,map = [object Map]
key=2,value= y,map = [object Map]
key=3,value= z,map = [object Map]

似曾相見，何其類似！ arguments , rest 。。。這玩意兒不就是 java的可變參數，python 的 *args , **kw 麼。。。

> var abs = function(args){
...     if(arguments.length===0){
.....       return 0;}
...     else if(args>=0){
.....       return args}
...     else {return -args}
... }

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 結果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

> function demo(a,b,...rest){
...     console.log(`a=${a},b=${b},rest=${rest}`)}
undefined
> demo(1,2,'frank',3,4,5)
a=1,b=2,rest=frank,3,4,5


function sum(...rest) {
   var sum = 0;
   for(var arg of rest){
      sum += arg;
   }
   return sum
}

var demo = function(a,b,...rest){
  if(arguments.length===0){
    return 0
  }else if(arguments.length===1){
    return a
  }else if(arguments.length===2){
    return a+b;
  }else{
    let sum = 0;
    rest.forEach(function(element){
      sum+=element;
    })
    return sum;
  }
}


> var demo = function(a,b,...rest){
...   if(arguments.length===0){
.....     return 0
.....   }else if(arguments.length===1){
.....     return a
.....   }else if(arguments.length===2){
.....     return a+b;
.....   }else{
.....     let sum = 0;
.....     rest.forEach(function(element){
.......       sum+=element;
.......     })
.....     return sum;
.....   }
... }
undefined
> demo(1,2,3,4)

高階函數

> function absAdd(a,b,abs){
... return abs(a) + abs(b);}
undefined
> var abs = Math.abs;
undefined
> absAdd(-3,-2,abs)
5

map , reduce 累乘

'use strict';

function product(arr) {
    return arr.reduce(function(x,y){
    return x*y;
});
}

// 測試:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('測試經過!');
}
else {
    console.log('測試失敗!');
}

var arr = [1, 3, 5, 7, 9]
parseInt(arr.map(String).reduce(function(x,y){return x+y;}))

練習
請把用戶輸入的不規範的英文名字，變爲首字母大寫，其餘小寫的規範名字。輸入：['adam', 'LISA', 'barT']，輸出：['Adam', 'Lisa', 'Bart']。

'use strict';

function normalize(arr) {
    return arr.map(function(element){
    return  element.substring(0,1).toUpperCase()+element.substring(1).toLowerCase();
});
}

// 測試:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
    console.log('測試經過!');
}
else {
    console.log('測試失敗!');
}

'use strict';

function normalize(arr) {
    return arr.map(s=>{
    return s[0].toUpperCase()+s.slice(1).toLowerCase();
});
}

// 測試:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
    console.log('測試經過!');
}
else {
    console.log('測試失敗!');
}


> var
...     r,
...     arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
undefined
> arr
[ 'apple',
  'strawberry',
  'banana',
  'pear',
  'apple',
  'orange',
  'orange',
  'strawberry' ]
> r = arr.filter(function(element,index,self){
...     return self.indexOf(element) === index;});
[ 'apple', 'strawberry', 'banana', 'pear', 'orange' ]
> r
[ 'apple', 'strawberry', 'banana', 'pear', 'orange' ]


'use strict';

var arr = ['1', '2', '3'];
var r;
r = arr.map(v=>v*1).reduce((x,y)=>x+y);

'use strict';

function get_primes(arr) {

   return    arr.filter(function(element,index,self){
          if(element<=1) return false;
          var flag = true;
          for(let i=2;i<element;i++){
              if(element%i===0) {flag = false;break;}
          }
          return flag;
          
});

}

// 測試:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    console.log('測試經過!');
} else {
    console.log('測試失敗: ' + r.toString());
}

日期

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份範圍是0~11，5表示六月
now.getDate(); // 24, 表示24號
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小時制
now.getMinutes(); // 49, 分鐘
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒數
now.getTime(); // 1435146562875, 以number形式表示的時間戳

> var Student = {
... name:'Robot',
... height:1.5,
... birth:1990,
... age:function(){
..... var y = new Date().getFullYear();
..... return y-this.birth;
..... }
... }
undefined
> Student
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> s = Student
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> s.age
[Function: age]
> s.age()
28
> var xiaoming = {
... name:'小明'
... }
undefined
> xiaoming
{ name: '小明' }
> xiaoming.__proto__ = Student;
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> xiaoming.age()
28
> var Bird = {
... fly:function(){
..... console.log('flying...');}
... }
undefined
> xiaoming.__proto__ = Bird
{ fly: [Function: fly] }
> xiaoming.fly()
flying...
undefined
> xiaoming.age()
TypeError: xiaoming.age is not a function
> function createStudent(name){
... var s = Object.create(Student);
... s.name = name;
... return s}
undefined
> xiaoming = createStudent('小明');
{ name: '小明' }
> xiaoming.age();
28
>


請利用構造函數定義Cat，並讓全部的Cat對象有一個name屬性，並共享一個方法say()，返回字符串'Hello, xxx!'：

'use strict';

function Cat(name){
        this.name = name;
    }

Cat.prototype.say = function(){
    return  `Hello, ${this.name}!`
}


// 測試:
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A夢');
if (kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) {
    console.log('測試經過!');
} else {
    console.log('測試失敗!');
}

練習
對於一個已有的HTML結構：

Haskell
JavaScript
Python
Ruby
Scheme
<!-- HTML結構 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>
按字符串順序從新排序DOM節點：

// sort list:
var i,child;
list = document.getElementById('test-list');
arr = []
children = list.children;
for(i=0;i<children.length;i++){
    arr.push(children[i]);
}
arr.sort((e1,e2)=>{
    text1 = e1.innerText;
    text2 = e2.innerText;
    if(text1>text2){
        return 1;
    }
    else if (text2>text1){
        return -1;
    }
    else   return 0;
})

for(i=0;i<arr.length;i++){
    list.appendChild(arr[i]);
}
// 測試:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
            console.log('測試經過!');
        }
        else {
            console.log('測試失敗: ' + arr.toString());
        }
    }
    else {
        console.log('測試失敗!');
    }
})();

<!-- HTML結構 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

// TODO
var arr = ['JavaScript','CSS','HTML'];
var list = [];
var ul = document.getElementById('test-list');
var children= ul.children;
var i,j;
for(i=0;i<children.length;i++){
    console.log(children[i].innerText);
    for(j=0;j<arr.length;j++){
        if(arr[j]===children[i].innerText){
            list.push(children[i]);
        }
    }
}

while(ul.hasChildNodes()) //當div下還存在子節點時 循環繼續
    {
        ul.removeChild(ul.firstChild);
    }

for(i=0;i<list.length;i++){
    ul.appendChild(list[i]);
}

// 測試:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 3) {
        arr = [];
        for (i = 0; i < t.children.length; i ++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
            console.log('測試經過!');
        }
        else {
            console.log('測試失敗: ' + arr.toString());
        }
    }
    else {
        console.log('測試失敗!');
    }
})();

利用JavaScript檢查用戶註冊信息是否正確，在如下狀況不知足時報錯並阻止提交表單：

用戶名必須是3-10位英文字母或數字；

口令必須是6-20位；

兩次輸入口令必須一致。

<!-- HTML結構 -->
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
    <p id="test-error" style="color:red"></p>
    <p>
        用戶名: <input type="text" id="username" name="username">
    </p>
    <p>
        口令: <input type="password" id="password" name="password">
    </p>
    <p>
        重複口令: <input type="password" id="password-2">
    </p>
    <p>
        <button type="submit">提交</button> <button type="reset">重置</button>
    </p>
</form>


'use strict';
var checkRegisterForm = function () {

    // TODO:
    var userName = document.getElementById('username').value;
    var userNameRegEx = /[a-zA-Z\d]{3,10}/;
    var password = document.getElementById('password').value;
    var passwordRegEx = /.{6,20}/;
    var password_2 = document.getElementById('password-2').value;
    var errorInfo = document.getElementById('test-error');
    if(!userNameRegEx.test(userName)){
        errorInfo.innerText = '用戶名必須是3-10位英文字母或數字';
        return false;
    }else if(!passwordRegEx.test(password)){
        errorInfo.innerText = '口令必須是6-20位';
        return false;
    }else if(!(password === password_2)){
        errorInfo.innerText = '兩次輸入口令必須一致';
        return false;
    }
    return true;
}



 // TODO:
    var userName =  document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var rePassword = document.getElementById('password-2').value;
    var testError = document.getElementById('test-error');

    console.log(userName);
    console.log(password);
    console.log(rePassword);
    var userNameRegEx = /^\w{3,10}$/
    var passwordRegEx = /^.{6,20}$/
    console.log(userNameRegEx.test(userName) && passwordRegEx.test(password) && password === rePassword)
    var flag = true;
    if(!userNameRegEx.test(userName)){
        testError.innerText = '用戶名必須是3-10位英文字母或數字';
        flag = false;
    }else if(!passwordRegEx.test(password)){
        testError.innerText = '口令必須是6-20位';
        flag = false;
    }else if(password !== rePassword){
        testError.innerText = '兩次輸入口令必須一致。';
        flag = false;
    }
    return  flag;
}


// 測試:
;(function () {
    window.testFormHandler = checkRegisterForm;
    var form = document.getElementById('test-register');
    if (form.dispatchEvent) {
        var event = new Event('submit', {
            bubbles: true,
            cancelable: true
          });
        form.dispatchEvent(event);
    } else {
        form.fireEvent('onsubmit');
    }
})();

原來 javascript 這麼多魅力的遺憾

總結一下，有這麼幾條規則須要遵照：

不要使用new Number()、new Boolean()、new String()建立包裝對象；

用parseInt()或parseFloat()來轉換任意類型到number；

用String()來轉換任意類型到string，或者直接調用某個對象的toString()方法；

一般沒必要把任意類型轉換爲boolean再判斷，由於能夠直接寫if (myVar) {...}；

typeof操做符能夠判斷出number、boolean、string、function和undefined；

判斷Array要使用Array.isArray(arr)；

判斷null請使用myVar === null；

判斷某個全局變量是否存在用typeof window.myVar === 'undefined'；

函數內部判斷某個變量是否存在用typeof myVar === 'undefined'。

最後有細心的同窗指出，任何對象都有toString()方法嗎？null和undefined就沒有！確實如此，這兩個特殊值要除外，雖然null還假裝成了object類型。

更細心的同窗指出，number對象調用toString()報SyntaxError：

123.toString(); // SyntaxError
遇到這種狀況，要特殊處理一下：

123..toString(); // '123', 注意是兩個點！
(123).toString(); // '123'


// 原型重點

> function Student(props){
...     this.name = props.name||'name_placeholder';
...     this.grade = props.grade||60;
...     }
undefined
> Student
[Function: Student]
> Student.prototype.doHomework=function(){
...     console.log(`${this.name} do homework...`);
...     }
[Function]
> var xiaoming = new Student({name:'xiaoming'});
undefined
> var xiaohong = new Student({name:'xiaohong',grade:99})
undefined
> xiaoming.prototype.doHomework === xiaohong.prototype.doHomework;
TypeError: Cannot read property 'doHomework' of undefined
> xiaoming.__proto__.doHomework === xiaohong.__proto__.doHomework;
true


> function inherits(Child,Parent){
...     var IntermediateFunction = function(){}
...     // 中間過分函數原型指向Parent.prototype
...     Intermediate.prototype = Parent.prototype;
...     // Child.prototype 指向 IntermediateFunction 對象;
...     Child.prototype = new IntermediateFunction();
...     // 修復 Child.prototype的構造方法指向
...     Child.prototype.constructor = Child;
...     }
undefined
> inherits(Senior,Student);
> function Senior(props){
...     Student.call(this,props);
...     this.subjectType = props.subjectType||'理科';}
undefined
> var senior = createSenior({name:'frank'});
> Senior.prototype.getGrade = function(){
...     return this.grade;}
[Function]
> senior.getGrade();
60



window對象有innerWidth和innerHeight
outerWidth和outerHeight屬性


navigator對象表示瀏覽器的信息，最經常使用的屬性包括：

navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設置的語言；
navigator.platform：操做系統類型；
navigator.userAgent：瀏覽器設定的User-Agent字符串。
navigator對象表示瀏覽器的信息，最經常使用的屬性包括：

navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設置的語言；
navigator.platform：操做系統類型；
navigator.userAgent：瀏覽器設定的User-Agent字符串。

請注意，navigator的信息能夠很容易地被用戶修改，因此JavaScript讀取的值不必定是正確的。不少初學者爲了針對不一樣瀏覽器編寫不一樣的代碼，喜歡用if判斷瀏覽器版本，例如：

var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
但這樣既可能判斷不許確，也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性，直接用短路運算符||計算：

var width = window.innerWidth || document.body.clientWidth;


screen對象表示屏幕的信息，經常使用的屬性有：

screen.width：屏幕寬度，以像素爲單位；
screen.height：屏幕高度，以像素爲單位；
screen.colorDepth：返回顏色位數，如八、1六、24。


location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.assign()
location.href
location.reload()



服務器設置Cookie  httpOnly

history.back();
history.forward();
任何狀況，你都不該該使用history這個對象了。

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>熱摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鮮榨蘋果汁</dd>
</dl>

var menu = document.getElementById('drink-menu');
var drinks = menu.children;
var s = '提供的飲料有:';
for(let i=0;i<drinks.length;i++){
    var drink = drinks[i];
    if(drink.tagName.toLowerCase() === 'dt'){
        s = s + drink.innerHTML +','
    }else{
        //console.log(drink.tagName);
    }
}
console.log(s.slice(0,s.length-1));

// 獲取節點test下的全部直屬子節點:
var cs = test.children;

// 獲取節點test下第一個、最後一個子節點：
var first = test.firstElementChild;
var last = test.lastElementChild;

更新

innerHTML
innerText
textContent


插入
var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);


var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

這大概是進階

對於一個已有的HTML結構：

Haskell
JavaScript
Python
Ruby
Scheme
<!-- HTML結構 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>
按字符串順序從新排序DOM節點：
'use strict';
// sort list:
var list = document.getElementById('test-list');

function makeArray(arr){ 
    if(arr.item){ 
    var len = arr.length; 
    var array = []; 
    while(len--){ 
    array[len] = arr[len]; 
    } 
    return array; 
  } 
  return Array.prototype.slice.call(arr); 
}
 
var langs = makeArray(list.children);

langs.sort(function(pre,aft){
    var pre_text = pre.innerText.toUpperCase();
    var aft_text = aft.innerText.toUpperCase();
    return pre_text>aft_text?1:-1;
  })

// 清空子節點
function remove(div){
    while(div.hasChildNodes()) //當div下還存在子節點時 循環繼續
　　    {
　　　    　div.removeChild(div.firstChild);
　　    }
}

remove(list);

langs.forEach(function(element,index,arr){
   console.log(element.innerText);
   list.appendChild(element);
})

// 測試:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
            console.log('測試經過!');
        }
        else {
            console.log('測試失敗: ' + arr.toString());
        }
    }
    else {
        console.log('測試失敗!');
    }
})();




> checkStr
[ 'group',
  'order',
  'sum',
  'count',
  'distinct',
  'avg',
  'where',
  'union',
  'substring' ]

> var reg_ex = eval('/('+checkStr.join('|')+')/')
undefined
> reg_ex.exec(sql)
[ 'distinct',
  'distinct',
  index: 7,
  input: 'select distinct col from a where e=f group by b order by c',
  groups: undefined ]



// TODO
var langs = ['JavaScript','HTML','CSS']
var list = document.getElementById('test-list');
var langElements = list.children;
function makeArray(arr){ 
    if(arr.item){ 
    var len = arr.length; 
    var array = []; 
    while(len--){ 
    array[len] = arr[len]; 
    } 
    return array; 
  } 
  return Array.prototype.slice.call(arr); 
}

var langElementsArray = Array.prototype.slice.call(langElements);

langElementsArray.forEach(function(element){
        console.log(element.innerText);
        console.log(langs);
        if(langs.indexOf(element.innerText)===-1){
            list.removeChild(element);
        }
    })

for(let i=0;i<list.length;i++){
    console.log(list[i].innerText);
}

要想不改變用戶的輸入，能夠利用<input type="hidden">實現：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用戶輸入的明文變爲MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>
注意到id爲md5-password的<input>標記了name="password"，而用戶輸入的id爲input-password的<input>沒有name屬性。沒有name屬性的<input>的數據不會被提交。

爲了省事，就不引入 jquery 了

<html>
<head>
  <script>
       (function () {
   var ie = !!(window.attachEvent && !window.opera);
   var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
   var fn = [];
   var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
   var d = document;
   d.ready = function (f) {
      if (!ie && !wk && d.addEventListener)
      return d.addEventListener('DOMContentLoaded', f, false);
      if (fn.push(f) > 1) return;
      if (ie)
         (function () {
            try { d.documentElement.doScroll('left'); run(); }
            catch (err) { setTimeout(arguments.callee, 0); }
         })();
      else if (wk)
      var t = setInterval(function () {
         if (/^(loaded|complete)$/.test(d.readyState))
         clearInterval(t), run();
      }, 0);
   };
})();
document.ready(function(){
    var fileInput = document.getElementById('test-file-upload');
    var filePath  = document.getElementById('test-get-filename');
    fileInput.addEventListener('change',function(){
        var fileName = fileInput.value;
        var fileNameRegEx = /^.*.[jpg|png|jpeg|gif]$/
        if(!fileName||!(fileNameRegEx.test(fileName))){
            alert('上傳圖片格式不正確!');
        }else{
            filePath.innerHTML = `<p style='color:red'>${fileName}</p>`
        }
    })
});
  </script>
</head>

<body>
<form method="post" action="http://localhost/test" enctype="multipart/form-data">
    <p>
        <input type="file" id="test-file-upload" name="test">
    </p>
    <p>待上傳文件: <span id="test-get-filename" style="color:red"></span></p>
</form>
</body>
</html>


javascript:with(document.body){oncontextmenu='';ondragstart='';onselectstart='';onselect='';oncopy='';onbeforecopy='';onmouseup='';}void(0); alert("【網頁複製限制已解除】");//在頁面上彈出的消息框