国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一次掌握 JavaScript ES5 到 ES8 數組內容

baiy / 1293人閱讀

摘要:可選到該位置前停止讀取數據,默認等于數組長度。找出第一個符合條件的數組元素,參數是一個回調函數,所有數組元素依次執行該回調函數,直到找出第一個返回值為的元素,然后返回該元素。回調函數可以接受三個參數,依次為當前的值當前的位置和原數組。

ECMAScript 5.1 中提供的數組方法

ECMA-262/5.1 規范

判斷是否是數組
Array.isArray ( arg )
// false or true

不支持此方法的IE9-等瀏覽器可以這樣處理:

Object.prototype.toString.call(obj) === "[object Array]";
轉換方法 toString

數組的 valueOf 會默認調用 toString 方法,所以他們的返回值一樣,都是逗號分隔每一項組成的字符串

var months = ["Jan", "Feb", "Mar", "Apr"];
months.toString(); // "Jan,Feb,Mar,Apr"
toLocaleString

調用數組每一項的 toLocaleString 方法,有時和 toString 方法的結果是一樣的。有時也不同,比如 Date 對象元素組成的數組里,返回的結果會不同。

join
a.join();      // "Wind,Rain,Fire"
a.join(", ");  // "Wind, Rain, Fire"
a.join(" + "); // "Wind + Rain + Fire"
a.join("");    // "WindRainFire"

如果數組中的某一項的值是 null 或者 undefined,那么該值在 join()toLocale-String()toString()valueOf() 方法返回的結果中以空字符串表示

棧方法 pop 刪除數組的最后一項

操作原數組,返回刪除項

var a = [1, 2, 3];
var b = a.pop();

console.log(a); // [1, 2]
console.log(b); // 3
push 在數組末尾添加新元素

操作的原數組,返回數組長度

var a = [1, 2, 3];
var b = a.push(4, 5);

console.log(a); // [1, 2, 3, 4, 5]
console.log(b); // 5
隊列方法 shift 刪除數組的第一項

操作的原數組,返回刪除項

var a = [1, 2, 3];
var b = a.shift();

console.log(a); // [2, 3]
console.log(b); // 1
unshift 數組的前面添加新元素

操作的原數組,返回數組長度

var a = [1, 2, 3];
var b = a.unshift(4, 5);

console.log(a); // [4, 5, 1, 2, 3]
console.log(b); // 5
重排序方法 reverse 反轉數組項的順序

操作原數組,返回數組

var a = ["one", "two", "three"];
var b= a.reverse();

console.log(a); // ["three", "two", "one"]
console.log(b); // ["three", "two", "one"]
sort 排序

按照 Unicode code 位置排序,默認升序

var fruit = ["cherries", "apples", "bananas"];
fruit.sort(); // ["apples", "bananas", "cherries"]

var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

// because "10" is mix of two characters "1" and "0" so "10" is before "2" in Unicode code point order.

之前寫過一篇排序方法的深入解讀,感興趣請點擊這里

深入淺出 JavaScript 的 Array.prototype.sort 排序算法

操作方法 concat 合并數組

返回新數組

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];

var arr3 = arr1.concat(arr2);

console.log(arr3);
// expected output: ["a", "b", "c", "d", "e", "f"]
slice 基于當前數組創建新數組

返回新數組

傳入兩個參數 起始位置(包含) 結束位置(不包含),虎頭蛇尾,有始無終。

只傳一個參數默認截取到數組末尾

傳遞的參數中有一個負數,則用數組長度加上該數來確定位置。長度為 5 的數組 slice(-2,-1)slice(3, 4) 結果相同。

結束位置小于起始位置,則返回空數組

var a = ["1", "2", "3", "4"];
var sliced = a.slice(1, 3);

console.log(a);      // ["1", "2", "3", "4"]
console.log(sliced); // ["2", "3"]
splice

可以實現 刪除、插入(元素個數大于要刪除的元素個數)、替換(刪除一個,再添加一個)

返回被刪除元素組成的數組,如果沒有被刪除元素,返回空數組

