让前端飞Web前端之路

JS常用数组方法总结

2019-12-24  本文已影响0人  前端辉羽

本文目录

1. 数组的遍历

1.1 for in

for in是个两用方法
可以用来遍历数组，也可以用来遍历对象
多数用来遍历对象，效率比较低

首先遍历对象

let person={name:"老王",age:23,city:"大唐"}
let text=""
for (let i in person){
   text+=person[i]
}

输出结果为：老王23大唐
其次在尝试一些数组

let arry=[1,2,3,4,5]
for (let i in arry){
    console.log(arry[i])
}

能输出出来，输出出来的是下标，证明也是可以的。

1.2 for..of 循环

for in循环看似完美，但实际使用中除了循环对象，基本不会用来循环数组。因为es6提供了一个更完美的数组循环方法：for..of
避免了for in的所有缺点，可以使用break,continue和return，
不仅支持数组的遍历，还可以遍历类似数组的对象，还支持字符串的遍历
支持Map和Set对象遍历
for..of 没法直接去遍历对象，但是遍历数组的时候可以直接获得每一项，而不是像for...in那样只是拿到下标
for(const item of items)循环遍历数组项，如下所示遍历colors列表：

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

提示：
可以随时使用break语句停止遍历。

1.3 for 循环

for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量

const colors = ['blue', 'green', 'white'];

for (let index = 0; index < colors.length; index++) {
  const color = colors[index];
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

index变量从0递增到colors.length-1。此变量用于按以下索引访问项：colors [index]。
提示
for循环也可以随时使用break语句停止遍历。

1.4 array.forEach() 方法

array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
在每次遍历中，都使用以下参数调用callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本身。

const colors = ['blue', 'green', 'white'];

colors.forEach(function callback(item, i) {
  console.log(item, i);
});
// 'blue', 0
// 'green', 1
// 'white', 2

**forEach特性：

2. 数组的映射

2.1 Array.map()方法

array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。
如下所示对每个数组元素都递增 1：

const numbers = [0, 2, 4];
const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});
newNumbers; // => [1, 3, 5]

提示：
array.map()创建一个新的映射数组，而不改变原始数组。

2.2 Array.from()方法

Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。
在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。
如下所示咱们对每个数组元素都递增 1：

const numbers = [0, 2, 4];
const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);
newNumbers; // => [1, 3, 5]

提示：
Array.from()创建一个新的映射数组，而不改变原始数组。
Array.from()更适合从类似数组的对象进行映射。
在实际项目开发中，我们通过使用Array.from()将类数组对象转换为真正数组

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。
这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4，元素均为undefined的数组
由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

注: 该类数组对象的属性名可以加引号，也可以不加引号

3. 数组简化

3.1 Array.reduce() 方法

array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。
在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。
示例是对数字数组求和：

const numbers = [2, 0, 4];
function summarize(accumulator, number) {
  return accumulator + number;
}
const sum = numbers.reduce(summarize, 0);
sum; // => 6

第一步，将accumulator 初始化为0。然后，对每个累加数字和的数组项调用summary函数。
提示：
如果没有使用 initialValue 来设置初始值，则默认使用0来作为初始值。

4. 数据连接

4.1 array.concat() 方法

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示，连接两个数组：

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];
const everyone = heroes.concat(villains);
everyone // ["小智", "前端小智", "老王", "小三"]

提示：
concat()创建一个新的数组，而不改变原来的数组
array.concat(array1 [，array2，...]) 接受多个要连接的数组。

4.2 展开操作符号

咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]。

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];
const names = [...heroes, ...villains];
names; // ["小智", "前端小智", "老王", "小三"]

提示
[...arr1, ...arr2, ...arrN]：可以使用展开运算符连接所需数量的数组。

5. 数组截取

5.1 array.slice() 方法

array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。

const names = ["小智", "前端小智", "老王", "小三"]
const heroes = names.slice(0, 2)
const villains = names.splice(2)
heroes // ["小智", "前端小智"]
villains // ["老王", "小三"]

提示：
array.slice() 创建一个新数组，而不改变原始数组。

6. 数组拷贝

6.1 展开操作符号

拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：

const colors = ['white', 'black', 'gray'];
const clone = [...colors];
clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提示：
[...array] 创建一个浅拷贝。

6.2 array.concat()方法

[].concat(array)是另一种拷贝数组的方法。

const colors = ['white', 'black', 'gray'];
const clone = [].concat(colors);
clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提示：
[].concat(array) 创建一个浅拷贝。

6.3 array.slice() 方法

array.slice())是另一种拷贝数组的方法。

const colors = ['white', 'black', 'gray'];
const clone = colors.slice();
clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提示：
colors.slice() 创建一个浅拷贝。

7. 数组查找

7.1 array.includes() 方法

array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。 可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：

const numbers = [1, 2, 3, 4, 5];
numbers.includes(2);  // => true
numbers.includes(99); // => false

