重學ES6基礎語法（三）

時間  2019-11-08
標籤 es6 基礎 語法 欄目 JavaScript 简体版
原文   原文鏈接

本系列博客爲ES6基礎語法的使用及總結，若有錯誤，歡迎指正。 重學ES6基礎語法（三）主要包括 for of循環、startsWith()、endsWith()、includes()、repeat()、padStart()、padEnd() 方法。javascript

循環的幾種方式

普通for循環

for(let i=0;i<arr.length;i++){
    //內容
}
複製代碼

forEach循環

1.forEach的使用java

  • 格式
    arr.forEach(function (element,index,array) {
   console.log(element,index,array);
})
複製代碼
  • forEach方法會自動調用傳入的函數
  • 每次調用都會將當前遍歷到的元素和當前遍歷到的索引和當前被遍歷的數組傳遞給這個函數

2.forEach注意點數組

  • forEach不能終止、不能跳過(即不能在代碼塊裏面使用break、continue)

for in循環

1.for in循環的使用bash

let arr = ['god','gosh','jesus','christ'];
for(let key in arr){
   console.log(key); //取出的是索引
   console.log(arr[key]); //取出的是值
}
複製代碼

2.for in循環的注意點數據結構

  • console.log(key); --> 取出的是索引 console.log(arr[key]); --> 取出的是值
  • for in循環遍歷的是對象上的全部可枚舉屬性(包括原型上面的屬性)
    Array.prototype.des = function(){
   return this[0];
};
let arr = ['god','gosh','jesus','christ'];
arr.title = 'words';
for(let key in arr){
   console.log(key); //取出的是索引
   console.log(arr[key]); //取出的是值
}
複製代碼

  • 在企業開發中不推薦使用for in循環來遍歷數組
  • 對象中的屬性是無序的，for in循環就是專門用於遍歷無序的東西的

for-in循環是專門用於遍歷對象的, 對象的屬性是無序的, 因此for-in循環就是專門用於遍歷無序的東西的, 所以不推薦使用for in循環來遍歷數組less

for of循環

1.使用格式dom

Array.prototype.des = function(){
   return this[0];
};
let arr = ['god','gosh','jesus','christ'];
arr.title = 'words';
for(let key of arr){
   console.log(key); //直接遍歷的是值
}
複製代碼

2.注意點函數

  • console.log(key); --> 直接遍歷的是值
  • 不會遍歷原型上面的屬性
  • 支持循環的終止和跳過

Object.keys() 方法遍歷屬性名

返回的是由屬性名組成的數組post

1.用法ui

  • Object.keys()將一個對象中的屬性名放到一個數組中；數組中每一個元素類型爲string
  • 數組中屬性名的排列順序和使用for...in 循環遍歷該對象時返回的順序一致。
  • 若是對象的鍵-值都不可枚舉，那麼將返回由鍵組成的數組。 遍歷對象時：
let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]
複製代碼

遍歷數組時(將原數組的索引放到一個數組中)：

// simple array
let arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
console.log(typeof Object.keys(arr)[0]); //string
複製代碼

遍歷類數組：

// array like object
let obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
複製代碼

遍歷對象時是無序的 (也就是上文所說的數組中屬性名的排列順序和使用for...in 循環遍歷該對象時返回的順序一致)

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
複製代碼

2.Object.keys() 方法能夠用來判斷一個對象是否爲空 利用Object.keys() 方法返回的數組，判斷該數組長度是否爲0；長度爲0 則表明該對象爲空；反之則不爲空

let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};
let keys = Object.keys(object1);
console.log(keys);
console.log(keys.length === 0); //false
複製代碼

Object.entries() 方法遍歷

返回的是鍵值對數組 返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for...in 循環遍歷該對象時返回的順序一致（區別在於 for-in 循環也枚舉原型鏈中的屬性）。

這個方法是搜Array.prototype.entries()發現的，我沒用過，只是恰好發現也能夠遍歷東西，因此順便寫上來了，注意與下文的數組的entries()對比

1.用法

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
複製代碼

遍歷類數組： 

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
複製代碼

遍歷對象時是無序的：

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
複製代碼

其餘玩法：

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
複製代碼

for of循環的再探討

1.for of循環能夠用來遍歷可迭代對象，在上一篇ES6語法(二)文章中也提到了什麼是可迭代對象

