常用的ES6

NikoManiac 發布于2019-08-23 14:13 / 3434人閱讀

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

1 let 和 const

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

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

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

const a ;//報錯,一旦聲明變量，應該立即賦值！！
const b = 2;
b = 3//報錯，因為定義常量之后不能成重新賦值！！

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

const names = [];
names = [1,2,3] //出錯，因為變量names指向的地址不能發生改變，應始終指向[]所在的地址！！！[1,2,3]與[]不是同一個地址
const names = [];
names = [1,2,3] //出錯，因為變量names指向的地址不能發生改變，應始終指向[]所在的地址！！！[1,2,3]與[]不是同一個地址
//不會報錯，因為names指向的地址不變，改變的只是內部數據

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

2 數組

一次性聲明多個變量:

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

3 對象的合并：

Object.assign()方法用于對象的合并，將原對象（source）的所有可枚舉屬性復制到目標對象(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方法的第一個參數是目標對象，后面的參數都是源對象。

注意，如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。

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 方法實行的是淺拷貝，而不是深拷貝。
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 導入模塊、export 導出模塊

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

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

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

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

//有一種特殊情況，即允許你將整個模塊當作單一對象進行導入
//該模塊的所有導出都會作為對象的屬性存在

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

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

// example3.js  // 有導出默認, 有且只有一個默認，// 又有部分導出
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"}

// 導入默認與部分
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}`; //注意此處有兩個“ `` ”
    var str2 = "我是"+name+"，今年"+age+"歲，性別"+sex+"，愛好"+hobby+""; //這個是原來的寫法
    alert(st1r);

7 Map對象

ES6提供了新的數據結構Map，Map結構提供了“值—值”的對應，是一種更完善的Hash結構實現。
我們來新建一個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 循環

一： for in循環


    //循環數組
    let arr = [12,5,8];
    for(let i = 0;i
二： for of循環
//循環數組
let arr = [12,5,8];
for(let name of arr){
    console.log(name);  // 12 5 8
}
//循環json數據
let json = {a:"apple",b:"banana"};
for(let name of json){
    console.log(name);
}
//報錯，因為不能用for ...of...來循環json數據


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

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

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

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

[ ES6 ] 快速掌握常用 ES6 （一）

摘要：常量變量先說說常量和變量的概念吧，常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的，變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。常用實例交換變量的值提取數據解構賦值對提取對象中的數據，尤其有用。本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》學習 20% 的知識完成 80% 的工作關于 ...

ispring 2019-08-23 14:01 評論0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》本篇文章是對之前文章...

hidogs 2019-08-23 14:07 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
工作中常用es6+特性

摘要：結合工作中使用情況，簡單對進行一些復習總結，包括常用的語法，等，以及短時間內要上手需要重點學習的知識點不同工作環境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下，是一個標準化組織，他們結合工作中使用情況，簡單對es6進行一些復習總結，包括常用的語法，api等，以及短時間內要上手需要重點學習的知識點（不同工作環境可能有一些差別），...

xcold 2019-08-23 18:39 評論0 收藏0
ES6常用語法整合

摘要：說到肯定是先介紹了，據阮一峰老師介紹到，是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。輸出其他還有等可以查看阮一峰的入門 ES6也出來有一會時間了，他新增的語法糖也的確大大提高了開發者的效率，今天就總結一些自己用到最多的。說到ES6肯定是先介紹Babel了，據阮一峰老師介紹到，Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。這意...

張遷 2019-08-20 15:31 評論0 收藏0
實例感受-es6的常用語法和優越性

摘要：在重寫完了的時候，就個人總結了一下常用的一些常用的語法和比優越的方面。參數字符串是否在原字符串的尾部返回布爾值。第一個大于的成員的索引方法，用于某個數組是否包含給定的值，返回一個布爾值。 1.前言前幾天，用es6的語法重寫了我的一個代碼庫，說是重寫，其實改動的并不多，工作量不大。在重寫完了的時候，就個人總結了一下es6常用的一些常用的語法和比es5優越的方面。下面提到的語法可能也就是...

fsmStudy 2019-08-21 17:36 評論0 收藏0