7.2 array.find() 方法

array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
如下所示，找到数组中的第一个偶数：

const numbers = [1, 2, 3, 4, 5];
function isEven(number) {
  return number % 2 === 0;
}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2

7.3 array.indexOf() 方法

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。
如下所示，找到前端小智的索引：

const names = ["小智", "前端小智", "老王", "小三"]
const index = names.indexOf('前端小智')
index // 1

提示：
如果找不到该项，则array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

7.4 array.every() 方法

如果每个项都通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示，确定数组是否只包含偶数：

const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];
function isEven(number) {
  return number % 2 === 0;
}
evens.every(isEven); // => true
numbers.every(isEven); // => false

7.5 array.some() 方法

如果每个项只要一下通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：确定数组是否至少包含一个偶数：

const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];
function isEven(number) {
  return number % 2 === 0;
}
numbers.some(isEven); // => true
odds.some(isEven);   // => false

8. 数组过滤

8.1 array.filter() 方法

array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：将一个数组过滤为仅包含偶数：

const numbers = [1, 5, 7, 10];
function isEven(number) {
  return number % 2 === 0;
}
const evens = numbers.filter(isEven);
evens; // => [10]

提示：
array.filter() 创建一个新数组，而不改变原始数组。
filter的四个用法总结：
①.删除重复的值

const numbers = [3, 12, 54, 12, 4, 4, 3, 12, 16];
const filteredNumbers = numbers.filter((number, index) => numbers.indexOf(number) === index);
console.log(filteredNumbers); // [3, 12, 54, 4, 16]

我们使用回调函数的第二个参数，它是当前元素的索引。
在这里，我们将indexOf（）函数返回的索引与当前元素的实际索引进行比较。如果它们不同，则当前元素为重复值。
以上面的代码段中的数组为例。当实际索引为时3，相邻元素的值为12。但是，如果我们使用indexOf()该元素，则返回的索引是1因为该元素12首次出现在index处1。因此12是重复值之一。

②.删除无效值
无效值被认为是可能导致错误和意外行为的值。
以年龄为例。如果年龄是定义的数字，则该年龄有效。
现在，我们要求过滤所有有效年龄的人，请看下面的代码。

const people = [
  { name: ‘Amy’, gender: ‘female’, age: ‘28’ },
  { name: ‘James’, gender: ‘male’, age: 13 },
  { name: ‘Victor’, gender: ‘male’, age: null },
  { name: ‘David’, gender: ‘male’, age: 28 },
  { name: ‘Simon’, gender: ‘male’, age: undefined },
  { name: ‘Anna’, gender: ‘female’, age: 21 },
  { name: ‘Jane’, gender: ‘female’, age: NaN }
];
const filteredPeople = people.filter(person => person.age !== undefined && typeof person.age === ‘number’ && !isNaN(person.age));
console.log(filteredPeople); 
// [{ name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Anna’, gender: ‘female’, age: 21 }]

③.过滤数字数组
这是最简单的用法。
假设你有一个数字数组，并且只需要从该数组中提取奇数。

const numbers = [23, 54, 1, 3, 72, 28];
const oddNumbers = numbers.filter(number => number % 2 !== 0);
console.log(oddNumbers); // [23, 1, 3]

或者你想创建一个包含给定数组中所有素数的新数组。

const isPrime = number => {
  if (number === 1) return false;
  if (number === 2) return true;
  for (let i = 2; i < number; i++) {
    if (number % i === 0) return false;
  }

  return true;
}
const numbers = [23, 54, 1, 3, 72, 28];
const oddNumbers = numbers.filter(isPrime);
console.log(oddNumbers); // [23, 3]

④.过滤对象数组
尽管一个对象比数字更复杂，但是使用filter()仍然可以保持简单。
例如，假设我们有很多人。要求是找到所有年龄大于18岁的人。

const people = [
  { name: ‘Amy’, gender: ‘female’, age: 28 },
  { name: ‘James’, gender: ‘male’, age: 13 },
  { name: ‘Victor’, gender: ‘male’, age: 17 },
  { name: ‘David’, gender: ‘male’, age: 28 },
  { name: ‘Simon’, gender: ‘male’, age: 33 }
];
const filteredPeople = people.filter(person => person.age > 18);
console.log(filteredPeople); 
// [{ name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }]

如果是，我们需要找出所有年龄大于18岁的女性，这时，我们只需向回调函数添加一个附加条件即可。

const people = [
  { name: ‘Amy’, gender: ‘female’, age: 28 },
  { name: ‘James’, gender: ‘male’, age: 13 },
  { name: ‘Victor’, gender: ‘male’, age: 17 },
  { name: ‘David’, gender: ‘male’, age: 28 },
  { name: ‘Simon’, gender: ‘male’, age: 33 }
];
const filteredPeople = people.filter(person => person.age > 18 && person.gender === ‘female’);
console.log(filteredPeople); 
// [{ name: ‘Amy’, gender: ‘female’, age: 28 }]

