Javascript處理數組基礎知識（含es6新語法）

Panda 發布于2019-08-23 16:04 / 3282人閱讀

摘要：對數組中每一項進行給定函數返回該函數會返回的項組成新的數組。可選，規定回調函數所指向的對象。新增新操作數組的方法傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，并且終止搜索。必需，回調函數，它制定了對數組元素的檢索規則。

迭代方法 1.every()

對數組中每一項進行給定函數，如果每一項都返回true，則返回true。

every(callback(element,index,array), thisArg)

callback:必需，對數組每一項所要執行的函數。

thisArg:可選，規定callback回調函數this所指向的對象。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return item>2;
});
console.log(everyResult); //false

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var everyResult = numbers.every(function(item,index,array){
    return item>this.num;
},obj);
console.log(everyResult);  //false

特別說明：第一個參數是回調函數，第二個參數是一個對象，它可以重置回調函數中this的指向。那么，上述代碼中回調函數的this就指向obj，于是this.num值等于2。

2.some()

對數組中每一項進行給定函數，如果任意一項都返回true，則返回true

some(callback(element,index,array), thisArg)

callback:必需，對數組每一項所要執行的函數。

thisArg:可選，規定callback回調函數this所指向的對象。

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
    return item>2;
});
console.log(someResult);   //true

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var someResult = numbers.some(function(item,index,array){
    return item>this.num;
},obj);
console.log(someResult);  //true

3.filter()

對數組中每一項進行給定函數,返回該函數會返回true的項組成新的數組。

filter(callback(element,index,array), thisArg)

callback:必需，對數組每一項所要執行的函數。

thisArg:可選，規定callback回調函數this所指向的對象。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return item>2;
});
console.log(filterResult);   //  [3,4,5,4,3]

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var filterResult = numbers.filter(function(item,index,array){
    return item>this.num;
},obj);
console.log(filterResult);   //  [3,4,5,4,3]

4.map()

對數組中每一項進行給定函數,返回每次函數調用的結果組成的新數組。

map(callback(element,index,array), thisArg)

callback:必需，對數組每一項所要執行的函數。

thisArg:可選，規定callback回調函數this所指向的對象。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return item*2;
});
alert(mapResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var mapResult = numbers.map(function(item,index,array){
    return item*this.num;
},obj);
alert(mapResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]

5.forEach()

對數組中每一項進行給定函數,沒有返回值，和for循環類似。

forEach(callback(element,index,array), thisArg)

callback:必需，對數組每一項所要執行的函數。

thisArg:可選，規定callback回調函數this所指向的對象。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
  console.log(item*2)
});
//2, 4, 6, 8, 10, 8, 6, 4, 2

console.log(numbers) //1,2,3,4,5,4,3,2,1

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
numbers.forEach(function(item,index,array){
  console.log(item*this.num)
},obj);
//2, 4, 6, 8, 10, 8, 6, 4, 2

歸并方法

ES5新增了兩個歸并數組的方法：reduce(callback(prev,cur,index,array))和reduceRight(callback(prev,cur,index,array))。這兩個方法迭代數組所有項，然后構建一個最終返回的值。reduce從左到右，reduceRight從右到左。

prev:前一個值

cur:當前值

index:下標

array:數組對象

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum); //15

這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在第二項上，因此第一個參數是數組的第一項，第二個參數是數組的第二項。

檢測數組 1.instanceof

ES3的方法

var numbers = [1,2,3];
if(numbers instanceof Array){
    //對數組進行某些操作
}

2.Array.isArray

ES5的方法

var numbers = [1,2,3];
if(Array.isArray(numbers)){
    //對數組進行某些操作
}

數組轉化成字符串 1.toLocaleString() toString()

var numbers = [1,2,3];
console.log(numbers.toLocaleString())  //1,2,3
console.log(numbers.toString())//1,2,3

2.join()

將數組轉換為字符串，且用分隔符分割

var numbers = [1,2,3];
alert(numbers.join("|"));  // 1|2|3

棧方法

棧方法是指Last-In-First-Out后進先出

push() 從數組末尾添加
pop()  從數組末尾移除

隊列方法

隊列方法是First-In-First-Out先進先出

shift()    從數組前端移除
unshift()  從數組前端添加

重排序方法 1.reverse()

反轉數組

var numbers = [1,2,3];
console.log(numbers.reverse())  //3,2,1

2.sort()

var numbers = [0,1,5,10,15];
numbers.sort(function(a,b){
    return b-a;
});
console.log(numbers);  //[15, 10, 5, 1, 0]

操作方法 1.concat()

用于復制或者從尾部添加，創建新數組。

concat(n1,n2,...,nN)

n1,n2,...,nN:都可選，既可以是數組，也可以是單個字符。

var numbers = [1,2,3];
var n1 = values.concat();  //復制
var n2 = values.concat(4);  //尾部添加
var n3 = n1.concat(n2,10,11); //尾部添加

console.log(numbers);  //[1,2,3]
console.log(n1);      //[1,2,3]
console.log(n2);      //[1,2,3,4]
console.log(n3);      //[1, 2, 3, 1, 2, 3, 4,10,11]

