JavaScript · 有關Array

時間 2019-11-08

標籤 javascript 有關 array 欄目 JavaScript 简体版

原文原文鏈接

原型方法

join()數組

var arr = [1,2,3];
var str = arr.join('-');
console.log(arr); // [1,2,3]
console.log(str); // '1-2-3'

push()、pop()app

var arr = [1,2,3];
var length = arr.push(8,9);
console.log(length); // 5
console.log(arr); // [1,2,3,8,9]
var ele = arr.pop();
console.log(ele); // 9
console.log(arr); // [1,2,3,8]

shift()、unshift()code

var arr = [1,2,3];
var ele = arr.shift();
console.log(ele); // 1
console.log(arr); // [2,3]
var length = arr.unshift(0,1); // 在[2,3]基礎上
console.log(length); // 4
console.log(arr); // [0,1,2,3]

indexOf()、lastIndexOf()對象

var arr = [1,3,5,5,7,9];
console.log(arr.indexOf(5)); // 2
console.log(arr.lastIndexOf(5)); // 3
console.log(arr.indexOf(5,2)); // 2
console.log(arr.indexOf(5,3)); // 3
console.log(arr.indexOf(5,4)); // -1
console.log(arr.indexOf('5')); // -1

find()、findIndex()排序

var arr = [1,3,5,7,9];
arr.find((item,index) => item === 3); // 3
arr.find((item,index) => index === 3); // 7
arr.find((item,index) => item === 0); // undefined
arr.find((item,index) => index === 5); // undefined
arr.findIndex((item,index) => item === 5); // 2 
arr.findIndex((item,index) => index === 2); // 2
arr.findIndex((item,index) => item === 2); // -1
arr.findIndex((item,index) => index === 5); // -1

keys()、values()、entries()ip

let keys = [1,3,5].keys();
for(let k of keys) {
    console.log(k);
}
// 0
// 1
// 2
let values = [1,3,5].values();
for(let v of values) {
    console.log(v);
}
// 1
// 3
// 5
let entries = [1,3,5].entries();
for(let e of entries) {
    console.log(e);
}
// [0,1]
// [1,3]
// [2,5]

reduce()、reduceRight()字符串

var arr = [1,2,3,4,5];
var sum = arr.reduce((prev,cur,index,arr) => prev + cur);
console.log(arr); // [1,2,3,4,5]
console.log(sum); // 15
var sub = arr.reduceRight((prev,cur,index,arr) => prev - cur);
console.log(arr); // [1,2,3,4,5]
console.log(sub); // -5

every()、some()原型

var arr = [1,3,5,7];
arr.every(item => item > 1); // false
arr.every(item => item >= 1); // true
arr.some(item => item > 1); // true
arr.some(item => item > 9); // false

includes()it

var arr = [1,3,5];
arr.includes(3); // true
arr.includes(7); // false
arr.includes('1'); // false

reverse()io

var arr = [1,3,5,7,9];
var rev = arr.reverse();
console.log(arr); // [9,7,5,3,1]
console.log(rev); // [9,7,5,3,1]

sort()

var arr = [2,11,7,9];
var newArr = arr.sort((prev,cur) => {
  if(prev-cur > 0) {
      return 1;
  } else if(prev-cur < 0) {
      return -1;
  } else {
      return 0;
  }
});
console.log(arr); // [2,7,9,11]
console.log(newArr); // [2,7,9,11]

concat()

var arr1 = [1,2,3];
var arr2 = [4,5];
var newArr = arr1.concat(arr2);
console.log(arr1); // [1,2,3]
console.log(arr2); // [4,5]
console.log(newArr); // [1,2,3,4,5]
var arr3 = ['a','b'];
var arr4 = [1,[2,3]];
var newArr = arr3.concat(arr4);
console.log(newArr); // ['a','b',1,[2,3]]
var arr5 = ['A','B'];
var newArr = arr5.concat(1,[2,3]); // ['A','B',1,2,3]
console.log(newArr.length); // 5

slice()

var arr = [1,3,5,7,9];
var newArr = arr.slice(1,4);
console.log(arr); // [1,3,5,7,9] 
console.log(newArr); // [3,5,7]

splice()