參數: 起始位置(包含)、要刪除的元素個數、元素

var myFish = ["angel", "clown", "mandarin", "sturgeon"];

myFish.splice(2, 0, "drum");
// ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1);
// ["angel", "clown", "mandarin", "sturgeon"]

myFish.splice(-1, 0, "drum");
//["angel", "clown", "mandarin", "drum", "sturgeon"]
位置方法

indexOflastIndexOf 都接受兩個參數:查找的值、查找起始位置

不存在,返回 -1 ;存在,返回位置。indexOf 是從前往后查找, lastIndexOf 是從后往前查找。

indexOf
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1

if (a.indexOf(7) === -1) {
  // element doesn"t exist in array
}
lastIndexOf
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);  // 3
numbers.lastIndexOf(2, 2);  // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3
迭代方法

ECMAScript 5 提供了5個迭代方法,他們的參數都是

給定的函數(當前元素、位置、數組)

可選的,執行回調是的 this 值

every

對數組的每一項都運行給定的函數,每一項都返回 ture,則返回 true

function isBigEnough(element, index, array) {
  return element < 10;
}

[2, 5, 8, 3, 4].every(isBigEnough);   // true
some

對數組的每一項都運行給定的函數,任意一項都返回 ture,則返回 true

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
filter

對數組的每一項都運行給定的函數,返回 結果為 ture 的項組成的數組

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

var longWords = words.filter(function(word){
  return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
map

對數組的每一項都運行給定的函數,返回每次函數調用的結果組成一個新數組

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
forEach 數組遍歷
const items = ["item1", "item2", "item3"];
const copy = [];

items.forEach(function(item){
  copy.push(item)
});
縮小方法

reduce、reduceRight 一個是從前往后遍歷,一個是從后往前遍歷,比上面的五個迭代方法回調函數多了一個參數:上一項的值

回調函數參數 上一項、當前元素、位置、數組

reduce
var numbers = [0, 1, 2, 3];

var result = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
});

console.log(result);
// expected output: 6
reduceRight
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]
小總結

隊列方法和棧方法操作的都是原數組,增加數組元素的時候,返回值是數組長度;刪除數組元素的時候,返回值是被刪除的元素。

哪些方法改變了原數組?

棧方法:push、pop

隊列方法:shift、unshift

重排序方法:reverse、sort

哪些方法返回的是數組?

重排序方法:reverse、sort

操作方法:splice、slice、concat

迭代方法中:filter、map

ECMAScript 6.0 新增的方法

ECMA-262/6.0 規范

from

將類似數組的對象(array-like object)和可遍歷(iterable)的對象轉為真正的數組

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from("foo");
// ["f", "o", "o"]
of

用于將一組值,轉換為數組

這個方法的主要目的,是彌補數組構造函數 Array() 的不足。因為參數個數的不同,會導致 Array() 的行為有差異。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
copyWithin

將指定位置的元素復制到其他位置(會覆蓋原有元素),返回當前數組。該方法會修改當前數組。

它接受三個參數。

target(必需):從該位置開始替換數據。

start(可選):從該位置開始讀取數據,默認為0。如果為負值,表示倒數。

end(可選):到該位置前停止讀取數據,默認等于數組長度。如果為負值,表示倒數。

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]
fill

使用給定值,填充一個數組。

會抹除數組原有的元素

還可以接受第二個和第三個參數,用于指定填充的起始位置和結束位置。

var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

["a", "b", "c"].fill(7, 1, 2)
// ["a", 7, "c"]
find

找出第一個符合條件的數組元素,參數是一個回調函數,所有數組元素依次執行該回調函數,直到找出第一個返回值為 true 的元素,然后返回該元素。如果沒有符合條件的元素,則返回 undefined。回調函數可以接受三個參數,依次為當前的值、當前的位置和原數組。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

[1, 5, 2, 3].find(function(value, index, arr) {
  return value > 9;
}) // undefined
findIndex

findIndex 方法的用法與 find 方法非常類似,返回第一個符合條件的數組元素的位置,如果所有元素都不符合條件,則返回 -1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

