ES6基礎知識

一、聲明變量

var a = 1; // var 是variable的簡寫，可以理解成變量的意思。 -----> 全局聲明，都可以拿到。
let b = 2; // let 在英文中是“讓”的意思，也可以理解為一種聲明的意思。 -----> 開啟部分作用域，只在當前作用域有效
const c = 3; //const 在英文中也是常量的意思。 ----->常量可以簡單理解為不變的量。聲明之后不可改變

二、變量的解構賦值

1、定義

ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。

2、數組的解構賦值

  let [a,b,c]=[1,2,3]
    // 等價于下面的單獨賦值
    // let a = 1;
    // let b = 2;
    // let c = 3;
    console.log(a,b,c) // 1 2 3

3、 對象的解構賦值


let {foo,bar} = {foo:'小花',bar:'大花'};
console.log(foo+bar); //大花小花

let foo;
// {foo} = {foo:'小花'}; 當提前定義過變量時，解構會報錯，需要使用()包裹
({foo} = {foo:'小花'});
console.log(foo); //小花

4、字符串的解構

const [a,b,c,d,e,f]="這是一個測試";
console.log(a);//這
console.log(b);//是
console.log(c);//一
console.log(d);//個
console.log(e);//測
console.log(f);//試

5、解構的默認值

   let [a,b="小花"]=['大花']
    // 此時 對a進行了賦值， b未賦值，則給默認值'小花'
    console.log(a + b); // 大花小花
    
    // 需要注意的是undefined和null的區別：

    let [a,b="小花"]=['大花',undefined];
    console.log(a + b); // 大花小花


    let [a,b="小花"]=['大花',null];
    console.log( a + b); //大花null

注意：
1、數組模式和賦值模式統一; 即 等號左邊和等號右邊的形式要統一，如果等號兩邊形式不一樣，很可能獲得undefined或者直接報錯。
2、需要注意的是undefined和null的區別

三、擴展運算符和rest運算符

1、對象擴展運算符（…）

  //可以傳入多個值，并且就算方法中引用多了也不會報錯
    function xiaohua(...arg){
        console.log(arg[0]);
        console.log(arg[1]);
        console.log(arg[2]);
        console.log(arg[3]);
    
    }
    xiaohua(1,2,3); // 1 2 3 undefined

數組賦值，將arr1的值賦值給arr2，然后我們改變arr2的值，你會發現arr1的值也改變了，因為我們這是對內存堆棧的引用，而不是真正的賦值。

    let arr1 = ['www', 'baidu', 'com'];
    let arr2 = arr1;
    console.log(arr2);//["www", "baidu", "com"]
    arr2.push('xiaohua');
    console.log(arr1, 'arr1');//["www", "baidu", "com", "xiaohua"] "arr1"
    console.log(arr2, 'arr2');//["www", "baidu", "com", "xiaohua"] "arr2"

利用對象擴展運算符簡單的解決這個問題，此時arr1的值沒有改變

    let arr1 = ['www', 'baidu', 'com'];
    let arr2 = [...arr1];
    console.log(arr2); //["www", "baidu", "com"]
    arr2.push('xiaohua');
    console.log(arr1, 'arr1'); //["www", "baidu", "com"] "arr1"
    console.log(arr2, 'arr2'); //["www", "baidu", "com", "xiaohua"] "arr2"

2、rest運算符

    function ceshi(first,...arg){
        console.log(arg);
    }
    ceshi('no','i','l','o','v','e','y','o','u');//["i", "l", "o", "v", "e", "y", "o", "u"]
    // rest運算符 可以用 ... 表示，運算符把逗號隔開的值序列組合成一個數組

其中for循環可以用 for...of；for…of的循環可以避免我們開拓內存空間，增加代碼運行效率。 結果如下圖：

    function ceshi(first,...arg){
        for(let val of arg){
            console.log(val);
        }
    }
    ceshi('no','i','l','o','v','e','y','o','u');
image.png

四、字符串模板

1、字符串拼接

