es6筆記1^_^let、string、number、math - puyongsong－IT工程師數位筆記本

文章出處

　　ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或JScript，但實際上后兩者是ECMA-262標準的實現和擴展。ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發布了。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

　　嫌babel麻煩，直接使用Traceur轉碼器-Google公司的Traceur轉碼器，可以將ES6代碼轉為ES5代碼。這意味著，你可以用ES6的方式編寫程序，又不用擔心瀏覽器是否支持。Traceur允許將ES6代碼直接插入網頁。首先，必須在網頁頭部加載Traceur庫文件。

　　<!-- 加載Traceur編譯器 -->
    <script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
    <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
    <!-- 將Traceur編譯器用于網頁 -->
    <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script>

<script type="module">
    class Calc {
        constructor(){
            console.log('Calc constructor');
        }
        add(a, b){
            return a + b;
        }
    }
    var c = new Calc();
    console.log(c.add(4,5));//9
</script>

　　這樣就可以欣賞es6咯！我在寫這篇博文的時候把chrome升級到了最新版，大部分es6都支持了。如若報錯，還是老實按上面的方法加編譯器吧。

一、let

　　let是ES6中新增關鍵字。它的作用類似于var，用來聲明變量。const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
　　ES5只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。
　　而let則實際上為JavaScript新增了塊級作用域。用它所聲明的變量，只在let命令所在的代碼塊內有效。

    if(1){
        var a=1;
        let b=2;
        console.log(a);
        console.log(b);
    }
    console.log(a);
//    console.log(b);//報錯 b is not defined(…)

    if(1){//只在此作用域有效
       const c=3;
        console.log(c);
    }
//    console.log(c);//報錯 b is not defined(…)

　　一個var帶來的不合理場景就是用來計數的循環變量泄露為全局變量，看下面的例子：

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 10
//上面代碼中，變量i是var聲明的，在全局范圍內都有效。所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪的i的值。而使用let則不會出現這個問題。
var aa = [];
for (let ii = 0; ii < 10; ii++) {
    aa[ii] = function () {
        console.log(ii);
    };
}
aa[6](); // 6

二、repeat()

　　str.repeat()返回一個新字符串，表示將原字符串重復n次。

    if(1){
        let str='nick';
        let str1=str.repeat(2);
        console.log(str);
        console.log(str1);
    }

三、拼接字符串

