技术码头

JS数组 方法整理 我要好好用数组

2019-12-27  本文已影响0人  石菖蒲_xl

说点啥

数组是程序员的法宝之一，善用数组方法可以使数据处理变的简单（优雅）。
每次重新看数组的知识都有新收获。

什么是数组

数组是值的有序集合。
每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。

不一样的JavaScript数组

1、js数组是无类型的
var arr1=[1,2,3,5]; 
var arr2=[1,"2",{a:'11'},["1"]];
2、js数组的索引是基于零的32为数值
3、js数组是动态的

+根据需要它们会增长或者缩减，并且在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间。

4、js数组可能是稀疏的
5、数组继承自Array.prototype中的属性

创建数组

1、使用数组直接量是创建数组最简单的方法
var emptys = []; // 创建没有元素的数组
var primes = [1,3,5,7,11]; // 创建有5个数值的数组
var count = [1,,3]; // 数组有3个元素，中间那个元素值为undefined
...
2、调用构造函数Array()创建数组
var a = new Array(); // 创建一个没有任何元素的空数组
var b = new Array(10); // 创建指定长度数组，
console.log(b.length); // => 10 当实际添加长度大于10 时，length=实际长度
console.log(b[0]); // => undefined

数组类型检测

1、通过ES5方法检测
if (Array.isArray([])){
  // do something
  ...
}
2、不靠谱的instanceof(了解有这么个东西但是从来不用)
[] instanceof Array // => true
([]) instanceof Array // => false

使用这货的问题在web浏览器中有可能有多个窗口或者窗体(frame)存在，每个窗口都有自己的js环境，有自己的全局对象，并且每个全局对象有自己的一组构造函数，因此一个窗体中的对象将不可能是另外窗体中的构造函数的实例，窗体之间的混淆不常发生，但这足以证明instanceof不能视作一个可靠的数组检测方法。

var isArray = Function.isArray || function (o) {
  return typeof o === 'object' && Object.prototype.toString.call(o) === '[object Array]';
}

类型转换

var colors = ['red','blue','green']
/* 除了null或undefined之外的任何值都具有toString()方法 */
colors.toString(); // => "red,blue,green" 
colors.join();     // => "red,blue,green"

+[] // => 0
+[1] // => 1
+[""] // => 0
+["1"] // => 1
+['a'] // => NaN

toString() 和 join()输出一样，但是join("-")可以随意输入连接符

值 字符串 数字 布尔值
[] (空数组) "" 0 true
[9] (1个任意数字元素) "9" 9 true
["a"] (其它) 使用join() NaN true

数组基本操作方法

push（）和 pop()

push()和pop()方法允许将数组当做栈来使用。
push()在数组的尾部添加一个或多个元素，并返回数组新长度。
都是对原数组进行操作

var arr = ['a','b','c'];
var length = arr.push('d','e');
console.log(length) ; // => 5
console.log(arr) ; // ["a", "b", "c", "d", "e"]

pop()删除数组最后一个元素，减小数组长度并返回它删除的值。

var arr = ['a','b','c'];
var value = arr.pop();
console.log(value); // => "c"
console.log(arr); // => ['a','b']

unshift() 和shift()

unshift()在数组的头部添加一个或者多个元素，占有索引 0，其他元素整体后移，最后返回数组新的长度。

var arr = ['a','b','c'];
var length = arr.unshift('d');
console.log(length); // => 4
console.log(arr); //=> ['d', 'a', 'b', 'c']

// 多个参数插入
var arr1 = ['1','2','3'];
arr1.unshift('4','5','6');
console.log(arr1);  // => ['4','5','6','1','2','3']

shift()删除数组的第一个元素并将其返回。

var arr = ['a','b','c'];
var value = arr.shift();
console.log(value); // => "a"
console.log(arr); // => ['b','c']

reverse()

reverse()方法将数组中的元素颠倒顺序，返回逆序的数组。

var arr = [1,2,3];
arr.reverse();
console.log(arr);// => [3,2,1]

sort()

sort()方法将数组中的元素排序并返回排序后的数组。