ES6 提供三個新的方法—— entries(),keys()和 values() —— 用于遍歷數組。它們都返回一個遍歷器對象,可以用 for...of 循環進行遍歷,唯一的區別是 keys() 是對鍵名的遍歷、values() 是對鍵值的遍歷,entries() 是對鍵值對的遍歷。

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// "a"
// "b"

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
entries
var a = ["a", "b", "c"];
var iterator = a.entries();

console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
keys
var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
values
var a = ["w", "y", "k", "o", "p"];
var iterator = a.values();

console.log(iterator.next().value); // w
console.log(iterator.next().value); // y
console.log(iterator.next().value); // k
console.log(iterator.next().value); // o
console.log(iterator.next().value); // p

更多使用方式,可以參考 阮一峰 ECMAScript 6入門

ECMAScript 7.0 新增的方法

ECMA-262/7.0 規范

includes

判斷數組中是否存在該元素

參數:查找的值、起始位置

可以替換 ES5 時代的 indexOf 判斷方式

indexOf 判斷元素是否為 NaN,會判斷錯誤

var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false

ECMA-262/8.0 規范

ES8 沒增加數組方法

參考

JavaScript 高級程序設計

MDN web docs

阮一峰 ECMAScript 6入門

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

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

相關文章

  • Javascript內置對象新增接口列表

    網上很少有提供不同版本接口對比的文章,所以自己總結一下。 Array Method Description Modify Version concat 連接多個數組,返回數組副本,參數可以為值或數組 否 ES3 join 把數組元素組合為字符串 否 ES3 pop 刪除并返回最后一個元素 是 ES3 push 向數組末尾添加一個或多個值,返回數組長度 是 ES3 reve...

    xuhong 評論0 收藏0
  • JavaScript 對象所有API解析

    摘要:創建對象的兩種方式推薦該構造器可以接受任何類型的參數,并且會自動識別參數的類型,并選擇更合適的構造器來完成相關操作。比如二的成員該屬性指向用來構造該函數對象的構造器,在這里為該方法返回的是一個用于描述目標對象的字符串。 之前看到【深度長文】JavaScript數組所有API全解密和JavaScript字符串所有API全解密這兩篇高質量的文章。發現沒寫對象API解析(估計是博主覺得簡單,...

    SmallBoyO 評論0 收藏0
  • 細解JavaScript ES7 ES8 ES9 新特性

    摘要:定期召開會議,會議由會員公司的代表與特邀專家出席。新版本將會包含每年截止時間之前完成的所有特性。它引入了一個新的構造函數和具有輔助函數的命名空間對象。 導言:ECMAScript的演化不會停止,但是我們完全沒必要害怕。除了ES6這個史無前例的版本帶來了海量的信息和知識點以外,之后每年一發的版本都僅僅帶有少量的增量更新,一年更新的東西花半個小時就能搞懂了,完全沒必要畏懼。本文將帶您花大約...

    Youngs 評論0 收藏0
  • ES8 走馬觀花(ECMAScript2017 新特性)

    摘要:距離上一篇走馬觀花已經快兩年時間了,上個月底正式發布,再寫一篇姊妹篇,介紹新特性。會議的每一項決議必須大部分人贊同,并且沒有人強烈反對才可以通過。已經準備就緒,該特性會出現在年度發布的規范之中。 距離上一篇《ES6 走馬觀花》已經快兩年時間了,上個月底 ES8 正式發布,再寫一篇姊妹篇,介紹 ES8 新特性。 什么是 ES8 ES8 是 ECMA-262 標準第 8 版的簡稱,從 ES...

    meislzhua 評論0 收藏0
  • ES8初探

    ES8 在es8中主要有6個特性:主要的有: Shared memory and atomics (共享內存和原子) Async Functions(異步函數) 其他的特性: Object.values/Object.entries (配合Object.keys使用) String padding (字符串填充) Object.getOwnPropertyDescriptors() Trai...

    Shisui 評論0 收藏0

發表評論

0條評論

baiy

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<