2.slice()

用于復制或截取數組，創建新數組。

slice(start,end)

strat:可選，數組其實位置，截取的時候包括其實位置

end:可選，結束位置，截取的時候不包括結束位置

var numbers = [1,2,3];
var n1 = numbers.slice(); //復制
var n2 = numbers.slice(1); //截取
var n3 = numbers.slice(1,3); //截取

console.log(numbers);  //[1,2,3]
console.log(n1);      //[1,2,3]
console.log(n2);      //[2,3]
console.log(n3);      //[2,3]

3.splice()

用于刪除、插入、替換，號稱最強大的數組方法

刪除：可以刪除任意數量的項，需要兩個參數，要刪除的第一項的位置和要刪除的項數

splice(start,num)

var values = [1,2,3,4,5,6];
var v = values.splice(0,2);
console.log(values);  //[3,4,5,6]
console.log(v);       //[1,2]

插入和替換：至少三個參數，第一個是起始位置，第二個是要刪除的項數，第三個及以后是要插入或替換的值。

splice(start,num,n1,n2,...,nN)

//插入demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,0,1,1,1);
console.log(values);  //[1,1,1,1,2,3,4,5,6]
console.log(v1);      //[]

//替換demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,2,1,1,1);
console.log(values);  //[1,1,1,1,4,5,6]
console.log(v1);       //[2,3]

位置方法

indexOf(value,start)
lastIndexOf(value,start)

都接受兩個參數：查找的值、查找起始位置。不存在，返回 -1 ；存在，返回位置。
indexOf 是從前往后查找， lastIndexOf 是從后往前查找。

var numbers = [1,2,3,4,5,6,7,8,9,5,3];
console.log(numbers.indexOf(5))  //4
console.log(numbers.lastIndexOf(5))  //9

ES6新增新操作數組的方法 1.find()

傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，并且終止搜索。

find(callback(element,index,array), thisArg)

callback：必需，回調函數，它制定了對數組元素的檢索規則。

thisArg：可選，用來規定回調函數中this所指向的對象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.find(function (ele) {
  if (ele > 4) {
    return true
  }
})
console.log(elem); //5

let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.find(function (ele) {
  if (ele > this.num) {
    return true
  }
},obj)
console.log(elem); //5

2.findIndex()

傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它的下標，終止搜索。

findIndex(callback(element,index,array), thisArg)

callback：必需，回調函數，它制定了對數組元素的檢索規則。

thisArg：可選，用來規定回調函數中this所指向的對象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.findIndex(function (ele) {
  if (ele > 4) {
    return true
  }
})
console.log(elem);  //3

let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.findIndex(function (ele) {
  if (ele > this.num) {
    return true
  }
},obj)
console.log(elem);  //3

3.fill()

用新元素替換掉數組內的元素，可以指定替換下標范圍。

fill(value,start,end)

value：必需，用來進行填充的值。

start：可選，規定填充開始位置，默認從索引0處開始。

end：可選，規定填充結束位置，默認填充到數組結尾。

const arr = ["a", "b", "c", "d"]
console.log(arr.fill("ss", 1, 3))  //?["a", "ss", "ss", "d"]

const arr2 = ["a", "b", "c", "d"]
console.log(arr.fill("ss"))  //?["ss", "ss", "ss", "ss"]

4.includes()

判斷數組中是否存在該元素，可以替換 ES5 時代的 indexOf 判斷方式。

includes(value,start)

value：必需，要檢測的元素。

start：可選，規定填充開始位置，默認從索引0處開始。

let arr = ["a", "b","c", "d", NaN]
arr.includes("a") //true
arr.includes(NaN) //true
arr.indexOf(NaN) //-1

5.Array.from()

方法可以將指定的參數轉換為真正的數組。當然并不是任意參數都是可以被轉換為數組，可以轉換的參數如下：類數組對象、具有遍歷器接口的對象。

Array.from(arrayLike, mapFn, thisArg)

arrayLike：必需，將要被轉換為真正數組的類數組或者具有遍歷器接口的對象。

mapFn：可選，對參數arrayLike中的數據進行處理并返回，作為新數組的元素。

thisArg：可選，規定mapFn的調用對象，那么mapFn中的this將會指向此調用對象。

let obj = {
  "0": "螞蟻部落",
  "1": "www.softwhy.com",
  "2": 6,
  "3":"ES2015",
  length:4
};
console.log(Array.from(obj)); //?["螞蟻部落", "www.softwhy.com", 6, "ES2015"]

obj = {
  "a": "螞蟻部落",
  "b": "www.softwhy.com",
  "c": 6,
  "d":"ES2015",
  length:4
};
console.log(Array.from(obj)); //[undefined, undefined, undefined, undefined]

obj = {
  length:3
};
console.log(Array.from(obj)); //[undefined, undefined, undefined]

上述代碼將類數組對象轉換為真正的數組，什么是類數組對象：很多材料上對類數組的描述比較嚴苛，其實很簡單，只要一個對象具有length屬性就是類數組。當然一個類數組對象，如果屬性恰好類似于數組遞增式索引，那就更好了，比如上面代碼中的對象。上面對象只有一個length屬性，他也是一個類數組對象，只不過生成的數組元素都是undefined。