可迭代對象就是部署了Iterator接口，或者是定義了[Symbol.iterator]方法的數據結構，在ES6中Iterator接口主要供for of消費。

好，弟中弟中弟又要問了：什麼是[Symbol.iterator]，順手放個參考連接

a zero arguments function that returns an object,conforming to the iterator protocol

  • 只要一個數據已經實現了Iterator接口, 那麼這個數據就有一個叫作[Symbol.iterator]的屬性
  • [Symbol.iterator]的屬性會返回一個函數
  • [Symbol.iterator]返回的函數執行以後會返回一個新對象Array Iterator {}，該對象中又一個名稱叫作next的方法(下文會說到)
    let arr = ['god','gosh','jesus','christ'];
let res = arr[Symbol.iterator];
console.log(res); //ƒ values() { [native code] }

let res2 = arr[Symbol.iterator]();
console.log(res2); //Array Iterator {}
複製代碼

2.Array.prototype.entries()方法

  • entries() 方法返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。
  • arr.entries();和arr[Symbol.iterator]();返回的都是新的Array Iterator對象，兩者等價
let arr = ['god','gosh','jesus','christ'];
let res3 = arr.entries();
console.log(res3); //Array Iterator {}
for(let key of arr){
   console.log(key);
}
複製代碼

在控制檯輸入arr.entries()，獲得這個新的Array Iterator對象

3.Array Iterator是對象，這個新的 Array 迭代器對象，它的原型（ proto:Array Iterator）上有一個next方法，可用用於遍歷迭代器取得原數組的[key,value]。

  • next方法每次執行都會返回一個對象{value: Array(2), done: false}
  • 這個對象中存儲了當前取出的數據和是否取完了的標記，未取完標記是false，取完了標記是true

4.使用for of遍歷 arr.entries()（也就是它的iterator），返回的是一個數組，能夠同時獲取到原數組中每一個索引的鍵/值對。 

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){
   console.log(key);
}
複製代碼

5.固然了，分開寫分開獲取也是能夠的 

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){
   // console.log(key);
   console.log(key[0]); //獲取索引
   console.log(key[1]); //獲取屬性值
}
複製代碼

能夠利用解構賦值處理鍵值對完成後續操做

let arr = ['god','gosh','jesus','christ'];
for(let [index,value] of arr.entries()){
   // console.log(key);
   // console.log(key[0]); //獲取索引
   // console.log(key[1]); //獲取屬性值
   console.log((`第${index + 1}個單詞是${value}`));
}
複製代碼

6.for of循環能夠用於Array/Map/Set/String/TypedArray/arguments 對象/NodeList對象。所以在遍歷時不須要考慮是否可使用哪一種循環，for of能夠解決這些場景；可是for of循環不支持對象的遍歷

function sum() {
    let count = 0;
    for (let key of arguments){
        count = count + key;
    }
    return count;
}
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8));
複製代碼

ES6新增的字符串方法

startsWith()

(要加s，英語老師口氣)

startsWith() 方法用來判斷當前字符串是否以另一個給定的子字符串開頭，並根據判斷結果返回 true 或 false。

1.用法 str.startsWith(searchString[, position])

  • searchString 要搜索的子字符串。
  • position 可選 在 str 中搜索 searchString 的開始位置，默認值爲 0，也就是真正的字符串開頭處。
  • 大小寫敏感
let str = 'significant';
console.log(str.startsWith('i', 4)); //從第四個位置開始判斷，返回true
console.log(str.startsWith('I', 4)); //區分大小寫，返回false
複製代碼

endsWith()

(要加s，英語老師口氣)

endsWith()方法用來判斷當前字符串是不是以另一個給定的子字符串「結尾」的，根據判斷結果返回 true 或 false。

1.用法 str.endsWith(searchString[, length])

  • searchString 要搜索的子字符串。
  • length 可選。做爲str的長度。默認值爲str.length。
  • 大小寫敏感
let str = 'there are hunters';
console.log(str.endsWith('are', 9)); //至關於截取前九個字符，判斷是否以are結尾
複製代碼

includes()

(要加s，英語老師口氣)

includes() 方法用於判斷一個字符串是否包含在另外一個字符串中，根據狀況返回 true 或 false。