　　模板字符中，支持字符串插值,模板字符串可以包含空格多行。
　　用`來標識起始，用${}來引用變量，而且所有的空格和縮進都會被保留在輸出之中，``這2個點不是引號，是esc下面那個~、（英文狀態）。

    if(1){
        let first='web';
        let last='nick';
        console.log(`Hello ${first} ${last}!`);
        console.log(`Hello ${first}    ${last}!`);
        console.log(`Hello ${first}
        ${last}!`);
    }

　　以上常用，下面的作為了解

四、String.raw()

若使用String.raw 作為模板字符串的前綴，則模板字符串可以是原始(raw)的。反斜線也不再是特殊字符，\n 也不會被解釋成換行符：

    if(1){
        let raw=String.raw`hi : \n`;
        console.log(raw==='hi : \\n');
    }

五、Number.isFinite()、Number.isNaN()、Number.isInteger()

　　Number.isFinite()用來檢查一個數值是否非無窮（infinity）。Number.isNaN()用來檢查一個值是否為NaN。

    Number.isFinite(15); // true
    Number.isFinite(0.8); // true
    Number.isFinite(NaN); // false
    Number.isFinite(Infinity); // false
    Number.isFinite(-Infinity); // false
    Number.isFinite("foo"); // false
    Number.isFinite("15"); // false
    Number.isFinite(true); // false
    Number.isNaN(NaN); // true
    Number.isNaN(15); // false
    Number.isNaN("15"); // false
    Number.isNaN(true); // false

Number.isInteger()用來判斷一個值是否為整數。需要注意的是，在JavaScript內部，整數和浮點數是同樣的儲存方法，所以3和3.0被視為同一個值。

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

六、Math

　　Math對象新增的方法，都是靜態方法，只能在Math對象上調用。
　　Math.trunc()：去除一個數的小數部分，返回整數部分。

Math.trunc(4.1) // 4
Math.trunc(-4.1) // -4

注意：對于空值和無法截取整數的值，返回NaN。
Math.sign()：判斷一個數到底是正數、負數、還是零。
返回五種值：參數為正數，返回+1；參數為負數，返回-1；參數為0，返回0；參數為-0，返回-0;其他值，返回NaN。

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign('hubwiz'); // NaN
//Math.cbrt：計算一個數的立方根。
Math.cbrt(-1); // -1
Math.cbrt(0);  // 0
Math.cbrt(2);  // 1.2599210498948732
//Math.fround：返回一個數的單精度浮點數形式。
Math.fround(0);     // 0
Math.fround(1.337); // 1.3370000123977661
Math.fround(NaN);   // NaN
//Math.hypot：返回所有參數的平方和的平方根。
Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3
//如果參數不是數值，Math.hypot方法會將其轉為數值。只要有一個參數無法轉為數值，就會返回NaN。
/*8.Math 對數方法
Math.expm1(x)：返回ex - 1。*/
Math.expm1(-1); // -0.6321205588285577
Math.expm1(0);  // 0
Math.expm1(1);  // 1.718281828459045
//Math.log1p(x)：返回1 + x的自然對數。如果x小于-1，返回NaN。
Math.log1p(1);  // 0.6931471805599453
Math.log1p(0);  // 0
Math.log1p(-1); // -Infinity
Math.log1p(-2); // NaN
//Math.log10(x)：返回以10為底的x的對數。如果x小于0，則返回NaN。
Math.log10(2);      // 0.3010299956639812
Math.log10(1);      // 0
Math.log10(0);      // -Infinity
Math.log10(-2);     // NaN
Math.log10(100000); // 5
//Math.log2(x)：返回以2為底的x的對數。如果x小于0，則返回NaN。
Math.log2(3);    // 1.584962500721156
Math.log2(2);    // 1
Math.log2(1);    // 0
Math.log2(0);    // -Infinity
Math.log2(-2);   // NaN
Math.log2(1024); // 10
//三角函數方法
Math.sinh(3) //返回x的雙曲正弦（hyperbolic sine）
Math.cosh(3) //返回x的雙曲余弦（hyperbolic cosine）
Math.tanh(3)// 返回x的雙曲正切（hyperbolic tangent）
Math.asinh(3) //返回x的反雙曲正弦（inverse hyperbolic sine）
Math.acosh(3) //返回x的反雙曲余弦（inverse hyperbolic cosine）
Math.atanh(3) //返回x的反雙曲正切（inverse hyperbolic tangent）

此篇筆記整合：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>es6-string-number</title>
    <script>
//1.let是ES6中新增關鍵字。它的作用類似于var，用來聲明變量。const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
//ES5只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。
//而let則實際上為JavaScript新增了塊級作用域。用它所聲明的變量，只在let命令所在的代碼塊內有效。
    if(1){
        var a=1;
        let b=2;
        console.log(a);
        console.log(b);
    }
    console.log(a);
//    console.log(b);//報錯 b is not defined(…)

    if(1){//只在此作用域有效
       const c=3;
        console.log(c);
    }
//    console.log(c);//報錯 b is not defined(…)

//一個var帶來的不合理場景就是用來計數的循環變量泄露為全局變量，看下面的例子：
var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 10

//上面代碼中，變量i是var聲明的，在全局范圍內都有效。所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪的i的值。而使用let則不會出現這個問題。

var aa = [];
for (let ii = 0; ii < 10; ii++) {
    aa[ii] = function () {
        console.log(ii);
    };
}
aa[6](); // 6


//2.repeat()返回一個新字符串，表示將原字符串重復n次。
    if(1){
        let str='nick';
        let str1=str.repeat(2);
        console.log(str);
        console.log(str1);
    }
//    3.模板字符中，支持字符串插值,模板字符串可以包含空格多行
//用`來標識起始，用${}來引用變量，而且所有的空格和縮進都會被保留在輸出之中，``這2個點不是引號，是esc下面那個~、（英文狀態）
    if(1){
        let first='web';
        let last='nick';
        console.log(`Hello ${first} ${last}!`);
        console.log(`Hello ${first}    ${last}!`);
        console.log(`Hello ${first}
        ${last}!`);
    }