let str = "螞蟻部落";
console.log(Array.from(str)); //?["螞", "蟻", "部", "落"]

因為字符串具有遍歷器接口，那么字符串也可以生成數組，數組的每一個元素，就是構成字符串的字符。

let obj = {
  "0": 1,
  "1": 2,
  "2": 3,
  "3": 4,
  length:4
};
let thisObj = {
  num:2
}
console.log(Array.from(obj, function (elem, index) {
  return elem * this.num
}, thisObj)); //[2, 4, 6, 8]

擴展:展開運算符生成數組

let str="螞蟻部落";
console.log([...str]);  //["螞", "蟻", "部", "落"]

6.Array.of()

Array.of(element0,element1,...,elementN)

此方法可以接受任意類型的參數，參數之間用逗號分隔，并且能夠將參數轉換為數組。

console.log(Array.of(2)); //[2]
console.log(Array.of(2,3,4)); //[2,3,4]

擴展：Array()與Array.of()方法區別

console.log(Array(2)) // [undefined, undefined]
console.log(Array.of(2)) // [2]

console.log(Array(2,3,4)) // [2,3,4]
console.log(Array.of(2,3,4)) // [2,3,4]

這個方法的主要目的，是彌補數組構造函數 Array() 的不足。

7.entries()

返回迭代器：返回一個遍歷器對象【鍵值對】

//數組
const arr = ["a", "b", "c"];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, "a"] [1, "b"] [2, "c"]
for(let [key, value] of arr.entries()) {
  console.log(key+"--"+value)
}
//0--a 1--b 2--c

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.entries()) {
  console.log(v)
}
// ["a", "a"] ["b", "b"] ["c", "c"]

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.entries()) {
  console.log(v)
}
// ["a", "a"] ["b", "b"]

8.keys()

返回迭代器：返回鍵值對的key

//數組
const arr = ["a", "b", "c"];
for(let v of arr.keys()) {
  console.log(v)
}
// 0 1 2

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.keys()) {
  console.log(v)
}
// "a" "b" "c"

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.keys()) {
  console.log(v)
}
// "a" "b"

9.values()

返回迭代器：返回鍵值對的value

//數組
const arr = ["a", "b", "c"];
for(let v of arr.values()) {
  console.log(v)
}
//"a" "b" "c"

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.values()) {
  console.log(v)
}
// "a" "b" "c"

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.values()) {
  console.log(v)
}

GPU云服務器云服務器 javascript語法基礎 javascript基礎語法 es6新特性 es6的新特性

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

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

JavaScript 語言核心筆記（持續更新）

摘要：在同一個塊內，不允許用重復聲明變量。中為新增了塊級作用域。自帶遍歷器的對象有數組字符串類數組對象對象的對象等和結構對象。返回一個遍歷器，使遍歷數組的鍵值對鍵名鍵值。目錄 1.語法 2.類型、值和變量 3.表達式和運算符 4.語句 5.數組 6.對象 7.函數 8.全局屬性和方法 9.詞法作用域、作用域鏈、閉包 10.原型鏈、繼承機制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 評論0 收藏0
Javascripts數組原生方法集合

摘要：如果數組已經為空，則不改變數組，并返回值。中所有在數組被修改時都遵從這個原則，以下不再重復方法會給原數組中的每個元素都按順序調用一次函數。每次執行后的返回值沒有指定返回值則返回組合起來數組應該是我們在寫程序中應用到最多的數據結構了，相比于無序的對象，有序的數組幫我們在處理數據時，實在是幫了太多的忙了。今天剛好看到一篇Array.include的文章，忽然發現經過幾個ES3,ES5,E...

awokezhou 2019-08-21 16:23 評論0 收藏0
ES6（中）

摘要：它用來比較兩個值是否嚴格相等，與嚴格比較運算符的行為基本一致。兩個對象的地址不一樣與嚴格比較運算符的不同之處只有兩個一是不等于，二是等于自身基本用法方法用于對象的合并，將源對象的所有可枚舉屬性，賦值到目標對象。這是ES6的入門篇教程的筆記，網址：鏈接描述，以下內容中粗體+斜體表示大標題，粗體是小標題，還有一些重點；斜體表示對于自身，還需要下功夫學習的內容。這里面有一些自己的見解，所以...

dreamGong 2019-08-26 10:48 評論0 收藏0
這一次，我們換種姿勢學習 javascript

摘要：操作符或調用函數時傳入參數的操作都會導致關聯作用域的賦值操作。此外可以使用和來設置對象及其屬性的不可變性級別。忽視這一點會導致許多問題。使用調用函數時會把新對象的屬性關聯到其他對象。前言《你不知道的 javascript》是一個前端學習必讀的系列，讓不求甚解的JavaScript開發者迎難而上，深入語言內部，弄清楚JavaScript每一個零部件的用途。本書介紹了該系列的兩個主題：...

zone 2019-08-26 11:54 評論0 收藏0