實用的es6總結

qqlcbb 發布于2019-08-23 12:07 / 458人閱讀

摘要：如果不是，會被轉成一個立即的對象函數內部語句返回的值，會成為方法回調函數的參數和導入導出默認有且只有一個默認導入全部并且設置別名多個導出很多模塊導入部分導出新的原始數據類型，防止屬性名沖突，可以接受一個字符串作為參數，表示對實例的描述。

常用的es6記錄 變量聲明const和let

let：塊級元素,不允許在相同作用域內，重復聲明同一個變量
const：對象所指向的地址不能改變，而變量成員是可以修改的

解構賦值

let [a, b, c] = [1, 2, 3];
let { foo, bar } = { foo: "aaa", bar: "bbb" };

Spread Operator 展開運算符

就是所謂的...
復制合并數組和對象

const arr1= [1, 2];
//復制數組
const arr2= [...arr1];(對象的子對象arr2改變不會影響arr1，后面子對象會影響)
//合并數組
[...arr1,...arr2]

有時候我們想獲取數組或者對象除了前幾項或者除了某幾項的其他項

//對象也是類似下面這樣
let number = [1,2,3,4,5]
let  [first, ...rest] = number//2,3,4,5

字符串擴展

模板字符串：將表達式嵌入字符串中進行拼接。用${}來界定

var str = "hello";
var result = `${str} world
`;

padStart：用于頭部補全，相對的padEnd為尾部補全

"1".padStart(2, "0");用于日期的補全工作

數值擴展

用來判斷一個數值是否為整數：Number.isInteger()
Math函數的擴展 Math.trunc 去除小數部分

數組擴展

Array.of()將一組值轉換成數組
Math.max(...[14, 3, 77]),取得最大值

函數擴展

為函數的參數設置默認值

對象擴展

定義對象的函數可以省略冒號與 function 關鍵字
Object.assign()：進行淺復制和同名屬性的替換(源對象某個屬性的值是對象,如果改變會反映到目標對象)
Object.is()：比較兩個值是否相等
Object.values(),Object.keys()通過value或者key生成的數組

箭頭函數

使用“箭頭”（=>）定義函數
函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象

Promise

避免了層層嵌套的回調函數,用于定時器、ajax中

Promise對象是一個構造函數，用來生成Promise實例，Promise 新建后立即執行，Promise實例的狀態變為resolved，就會觸發then方法綁定的回調函數

接收的函數參數是同步執行的，但是then方法中的回調函數執行則是異步的

function result(value){
    return new Promise(function(resolve,reject){
        if(value){
            resolve("你成功了");
        }else{
            reject("你失敗了");
        }
    });
}
也可以直接定義return Promise.reject("xxx");
result(true).then(function(value){
    console.log(value);
}).catch(function(value){
    console.log(value);
});
console.log("先輸出");

async

async函數返回一個Promise對象，可以使用then方法添加回調函數

await表示緊跟在后面的表達式需要等待結果(異步操作),拿到結果才能進入下一步,await只能出現在async函數中

await命令后面是一個Promise對象。如果不是，會被轉成一個立即resolve的 Promise對象

async函數內部return語句返回的值，會成為then方法回調函數的參數

function timer(){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve,1500);
    });
}
async function go(){
    await timer().then(()=>{console.log("timer")});
    console.log("go");
}
go();

import 和 export

//導入
import people from "./example"
// 導出默認, 有且只有一個默認
export default App

//導入全部并且設置別名
import * as example from "./example"
//n多個 export 導出很多模塊

//導入部分
import {name, age} from "./example"
//導出
export name;
export age;

Symbol

新的原始數據類型，防止屬性名沖突，可以接受一個字符串作為參數，表示對 Symbol 實例的描述。

let set = Symbol("set");
let a = {};
a[set] = "hello";

注意：1、Symbol值作為對象屬性名時，不能用點運算符。2、該屬性不會出現在for...in、for...of循環中

結束，撒花~~~

github

歡迎大家加star~~
https://github.com/ymblog/book

云服務器 GPU云服務器實用的語言編程超實用的代碼段小程序的實用方法實用的小程序

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

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

ES6、7、8常用新特性總結(超實用)

摘要：定義類常用新特性在一個數組或者列表中檢查是否存在一個值還能在字符串中使用除了增強了可讀性語義化，實際上給開發者返回布爾值，而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于變量聲明，但是作用域為局部 { let a = 10; var b = 1; } 在函數外部可以獲取到b，獲取不到a，因此例如for循環計數器就適...

atinosun 2019-08-23 15:10 評論0 收藏0
ES6、7、8常用新特性總結(超實用)

摘要：定義類常用新特性在一個數組或者列表中檢查是否存在一個值還能在字符串中使用除了增強了可讀性語義化，實際上給開發者返回布爾值，而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于變量聲明，但是作用域為局部 { let a = 10; var b = 1; } 在函數外部可以獲取到b，獲取不到a，因此例如for循環計數器就適...

Xufc 2019-08-02 14:13 評論0 收藏0
7個javascript實用小技巧

摘要：每種編程語言都有一些黑魔法或者說小技巧，也不例外，大部分是借助或者瀏覽器新特性實現。下面介紹的個實用小技巧，相信其中有些你一定用過。當然不管語言如何變化，我們總能在編程中總結一些小技巧來精簡代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧，JS也不例外，大部分是借...

tinysun1234 2019-08-23 16:59 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0