ps：本篇博文為了方便閱讀，變數都用的方法名，大家不要效仿 盡量規范
常見四件套 shift unshift pop push
1.shift （刪前）
洗掉陣列的第一項 并回傳洗掉元素的值，注意如果陣列為空 則回傳undefined
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var shift = oldArray.shift();
console.log(this.oldArray, this.shift);
列印結果
2.unshift（增前）
將引數添加到陣列的前面 并回傳陣列的長度
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var unshift = oldArray.unshift("D", "D");
console.log(this.oldArray, this.unshift);
//注：此方法在ie6.0下
// 測驗的回傳值始終為undefined，在firefox下測驗的回傳值為7，所以此方法不可靠
// 一般需要用回傳值時可用splice代替
列印結果
3.pop （刪尾）
洗掉原陣列的最后一項，并回傳洗掉元素的值，如果是空值則回傳undefined
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var pop = oldArray.pop();
console.log(this.oldArray, this.pop);
列印結果
4.push（增尾）
將引數添加到原陣列的最后一項，并回傳陣列的長度
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var push = oldArray.push("H", "H", "H");
console.log(this.oldArray, this.push);
列印結果
比較容易記混的 slice splice
1.slice（切割）
回傳原陣列 從指定的下標開始到指定的下標結束
PS：不改變原陣列
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var slice = oldArray.slice(2, 4); //第一個引數是開始的下標，第二個引數是結束的下標
console.log(this.oldArray, this.slice);
列印結果
2.多功能splice（插入，切割）
// splice(start,deleteCount.val1,val2,…):從start開始洗掉deleteCount項
// 并從該位置起插入val1,val2,…
PS：改變原陣列
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var splice = oldArray.splice(2, 4, "H", "H"); //從下標為2的開始，切割4項元素，在下標為2后插入“H”，“H”
console.log(this.oldArray, this.splice);
列印結果
陣列の旋轉跳躍我閉著眼~~哎，就是玩
翻轉 拼接 排序 分割
1.reverse（翻轉）
將陣列翻轉 并改變原陣列的排序
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var reverse = oldArray.reverse(); //從下標為2的開始，切割4項元素，在下標為2后插入“H”，“H”
console.log(this.oldArray, this.reverse);
列印結果
2.concat（拼接）
意思很好理解吧！將兩個陣列懟到一起 （強懟的瓜 em…應該也很好吃）
var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
var concat = oldArray.concat("強扭的的瓜雖然不甜但是俺就是想把它扭下來");
console.log(this.oldArray, this.concat);
列印結果
3.sort（排序）
按指定的順序將陣列排序
<script>
var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
var sort = oldArray.sort();
console.log(this.oldArray, this.sort);
</script>
列印結果
請注意，上面的代碼沒有按照數值的大小對數字進行排序，是按照字符編碼的順序進行排序，要實作這一點，就必須使用一個排序函式
升序：
var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
function sortNumber(a, b) {
return a - b;
}
var sort = oldArray.sort(sortNumber);
console.log(this.oldArray, this.sort);
列印結果
降序：
var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
function sortNumber(a, b) {
return b - a;
}
var sort = oldArray.sort(sortNumber);
console.log(this.oldArray, this.sort);
列印結果
這里定義的函式可以這樣記 a到z是升序 z到a是降序 就很好理解了
4.join（陣列轉字串）
方法指接收一個引數：即默認為逗號分隔符（）
var oldArray = [1, 2, 3, 4, 5, 6];
var join = oldArray.join("☆");
console.log(this.oldArray, this.join);
列印結果
ES5陣列新增方法
2個索引方法：indexOf（）與lastIndexOf（）
兩個方法回傳的都是 要查找的元素 在陣列中首次出現的位置 如果沒有則回傳-1
indexOf是從array[0]開始檢索
lastIndexOf（）是從array[array.length-1]開始 說白了就是倒著檢索
正向檢索 indexOf
var oldArray = ["D", "a", "z", "u", "o"];
var indexOf = oldArray.indexOf("u");
console.log(this.oldArray, this.indexOf);
列印結果
反向檢索 lastInsexOf（）
var oldArray = ["D", "a", "z", "u", "o"];
var lastIndexOf = oldArray.lastIndexOf("D");
console.log(this.oldArray, this.lastIndexOf);
檢索失敗
var oldArray = ["D", "a", "z", "u", "o"];
var lastIndexOf = oldArray.lastIndexOf("W");
console.log(this.oldArray, this.lastIndexOf);
5個迭代方法：forEach()、map()、filter()、some()、every()
這幾個語法個人感覺大同小異 都不會改變原陣列
1.foreach（）
item：當前陣列下的每一項元素
index：下標
var oldArray = ["D", "a", "z", "u", "o"];
var foreach = oldArray.forEach((item, index) => {
console.log(item, index);
});
var oldArray = ["D", "a", "z", "u", "o"];
var foreach = oldArray.forEach((item, index) => {
let newArray = item + "---哦吼";
console.log(newArray);
});
2.map（映射）
map()：指“映射”，方法回傳一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理后的值，
var oldArray = ["D", "a", "z", "u", "o"];
var map = oldArray.map((item, index) => {
return item + "---哦吼";
});
console.log(this.oldArray, this.map);
3.filter（過濾）常用
“過濾”功能，方法創建一個新陣列,過濾出所有符合條件的元素 形成新的陣列
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var filter = oldArray.filter((item, index) => {
return item > 4;
});
console.log(this.oldArray, this.filter);
4.every（）
判斷陣列中的每一項元素是否都滿足條件 相當于&&符 只有都滿足才回傳true
有不滿足條件的
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var every = oldArray.every((item, index) => {
return item > 4;
});
console.log(this.oldArray, this.every);
滿足條件的
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var every = oldArray.every((item, index) => {
return item > 0;
});
console.log(this.oldArray, this.every);
5.some（）
判斷陣列中的每一項中是否有滿足條件的元素 相當于||符 有一個符合條件就回傳true
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var some = oldArray.some((item, index) => {
return item > 4;
});
console.log(this.oldArray, this.some);
都不滿足條件時回傳false
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var some = oldArray.some((item, index) => {
return item > 10;
});
console.log(this.oldArray, this.some);
ES6陣列新增方法（注意瀏覽器兼容）
1.Array.from（）
可以將可遍歷的物件轉換成陣列型別
let json = {
"0": "大",
"1": "左",
"2": "吖",
length: 3
};
let arr = Array.from(json);
console.log(arr);
2.Array.of（）
可將一組數值轉換成陣列型別 不分資料型別 只分數量 數量為0時回傳空陣列 相較于Array.from更加強大
let arr1 = Array.of("左", "仲", "民");
let arr2 = Array.of(["左", "仲", "民"]);
let arr3 = Array.of(undefined);
let arr4 = Array.of();
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
3.find（）
方法回傳通過測驗（函式內判斷）的陣列的第一個元素的值，方法為陣列中的每個元素都呼叫一次函式執行，當陣列中的元素在測驗條件時回傳 true 時, find() 回傳符合條件的元素，之后的值不會再呼叫執行函式，如果沒有符合條件的元素回傳 undefined，
回呼函式可以接收3個引數，依次為當前的值（item）、當前的位置（index）、原陣列（arr）
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var find = oldArray.find((item, index) => {
return item > 4;
});
console.log(this.oldArray, this.find);
有符合函式的回傳第一個符合條件的項
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var find = oldArray.find((item, index) => {
return item > 88;
});
console.log(this.oldArray, this.find);
沒有符合條件的回傳undefined
find()實作根據id取出陣列中的物件
let Arr = [
{
id: 1,
name: "阿左"
},
{
id: 2,
name: "阿右"
}
];
let obj = Arr.find((item, index, arr) => {
return item.id === 1;
});
console.log(obj.name);
4.findIndex（）
和find差不多 不過findIndex回傳的是第一個符合條件的索引下標，如果沒有符合條件的則回傳-1
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var findIndex = oldArray.findIndex((item, index) => {
return item > 4;
});
console.log(this.oldArray, this.findIndex);
第一項符合條件的是5 so 回傳5的索引4
var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var findIndex = oldArray.findIndex((item, index) => {
return item > 66;
});
console.log(this.oldArray, this.findIndex);
沒有符合條件的回傳-1
5.fill（）填充替換
fill()方法用一個固定值填充一個陣列中從起始索引到終止索引內的全部元素，不包括終止索引，
語法：array.fill(value, start, end)
value：必需，填充的值，
start：可選，開始填充位置，如果這個引數是負數，那么它規定的是從陣列尾部開始算起，
end：可選，停止填充位置 (默認為 array.length)，如果這個引數是負數，那么它規定的是從陣列尾部開始算起
let arr = [1,2,3,4,5,6];
arr.fill(0); // [0, 0, 0, 0, 0, 0]
arr.fill(0,1); // [1, 0, 0, 0, 0, 0]
arr.fill(0,1,2); // [1, 0, 3, 4, 5, 6]
arr.fill(0,-1); // [1, 2, 3, 4, 5, 0]
arr.fill(0,1,-1); // [1, 0, 0, 0, 0, 6]
喜歡點贊加關注吧 有贊必回哦~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276207.html
標籤：其他
上一篇：javascript陣列常用方法+陣列原型擴展方法+Object.defineProperty()改變陣列的length屬性特征
下一篇：十、JavaScript 基礎