var arr = [33,4,111,222];
arr.sort(); // => 字母表顺序 [111, 222, 33, 4]
// 升序
arr.sort(function(a,b){return a-b;});// => [4, 33, 111, 222]
// 降序
arr.sort(function(a,b){return b-a;});// => [222, 111, 33, 4]

concat()

concat()方法创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数，如果这些参数中的任何一个自身是数组，则连接的是数组元素，而非数组本身（就是合并数组）。

var arr = [1,2,3];
arr.concat(4,5);  // => [1,2,3,4,5] 相当于是push(4,5)
arr.concat([4,5]);// => [1,2,3,4,5] 合并两个数组返回新数组
arr.concat([4,5],[6,7]); // => [1,2,3,4,5,6,7]
arr.concat(4,[5,[6,7]]); // => [1,2,3,4,5,[6,7]]

// 原数组保持不变
console.log(arr); // => [1,2,3]

slice()

slice()方法返回指定数组的一个片段或子数组。

var arr = [1,2,3,4,5];
arr.slice(0,3); // => [1,2,3]
arr.slice(3); // => [4,5] 
arr.slice(-3);// => [3,4,5]
arr.slice(1,-1); // => [2,3,4]
// 原数组不变
console.log(arr); // => [1,2,3,4,5]

splice()

splice()方法可实现在数组中插入或删除元素，原数组发生改变。

var arr = [1,2,3,4,5];
arr.splice(2,0,'a','b'); // 返回[]没有删除任何元素
console.log(arr); // => [1,2,'a','b',3,4,5]
arr.splice(2,2,[1,2],3); // => 返回['a','b'] 从2下标开始删除2个元素
console.log(arr);// => [1,2,[1,2],3,3,4,5]

查找数组元素

indexOf()

indexOf()验证数组中是否包含某个元素，返回第一个匹配到的元素在数组中的索引，如果没有查到，则返回-1。

var arr = [1,2,3,4,5];
arr.indexOf(3);// => 2 查找3的位置
arr.indexOf(6);// => -1 数组中不包含6，所以返回-1

lastIndexOf()

lastIndexOf ()从数组结尾开始查找，返回第一个匹配到的元素位置，如果每个查到则返回-1。

var arr = [1,2,3,4,5];
arr.lastIndexOf(3);// => 2 查找3的位置
arr.lastIndexOf(6);// => -1 数组中不包含6，所以返回-1

find() 和 findIndex() ES6

find()用于找出第一个符合条件的数组成员。

const arr = [1,4,-5,10];
// 找出第一个小于 0 的成员
const key = arr.find((n) => n < 0);
console.log(key); // => -5
// 找出第一个大于 0 的成员 大于 0 的成员有3个，但是只返回第一个
const key = arr.find((n) => n > 0);
console.log(key); // => 1
// 如果成员是对象呢？
const arr = [{a:1},{a:2},{a:3}];
const _value = arr.find((value) => value.a > 0);
console.log(_value); // => {a:1}

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex()返回第一个符合条件的数组成员的位置，如果都不符合返回-1。

const arr = [1,5,10,15];
// 查找大于9的元素的索引
const key = arr.findIndex((value) => value > 9);
console.log(key); // => 2 第一个大于9的元素是 10，索引是 2

两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
如下：回调函数中的 this 对象指向 person 对象。

function f (v){
  return v > this.age;// ?? this??是谁？？？满脸问号
}
let person = {name:'John',age:20};
// 回调函数中的this对象指向person对象
[10,12,26].find(f,person); // => 26
[10,26,12].findIndex(f,person); // => 1

另外这俩方法都能发现NaN，弥补了数组的indexOf()的不足。

[NaN].indexOf(NaN); // => -1
[NaN].findIndex(y => Object.is(NaN, y)); // => 0
[NaN].find(y => Object.is(NaN, y)); // => NaN

includes()

includes()返回一个布尔值，表示某个数组是否包含给定的值。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

// 从索引3开始搜索，但是此数组并没有索引3
[1, 2, 3].includes(3, 3); // => false
// 从数组最后一位开始搜索
[1, 2, 3].includes(3, -1); // => true
// 第二个参数为负数且绝对值大于数组长度，重置从0开始搜索
[1, 2, 3].includes(3,-4); // => true

数组的迭代方法

ES5的5个迭代方法作用不同但是参数都一样

every()

every()检测数组中的元素是否满足某个条件，必须所有元素调用判定函数都返回true，它才返回true。

const arr = [1,2,3,4,5,6];
arr.every((value) => value < 10); // => true  因为所有的值都小于10
arr.every((value) => value % 2 === 0); // => false 不是所有的值都是偶数 
[].every((value) => value < 10); // => true

some()

some()当数组中至少有一个元素调用判定函数返回true，它就返回true。

const arr = [1,2,3,4,5];
arr.some((value) => value % 2 ===0); // true arr数组中含有偶数
arr.some(isNaN); // => false 数组中不包含非数值元素
[].some((value) => value < 10); // => false

filter()

filter()返回一个数组，是调用数组的子集，传递一个函数用来判定，该函数返回true或false，只有该函数返回true，传递给判定函数的值会被添加到一个新数组中返回。

const arr = [1,2,3,4,5];
// 返回所有小于3的元素
const value = arr.filter((value) => value < 3); // => [1,2]

a.filter((value) => value !==undefined && value !=== null);

map()

map()将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该数组的返回值。

const arr = [1,2,3,4];
const value = arr.map((value) => value * 2);
console.log(value); // [2,4,6,8]
console.log(arr); // [1,2,3,4]

forEach()

forEach()从头到尾遍历数组，为每个元素调用指定函数。

const arr = [1,2,3,4,5];
let sum = 0;
arr.forEach((value) => sum+=value); // 将每个值累加到sum上
console.log(sum); // => 15
arr.forEach((value,index,arr) => arr[index] = value+1);
console.log(arr); // => [2,3,4,5,6]

注意：map、forEach里不可以使用continue、break,每一项都会执行。

注入和折叠

reduce() 和 reduceRight()

reduce()和reduceRight()方法使用指定的函数将数组元素进行组合，生成单个值，这在函数式编程中是常见的操作，也可称为“注入”和“折叠”。

reduce()使用函数去其他不同，有四个参数
var arr = [1,2,3,4,5];
// 传入初始值为 0 
var sum  = arr.reduce(function(prev,cur,index,arr){
  console.log(prev); // 依次输出 0  1  3  6  10 
  return prev + cur;
},0); //数组求和 => 15

// 不传初始值 函数第一个元素作为初始值
var max = arr.reduce(function(prev,cur,index,arr){
  return (pre > cur)?pre:cur;
}); // 求最大值 => 5

reduceRight()工作原理跟 reduce() 一样，不同的是它按照数组索引从高到底（从右到左）处理数组。

下边代码如果reduce的第二个参数不指定会报错

  sum(...values) {
      console.log(values);
      let summation = values.reduce((pre,cur)=>pre+cur,0);
      console.log(summation);   
   }

ES6 扩展

代替函数的apply方法

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 写法
function f (x,y,z) {
   return x + y + z;
}
var args  = [0,1,2];
f.apply(null,args); // => 3

// ES6 写法
let args = [0, 1, 2];
f(...args); // => 3

求一个数组的最大元素

// ES5
Math.max.apply(null,[14,3,77]); // => 77
// ES6
Math.max(...[14,3,77]); // => 77
// 等同于
Math.max(14,3,77); // => 77
扩展运算符的应用
const a1 = [1,2];
const a2 = a1;

a2[0] = 2;
console.log(a1); // => [2,2];

上面的代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针，修改a2，会直接导致a1的变化。

ES5 只能用变通方法来复制数组。

const a1 = [1,2];
const a2 = a1.concat();

a2[0] = 2;
console.log(a1); //  => [1,2];

上面的代码，利用concat()特性a1会返回原数组的克隆，互不影响。

扩展运算符提供了复制数组的简便写法。都是克隆

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

