常用的ES6

NikoManiac 發(fā)布于2019-08-23 14:13 / 3489人閱讀

摘要：和作用域只在聲明指令的塊級作用域內(nèi)有效。和導(dǎo)入模塊導(dǎo)出模塊導(dǎo)出默認(rèn)有且只有一個(gè)默認(rèn)全部導(dǎo)入名字可以修改我是一條華麗的分界線部分導(dǎo)出導(dǎo)入部分名字必須和定義的名字一樣。

1 let 和 const

作用域：只在聲明指令的塊級作用域內(nèi)有效。
① let所聲明的變量可以改變，值和類型都可以改變，沒有限制。

let a = 123
a = 456 // 正確，可以改變
let b = [123]
b = [456] // 正確，可以改變

② const聲明的變量不可改變值，這意味著const一旦聲明變量必須立即初始化，不能以后賦值。

const a ;//報(bào)錯(cuò),一旦聲明變量，應(yīng)該立即賦值！！
const b = 2;
b = 3//報(bào)錯(cuò)，因?yàn)槎x常量之后不能成重新賦值??！

對于復(fù)合類型的變量，如數(shù)組和對象，變量名不指向數(shù)據(jù)，而是指向數(shù)據(jù)所在的地址。const命令只是保證變量名指向的地址不變，并不保證該地址的數(shù)據(jù)不變，所以將一個(gè)對象聲明為常量必須非常小心

const names = [];
names = [1,2,3] //出錯(cuò)，因?yàn)樽兞縩ames指向的地址不能發(fā)生改變，應(yīng)始終指向[]所在的地址！?。1,2,3]與[]不是同一個(gè)地址
const names = [];
names = [1,2,3] //出錯(cuò)，因?yàn)樽兞縩ames指向的地址不能發(fā)生改變，應(yīng)始終指向[]所在的地址?。?！[1,2,3]與[]不是同一個(gè)地址
//不會(huì)報(bào)錯(cuò)，因?yàn)閚ames指向的地址不變，改變的只是內(nèi)部數(shù)據(jù)

const names = [];
names[0] = 1
names[1] = 2
names[2] = 3

2 數(shù)組

一次性聲明多個(gè)變量:

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

3 對象的合并：

Object.assign()方法用于對象的合并，將原對象（source）的所有可枚舉屬性復(fù)制到目標(biāo)對象(target)

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對象，后面的參數(shù)都是源對象。

注意，如果目標(biāo)對象與源對象有同名屬性，或多個(gè)源對象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.assign 方法實(shí)行的是淺拷貝，而不是深拷貝。
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

4 Promise對象

Promise 是異步編程的一種解決方案。

5 import 和 export

import 導(dǎo)入模塊、export 導(dǎo)出模塊

// example2.js  // 導(dǎo)出默認(rèn), 有且只有一個(gè)默認(rèn)
export default const example2 = {
  name : "my name",
  age : "my age",
  getName  = function(){  return "my name" }
}
//全部導(dǎo)入 // 名字可以修改
import people from "./example2.js"

-------------------我是一條華麗的分界線---------------------------

// example1.js // 部分導(dǎo)出
export let name  = "my name"
export let age  = "my age"
export let getName  = function(){ return "my name"}

// 導(dǎo)入部分 // 名字必須和 定義的名字一樣。
import  {name, age} from "./example1.js"

//有一種特殊情況，即允許你將整個(gè)模塊當(dāng)作單一對象進(jìn)行導(dǎo)入
//該模塊的所有導(dǎo)出都會(huì)作為對象的屬性存在

import * as example from "./example1.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

-------------------我是一條華麗的分界線---------------------------

// example3.js  // 有導(dǎo)出默認(rèn), 有且只有一個(gè)默認(rèn)，// 又有部分導(dǎo)出
export default const example3 = {
  birthday : "2018 09 20"
}
export let name  = "my name"
export let age  = "my age"
export let getName  = function(){ return "my name"}

// 導(dǎo)入默認(rèn)與部分
import example3, {name, age} from "./example1.js"

6 字符串拼接

Es6的這種新的“字符串拼接”方法比較簡單，沒有繁瑣的加號和引號，只需要在所需要的字符串“邊界”加上``即可。

    var name = "Datura";
    var age = 18;
    var sex = "nü";
    var hobby = "敲代碼";
    var str1 = `我是${name}，今年${age}歲，性別${sex}的了，愛好${hobby}`; //注意此處有兩個(gè)“ `` ”
    var str2 = "我是"+name+"，今年"+age+"歲，性別"+sex+"，愛好"+hobby+""; //這個(gè)是原來的寫法
    alert(st1r);

7 Map對象

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Map，Map結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)。
我們來新建一個(gè)Map對象，并為其賦值：

let map = new Map();
map.set("a","apple");
map.set("b","banana");
console.log(map); //   Map {"a" => "apple", "b" => "banana"}

1 獲取map里面的值：
獲取Map對象里面的值map.get(‘b’)： banana

2 刪除Map對象里面的值map.delete()

3 如果我們只需要map里面的值：

 for(let name of map.values()){
    console.log(name);  ////apple   banana
  }

4 如果我們只需要map里面的key

  for(let name of map.keys()){
    console.log(name);  //a b
  }

7 for 循環(huán)

一： for in循環(huán)


    //循環(huán)數(shù)組
    let arr = [12,5,8];
    for(let i = 0;i
二： for of循環(huán)
//循環(huán)數(shù)組
let arr = [12,5,8];
for(let name of arr){
    console.log(name);  // 12 5 8
}
//循環(huán)json數(shù)據(jù)
let json = {a:"apple",b:"banana"};
for(let name of json){
    console.log(name);
}
//報(bào)錯(cuò)，因?yàn)椴荒苡胒or ...of...來循環(huán)json數(shù)據(jù)


8 箭頭函數(shù)
我們先回顧下ES5函數(shù)定義與調(diào)用：
var show = function(){
        alert(12);  
    };
    show();   // 12
const show = () =>{
        alert(12);  
    };
    show();  // 12 
//個(gè)人理解：這里將function關(guān)鍵字去掉然后在“()”后面加一個(gè)“=>”