JavaScript數組對象詳解(二)
上一篇博客我們講到了JavaScript數組對象的創建,訪問和屬性,接下來一篇博客主要講一下JavaScript數組對象的方法及使用。說到數組的方法,主要分爲兩大部分,一部分是ES6以前的數組方法,一部分是ES6新增的方法。
1.ES6之前的方法
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["張三", "李四", "王五", "趙六"];
var arr4 = ["a", "b", "c", "a", "b", "c", "a", "b", "c"];
// 數組的方法
// concat() 連接兩個或更多的數組,並返回新的數組,不改變原數組。
console.log(arr1.concat(arr2, arr3));
console.log(arr1);
// indexOf() 搜索數組中的元素,並返回它第一次出現所在的索引值。如果檢索不到,返回-1。
console.log(arr1.indexOf(0));
console.log(arr2.indexOf("a"));
// lastIndexOf() 搜索數組中的元素,並返回它最後出現的索引值。
console.log(arr4.indexOf("a"));
console.log(arr4.lastIndexOf("a"));
// isArray() 判斷對象是否爲數組。
console.log(Array.isArray(arr1));
// join() 把數組的所有元素放入一個字符串。將數組轉換爲字符串
console.log(arr3.join());
// pop() 刪除數組的最後一個元素並返回刪除的元素。改變原數組
console.log(arr4.pop());
console.log(arr4);
// push() 向數組的末尾添加一個或更多元素,並返回新的長度。改變原數組
console.log(arr4.push("hello", "China"));
console.log(arr4);
// shift() 刪除並返回數組的第一個元素。 改變原數組
console.log(arr4.shift());
console.log(arr4);
// unshift() 向數組的開頭添加一個或更多元素,並返回新的長度。改變原數組
console.log(arr4.unshift("hello", "World"));
console.log(arr4);
// reverse() 反轉數組的元素順序。 反向排列 改變原數組
console.log(arr1.reverse());
console.log(arr1);
// slice(開始的索引,結束的索引) 選取數組的的一部分,並返回一個新數組。留頭不留尾 不改變原數組
console.log(arr4.slice(1, 3));
console.log(arr4);
// splice(起始的索引,截取的長度,添加的新元素) 從數組中 添加 或刪除元素。返回新數組 改變原數組 在指定位置添加元素
// console.log(arr4.splice(1,6));
console.log(arr4.splice(1, 6, "red", 'green', "blue"));
console.log(arr4);
var nums = [1, 2, 3, 11, 22, "a", "B", "b", "c", "A"];
// sort() 對數組的元素進行排序。 字典
console.log(nums.sort());
console.log(nums.sort(function (a, b) {
return a - b
})); //升序
console.log(nums.sort(function (a, b) {
return b - a
})); //降序
// forEach(function(value,index,arr){}) 數組每個元素都執行一次回調函數。
nums.forEach(function (val, index, arr) {
// console.log(val,index,arr);
console.log(val);
})
// for(var i=0;i<nums.length;i++){
// console.log(nums[i])
// }
// map() 通過指定函數處理數組的每個元素,並返回處理後的數組。
console.log(aNum2.map(Math.abs));
var aNum = [18, 20, 22, 30];
// every() 檢測數值元素的每個元素是否都符合條件。
aNum.every(function (num) {
console.log(num > 0)
})
// some() 檢測數組元素中是否有元素符合指定條件。
aNum.some(function (num) {
console.log(num > 20)
})
console.log(aNum.some(function (num) {
return num > 30
}))
// filter() 檢測數值元素,並返回符合條件所有元素的數組。
console.log(aNum.filter(function (num) {
return num > 0;
}))
var aNum2 = [1.2, 1.8, 2.0, 4.3];
// reduce(function(total,val){}) 將數組元素計算爲一個值(從左到右)。
console.log(aNum2.reduce(function (sum, val) {
sum += val;
return sum;
}))
// reduceRight() 將數組元素計算爲一個值(從右到左)。
console.log(aNum2.reduceRight(function (sub, val) {
sub -= val;
return sub;
}))
// toString() 把數組轉換爲字符串,並返回結果。
console.log(aNum2.toString());
// valueOf() 返回數組對象的原始值。
console.log(aNum2.valueOf())
2.ES6中中新增的方法
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// copyWithin(target,start,end) 從數組的指定位置拷貝元素到數組的另一個指定位置中。
console.log(arr.copyWithin(0, 3, 5));
// entries() 返回數組的可迭代對象。
// console.log(nums.entries().next().value);
// keys() 返回數組的可迭代對象,包含原始數組的鍵(key)。
// console.log(nums.keys().next().value);
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// fill(val,start,end) 使用一個固定值來填充數組。
console.log(arr.fill("a", 0, 1));
// find() 返回第一個符合傳入測試(函數)條件的數組元素。
console.log(aNum.find(function (num) {
return num > 19;
}));
// findIndex() 返回符合傳入測試(函數)條件的數組元素索引。
console.log(aNum.findIndex(function (num) {
return num > 19;
}));
// includes() 判斷一個數組是否包含一個指定的值。
console.log(aNum.includes(17));
// from(object,function) 通過給定的 對象 中創建一個數組。
console.log(Array.from([1, 2, 3]));
總結:
- 數組的方法不僅僅是知道每個方法是什麼意思,最主要的是要知道每個方法操作完後返回值是什麼。
- 數組中pop(),push(),shift(),unshift()這四個方法是經常再面試的時候會被問到的,記憶技巧(鍵盤上有shift鍵,向上,所以這兩個代表開頭,p開頭的:屁股,所以代表末尾,單詞長的代表添加,單詞短的的代表刪除)。(手動偷笑)
- 還要區分開slice()和splice()的區別。
- 最後要知道其實ES6中新增的一些方法主要是數組的一些迭代。其實ES5中的forEach(),map(),every(),some(),filter()都是數組的迭代。下面一篇博客會講這集中迭代方法的區別。
視頻講解鏈接:
https://www.bilibili.com/video/BV1St4y1C73g