/*4.String.raw()
模板字符串可以是原始的
ES6還為原生的String對象，提供了一個raw方法。
若使用String.raw 作為模板字符串的前綴，則模板字符串可以是原始(raw)的。反斜線也不再是特殊字符，\n 也不會被解釋成換行符：*/
    if(1){
        let raw=String.raw`hi : \n`;
        console.log(raw==='hi : \\n');
    }


//    5.Number.isFinite()用來檢查一個數值是否非無窮（infinity）。Number.isNaN()用來檢查一個值是否為NaN。
    Number.isFinite(15); // true
    Number.isFinite(0.8); // true
    Number.isFinite(NaN); // false
    Number.isFinite(Infinity); // false
    Number.isFinite(-Infinity); // false
    Number.isFinite("foo"); // false
    Number.isFinite("15"); // false
    Number.isFinite(true); // false
    Number.isNaN(NaN); // true
    Number.isNaN(15); // false
    Number.isNaN("15"); // false
    Number.isNaN(true); // false
//    6.　　Number.isInteger()用來判斷一個值是否為整數。需要注意的是，在JavaScript內部，整數和浮點數是同樣的儲存方法，所以3和3.0被視為同一個值。
    Number.isInteger(25) // true
    Number.isInteger(25.0) // true
    Number.isInteger(25.1) // false
    Number.isInteger("15") // false
    Number.isInteger(true) // false
//7.Math對象
/*Math對象新增的方法，都是靜態方法，只能在Math對象上調用。
Math.trunc()：去除一個數的小數部分，返回整數部分。*/
Math.trunc(4.1) // 4
Math.trunc(-4.1) // -4
/*注意：對于空值和無法截取整數的值，返回NaN。
Math.sign()：判斷一個數到底是正數、負數、還是零。
返回五種值：參數為正數，返回+1；參數為負數，返回-1；參數為0，返回0；參數為-0，返回-0;其他值，返回NaN。*/
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign('hubwiz'); // NaN
//Math.cbrt：計算一個數的立方根。
Math.cbrt(-1); // -1
Math.cbrt(0);  // 0
Math.cbrt(2);  // 1.2599210498948732
//Math.fround：返回一個數的單精度浮點數形式。
Math.fround(0);     // 0
Math.fround(1.337); // 1.3370000123977661
Math.fround(NaN);   // NaN
//Math.hypot：返回所有參數的平方和的平方根。
Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3
//如果參數不是數值，Math.hypot方法會將其轉為數值。只要有一個參數無法轉為數值，就會返回NaN。
/*8.Math 對數方法
Math.expm1(x)：返回ex - 1。*/

Math.expm1(-1); // -0.6321205588285577
Math.expm1(0);  // 0
Math.expm1(1);  // 1.718281828459045
//Math.log1p(x)：返回1 + x的自然對數。如果x小于-1，返回NaN。

Math.log1p(1);  // 0.6931471805599453
Math.log1p(0);  // 0
Math.log1p(-1); // -Infinity
Math.log1p(-2); // NaN
//Math.log10(x)：返回以10為底的x的對數。如果x小于0，則返回NaN。

Math.log10(2);      // 0.3010299956639812
Math.log10(1);      // 0
Math.log10(0);      // -Infinity
Math.log10(-2);     // NaN
Math.log10(100000); // 5
//Math.log2(x)：返回以2為底的x的對數。如果x小于0，則返回NaN。

Math.log2(3);    // 1.584962500721156
Math.log2(2);    // 1
Math.log2(1);    // 0
Math.log2(0);    // -Infinity
Math.log2(-2);   // NaN
Math.log2(1024); // 10
//三角函數方法
Math.sinh(3) //返回x的雙曲正弦（hyperbolic sine）
Math.cosh(3) //返回x的雙曲余弦（hyperbolic cosine）
Math.tanh(3)// 返回x的雙曲正切（hyperbolic tangent）
Math.asinh(3) //返回x的反雙曲正弦（inverse hyperbolic sine）
Math.acosh(3) //返回x的反雙曲余弦（inverse hyperbolic cosine）
Math.atanh(3) //返回x的反雙曲正切（inverse hyperbolic tangent）

</script>
</head>
<body>

</body>
</html>

View Code

此篇終，待續……

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds