JavaScript-有关Array

jiezi

5 年前

join()

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

push()、pop()

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()

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()

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()

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

reverse()

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]

JavaScript-有关Array

原型方法

对象属性