支持html標簽；支持運算符;結果如下：

    let a = '大花';
    let c = '小花';
    let b = `${a}不喜歡${c}</br>${c}喜歡${a}</br>`;
    let d = 1;
    let e = 2;
    let num = `${d+e}`
    document.write(b);
    document.write(num);
image.png

2、新增的方法

1、indexOf('a') --------- 判斷字符串是否存在'a',不存在返回 -1，存在返回索引
2、includes('前端') -------- 判斷字符串是否存在'前端',存在返回 true，不是返回 false
3、startsWith(':') ---------- 判斷字符串是否以':'開頭, 是返回 true，不是返回 false
4、endsWith(':') ----------- 判斷字符串是否以':'結尾, 是返回 true, 不是返回 false
5、repeat() ---------------- 重復字符

    let str = ':一個不愛吃飯的前端不是一個好廚子?'
    console.log(str.indexOf('a'));// -1
    console.log(str.includes('前端'));//true
    console.log(str.startsWith(':'));//true
    console.log(str.endsWith(':'));//false
    console.log('吃飯|'.repeat(3));//吃飯|吃飯|吃飯|

五、ES6數字操作

  • 1、可以使用Number.isFinite( )來進行數字驗證，只要是數字，不論是浮點型還是整形都會返回true，其他時候會返回false
  • 2、NaN是特殊的非數字，可以使用Number.isNaN()來進行驗證。下邊的代碼控制臺返回了true。
  • 3、判斷是否為整數Number.isInteger(xx)
  • 4、整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx)
  • 5、最大安全整數：Number.MAX_SAFE_INTEGER；最小安全整數 ： Number.MIN_SAFE_INTEGER
  • 6、安全整數判斷isSafeInteger( )

六、新增的數組知識

1、Array.from()：將json字符串轉化為數組

    let json = {
        '0': '我',
        '1': '好',
        '2': '累啊',
        length: 3
    }

    let arr = Array.from(json);
    console.log(arr) //["我", "好", "累啊"]

2、Array.of(): 它負責把一堆文本或者變量轉換成數組。

    let arr = Array.of(3, 4, 5, 6);
    console.log(arr); //[3, 4, 5, 6]

3、find()方法是從數組中查找

    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    let cy =  arr.find(function (value, index, arr) {
        // value：表示當前查找的值。
        // index：表示當前查找的數組索引。
        // arr：表示當前數組。
        return value > 5;
    })
    console.log(cy);//6;如果找不到會顯示undefined

4、fill()方法的作用是把數組進行填充，它接收三個參數，第一個參數是填充的變量，第二個是開始填充的位置，第三個是填充到的位置

    let arr = [0, 1, 2, 3, 4, 5, 6];
    arr.fill('小花', 2, 5);
    console.log(arr);// [0, 1, "小花", "小花", "小花", 5, 6]

5、數組遍歷

    let arr = ['大花', '小花', '大小花']
    // 獲取的是 key
    // for (let item of arr) {
    //     console.log(item);
    // }

    // 獲取的是 index
    // for(let index of arr.keys()){
    //     console.log(index)
    // }
    // 獲取的是 index 和 key
    // for (let [index, val] of arr.entries()) {
    //     console.log(index + ':' + val);
    // }

    //entries()實例方式生成的是Iterator形式的數組，那這種形式的好處就是可以讓我們在需要時用next()手動跳轉到下一個值。
    //不理解也不知道什么情況下需要使用。
    let list=arr.entries();
    console.log(list.next().value);//[0, "大花"]
    console.log(list.next().value);//[1, "小花"]
    console.log(list.next().value);//[2, "大小花"]

七、ES6中的箭頭函數和擴展

1、函數默認值、拋出錯誤、嚴謹模式（嚴謹模式與默認值不能同時使用）

//函數參數傳遞默認值
function add1(a,b=1){
    return a+b;
}
console.log(add1(1));
//關于函數的{}
//如果函數體內只有一條語句，則可以省略{}，否則不可省略
//(a,b=1)是指這里b參數有個默認值，若b不傳實參，則b的值為1

