JavaScript 归纳

MDN

本文以 NodeJS 为交互解释器实验 尽量遵循 ES6 标准

javascript 重点

1、javascript 是单线程，通过 EventLoop 实现模拟异步，其中包括宏任务，微任务
2、尽可能最多使用 let , var 缩小作用域
3、原型链
4、写 javascript 在大多数时候我们是在 避免如何陷入陷阱 (难怪别人在说 辣鸡语言，毁我青春。。。)
5、期待 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：返回颜色位数，如8、16、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("【网页复制限制已解除】");//在页面上弹出的消息框