1.用法 str.includes(searchString[, position])

  • searchString 要在此字符串中搜索的字符串。
  • position 可選。從當前字符串的哪一個索引位置開始搜尋子字符串，默認值爲0。
  • 能夠用來替代過去的indexOf()
let str = 'there are hunters';
console.log(str.indexOf('are') !== -1); //true
console.log(str.includes('are')); //true
console.log(str.includes('are',10)); //false
console.log(str.includes('hunters',10)); //true
複製代碼

repeat()

別名：人類的本質是復讀機之repeat方法

repeat() 構造並返回一個新字符串，該字符串包含被鏈接在一塊兒的指定數量的字符串的副本。

1.用法

  • count 介於0和正無窮大之間的整數 : [0, +∞) 。表示在新構造的字符串中重複了多少遍原字符串。
  • 返回值是包含指定字符串的指定數量副本的新字符串。
/** 
 * str: String
 * count: Number
 */

let resultString = str.repeat(count);
複製代碼

2.注意點

  • 重複次數不能爲負數或者Infinity。
  • 重複次數必須小於 infinity，且長度不會大於最長的字符串。
  • 若是參數是字符串，則會先轉換成數字
  • 參數NaN等同於0

3.示例

"abc".repeat(-1)     // RangeError: repeat count must be positive and less than inifinity
"abc".repeat(0)      // ""
"abc".repeat(1)      // "abc"
"abc".repeat(2)      // "abcabc"
"abc".repeat(3.5)    // "abcabcabc" 參數count將會被自動轉換成整數.
"abc".repeat(1/0)    // RangeError: repeat count must be positive and less than inifinity

({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2)   
//"abcabc",repeat是一個通用方法,也就是它的調用者能夠不是一個字符串對象.
複製代碼

4.現場教學

好比你在網上看到一個巨可笑的沙雕段子，此時你就可使用這個方法打印許多的「哈哈哈」

let str = "哈".repeat(10000);
console.log(str);
複製代碼

padStart()

padStart()方法用另外一個字符串填充當前字符串(重複，若是須要的話)，以便產生的字符串達到給定的長度。填充從當前字符串的開始(左側)應用的。

1.用法

  • 語法：str.padStart(targetLength [, padString])
  • 參數：①targetLength 當前字符串須要填充到的目標長度。若是這個數值小於當前字符串的長度，則返回當前字符串自己。
    ②padString 可選
    填充字符串。若是字符串太長，使填充後的字符串長度超過了目標長度，則只保留最左側的部分，其餘部分會被截斷。

2.示例

注意：

  • 若是第一個參數小於當前字符串的長度，則不填充，返回當前字符串自己。
  • 若是第二個參數不傳，默認用空格填充
  • 若是第二個參數使填充後的字符串長度超過了目標長度，則只保留最左側的部分，其餘部分會被截斷。
'abc'.padStart(1);          // "abc"
'abc'.padStart(10);         // " abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
複製代碼

3.應用場景

在處理時間的時候，一般月、日、時、分、秒若是是一位數，須要在左側添加一個0

先將獲得的時間轉爲字符串，再使用padStart()方法判斷是否須要在左側添加0

let date = new Date(value);
let year = date.getFullYear();
let month = date.getMonth()+1+'';
let day = date.getDate()+'';
let hour = date.getHours()+'';
let minute = date.getMinutes()+'';
let second = date.getSeconds()+'';
return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}`;
複製代碼

padEnd()

padEnd() 方法會用一個字符串填充當前字符串（若是須要的話則重複填充），返回填充後達到指定長度的字符串。從當前字符串的末尾（右側）開始填充。

1.用法和padStart()差很少，只不過是從當前字符串的末尾（右側）開始填充。

2.注意點

  • 若是第一個參數小於當前字符串的長度，則不填充，返回當前字符串自己。
  • 若是第二個參數不傳，默認用空格填充
  • 若是第二個參數使填充後的字符串長度超過了目標長度，則只保留最左側的部分，其餘部分會被截斷。

小結： 其實我以爲這倆玩意算是在某些方面，三目運算符的簡化。若是字符串原本長度大於第一個參數，則不填充；若是須要填充，按照規則適當截取便可。

本文章參考到的連接: developer.mozilla.org/en-US/#

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程