const arr1 = ['a','b'];
const arr2 = ['c'];
const arr3 = ['d','e'];
// ES5 的合并数组
const newArr = arr1.concat(arr2,arr3);
console.log(newArr); // =>  ["a", "b", "c", "d", "e"]
// ES6 的合并数组
const newArr = [...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不过两种方法都是浅拷贝。

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代码中，a3和a4是两种不同方法合并而成的新数组，但是他们的成员都是对原数组成员的引用，这就是浅拷贝，如果修改了引用指向的值，会同步反映到新数组。

var list = [1,2,3,4,5];
// ES5
a = list[0],rest = list.slice(1);
// ES6
[a,...rest] = list;

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

Array.from()

Array.from()用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象。

let arrayLike = {
  '0':'a',
  '1':'b',
  '2':'c',
  length:3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // => ['a','b','c']
// ES6的写法
let arr2 = Array.from(arrayLike); // => ['a','b','c']

Array.from({length:3});
// => [ undefined,undefined,undefined]

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// =>[1, 4, 9]

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// => [1, 0, 2, 0, 3]

const arr = [1,1,2,3,4,5,5,5];
Array.from(new Set(arr));
// => [1, 2, 3, 4, 5]

Array.of()

Array.of()将一组值转换为数组。

Array.of(1,2,3); // => [1,2,3]
Array.of(1,2,3).length; // => 3
Array.of(3); // => [3]

这个方法的主要目的，是弥补数组构造函数Array()的不足。

Array(); // => []
Array(3); // => [,,,]
Array(1,2,3); // => [1,2,3]

上面代码中，Array()没有参数、一个参数、三个参数时，返回结果都不一样，只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组，参数个数只有一个时，实际上是指定数组的长度。
Array.of()基本上可以用来代替Array()或new Array()，并且不存在由于参数不同而导致的重载，它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

copyWithin()

数组实例的 copyWithin()，在当前数组内部，将指定位置的成员复制到其它位置（会覆盖原有成员），然后返回当前数组
使用这个方法会修改当前数组
它接受三个参数

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

fill()

fill()使用给定的值，填充一个数组。

[1,2,3].fill(4);
// => [4,4,4]
new Array(3).fill(7);
// => [7,7,7]

fill()还可以接受第二个参数和第三个参数，用于指定填充的起始和结束位置。

var arr = [1,2,3,4,5];
arr.fill(7,1,2);
console.log(arr); // => [1,7,3,4,5]
// 等同于
arr.splice(1,1,7);
console.log(arr); // => [1,7,3,4,5]

entrues(),keys(),values()

const arr = ['a','b'];
for(let index of arr.keys()){
  console.log(index);
}
// => 0
// => 1
for(let elem of arr.values()){
  console.log(elem);
}
// => 'a'
// => 'b'
for (let [index, elem] of arr.entries()) {
  console.log(index, elem);
}
// => 0 "a"
// => 1 "b"

flat()

数组的成员有时候还是数组，flat用于将嵌套的数组“拉平”，变成一维数组。

var arr = [1,2,[3,4]];
arr.flat();
// => [1,2,3,4]
console.log(arr); // => [1,2,[3,4]];

[1, 2, [3, [4, 5]]].flat()
// =>  [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// => [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)
// =>  [1, 2, 3]

[1,2,,4,5].flat();
// => [1,2,4,5]

flatMap()

该方法对原数组的每个成员执行一个函数（相当于执行map()），然后对返回值组成的数组执行flat()

[1,2,3].flatMap((value) => [value,value * 2]);
// => [1,2,2,4,3,6]
// 相当于执行
[[1,2],[2,4],[3,6]].flat();

数组的空位

数组的空位指，数组的某一个位置没有任何值。

Array(3); // => [,,,]

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
[...['a',,'b']]
// [ "a", undefined, "b" ]
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]

哪些方法会改变原始数组

copyWithin()
fill()
pop()
push()
reverse()
shift()
unshift()
splice()
sort()

上一篇下一篇

猜你喜欢

热点阅读