数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()、array.map()等来操作数组。
在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知所措,所以本文就列出 15 种常用数据方法,让咱们重温加强记忆一下。
for(const item of items)循环遍历数组项,如下所示遍历colors列表:
const colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'
提示:
咱们可以随时使用break语句停止遍历。
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]。
提示
咱们可以随时使用break语句停止遍历。
array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
在每次遍历中,都使用以下参数调用callback(item [, index [, array]]):当前遍历项,当前遍历索引和数组本身。
const colors = ['blue', 'green', 'white'];
colors.forEach(function callback(value, index) {
console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2
提示:
咱们不能中断array.forEach()迭代。
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()创建一个新的映射数组,而不改变原始数组。
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.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 来设置初始值,则默认使用数组的第一个元素作为初始值。
array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示,连接两个数组:
const heroes = ['web', '前端web'];
const villains = ['老王', '小三'];
const everyone = heroes.concat(villains);
everyone // ["web", "前端web", "老王", "小三"]
提示:
咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]。
const heroes = ['web', '前端web'];
const villains = ['老王', '小三'];
const names = [...heroes, ...villains];
names; // ["web", "前端web", "老王", "小三"]
提示:
[...arr1, ...arr2, ...arrN]:咱们可以使用展开运算符连接所需数量的数组。
array.slice([fromIndex [,toIndex]])返回数组的一个片段,该片段从fromIndex开始,以toIndex结尾(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。
const names = ["web", "前端web", "老王", "小三"]
const heroes = names.slice(0, 2)
const villains = names.splice(2)
heroes // ["web", "前端web"]
villains // ["老王", "小三"]
提示:
array.slice() 创建一个新数组,而不改变原始数组。
拷贝数组的一种简单方法是使用展开运算符:const clone = [... array],如下所示,拷贝 colors 数组:
const colors = ['white', 'black', 'gray'];
const clone = [...colors];
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示:
[...array] 创建一个浅拷贝。
[].concat(array)是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = [].concat(colors);
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示:
[].concat(array) 创建一个浅拷贝。
array.slice())是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = colors.slice();
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示:
colors.slice() 创建一个浅拷贝。
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
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
array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。
如下所示,找到前端web的索引:
const names = ["web", "前端web", "老王", "小三"]
const index = names.indexOf('前端web')
index // 1
提示:
如果每个项都通过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
如果每个项只要一下通过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
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() 创建一个新数组,而不改变原始数组。
array.push(item1 [...,itemN]) 方法将一个或多个项追加到数组的末尾,并返回新的长度。
如下所示,在names 数组的末尾添加 'web'
const names = ['web']
names.push('前端web')
names // ["web", "前端web"]
提示:
array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头,返回数组的新长度
const names = ['web']
names.unshift('前端web')
names // ["前端web", "web"]
提示:
可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。
在数组末尾追加一个项:
const names = ['web', '大治']
const names2 = [...names, '王大冶']
names2 // ["web", "大治", "王大冶"]
在数组的开头追加一个项:
const names = ['web', '大治']
const names2 = [
'王大冶',
...names
]
names2 // ["王大冶", "web", "大治"]
在任何索引处插入元素:
const names = ['web', '大治']
const indexToInsert = 1
const names2 = [
...names.slice(0, indexToInsert),
'前端web',
...names.slice(indexToInsert)
]
names2 // ["web", "前端web", "大治"]
array.pop()方法从数组中删除最后一个元素,然后返回该元素。如下所示,删除colors数组的最后一个元素:
const colors = ['blue', 'green', 'black'];
const lastColor = colors.pop();
lastColor; // => 'black'
colors; // => ['blue', 'green']
提示:
array.pop() 会改变原数组。
array.shift()方法从数组中删除第一个元素,然后返回该元素。
const colors = ['blue', 'green', 'black'];
const firstColor = colors.shift();
firstColor; // => 'blue'
colors; // => ['green', 'black']
提示:
array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。
例如,咱们从索引1处删除2个元素:
const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2)
names // => ["张三", "赵六"]
names.splice(1,2)删除元素'张三'和'赵六'。
names.splice() 可以插入新元素,而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素,然后插入一个新的元素 'web':
const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2, 'web')
names // ["张三", "web", "赵六"]
提示:
可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。
const names = ['张三', '李四', '王五', '赵六']
const fromIndex = 1
const removeCount = 2
const newNames = [
...names.slice(0, fromIndex),
...names.slice(fromIndex + removeCount)
]
newNames // ["张三", "赵六"]
array.length是保存数组长度的属性。 除此之外,array.length是可写的。
如果咱们写一个小于当前长度的array.length = newLength,多余的元素从数组中移除。
如下所示:使用array.length = 0删除数组中的所有项目:
const colors = ['blue', 'green', 'black'];
colors.length = 0;
colors; // []
array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。
如果removeCount参数被省略,那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素:
const colors = ['blue', 'green', 'black'];
colors.splice(0);
colors; // []
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]
提示:
Array.from() 有助于初始化带有对象的特定长度的数组:
const length = 4;
const emptyObjects = Array.from(Array(length), function() {
return {};
});
emptyObjects; // [{}, {}, {}, {}]
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() 创建一个新数组,而不会改变原始数组。
array.sort([compare])方法对数组的元素进行排序。
可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果:
如下所示,对数组 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]
提示:
avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合
单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。
在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。
今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。
数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。
JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。
本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()
vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength
使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!