HTML 常用标签 属性 DOM及渲染 转义符 CSS JavaScript web 服务 参考文章
HTML

示例

 
<!DOCTYPE html>
<html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <h1>标题</h1>
      <p>一句话 或 段落</p>
    </body>
</html>

<!DOCTYPE html>
这是标准的文档类型声明，必须在文档的第一行。

 html
包含文档中的所有HTML内容。

 head
文档的head，包含文档的所有元数据，比如它的title和对外部样式表、脚本的引用。

title
文档的标题。浏览器会把这个元素的内容显示在窗口标题栏中

有些元素是可以嵌套的。比如，可以使用em元素为文本增加强调的语义。
<p>This is a <em>really</em>interesting paragraph.</p>
常用标签

div


层/块/盒子
HTML中最基本的标签

span


文本标签

p


段落 或 一句话

文本域标签


<textarea name="" id="" cols="30" rows="10">
    文本。。。。。。
</textarea>

图像标签


<img src="images/a.png"  alt="图片不显示的文字"  />

锚点


<a href="#name1">点击到目标内容1</a>
<a name="name1">目标内容头1</a>

<a href="#name2">点击到目标内容2</a>
<h5 id="name2">目标内容头2</>

本网站在谷歌浏览器上有时会出现锚点无法跳转的问题,
体现为点击左侧的标签,右侧页面不会随之变动,
刷新一下页面,第一次点击跳转没有问题

在火狐浏览器上没有这个问题,无法忍受刷新可考虑使用火狐浏览器
属性 

 
<标签名 属性="值" ></标签名>

其中id与class是所有标签的通用属性
<标签名 id="id1" class="aaa" ></标签名>

HTML的属性允许自定义
<标签名  data1="qisanbiji" ></标签名>
DOM及渲染

DOM:Document Object Model,文件对象模型

 
眼睛看到是文档，是一个个xml格式的文本标签，web浏览器加载这些文本转化为结构化对象：DOM 

DOM，拥有一系列的属性，比如前面说的属性，在DOM中就转为一个对象Object的属性，

DOM还有一系列的方法等，可以操作这些属性

渲染

 
web浏览器将文本转化为DOM后，再对DOM应用一系列视觉的计算方法，

并以像素的方式绘制到屏幕上，这个过程就是渲染。



 

    


 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Video Example</title>
    </head>
    <body>
        <h1>My Video</h1>
        <video width="640" height="360" controls>
            <source src="path/to/your/video.mp4" type="video/mp4">
            <source src="path/to/your/video.ogg" type="video/ogg">
            <source src="path/to/your/video.webm" type="video/webm">
            Your browser does not support the video tag.
        </video>
    </body>
    </html>

autoplay（自动播放）、loop（循环播放）、muted（静音）

 

<video width="640" height="360" controls autoplay muted>
    <source src="path/to/your/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