//主動拋出錯誤
function add2(a,b=1){
   //'use strict'//開啟嚴謹模式
    if(a == 0){
        throw new Error('This is error')
    }
     return a+b;
}

console.log(add2(0));
console.log(add2.length);//獲取參數的個數
//經常使用嚴謹模式來進行編程，但是必須寫在代碼最上邊，相當于全局使用。在ES6中我們可以寫在函數體中，相當于針對函數來使用。
//如果你使用了默認值，再使用嚴謹模式的話，就會有沖突，所以我們要取消默認值的操作，這時候你在運行就正常了。
//箭頭函數不能當構造函數進行使用

2、ES6中的函數和數組補漏

  • 1、對象的函數解構
// 對象的函數解構
 let json = {
    a: '測試'
  }

  function fun({a,b = '1'}) {
    console.log(a, b);//測試 1
  }
  fun(json);
//在調用接口的時候，有的時候可能是需要傳遞多個參數的，這時使用這個寫法就不用一個一個傳遞參數了。個人而言，看這段代碼實在不知道什么時候可以用，但是好像項目中又用到了。迷茫ing...
  • 2、in的用法

in是用來判斷對象或者數組中是否存在某個值的。我們先來看一下用in如何判斷對象里是否有某個值。
對象中是否存在某個屬性名；數組下標位置是否為空。

 let obj={
    a:'啊',
    c: '照片詳情',
    b:'哦'
  }
  console.log('d' in obj);  //false


let arr=['喜歡','毛不易'];
  console.log(0 in arr);  // true
//0是指數組下標位置為0是否為空。
  • 3、數組的遍歷方法(forEach,filter,some,map)
 console.log('------forEach遍歷數組------')
//forEach循環的特點是會自動省略為空的數組元素，相當于直接給我們篩空了。當是有時候也會給我們幫倒忙。
  let arr=['毛不易','是', '', '小可愛'];
  arr.forEach((val,index)=>console.log(index,val));
  console.log('-----filter遍歷數組--------')
  arr.filter((val,index)=>console.log(index,val));
  console.log('-----some遍歷數組--------')
  arr.some((val,index)=>console.log(index,val));
  console.log('-----map遍歷數組--------')
  arr.map((val,index)=>console.log(index,val))
  console.log('-----map替換數組--------')
  console.log(arr.map(x=>'花花'));
image.png
  • 4、數組轉化為字符串
  let arr=['毛不易','是', '', '小可愛'];
  console.log("-----數組轉換為字符串------");
  console.log(arr.join('|'), '//自定義字符');//自定義字符
  console.log(arr.toString(),'//字符為,');//字符為,'
image.png

八、ES6中的對象

1、對象賦值

// 對象賦值
  let nickname = "花花";
  let name = '華晨宇';
  var obj = {nickname,name};
  console.log(obj);  // {nickname: "花花", name: "華晨宇"}

2、獲取[key]值

let key = 'nickname';
  var obj = {
    [key]: '花花',
    name: '華晨宇'
  }
  console.log(obj.nickname); //花花
  console.log(obj.name); //華晨宇

3、自定義對象方法

  let person = {
    name: '老師',
    introduce: function (name, address) {
      return `我叫${name}, 來自${address}`
    }
  }
  console.log(person.introduce('小花', '安徽'));//我叫小花, 來自安徽
  console.log(person.introduce('da花', '南京'));//我叫da花, 來自南京

4、對象比較 Object.is()

console.log(Object.is(obj.name,person.name)); //false

5、=== 與 Object.is() 的區別

=== 同值相等 Object.is()嚴格相等

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

6、Object.assign( )合并對象

console.log(Object.assign(obj, person));// 此時 后面對象的name值是會覆蓋前面對象的name值
image.png

7、Symbol

Symbol對象元素的保護作用
在對象中有很多值，但是循環輸出時，并不希望全部輸出，那我們就可以使用Symbol進行保護。

  let person = {
    name: '老師',
    sex: '女',
    introduce: function (name, address) {
      return `我叫${name}, 來自${address}`
    }
  }
  let age = Symbol();
  person[age] = 12;
  for(let item in person) {
    console.log(person[item]);
  }
