ES6 基礎語法

ES6

ES6介紹

ECMAScript 6.0 是 JavaScript 語言的下一代標準,已經在 2015 年 6 月正式發布了也叫ECMAScript 2015。它的目標,是使得 JavaScript 語言可以用來編寫復雜的大型應用程序,成為企業級開發語言

let 和 const 命令

let

ES6 新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內有效。

  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined
const 常量

const聲明一個只讀的常量。一旦聲明,常量的值就不能改變

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

-------------------------------------------------
const foo = {};

// 為 foo 添加一個屬性,可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個對象,就會報錯
foo = {}; // TypeError: "foo" is read-only

變量的解構賦值

數組的解構
let a = 1;
let b = 2;
let c = 3;

ES6 允許寫成下面這樣。
let [a, b, c] = [1, 2, 3];
對象的解構賦值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
// foo與bar  必須與對對象內部的屬性名相同 不計順序
模板字符串
let place = "world"
//通過``使用模板字符串  用${  }插入變量
let msg = `Hello, ${place}`; //Hollo,world

對象的擴展

屬性的簡潔表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

--------------------------------------
function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

除了屬性簡寫,方法也可以簡寫。

const o = {
  method() {
    return "Hello!";
  }
};
// 等同于
const o = {
  method: function() {
    return "Hello!";
  }
};

------------------------------------------
let birth = '2000/01/01';
const Person = {
  name: '張三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};

函數的擴展

函數的擴展 ES6 允許使用“箭頭”(=>)定義函數。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭頭函數的代碼塊部分多于一條語句,就要使用大括號將它們括起來,并且使用return語句返回。

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

箭頭函數有幾個使用注意點
  • 函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象
  • 不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤
  • 不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。
  • 第一點尤其值得注意。this對象的指向是可變的,但是在箭頭函數中,它是固定的

Promise

Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現,ES6 將其寫進了語言標準,統一了用法,原生提供了Promise對象。

基本用法 ES6 規定,Promise對象是一個構造函數,用來生成Promise實例。下面代碼創造了一個Promise實例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

async/ awite

ES2017 標準引入了 async 函數,使得異步操作變得更加方便。async 函數是什么?一句話,它就是 Generator 函數的語法糖。

基本用法

async函數返回一個 Promise 對象,可以使用then方法添加回調函數。當函數執行的時候,一旦遇到await就會先返回,等到異步操作完成,再接著執行函數體內后面的語句。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);
上面代碼指定 50 毫秒以后,輸出hello world。

返回 Promise 對象
async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

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

推薦閱讀更多精彩內容

  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,808評論 0 1
  • 以下內容是我在學習和研究ES6時,對ES6的特性、重點和注意事項的提取、精練和總結,可以做為ES6特性的字典;在本...
    科研者閱讀 3,150評論 2 9
  • 1、新的聲明方式 以前我們在聲明時只有一種方法,就是使用var來進行聲明,ES6對聲明的進行了擴展,現在可以有三種...
    令武閱讀 1,031評論 0 7
  • 有時候制定雄偉的計劃之所以會失敗!是因為本我在作祟! 科普一下,弗洛伊德把人分為本我(即唯樂主義,追求舒適、快樂、...
    軟妹子的日常閱讀 192評論 0 0
  • WIN版本REDIS下載 https://github.com/MicrosoftArchive/redis/re...
    LAMYMAY閱讀 165評論 0 0