转义符 

 
    所有转义字符

 参考
 https://blog.csdn.net/hemeinvyiqiluoben/article/details/79750575

    ISO Latin-1字符集: 
    	 — 制表符Horizontal tab 
    
 — 换行Line feed 
    
 — 回车Carriage Return 
      — Space 
    ! ! — 惊叹号Exclamation mark 
    ” " " 双引号Quotation mark 
    # # — 数字标志Number sign 
    $ $ — 美元标志Dollar sign 
    % % — 百分号Percent sign 
    & & & Ampersand 
    ‘ ' — 单引号Apostrophe 
    ( ( — 小括号左边部分Left parenthesis 
    ) ) — 小括号右边部分Right parenthesis 
    * * — 星号Asterisk 
    + + — 加号Plus sign 
    , , — 逗号Comma 
    - - — 连字号Hyphen 
    . . — 句号Period (fullstop) 
    / / — 斜杠Solidus (slash) 
    0 0 — 数字0 Digit 0 
    1 1 — 数字1 Digit 1 
    2 2 — 数字2 Digit 2 
    3 3 — 数字3 Digit 3 
    4 4 — 数字4 Digit 4 
    5 5 — 数字5 Digit 5 
    6 6 — 数字6 Digit 6 
    7 7 — 数字7 Digit 7 
    8 8 — 数字8 Digit 8 
    9 9 — 数字9 Digit 9 
    : : — 冒号Colon 
    ; ; — 分号Semicolon 
    < < < 小于号Less than 
    = = — 等于符号Equals sign 
    > > > 大于号Greater than 
    ? ? — 问号Question mark 
    @ @ — Commercial at 
    A A — 大写A Capital A 
    B B — 大写B Capital B 
    C C — 大写C Capital C 
    D D — 大写D Capital D 
    E E — 大写E Capital E 
    F F — 大写F Capital F 
    G G — 大写G Capital G 
    H H — 大写H Capital H 
    I I — 大写J Capital I 
    J J — 大写K Capital J 
    K K — 大写L Capital K 
    L L — 大写K Capital L 
    M M — 大写M Capital M 
    N N — 大写N Capital N 
    O O — 大写O Capital O 
    P P — 大写P Capital P 
    Q Q — 大写Q Capital Q 
    R R — 大写R Capital R 
    S S — 大写S Capital S 
    T T — 大写T Capital T 
    U U — 大写U Capital U 
    V V — 大写V Capital V 
    W W — 大写W Capital W 
    X X — 大写X Capital X 
    Y Y — 大写Y Capital Y 
    Z Z — 大写Z Capital Z 
    [ [ --- 中括号左边部分Left square bracket 
    \ \ --- 反斜杠Reverse solidus (backslash) 
    ] ] — 中括号右边部分Right square bracket 
    ^ ^ — Caret 
    _ _ — 下划线Horizontal bar (underscore) 
    ` ` — 尖重音符Acute accent 
    a a — 小写a Small a 
    b b — 小写b Small b 
    c c — 小写c Small c 
    d d — 小写d Small d 
    e e — 小写e Small e 
    f f — 小写f Small f 
    g g — 小写g Small g 
    h h — 小写h Small h 
    i i — 小写i Small i 
    j j — 小写j Small j 
    k k — 小写k Small k 
    l l — 小写l Small l 
    m m — 小写m Small m 
    n n — 小写n Small n 
    o o — 小写o Small o 
    p p — 小写p Small p 
    q q — 小写q Small q 
    r r — 小写r Small r 
    s s — 小写s Small s 
    t t — 小写t Small t 
    u u — 小写u Small u 
    v v — 小写v Small v 
    w w — 小写w Small w 
    x x — 小写x Small x 
    y y — 小写y Small y 
    z z — 小写z Small z 
    { { — 大括号左边部分Left curly brace 
    | | — 竖线Vertical bar 
    } } — 大括号右边部分Right curly brace 
    ~ ~ — Tilde 
    —  — 未使用Unused 
        空格Nonbreaking space 
    ? ¡ ¡ Inverted exclamation 
    ￠ ¢ ¢ 货币分标志Cent sign 
    ￡ £ £ 英镑标志Pound sterling 
    ¤ ¤ ¤ 通用货币标志General currency sign 
    ￥ ¥ ¥ 日元标志Yen sign 
    | ¦ ¦ or &brkbar; 断竖线Broken vertical bar 
    § § § 分节号Section sign 
    ¨ ¨ ¨ or ¨ 变音符号Umlaut 
    ? © © 版权标志Copyright 
    a ª ª Feminine ordinal 
    ? « « Left angle quote, guillemet left 
    ? ¬ ¬ Not sign 
    ? ­ ­ Soft hyphen 
    ? ® ® 注册商标标志Registered trademark 
    ˉ ¯ ¯ or &hibar; 长音符号Macron accent 
    ° ° ° 度数标志Degree sign 
    ± ± ± 加或减Plus or minus 
    2 ² ² 上标2 Superscrīpt two 
    3 ³ ³ 上标3 Superscrīpt three 
    ′ ´ ´ 尖重音符Acute accent 
    μ µ µ Micro sign 
    ? ¶ ¶ Paragraph sign 
    ? · · Middle dot 
    ? ¸ ¸ Cedilla 
    1 ¹ ¹ 上标1 Superscrīpt one 
    o º º Masculine ordinal 
    ? » » Right angle quote, guillemet right 
    ? ¼ ¼ 四分之一Fraction one-fourth 
    ? ½ ½ 二分之一Fraction one-half 
    ? ¾ ¾ 四分之三Fraction three-fourths 
    ? ¿ ¿ Inverted question mark 
    à À À Capital A, grave accent 
    á Á Á Capital A, acute accent 
    ? Â Â Capital A, circumflex 
    ? Ã Ã Capital A, tilde 
    ? Ä Ä Capital A, di?esis / umlaut 
    ? Å Å Capital A, ring 
    ? Æ Æ Capital AE ligature 
    ? Ç Ç Capital C, cedilla 
    è È È Capital E, grave accent 
    é É É Capital E, acute accent 
    ê Ê Ê Capital E, circumflex 
    ? Ë Ë Capital E, di?esis / umlaut 
    ì Ì Ì Capital I, grave accent 
    í Í Í Capital I, acute accent 
    ? Î Î Capital I, circumflex 
    ? Ï Ï Capital I, di?esis / umlaut 
    D Ð Ð Capital Eth, Icelandic 
    ? Ñ Ñ Capital N, tilde 
    ò Ò Ò Capital O, grave accent 
    ó Ó Ó Capital O, acute accent 
    ? Ô Ô Capital O, circumflex 
    ? Õ Õ Capital O, tilde 
    ? Ö Ö Capital O, di?esis / umlaut 
    × × × 乘号Multiply sign 
    ? Ø Ø Capital O, slash 
    ù Ù Ù Capital U, grave accent 
    ú Ú Ú Capital U, acute accent 
    ? Û Û Capital U, circumflex 
    ü Ü Ü Capital U, di?esis / umlaut 
    Y Ý Ý Capital Y, acute accent 
    T Þ Þ Capital Thorn, Icelandic 
    ? ß ß Small sharp s, German sz 
    à à à Small a, grave accent 
    á á á Small a, acute accent 
    a â â Small a, circumflex 
    ? ã ã Small a, tilde 
    ? ä ä Small a, di?esis / umlaut 
    ? å å Small a, ring 
    ? æ æ Small ae ligature 
    ? ç ç Small c, cedilla 
    è è è Small e, grave accent 
    é é é Small e, acute accent 
    ê ê ê Small e, circumflex 
    ? ë ë Small e, di?esis / umlaut 
    ì ì ì Small i, grave accent 
    í í í Small i, acute accent 
    ? î î Small i, circumflex 
    ? ï ï Small i, di?esis / umlaut 
    e ð ð Small eth, Icelandic 
    ? ñ ñ Small n, tilde 
    ò ò ò Small o, grave accent 
    ó ó ó Small o, acute accent 
    ? ô ô Small o, circumflex 
    ? õ õ Small o, tilde 
    ? ö ö Small o, di?esis / umlaut 
    ÷ ÷ ÷ 除号Division sign 
    ? ø ø Small o, slash 
    ù ù ù Small u, grave accent 
    ú ú ú Small u, acute accent 
    ? û û Small u, circumflex 
    ü ü ü Small u, di?esis / umlaut 
    y ý ý Small y, acute accent 
    t þ þ Small thorn, Icelandic 
    ? ÿ ÿ Small y, umlaut 
    symbols, mathematical symbols, and Greek letters 
    ? ƒ 
    Α Α 
    Β Β 
    Γ Γ 
    Δ Δ 
    Ε Ε 
    Ζ Ζ 
    Η Η 
    Θ Θ 
    Ι Ι 
    Κ Κ 
    Λ Λ 
    Μ Μ 
    Ν Ν 
    Ξ Ξ 
    Ο Ο 
    Π Π 
    Ρ Ρ 
    Σ Σ 
    Τ Τ 
    Υ Υ 
    Φ Φ 
    Χ Χ 
    Ψ Ψ 
    Ω Ω 
    α α 
    β β 
    γ γ 
    δ δ 
    ε ε 
    ζ ζ 
    η η 
    θ θ 
    ι ι 
    κ κ 
    λ λ 
    μ μ 
    ν ν 
    ξ ξ 
    ο ο 
    π π 
    ρ ρ 
    ? ς 
    σ σ 
    τ τ 
    υ υ 
    φ φ 
    χ χ 
    ψ ψ 
    ω ω 
    ? ϑ 
    ? ϒ 
    ? ϖ 
    ? • 
    … … 
    ′ ′ 
    ″ ″ 
    ￣ ‾ 
    ? ⁄ 
    ? ℘ 
    ? ℑ 
    ? ℜ 
    ? ™ 
    ? ℵ 
    ← ← 
    ↑ ↑ 
    → → 
    ↓ ↓ 
    ? ↔ 
    ? ↵ 
    ? ⇐ 
    ? ⇑ 
    ? ⇒ 
    ? ⇓ 
    ? ⇔ 
    ? ∀ 
    ? ∂ 
    ?∃ 
    ?∅ 
    ? ∇ 
    ∈ ∈ 
    ? ∉ 
    ? ∋ 
    ∏ ∏ 
    ∑ ∑ 
    ? − 
    ?∗ 
    √ √ 
    ∝ ∝ 
    ∞ ∞ 
    ∠ ∠ 
    ∧ ∧ 
    ∨ ∨ 
    ∩ ∩ 
    ∪ ∪ 
    ∫ ∫ 
    ∴ ∴ 
    ～ ∼ 
    ? ≅ 
    ≈ ≈ 
    ≠ ≠ 
    ≡ ≡ 
    ≤ ≤ 
    ≥ ≥ 
    ? ⊂ 
    ? ⊃ 
    ? ⊄ 
    ?⊆ 
    ? ⊇ 
    ⊕ ⊕ 
    ? ⊗ 
    ⊥ ⊥ 
    ? ⋅ 
    ?⌈ 
    ? ⌉ 
    ? ⌊ 
    ?⌋ 
    ? ⟨ 
    ? ⟩ 
    ? ◊ 
    ? ♠ 
    ? ♣ 
    ? ♥ 
    ? ♦ 
    markup-significant and internationalization characters: 
    “ " 
    & & 
    < < 
    > > 
    ? Π
    ? œ 
    ? Š 
    ? š 
    ? Ÿ 
    ? ˆ 
    ? ˜ 
      
      
      
    ? ‌ 
    ? ‍ 
    ? ‎ 
    ?‏ 
    – – 
    — — 
    ‘ ‘ 
    ’ ’ 
    ? ‚ 
    “ “ 
    ” ” 
    ? „ 
    ?† 
    ? ‡ 
    ‰ ‰ 
    ? ‹ 
    ? › 
    € €