//此時不會輸出age，對age進行了保護。
//若想輸出，此時直接打印 person[age]即可
image.png

九、 set 和 weakSet 數據結構

1、set

    // set聲明（去重的數組）
    let setArr = new Set(['小花','是一個','可愛的','小朋友','小朋友']);
    console.log(setArr);//Set {"小花", "是一個", "可愛的", "小朋友"}
    // 增加
    setArr.add('好可愛');  
    console.log(setArr); //Set {"小花", "是一個", "可愛的", "小朋友", "好可愛"}
    // 刪除
    setArr.delete('好可愛');
    console.log(setArr); //Set {"小花", "是一個", "可愛的", "小朋友"}
    // 查找
    console.log(setArr.has('可愛的'));//true
    // for ... of 循環
    for (let item of setArr){
      console.log(item);
    }
    // forEach
    setArr.forEach((value)=>console.log(value));
    // 長度
    console.log(setArr.size)
    // 刪除全部
    setArr.clear();
    console.log(setArray);// setArray is not defined

十、函數式編程

函數式編程(縮寫為 FP)是一種通過組合純函數來構建軟件的過程，避免狀態共享、可變數據及副作用的產生。

1、函數式編程定義

image.png

2、函數式編程的特點

    1. 函數是"第一等公民"
      把它想象成一個數據類型，可以聲明、賦值給其他變量、當參數傳給函數等等
    1. 只用"表達式"，不用"語句"
      "表達式"（expression）：是一個單純的運算過程，總是有返回值；
      "語句"（statement）：是執行某種操作，沒有返回值。
      函數式編程要求，只使用表達式，不使用語句。也就是說，每一步都是單純的運算，而且都有返回值。
    1. 沒有"副作用"
      所謂"副作用"，指的是函數內部與外部互動（最典型的情況，就是修改全局變量的值），產生運算以外的其他結果。
      函數式編程強調沒有"副作用"，意味著函數要保持獨立，所有功能就是返回一個新的值，沒有其他行為，尤其是不得修改外部變量的值。
    1. 不修改狀態
      函數式編程只是返回新的值，不修改系統變量。因此，不修改變量，也是它的一個重要特點。
    1. 引用透明
      引用透明（Referential transparency），指的是函數的運行不依賴于外部變量或"狀態"，只依賴于輸入的參數，任何時候只要參數相同，引用函數所得到的返回值總是相同的。
      方法傳入的參數類型與返回值類型是一樣的（類比map，same方法，傳入一個數組同時返回的也是一個數組） 
  add(x, y) {
    return x + y
  }
  multiply(x, y) {
    return x * y
  }
  subtract(x, y) {
    return x - y
  }
console.log(subtract(multiply(add(1,2), 3), 4))//5
image.png
add(x, y) {
    return {
      multiply: (z) => {
        return {
          subtract: (a) => {
            return (x + y) * z - a
          }
        }
      }
    }
  }
console.log(add(1, 2).multiply(3).subtract(4))//5

來自：http://www.ruanyifeng.com/blog/2012/04/functional_programming.html

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、新的聲明方式 以前我們在聲明時只有一種方法，就是使用var來進行聲明，ES6對聲明的進行了擴展，現在可以有三種...
    令武閱讀 1,017評論 0贊 7
  • 目錄 1-利用babel將es6語法轉換為es5 2-新的聲明方式 3-變量的解構賦值 4-擴展運算符和rest運...
    strugglexiang閱讀 491評論 1贊 1
  • 1. 塊作用域 作用域指的是變量的作用范圍，js本身具有了全局作用域和函數作用域，es6中新增了塊作用域。塊作用域...
    Cuckoos定投筆記閱讀 240評論 0贊 1
  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,807評論 0贊 1
  • 三，字符串擴展 3.1 Unicode表示法 ES6 做出了改進，只要將碼點放入大括號，就能正確解讀該字符。有了這...
    eastbaby閱讀 1,561評論 0贊 8