9. 数组插入

9.1 array.push() 方法

array.push(item1 [...，itemN]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。
如下所示，在names 数组的末尾添加 '小智'

const names = ['小智']
names.push('前端小智')
names // ["小智", "前端小智"]

提示：
array.push() 会改变原数组
array.push(item1, item2, ..., itemN) 可以添加多个元素。

9.2 array.unshift() 方法

array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度

const names = ['小智']
names.unshift('前端小智')
names // ["前端小智", "小智"]

提示：
array.unshift() 会改变原数组
array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

9.3 展开操作符号

可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。
在数组末尾追加一个项:

const names = ['小智', '大治']
const names2 = [...names, '王大冶']
names2 // ["小智", "大治", "王大冶"]

在数组的开头追加一个项:

const names = ['小智', '大治']
const names2 = [
  '王大冶',
  ...names
]
names2 // ["王大冶", "小智", "大治"]

在任何索引处插入元素：

const names = ['小智', '大治']
const indexToInsert = 1
const names2 = [
  ...names.slice(0, indexToInsert),
  '前端小智',
  ...names.slice(indexToInsert)
]
names2  // ["小智", "前端小智", "大治"]

10. 删除数组元素

10.1 array.pop() 方法

array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：

const colors = ['blue', 'green', 'black'];
const lastColor = colors.pop();
lastColor; // => 'black'
colors; // => ['blue', 'green']

提示：
array.pop() 会改变原数组。

10.2 array.shift() 方法

array.shift()方法从数组中删除第一个元素，然后返回该元素。

const colors = ['blue', 'green', 'black'];
const firstColor = colors.shift();
firstColor; // => 'blue'
colors; // => ['green', 'black']

提示：
array.shift() 会改变原数组。

10.3 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
例如，咱们从索引1处删除2个元素：

const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2)
names // => ["张三", "赵六"]

names.splice(1，2)删除元素'张三'和'王五'。
names.splice() 可以插入新元素，而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 '小智'：

const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2, '小智')
names //  ["张三", "小智", "赵六"]

提示：
array.splice() 会改变原数组。

11. 清空数组

11.1 array.length属性

array.length是保存数组长度的属性。 除此之外，array.length是可写的。
如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。
如下所示：使用array.length = 0删除数组中的所有项目：

const colors = ['blue', 'green', 'black'];
colors.length = 0;
colors; // []

11.2 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：

const colors = ['blue', 'green', 'black'];
colors.splice(0);
colors; // []

12. 填充数组

12.1 array.fill() 方法

array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。
例如，使用用零值填充数组：

const numbers = [1, 2, 3, 4];
numbers.fill(0);
numbers; // => [0, 0, 0, 0]

不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

const length = 3;
const zeros = Array(length).fill(0);
zeros; // [0, 0, 0]

12.2 Array.from() 函数

Array.from() 可以初始化带有对象的特定长度的数组：

const length = 4;
const emptyObjects = Array.from(Array(length), function() {
  return {};
});
emptyObjects; // [{}, {}, {}, {}]

13. 数组扁平化

13.1 array.flat()方法

array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：

const arrays = [0, [1, 3, 5], [2, 4, 6]];
const flatArray = arrays.flat();
flatArray; // [0, 1, 3, 5, 2, 4, 6]

arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。
提示：
array.flat() 创建一个新数组，而不会改变原始数组。

14. 数组的排序

14.1 array.sort() 方法

array.sort([compare])方法对数组的元素进行排序。
可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：
如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。
如果a等于b，就返回0。
如果a大于b，就返回一个大于0的值。
如下所示，对数组 numbers 时行排序

const numbers = [4, 3, 1, 2];
numbers.sort();
numbers; // => [1, 2, 3, 4]

numbers.sort() 以升序对数字进行排序。
使用比较函数，让偶数排在奇数前面：

const numbers = [4, 3, 1, 2];

function compare(n1, n2) {
  if (n1 % 2 === 0 && n2 % 2 !== 0) {
    return -1;
  }
  if (n1 % 2 !== 0 && n2 % 2 === 0) {
    return 1;
  }
  return 0;
}
numbers.sort(compare);
numbers; // => [4, 2, 3, 1]

提示：
array.sort() 会改变原数组。

14.2 reverse()

此方法用于颠倒数组中元素的顺序。第一个元素成为最后一个，最后一个元素将成为第一个。
···
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
// -------> Output : ['a', 'b', 'c', 'd', 'e']
···

15.数组的转换

将数组转换为字符串

15.1 toString()

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
//结果为  Banana,Orange,Apple,Mango

15.2 join()

join()行为类似 toString()，但是参数可以规定分隔符

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
//结果为  Banana * Orange * Apple * Mango
上一篇下一篇

猜你喜欢

热点阅读