內置物件
陣列物件
MDN檔案鏈接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
創建陣列物件
// 1. 陣列字母量
var array = []; // 創建一個空陣列
var numbers = [1, 2, 4]; //
// 2. 陣列的建構式Array
var array = new Array(); // 創建一個空陣列
var numbers = new Array(2, 2, 5, 8, 9)
判斷陣列物件
instanceof運算子用于檢測建構式的 prototype 屬性是否出現在某個實體物件的原型鏈上，console.error()向 Web 控制臺輸出一條錯誤訊息，Array.isArray()用于確定傳遞的值是否是一個 Array，
// 第一種方法 arr instanceof Array
function fn(arr) {
if(!(arr instanceof Array)){
console.error("引數arr不是陣列物件");
return;
}
console.log("正常執行")
}
var numbers = [2, 5, 4];
fn(numbers);
// 第二種方法 Array.isArray() ,有瀏覽器兼容問題，支持HTML5的瀏覽器支持這種方法
function fn(arr) {
if (!Array.isArray(arr)) {
console.error("引數arr不是陣列物件");
return;
}
console.log("正常執行")
}
var d = 1;
fn(d);
陣列物件的toString()方法和valueOf()方法
每個物件都具有
toString()和valueOf()兩個方法
var arr = [2, 5, 3, 5, 4];
// 1. toString(),把陣列轉換成字串，并且用逗號分割每一項
console.log(arr.toString()); // 2,5,3,5,4
// 2. valueOf()，回傳陣列本身
console.log(arr.valueOf()); // [2, 5, 3, 5, 4]
陣列物件的常用方法
// 1. 堆疊操作，先進后出
// push()，將一個或多個元素添加到陣列的末尾，并回傳該陣列的新長度(該方法修改原有陣列)，
// pop()，從陣列中洗掉最后一個元素，并回傳該元素的值，此方法更改陣列的長度，
var arr = [1, 2, 3, 4, 5, 6];
arr.push(7);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
var arrPop = arr.pop();
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arrPop); // 7
// 2. 佇列操作，先進先出
// push()
// shift()，從陣列中洗掉第一個元素，并回傳該元素的值，此方法更改陣列的長度，
// unshift()，將一個或多個元素添加到陣列的開頭，并回傳該陣列的新長度(該方法修改原有陣列)，
var arr = [1, 2, 3, 4, 5, 6];
var arrShift = arr.shift();
console.log(arr); // [2, 3, 4, 5, 6]
console.log(arrShift); // 1
arr.unshift(0,1);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]
// 3. 操作方法
// concat(),用于合并兩個或多個陣列，此方法不會更改現有陣列，而是回傳一個新陣列，
var arr1 = [0, 1, 2];
var arr2 = [4, 5, 6];
var arr3 = ['a', 'b', 'c', 'd']
var arr4 = arr1.concat(arr2, arr3);
console.log(arr4); // [0, 1, 2, 4, 5, 6, "a", "b", "c", "d"]
// slice(),從當前陣列中截取一個新的陣列，不影響原來的陣列，引數start從0開始，end從1開始，包括start，不包括end，
var arr = [0, 1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd'];
var arrSlice = arr.slice(3, 6);
console.log(arrSlice); // [3, 4, 5]
// splice(),洗掉或替換當前陣列的某些專案，引數start，deletCount，options（要替換的專案）
var arr = [0, 1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd'];
arr.splice(5, 2, 's');
console.log(arr); // [0, 1, 2, 3, 4, 's', 'a', 'b', 'c', 'd']
arr.splice(5, 1);
console.log(arr); // [0, 1, 2, 3, 4, 'a', 'b', 'c', 'd']
arr.splice(-3, 2, 't');
console.log(arr); // [0, 1, 2, 3, 4, 't', 'd']
// 4. 位置方法
// indexof(),回傳在陣列中可以找到一個給定元素的第一個索引，如果不存在，則回傳-1
var arr = [0, 1, 2, 1, 4];
console.log(arr.indexOf(1)); // 1
console.log(arr.indexOf(1, 2)); // 3
console.log(arr.indexOf(1, -4)); // 1
// lastIndexof(),回傳指定元素在陣列中的最后一個的索引,如果不存在，則回傳-1,從后往前查找
var arr = [0, 1, 2, 1, 4];
console.log(arr.indexOf(1)); // 3
console.log(arr.indexOf(1, -3)); // 1
console.log(arr.indexOf(1, -4)); // 1
// 5. 迭代方法，不會修改原陣列，HTML5，有瀏覽器兼容問題，手機端可以用
// every(),方法測驗一個陣列內的所有元素是否都能通過某個指定函式的測驗，它回傳一個布林值，
function fn1(currentValue) {
return currentValue < 40;
}
function fn2(currentValue) {
return currentValue < 100;
}
var fn3 = (currentValue) => currentValue < 95;
var arr = [2, 5, 2, 6, 3, 52, 95, 84, 25]
console.log(arr.every(fn1)); // false
console.log(arr.every(fn2)); // true
console.log(arr.every(fn3)); // true
// filter(),創建一個新陣列, 其包含通過所提供函式實作的測驗的所有元素，
function fn1(currentValue) {
return currentValue < 40;
}
function fn2(currentValue) {
return currentValue < 10;
}
var fn3 = (currentValue) => currentValue < 5;
var arr = [2, 5, 2, 6, 3, 52, 95, 84, 25]
console.log(arr.filter(fn1)); // [2, 5, 2, 6, 3, 25]
console.log(arr.filter(fn2)); // [2, 5, 2, 6, 3]
console.log(arr.filter(fn3)); // [2, 2, 3]
// forEach(),對陣列的每個元素執行一次給定的函式，
function fn(currentValue) {
return console.log(currentValue)
}
var arr = ['a', 'b', 'c', 'd', 'e']
arr.forEach(fn);
// map(),創建一個新陣列，其結果是該陣列中的每個元素呼叫一次提供的函式后的回傳值，
function fn(currentValue) {
return currentValue += 10;
}
var arr = [0, 10, 20, 30, 40];
var arrMap = arr.map(fn);
console.log(arr); // [0, 10, 20, 30, 40]
console.log(arrMap); // [10, 20, 30, 40, 50]
// some(),測驗陣列中是不是至少有1個元素通過了被提供的函式測驗，它回傳的是一個Boolean型別的值，
function fn(currentValue) {
return currentValue % 10 === 0;
}
var arr = [3, 10, 22, 30, 40];
var arrSome = arr.some(fn);
console.log(arr); // [3, 10, 22, 30, 40]
console.log(arrSome); // true
// 6. 將陣列的所有元素連接到一個字串中
// join(),
var arr = ['張三', '李四', '王五', '小明', '小紅']
var arrJoin1 = arr.join();
console.log(arrJoin1); // '張三,李四,王五,小明,小紅'
var arrJoin2 = arr.join('|');
console.log(arrJoin2); // '張三|李四|王五|小明|小紅'
// 模擬join()方法內部實作
function join(array, string) {
var stringArr = array[0];
for (var i = 1; i < array.length; i++) {
stringArr += string + array[i];
}
return stringArr;
}
var arr = ['張三', '李四', '王五', '小明', '小紅']
var stringArr = join(arr, '/');
console.log(stringArr); // '張三|李四|王五|小明|小紅'
陣列的排序方法
reverse()
將陣列中元素的位置顛倒，并回傳該陣列,該方法會改變原陣列
var arr = [1, 2, 3, 4, 5, 6];
arr.reverse();
console.log(arr);
sort()
- 對陣列的元素進行排序，并回傳陣列，默認排序順序是在將元素轉換為字串，然后比較它們的UTF-16代碼單元值序列時構建的
- 語法：arr.sort([compareFunction])
- 引數：compareFunction（可選），用來指定按某種順序進行排列的函式，如果省略，元素按照轉換為的字串的各個字符的Unicode位點進行排序，
- 回傳值：排序后的陣列
var arr = ["a", "F", "Adf", "Grew", "hef"];
// 沒有引數，元素按照轉換為的字串的各個字符的Unicode位點進行排序，
arr.sort();
console.log(arr); // ["Adf", "F", "Grew", "a", "hef"]
// 按數字大小排序
var numberArr = [5, 58, 65, 2, 3, 5, 0, 84];
numberArr.sort(function (a, b) {
return a - b;
});
console.log(numberArr); // [0, 2, 3, 5, 5, 58, 65, 84]
// 按字串長度排序
var stringArr = ["a", "F", "Adf", "Grew", "hef"];
stringArr.sort(function (a, b) {
return a.length - b.length;
});
console.log(stringArr); // ["a", "F", "Adf", "hef", "Grew"]
// 模擬sort()方法內部實作
function sort(arr, compareFun) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (compareFun(arr[j], arr[j + 1]) > 0) {
var tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
return arr
}
var arr = [5, 10, 5, 68, 8, 6];
sort(arr, function (a, b) {
return a - b;
});
console.log(arr);
清空陣列
var arr = [1, 2, 5, 3, 5];
// 第一種方式，推薦用這種方式
arr = [];
// 第二種方式
arr.length = 0;
// 第三種方式
// 第一個引數：是從什么位置開始洗掉索引
// 第二個引數: 洗掉多少個元素
arr.splice(0, arr.length);
作業
- 工資的陣列
[1500, 1200, 2000, 2100, 1800],把工資超過2000的洗掉；
var arr = [1500, 1200, 2000, 2100, 1800];
var arr1 = arr.filter(function (item) {
return item < 2000;
});
console.log(arr1);
['c', 'a', 'z', 'a', 'x', 'a']找到陣列中每個a出現的位置;
var arr = ['c', 'a', 'z', 'a', 'x', 'a'];
var index = -1;
do {
index = arr.indexOf('a', index + 1);
if (index !== -1) {
console.log(index);
}
} while (index !== -1)
- 撰寫一個方法去掉一個陣列的重復元素；
6種方法鏈接：https://www.jb51.net/article/118657.htm
function repeat(arr) {
var result = []
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[j] === arr[i]) {
j = ++i;
}
}
result.push(arr[i]);
}
return result
}
var arr = [1, 2, 1, 5, 2, 'a', 'b', 'a', 'b']
var arr1 = repeat(arr);
console.log(arr1);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/289011.html
標籤：JavaScript