CSS

CSS（Cascading Style Sheets，层叠样式表）控制DOM元素的视觉外观 

 
选择符 {
    属性: 值;
    属性: 值;
}

类型选择符

 
匹配同名DOM元素的标签名：
div            /* 选择所有div元素                     */
h1             /* 选择所有一级标题                    */
p              /* 选择所有段落                        */
strong         /* 选择所有strong元素                  */
em             /* 选择所有em元素                      */

后代选择符

 
div p          /* 选择包含在div中的p元素              */

类选择符

 
匹配class属性的value

.red 匹配class="red"的元素

还可以级联
.red.small

ID 选择符 

 
id="good"   

#good

属性和值 

 
颜色名：orange
十六进制值：#3388aa或#38a
RGB值：rgb(10, 150, 20)
带透明通道的RGB值：rgba(10, 150, 20, 0.5)

嵌入html

 
<head>
    <style type="text/css">

        p {
            font-size: 20px;
            font-weight: bold;
            background-color: blue;
            color: red;
        }

    </style>
</head>

外部样式

 
<head>
    <link rel="stylesheet" href="style.css">
    <link rel='shortcut icon' href='#'></link>
</head>

行内样式 

 
<p style="background-color: #357210;color: white; font-size: 37px; font-style: italic;">学与用，输入与输出，应该有平衡或比例</p>

继承样式：子层默认继承父层样式

 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">

            div {
                background-color: #357210;
                color: white; 
                font-size: 37px;
                font-weight: bold; 
                font-style: italic;
            }

        </style>
    </head>
    <body>
        <p>走一走</p>
        <div>
            <p>停一停.</p>
        </div>
    </body>
</html>


  
https://getbootstrap.com/
JavaScript 

 
JavaScript是一种脚本语言，像其他语言一样，可以做很多事，比如，后台开发，

但若说应用最普遍的，那还是前端开发：嵌入HTML，通过操作DOM动态修改页面。

并且这是跨平台的，这像句废话，因为前端的东西，各个跨平台，哪个组件不跨平台才需要提一下
但JavaScript又稍加特殊，它还是一门语言，这是将一门语言作为了页面的插件来使用并且普及天下... 

可以作为浏览器插件的语言还有Java,Rust，值得一提这三个语言背后的关系:

Mozilla基金会(火狐浏览器的研发组织)，Sun(Java前研发公司)，Oracle

1993年，马克·安德森领导的团开发了一个真正有影响力的浏览器Mosaic，这就是后来世界上最流行的浏览器Netscape Navigator。

1995年，微软推出了闻名于世的浏览器Internet Explorer。
       网景公司（Netscape）与Sun Microsystems合作，创建了互动性的Web站点。
       著名的 Brendan Eich 只花了 10 天时间就创建了第一个版本的 JavaScript 语言，
       这是一门动态编程语言，其语法上与 Sun 的 Java 语言大致类似。
       由于这种合作关系，Sun 公司因此持有了“JavaScript”的商标。


1998年，Netscape公司开放Netscape Navigator源代码，成立了Mozilla基金会。

2001年，最初浏览器写超过20行的javascript代码就会崩溃，直到2001年微软发布了ie6，首次实现对js引擎的优化和分离。
      （瞬间js提升到万行以上）

2003年，苹果公司发布了Safari浏览器。

2004年，Netscape公司发布了著名的开源浏览器Mozilla Firefox(中文俗称“火狐”)

2009 年，Oracle 收购了 Sun Microsystems，并因此获得了JavaScript的商标。

Rust 
Rust语言在2006年作为 Mozilla 员工 Graydon Hoare 的私人项目出现，
而 Mozilla 于 2009 年开始赞助这个项目。
第一个有版本号的 Rust 编译器于2012 年 1 月发布。Rust 1.0 是第一个稳定版本，于 2015年5月15日发布。

可以说 Mozilla基金会推出了JS,之后它推出的Rust其中一大特点就是可以作为插件运行在浏览器上，
弥补了JS作为解释性语言性能低的缺点,又能形成沙箱/黑盒，保护代码... 

这几十年对于技术发展来说，真是 ...风起云涌遥望峰之巅...

ES 的特性

 
JS的语法比较灵活，或者说是松散，大规模开发会出现N多糟糕的局面，好几个公司都研发了自己的分支/版本，
微软推出了 JScript,  CEnvi推出 ScriptEase, 与JavaScript 同样可以在浏览器上运行，
Mozilla基金会是非赢利机构，你拿人家的东西修修改改就成自己，于双方 于社会发展 都不好 ... 
为了统一，或者说为了解决这个局面... 
欧洲计算机制造商联合会（European Computer Manufacturers Association，ECMA）提出了软件开发环境的参考模型：
ECMA 标准
之后，JavaScript 兼容于 ECMA 标准，也称为 ECMAScript 或者 ES

解释性语言 -- （不需要编译成文件）   跨平台

单线程（js引擎单线程）

嗯,后续写JS要遵守ES规范



 
<body>
    <script type="text/javascript">
        alert("11");
    </script>
</body>



 
<head>
    <title>Page Title</title>
    <script type="text/javascript" src="main.js"></script>
</head>

循环控制 

 
true && false
true || false

if (true) {
    // 如果为真，则执行这里的代码
}

for (let i = 0; i < 5; i++) {
    console.log(i); // 把值输出到控制台
}

var fun = function(a) {
    return a;
};



 
typeof 37;              // 返回"number"
var myName = "aa";
typeof myName;          // 返回"string"
myName = true;
typeof myName;          // 返回"boolean"

11=='11'   //true 
11==='11'  //false

JS 数组 

 
var a = [];   //创建一个空数组
var a = new Array("a","b","c");;   // 创建一个包含1项数据为20的数组
var a = ["a",2];   
let arr = ["a",2];   //js数组可以存放不同类型的数据，即使let也是如此

arr.push(3,4);
let tmp = arr.pop();
console.log(tmp);//4

function compare(value1, value2) {
    if (value1 < value2) {
    return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

arr = [3,1,2];   

arr.sort(compare);
console.log(arr); // [ 1, 2, 3 ]

//1,2,3中index=0的元素为1 
//1,2,3中index=1的元素为2 
//1,2,3中index=2的元素为3
arr.forEach(function(x, index, a){
    console.log(a+"中index="+index+"的元素为"+x);
});



let ar2 = arr.map(function(item){
return item*2;
});
console.log(ar2);  // [ 2, 4, 6 ]

ar2 = ar2.filter(function(x, index) {
    return index > 0;
});
console.log(ar2); //[ 4, 6 ]

... 解构数组 

 


// ES6 的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);



复制数组
const a1 = [1, 2];
const a2 = a1;//引用

a2[0] = 2;
a1 // [2, 2]

const a1 = [1, 2];
// 写法一
const a2 = [...a1];//浅复制
// 写法二
const [...a2] = a1;
上面的两种写法，a2都是a1的克隆

引用实际的内容只有一个
浅复制，如果是简单类型，相当于独立的两份，如果是复合对象{}那还是相当于一份

合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

变量作用域提升 

 
JS可以将多个文件拼到一个文件中，那文件2中的变量拼接到新文件后，它的作用域会扩展到新文件吗？

会的 

如果不想遇到一些奇怪的问题最好使用ES规范

ES6 新增了let命令，用来声明变量。
它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，也不允许重复声明
let声明的变量不会出现作用域提升的现象，更适合人的思维

function 原型Prototype

 
JS函数function是一个Function类型的对象，该对象有一个属性叫Prototype，即原型

可以通过原型为function添加一个属性/方法，就相当于高级语言中为类添加一个属性/方法 
没错，JS中提到原型，实际上就是将定义的function对象当类用了，原型定义类的属性/方法，供所有对象使用

而单个对象也可以重新定义属性/方法，这将覆盖原型中的定义

将function当作类使用时，必须使用关键字:new 

 
let TPF = function (){};
TPF.prototype.name = "自定义类";
TPF.prototype.log = function(msg){
    console.log(msg);
}

let ta = new TPF();
ta.log("test")

ES6字符串的新增方法 

 
String.fromCodePoint()
String.raw()
实例方法：codePointAt()
实例方法：normalize()
实例方法：includes(), startsWith(), endsWith()
实例方法：repeat()
实例方法：padStart()，padEnd()
实例方法：trimStart()，trimEnd()
实例方法：matchAll()
实例方法：replaceAll()
实例方法：at()

ES6 允许为函数的参数设置默认值 

 
function log(x, y = 'World') {
    console.log(x, y);
}

function Point(x = 0, y = 0) {
    this.x = x;
    this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

参数默认值可以与解构赋值的默认值，结合起来使用 

 
function foo({x, y = 5}) {
    console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

ES5属性简写：当属性名与值的变量名一致时，可以简化为一个 

 
let name = "红云";
let person = {"name":name};
console.log(person);//Object { name: "红云" }

let person2 = {name};
console.log(person2);//Object { name: "红云" }

{name} 等价于 {"name":name}



 
function f(x, y) {
    return {x, y};
}

// 等同于

function f(x, y) {
    return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

方法的简写 

 
const o = {
    method() {
        return "Hello!";
    }
};

// 等同于

const o = {
    method: function() {
        return "Hello!";
    }
};

JS Map 

 
let TPF = function (){};
TPF.prototype.name = "自定义类";
TPF.prototype.log = function(msg){
    console.log(msg);
}

let ta = new TPF();
ta.log("test")

ta.map_show = function(){
    let map = new Map();
    map.set('a', "A");
    map.set('b', false);
    map.set('c', 3);
    map.set('a', 4);//旧值被覆盖

    ta.log(map.size);//3
    ta.log(map.has('a'));//true
    map.clear();

    map.set('a', "A");
    map.set('b', false);
    map.set('c', 3);

    for (let key of map.keys()) {

    }


    for (let value of map.values()) {

    }

    //下面这三个for循环效果完全一样，选一个即可 
    for (let [key, value] of map) {
        console.log(key, value);
    }

    for (let item of map.entries()) {
        console.log(item[0], item[1]);
    }

    for (let [key, value] of map.entries()) {
        console.log(key, value);
    }

}
ta.map_show()

二维数组与map 

 
const map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]);
  
  [...map.keys()]
  // [1, 2, 3]
  
  [...map.values()]
  // ['one', 'two', 'three']
  
  [...map.entries()]
  // [[1,'one'], [2, 'two'], [3, 'three']]
  
  [...map]
  // [[1,'one'], [2, 'two'], [3, 'three']]

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）

 
const map0 = new Map()
    .set(1, 'a')
    .set(2, 'b')
    .set(3, 'c');
  
  const map1 = new Map(
    [...map0].filter(([k, v]) => k < 3)
  );
  // 产生 Map 结构 {1 => 'a', 2 => 'b'}
  
  const map2 = new Map(
    [...map0].map(([k, v]) => [k * 2, '_' + v])
      );
  // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

Proxy/拦截器 

 
var obj = {name:3};
var p = new Proxy(obj, {
    get: function(target, propKey,receiver) {
        console.log(target);//Object { name: 3 }
        console.log(propKey);//age
        console.log(receiver);//更像是自身...
        return 37;
    },
    set: function (target, propKey, value, receiver) {
        console.log(`setting ${propKey}!`);
        return Reflect.set(target, propKey, value, receiver);
    },
    apply: function(target, thisBinding, args) {
        return args[0];
    },

    construct: function(target, args) {
        return {value: args[1]};
    }
});

console.log(p.age);//37 



 
var obj = {name:3};
var p = new Proxy(obj, {
    get: function(target, propKey,receiver) {
        if (propKey in target) {
            return target[propKey];
        } else {
            throw new ReferenceError(" \"" + propKey + "\" does not exist.");
        }
    }
});

console.log(p.name);//3
console.log(p.age);//Uncaught ReferenceError:  "age" does not exist.
web 服务

快速启动一个web服务

 
进入web的根目录
如果是python3
python -m http.server 8801 &

如果是python2
python -m SimpleHTTPServer 8801 &
参考文章 
html基础标签介绍及演示代码

22个超详细的 JS 数组方法
七三笔记路线： 学习，记录，分享