// 3個參數：起始index，要刪除的項數，要插入的項
var arr = [1,2,3,5,6,7];
var del = arr.splice(4,1);
console.log(del); // [6] 
console.log(arr); // [1,2,3,5,7]
var add = arr.splice(3,0,4);
console.log(add); // []
console.log(arr); // [1,2,3,4,5,7]
var upd = arr.splice(4,2,5,6,7);
console.log(upd); // [5,7]
console.log(arr); // [1,2,3,4,5,6,7]
// 可見：返回給del，add，upd的都是被刪的項的數組

map()

var arr = [1,2,3];
var newArr = arr.map((item,index) => item * item);
console.log(arr); // [1,2,3]
console.log(newArr); // [1,4,9]

fill()

// 以覆蓋的方式填充
// 3個參數：要填充的項，起始填充index，結束填充index (前閉後開)
var arr = [1,2,3];
var newArr = arr.fill(0,1);
console.log(arr); // [1,0,0]
console.log(newArr); // [1,0,0]
var arr2 = [1,2,3,4,5];
arr2.fill(0,1,1); // [1,2,3,4,5]
arr2.fill(0,1,3); // [1,0,0,4,5]
var arr3 = [1,2];
arr2.fill(0,1,5); // [1,0,0,0,0]

filter()

var arr = [1,2,3,4,5,6,7,8,9,10];
var newArr = arr.filter((item,index) => {
    return item%3 === 0 && index > 2
})
console.log(arr); // [1,2,3,4,5,6,7,8,9,10]
console.log(newArr); // [6,9]

filter()、find()、map()三者做用徹底不一樣，見文末補充

forEach()

var arr = [1,2,3];
var newArr = arr.forEach(item => item*2);
console.log(arr); // [1,2,3]
console.log(newArr); // undefined
arr.forEach(item => console.log(item*item));
// 1
// 4
// 9

Tips 1

改變了原數組的方法（操做數組自己）：

push()：向末尾添加元素 / 返回添加後長度

pop()：刪除末尾的元素 / 返回刪除的元素

shift()：刪除開頭的元素 / 返回刪除的元素

unshift()：向開頭添加元素 / 返回添加後長度

reverse()：顛倒數組順序 / 返回顛倒後數組

sort()：按規則給數組排序 / 返回排序後數組

splice()：刪除、插入或替換數組元素 / 返回刪除的元素的數組

fill()：以覆蓋方式填充數組 / 返回填充後數組

不改變原數組的方法（構建新數組或判斷數組元素）：

join()：

find()、findIndex()：

indexOf()、lastIndexOf()：

keys()、values()、entries()：

every()、some()、includes()：

reduce()、reduceRight()：

concat()、slice()、map()、filter()：

forEach()：

Tips 2

filter()、find()、map()各自的做用

filter()：以當前數組爲基，篩選出符合條件的元素，並構建一個新數組
實例： [1,2,3] -> [1,2]

find()：找到數組中符合查詢條件的第一個元素
實例：[1,2,3] -> 2

map()：以當前數組爲基，遍歷數組，並對各元素執行map表達式，構建出一個新數組
實例： [1,2,3] -> [1,4,9]

Tips 3

sort()的默認排序

['Google','Apple','Microsoft'].sort(); // ['Apple','Google','Microsoft']
解釋：字符串按首字母的ASCII碼進行排序

['Google','apple','Microsoft'].sort(); // ['Google','Microsoft','apple']
解釋：字符串根據ASCII碼進行排序，而小寫字母a的ASCII碼在大寫字母以後

[10,20,1,2].sort(); // [1,10,2,20]
解釋：sort()默認排序會先把全部元素轉換成String再排序

對象屬性

Array.from()

// 根據僞數組對象或可迭代對象，返回包含這些元素的數組
Array.from([1,3,5].values()); // [1,3,5]
Array.from([1,3,5].keys()); // [0,1,2]
Array.from([1,3,5].entries()); // [[0,1],[1,3],[2,5]]
Array.from('123'); // ['1','2','3']
Array.from([1,2,3]); // [1,2,3]
Array.from(new Set([1,2,3])) // [1,2,3]
Array.from(new Map([[1,2],[3,4],[5,6]])) // [[1,2],[3,4],[5,6]]
Array.from('123',n => n*2) // [2,4,6]

function func(){
  return Array.from(arguments)
}
func(1,2,3,4) // [1,2,3,4]

Array.of()

// 根據給的元素，返回包含這些元素的數組
Array.of(1);
// [1]
Array.of(1,2,3,4,5);
// [1,2,3,4,5]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。