ES6語法總結
一.變量的結構賦值
二.屬性擴展
1.字符串擴展
1).chartAt返回指定字符es6
'abc'.charAt(0) // "a"
2).includes,startWith,endsWith判斷該字符串是否含有某字符shell
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//指定位置
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
3).repeat複製字符編程
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) //NaN等於0
4).padStart,padEnd補全字符json
1.常見用法，補充位數 '12'.padStart(10, '0') // "0000000012" 2.提示字符串格式 12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" 3.用空格補全 'x'.padStart(4) // ' x' 'x'.padEnd(4) // 'x
2.數值擴展
1).parseInt()和parseFloat()強轉字符串數組
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45
2).Number.isInteger()用來判斷一個值是否爲整數promise
//整數和浮點數是一樣的儲存方法 Number.isInteger(25) // true Number.isInteger(25.0) // true
3).Math.trunc方法用於去除一個數的小數部分，返回整數部分。服務器
Math.trunc(4.1) // 4
4).Math.sign方法用來判斷一個數究竟是正數、負數、仍是零。app
參數爲正數，返回+1； 參數爲負數，返回-1； 參數爲0，返回0； 參數爲-0，返回-0; 其餘值，返回NaN。
3.數組擴展
1).合併數組異步
// ES5的合併數組 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合併數組 [...arr1, ...arr2, ...arr3]
2).字符串轉數組async
[...'hello'] // [ "h", "e", "l", "l", "o" ]
4.對象擴展
1).對象的key爲可變時，使用括號
let obj = {
[propKey]: true,
['abc']: 123
};
2).Object.is判斷值是否嚴格相等，與===行爲基本一致
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.is('foo', 'foo')// true
Object.is({}, {})// false
3).Object.assign方法用於對象的合併（淺拷貝）
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
4).Object.keys()
返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷屬性的鍵名。
5).Object.values
返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷屬性的鍵值。
var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]
6).Object.entries
返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷屬性的鍵值對數組。
var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
4.Set擴展
1).基本用法
//Set.prototype.size：返回Set實例的成員總數。 s.size // 2 add(value)：添加某個值，返回Set結構自己。 delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。 has(value)：返回一個布爾值，表示該值是否爲Set的成員。 clear()：清除全部成員，沒有返回值。 s.add(1).add(2).add(2); s.has(1) // true s.delete(2); Array.from方法能夠將Set結構轉爲數組。 var items = new Set([1, 2, 3, 4, 5]); var array = Array.from(items);
2).遍歷方法
keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回調函數遍歷每一個成員，用於對每一個成員執行某種操做，沒有返回值。
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
for (let item of set.values()) {
console.log(item);
}
/**遍歷value默認等於
for (let x of set) {
console.log(x);
}
或者
let values = [...set];
*/
for (let item of set.entries()) {
console.log(item);
}
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
3).去除數組的重複值
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)];
4).數組的map和filter方法也能夠用於Set
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set結構：{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set結構：{2, 4}
5).實現並集、交集和差集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 並集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
5.map擴展
1).遍歷方法
keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回全部成員的遍歷器。
forEach()：遍歷Map的全部成員。
let map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// 等同於使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
2).遍歷和過濾
//合數組的map方法、filter方法，能夠實現Map的遍歷和過濾（Map自己沒有map和filter方法）。
let map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
let map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 產生Map結構 {1 => 'a', 2 => 'b'}
let map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 產生Map結構 {2 => '_a', 4 => '_b', 6 => '_c'}
3).map與其餘類型之間的相互轉換
http://es6.ruanyifeng.com/#docs/set-map
6.for...of循環
1).基本用法
//1.數組遍歷（能夠代替數組實例的forEach方法）
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
console.log(a); // 0 1 2 3 獲取key
}
for (let a of arr) {
console.log(a); // a b c d 獲取value
}
//2.遍歷map
var engines = new Set(["a":"Gecko","b":"Trident", "c":"Webkit", "d":"Webkit"]);
for (var [key,value] of engines) {
}
//3.遍歷set
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
}
//4.遍歷對象
var es6 = {
edition: 6,
committee: "TC39",
standard: "ECMA-262"
};
//不能直接使用for..of，使用Object.keys方法將對象的鍵名生成一個數組，而後遍歷這個數組。
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
//5.遍歷Generator函數
function *foo() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for (let v of foo()) {
console.log(v);
}
// 1 2 3 4 5
2).與其餘遍歷語法的比較
http://es6.ruanyifeng.com/#docs/iterator
三.Generator 函數
Generator函數是一個普通函數，可是有兩個特徵。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield語句，定義不一樣的內部狀態。
yield語句與return語句既有類似之處，也有區別。類似之處在於，都能返回緊跟在語句後面的那個表達式的值。區別在於每次遇到yield，函數暫停執行，下一次再從該位置繼續向後執行，而return語句不具有位置記憶的功能。一個函數裏面，只能執行一次（或者說一個）return語句，可是能夠執行屢次（或者說多個）yield語句。
yield句自己沒有返回值，或者說老是返回undefined。next方法能夠帶一個參數，該參數就會被看成上一個yield語句的返回值。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
//必須調用next,纔會執行下一個語句,yield是暫緩的意思
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
1.遍歷
//除了for...of循環之外，擴展運算符（...）、解構賦值和Array.from方法內部調用的
function* numbers () {
yield 1
yield 2
return 3
yield 4
}
// 擴展運算符
[...numbers()] // [1, 2]
// Array.from 方法
Array.from(numbers()) // [1, 2]
// 解構賦值
let [x, y] = numbers();
x // 1
y // 2
// for...of 循環
for (let n of numbers()) {
console.log(n)
}
// 1
// 2
2.yield*語句
//Generater函數內部，調用另外一個Generator函數，默認狀況下是沒有效果的。這個時候須要yield*調用
function* bar() {
yield 'x';
yield* foo();
yield 'y';
}
// 等同於
function* bar() {
yield 'x';
yield 'a';
yield 'b';
yield 'y';
}
3.做爲對象的屬性
能夠簡寫成下面的形式：
let obj = {
* myGeneratorMethod() {
···
}
};
完整形式：
let obj = {
myGeneratorMethod: function* () {
// ···
}
}
4.常見用法
1).普通暫緩執行
//Generator函數能夠不用yield語句，這時就變成了一個單純的暫緩執行函數。
function* f() {
console.log('執行了！')
}
var generator = f();
setTimeout(function () {
generator.next()
}, 2000);
2).切換UI狀態
function* loadUI() {
showLoadingScreen();
yield loadUIDataAsynchronously();
hideLoadingScreen();
}
var loader = loadUI();
// 加載UI
loader.next()
// 卸載UI
loader.next()
3).多任務按順序執行
function* longRunningTask(value1) {
try {
var value2 = yield step1(value1);
var value3 = yield step2(value2);
var value4 = yield step3(value3);
var value5 = yield step4(value4);
// Do something with value4
} catch (e) {
// Handle any error from step1 through step4
}
}
function scheduler(task) {
var taskObj = task.next(task.value);
// 若是Generator函數未結束，就繼續調用
if (!taskObj.done) {
task.value = taskObj.value
scheduler(task);
}
}
scheduler(longRunningTask(initialValue));
四.Promise對象
1.建立promise對象
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操做成功 */){
resolve(value);
} else {
reject(error);
}
});
2.調用promise對象
promise.then((sucessMsg) => console.log(sucessMsg))
.catch((errMsg) => console.log(errMsg))
3.Promise.all
Promise.all方法用於將多個Promise實例，包裝成一個新的Promise實例。當所有promise都完成的時候就完成，其中一個失敗即整個失敗
// 生成一個Promise對象的數組
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
4.Promise.race
Promise.race方法一樣是將多個Promise實例，包裝成一個新的Promise實例。當其中一個率先有狀態，即整個都轉狀態。
var p = Promise.race([p1,p2,p3]);
5.done()
Promise對象的回調鏈，無論以then方法或catch方法結尾，要是最後一個方法拋出錯誤，都有可能沒法捕捉到（由於Promise內部的錯誤不會冒泡到全局）。所以，咱們能夠提供一個done方法，老是處於回調鏈的尾端，保證拋出任何可能出現的錯誤。
asyncFunc() .then(f1) .catch(r1) .then(f2) .done();
6.finally()
finally方法用於指定無論Promise對象最後狀態如何，都會執行的操做。它與done方法的最大區別，它接受一個普通的回調函數做爲參數，該函數無論怎樣都必須執行。
server.listen(0)
.then(function () {
// run test
})//關閉服務器
.finally(server.stop);
五.異步操做
ES6誕生之前，異步編程的方法，大概有下面四種。
- 回調函數
- 事件監聽
- 發佈/訂閱
- Promise 對象
ES7新添Async函數
1.Async函數
1).含義
async函數就是Generator函數的語法糖。
Generator函數：
var readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) reject(error);
resolve(data);
});
});
};
var gen = function* (){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
Async函數：
var asyncReadFile = async function (){
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
1.async函數就是將Generator函數的星號（*）替換成async，將yield替換成await，僅此而已。
2.async自帶執行器，因此調用只需直接asybcReadFile();
2).基本用法
async function main() {
try {
var val1 = await firstStep();
var val2 = await secondStep(val1);
var val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
1.避免出現這個問題，應該使用try..catch
async function f() {
await Promise.reject('出錯了');
await Promise.resolve('hello world'); // 不會執行
}
2.當有多個await的時候，能夠都放在try上
3).但願多個操做同時執行
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
// 或者使用下面的寫法
//不能使用forEach，其表明三個db.post同時執行，不是相繼
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
4).使用注意
多個await命令後面的異步操做，若是不存在繼發關係，最好讓它們同時觸發。 必須等foo完成，才能執行bar執行，太耗時 let foo = await getFoo(); let bar = await getBar(); //可更改兩種寫法，getFoo和getBar都是同時觸發，這樣就會縮短程序的執行時間。 // 寫法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 寫法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;
2.回調函數
/**
* 回調函數測試方法
*
* @param callback
* 被回調的方法
*/
function testCallback(callback) {
alert('come in!');
callback();
}
/**
* 被回調的函數
*/
function a() {
alert('a');
}
/**
* 開始測試方法
*/
function start() {
testCallback(a);
}
3.事件監聽
//rn監聽鍵盤
DeviceEventEmitter.addListener(‘keyboardWillShow‘, this.updateKeyboardSpace)
DeviceEventEmitter.addListener(‘keyboardWillHide‘, this.resetKeyboardSpace)
updateKeyboardSpace: function (frames) {
const keyboardSpace = frames.endCoordinates.height//獲取鍵盤高度
this.setState({
keyboardSpace: keyboardSpace,
})
},
4.訂閱發佈
//rn接收發送通知
DeviceEventEmitter.emit('ClickPopTicketView');
DeviceEventEmitter.addListener('ClickPopTicketView',() => { this._setModalVisible(false) });
5.Promise
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: `uid=${userinfo.uid}&sec=${userinfo.sec}&wishkey=${this.props.searchTitle}`
})
.then((response) => response.text())
.then((responseText) => {
this.setState({isShowLodding:false});
console.log("code:"+responseText.code );
let response = JSON.parse(responseText);
console.log("response:"+response);
if(response.code == "200"){
MyAppTool.showAlert("添加成功");
return;
}
MyAppTool.showAlert("添加失敗");
})
.catch((err) => {
MyAppTool.showAlert("添加失敗");
});
相關文章
- 1. ES6語法總結
- 2. es6,es7,es8語法總結
- 3. ES6特性總結（1）——語法一
- 4. ES6經常使用語法總結
- 5. ES6特性總結（2）——語法二
- 6. ES6 Module 語法學習總結
- 7. ES6基礎語法總結(大部分)
- 8. ES6 | class類的基本語法總結
- 9. js filter() es6 方法總結
- 10. ES6 Promise用法總結
- 更多相關文章...
- • SQLite 語法 - SQLite教程
- • PHP 語法 - PHP教程
- • 算法總結-回溯法
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ES6語法總結
- 2. es6,es7,es8語法總結
- 3. ES6特性總結（1）——語法一
- 4. ES6經常使用語法總結
- 5. ES6特性總結（2）——語法二
- 6. ES6 Module 語法學習總結
- 7. ES6基礎語法總結(大部分)
- 8. ES6 | class類的基本語法總結
- 9. js filter() es6 方法總結
- 10. ES6 Promise用法總結