<strike id="myyuu"></strike>

<blockquote id="myyuu"></blockquote>

<fieldset id="myyuu"></fieldset>

ES6入門到進階（一）：let、解構賦值、字符串模板、函數

WalkerXu 發布于2019-08-26 11:47 / 1229人閱讀

摘要：注意問題，不在是運行時所在的對象箭頭函數里面沒有用箭頭函數不能當構造函數下一篇入門到進階二循環數組對象參考視頻資料經典入門到進階

一、簡介

ES6 -> ECMA 標準

ES6 -> 2015年6月 ES6.0

每年6月份，發布一個版本

ES6環境:

webpack3.x

Traceur

二、let、const 2.1 關于定義(聲明)變量

var a=12; 之前

let let a=12 相當于之前的 var

const 常量，定義好了不能改變

2.2 作用域:

全局作用域

函數作用域

2.3 let注意

1.沒有預解析，不存在變量提升

在代碼塊內，只要let定義變量，在之前使用，都是報錯
先定義完，再使用

2.同一個作用域里， 不能重復定義變量，可以賦值

3.for循環，for循環里面是父級作用域，里面又一個

for(let i = 0; i<3; i++){
           let i = "abc";
           console.log(i);
       }

2.4 塊級作用域:

    {
        //塊級作用域
    }
    
    {{{{let a = 12}}}}

    if(){xx}
    for(){}
    while(){}

2.5 const: 特性和let一樣

const定義變量不能修改

const定義完變量，必須有值，不能后賦值，不能修改,一般定義配置文件。
但是對象是可以修改的，因為它是引用

凍結：Object.freeze(對象)，就可以不被修改。

    const config={
        host:
        username:
        password:
        version:
    }


{
    //TODO
}

IIFE，立即執行匿名函數
(function(){
    //TODO
})()

建議:

    以后 就用 let  不要在使用var
    
    const http = require("http");

三、解構賦值(重要，常用)

*  非常有用，特別在做數據交互  ajax

3.1 格式

let [a,b,c] =[12,5, 6];

注意: 左右兩邊，結構格式要保持一致

json:
    let {name,age, job} = {
        name:"Strive",
        age:18,
        job:"碼畜"
    };

別名：

    let {name:n,age:g, job:a} = json;

3.2 解構時候可以給默認值

    let [a,b, c="默認值"] = ["aaa","bbb"];

注意：null和undefined，null是一個對象，有值

let a = 12;
let b = 5;

    

import {a,b,c} from "./mod"

四、字符串模板(常用) 4.1 字符串模板：``

    優點: 可以隨意換行
    `${變量名字}`

字符串連接（以前用：+ ），要死人的。
現在：${變量名字}

let name ="Strive";
        let age = 18;
        let str = `這個人叫${name}, 年齡是 ${age}歲`;

4.2 關于字符串一些東西

字符串查找:

str.indexOf(要找的東西)   返回索引(位置) ，沒找到返回-1
str.includes(要找的東西)   返回值  true/false

判斷瀏覽器: includes

字符串是否以誰開頭:

        str.startsWith(檢測東西)

        檢測地址

字符串是否以誰結尾:

        str.endsWith(檢測東西)

        .png

重復字符串:

        str.repeat(次數);

填充字符串:

    str.padStart(整個字符串長度, 填充東西)   往前填充
    str.padEnd(整個字符串長度, 填充東西)    往后填充

    str.padStart(str.length+padStr.length, padStr)

五、函數(重要) 5.1 函數變化

1. 函數默認參數
    function show({x=0,y=0}={}){
        console.log(x,y);
    }
    show()
2. 函數參數默認已經定義了，不能再使用let，const聲明
    function show(a=18){
        let a = 101;  //錯誤
        console.log(a);
    }
    show()

5.2 擴展運算符、Rest運算符:

擴展運算符：...

展開數組：

... :
    [1,2,3,4]  -> ... [1,2,3,4]  ->  1,2,3,4,5
...:
    1,2,3,4,5  -> ...1,2,3,4,5  ->  [1,2,3,4,5]

剩余參數: 必須放到最后

function show(a,b,...c){
    console.log(a,b);
    console.log(c);
}
show(1,2,3,4,5)

5.3 箭頭函數:(重要，常用)

let show = () => 1;

格式：

() => return東西

或者

() =>{
    語句
    return
}

例子：

var f = v => v;
//等同于
var f = function(v){
    return v;
}
var sum = (num1,num2) => num1 + num2;
//等同于

var sum = function(num1,num2){
    return num1 + num2;
}

[1,2,3].map(function (x) {
    return x * x;
});
//箭頭函數寫法
[1,2,3].map(x => x *x); //簡潔了許多

從例子我們可以看出，省略了function，花括號{}用=>代替了。這種寫法更簡潔了。

注意：

this問題, ，不在是運行時所在的對象

箭頭函數里面沒有arguments, 用 ‘...’

箭頭函數不能當構造函數

下一篇：ES6入門到進階（二）：循環、數組、對象

參考視頻資料：ES6經典入門到進階

GPU云服務器云服務器解構賦值解構函數 ES6入門 es6字符串擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107577.html

ES6入門到進階（二）：循環、數組、對象

摘要：優點按需加載可以寫中路徑也可以動態加以后默認就是嚴格模式，默認嚴格模式完參考視頻資料經典入門到進階上一篇：ES6入門到進階（一）：let、解構賦值、字符串模板、函數一、循環 ES5里面新增一些東西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

JerryZou 2019-08-26 11:47 評論0 收藏0
ES6知識拾遺，再讀ES6入門書籍總匯

摘要：凍結對象未定義就聲明的變量會默認為全局的變量，的變量都歸所有，命令命令命令聲明的全局變量，不屬于頂層對象的屬性即不會歸所有總結的六種聲明變量注意在瀏覽器環境指的是對象，在指的是對象。參數搭配的變量是一個數組，該變量將多余的參數放入數組中。 1.var,let,const區別答：(1).var有變量聲明提升，let&&const沒有，這樣導致了let,const必須聲明后才可以訪問...

thekingisalwaysluc 2019-08-23 18:30 評論0 收藏0
es6快速入門

摘要：快速入門簡介以下簡稱是語言的下一代標準，已經在年月正式發布了。而且聲明后必須立即初始化賦值，不能后面賦值。方法默認返回實例對象即，可以指定返回另外一個對象。參數搭配的變量是一個數組，該變量將多余的參數放入數組中。 es6快速入門 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6簡...

liujs 2019-08-20 14:39 評論0 收藏0
ES6學習總結（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經提到過屬性，表示的是引用類型實例的一個內部指針，指向該實例的構造函數的原型對象。半個月前就決定要將ES6的學習總結一遍，結果拖延癥一犯，半個月就過去了，現在補起來，慚愧慚愧。阮一峰的《ES6標準入門》這本書有300頁左右，除了幾個新的API和js語法的擴展,真正有價值的內容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
ES6

摘要：情況一情況二這兩種情況，根據的規定都是非法的。的作用域與命令相同只在聲明所在的塊級作用域內有效。因此，將一個對象聲明為常量必須非常小心。頂層對象的屬性與全局變量掛鉤，被認為時語言最大的設計敗筆之一。這是ES6的入門篇教程的筆記，網址：鏈接描述，以下內容中粗體+斜體表示大標題，粗體是小標題，還有一些重點；斜體表示對于自身，還需要下功夫學習的內容。這里面有一些自己的見解，所以若是發現問題...

AZmake 2019-08-23 18:33 評論0 收藏0