013 ECMAScript基礎應用

時間 2019-11-11

原文原文鏈接

1.ECMAScript概述javascript

(1)前端的發展歷程html

<1>web 1.0時代前端

最初的網頁以HTML爲主，是純靜態的網頁。網頁是隻讀的，信息流只能從服務的到客戶端單向流通。開發人員也只關心頁面的樣式和內容便可。java

<2>web 2.0時代web

1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。
1996年，微軟發佈了JScript，實際上是JavaScript的逆向工程實現。
1997年，爲了統一各類不一樣script腳本語言，ECMA（歐洲計算機制造商協會）以JavaScript爲基礎，制定了ECMAscript標準規範。JavaScript和JScript都是ECMAScript的標準實現者，隨後各大瀏覽器廠商紛紛實現了ECMAScript標準。數組

(2)ECMAScript的快速發展瀏覽器

ECMAScript就進入了快速發展期。
- 1998年6月，ECMAScript 2.0 發佈。
- 1999年12月，ECMAScript 3.0 發佈。這時，ECMAScript 規範自己也相對比較完善和穩定了，可是接下來的事情，就比較悲劇了。
- 2007年10月，ECMAScript 4.0 草案發布。
此次的新規範，歷時頗久，規範的新內容也有了不少爭議。在制定ES4的時候，是分紅了兩個工做組同時工做的。
一邊是以 Adobe, Mozilla, Opera 和 Google爲主的 ECMAScript 4.0 工做組。一邊是以 Microsoft 和 Yahoo 爲主的 ECMAScript 3.1 工做組。
ECMAScript 4 的不少主張比較激進，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終通過 TC39 的會議，決定將一部分不那麼激進的改動保留髮布爲 ECMAScript 3.1，而ES4的內容，則延續到了後來的ECMAScript5和6版本中
- 2009年12月，ECMAScript 5 發佈。
- 2011年6月，ECMAScript 5.1 發佈。
- 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 發佈了。而且從 ECMAScript 6 開始，開始採用年號來作版本。即 ECMAScript 2015，就是ECMAScript6。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。ecmascript

2.ES5和6的一些新特性函數

這裏只把一些經常使用的進行學習，更詳細的你們參考:https://www.w3cschool.cn/ecmascript/學習

建立一個空白的html頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
</body>
</html>

(1)let 和 const 命令

<1>var

以前，javascript定義變量只有一個關鍵字：var

var有一個問題，就是定義的變量有時會莫名奇妙的成爲全局變量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        for(var i = 0; i < 5; i++){
            console.log(i);
        }
        console.log("循環外：" + i)
    </script>
</body>
</html>

瀏覽器打開後：

<2>let

let所聲明的變量，只在let命令所在的代碼塊內有效。

咱們把剛纔的var改爲let試試：

<script>
        for(let i = 0; i < 5; i++){
            console.log(i);
        }
        console.log("循環外：" + i)
    </script>

瀏覽器打開後：

<3>const

const聲明的變量是常量，不能被修改

(2)字符串的擴展

<1>新的API

ES6爲字符串擴展了幾個新的API：

includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

實踐案例：

<2>字符串模板

ES6中提供了`來做爲字符串模板標記。咱們能夠這麼玩：

注意：`鍵應該在英文輸入法狀態下點擊以下鍵位。

在兩個`之間的部分都會被做爲字符串的值，無論你任意換行，甚至加入js腳本

(3)解構表達式

<1>數組解構

好比有一個數組：

let arr = [1,2,3]

我想獲取其中的值，只能經過角標。ES6能夠這樣：

const [x,y,z] = arr;// x，y，z將與arr中的每一個位置對應來取值
// 而後打印
console.log(x,y,z);

使用案例：

<2>對象解構

(4)函數的優化

<1>函數參數默認值

<script>
        function func1(a,b=1) {
            return a+b;
        }
        console.log(func1(10));
    </script>

<2>箭頭函數

一個參數：

var print = function (obj) {
    console.log(obj);
}
// 簡寫爲：
//函數名=參數=>函數體
var print2 = obj => console.log(obj);

兩個參數：

// 兩個參數的狀況：
var sum = function (a , b) {
    return a + b;
}
// 簡寫爲：
var sum2 = (a,b) => a+b;

代碼不止一行，能夠用{}括起來

var sum3 = (a,b) => {
    return a + b;
}

(5)map和reduce

<1>map

map()：接收一個函數，將原數組中的全部元素用這個函數處理後放入新數組返回。

舉例：有一個字符串數組，咱們但願轉爲int數組

<script>
        let arr = ['1','20','-5','3'];
        console.log(arr);

        arr = arr.map(s1=s=> parseInt(s));
        console.log(arr);
    </script>

<2>reduce

reduce()：接收一個函數（必須）和一個初始值（可選）。

第一個參數（函數）接收兩個參數：

第一個參數是上一次reduce處理的結果
第二個參數是數組中要處理的下一個元素

reduce()會從左到右依次把數組中的元素用reduce處理，並把處理的結果做爲下次reduce的第一個參數。若是是第一次，會把前兩個元素做爲計算參數，或者把用戶指定的初始值做爲起始參數

沒有初始值：

有初始值：

(6)對象擴展

ES6給Object拓展了許多新的方法，如：

keys(obj)：獲取對象的全部key造成的數組
values(obj)：獲取對象的全部value造成的數組
entries(obj)：獲取對象的全部key和value造成的二維數組。格式：[[k1,v1],[k2,v2],...]
assign(dest, ...src) ：將多個src對象的值拷貝到 dest中（淺拷貝）。

(7)數組擴展

ES6給數組新增了許多方法：

find(callback)：數組實例的find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。
findIndex(callback)：數組實例的findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。
includes(數組元素)：與find相似，若是匹配到元素，則返回true，表明找到了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。