数组(Array)作为 JavaScript 位列第一的对象, 其重要性可见一般,在这里就让我们来详细的扒一扒数组对象都有哪些方法,它们分别能对数组做什么。
官方对于 Array(数组)对象的解释是这样的:使用单独的变量名来存储一系列的值。简而言之就是把你要储存的值都放在一个房间里,然后给他们每人一个固定的座位号,你在找这些值的时候可以通过座位号 1、2、3...... 快速的找到你需要的数值。
在 JavaScript 中,数组是一种特殊的对象,用于表示和操作有序的数据集。数组是一种数据结构,可以存储多个值在一个变量中,并通过数字索引来访问这些值。
JavaScript 中的数组与其他编程语言中的数组有所不同,因为它具有动态大小,这意味着可以在运行时添加或删除元素。以下是一些关于 JavaScript 数组的基本特点:
Array对象的方法可以根据其用途和功能来进行分类,本文将按照不同的分类来分别对这些方法做解释。
以下这些方法用于将数组转换为其他数据类型,或者将其他数据类型转换为数组。
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而是返回一个新数组。
语法:array1.concat(array2, array3,..., arrayN)
注:如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat(array2, array3);
console.log(array4); // 输出: ['a', 'b', 'c','d', 'e', 'f', 'g', 'h', 'i']
join() 方法用于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。语法:array.join(separator) 参数说明:
返回值: 返回一个字符串,该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log('and')
// 输出:Banana and Orange and Apple and Mango
slice() 方法可从已有的数组中返回选定的元素,slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分,slice() 方法不会改变原始数组。 语法:array.slice(start, end) 参数说明:
返回值: Array 返回一个新的数组,包含从 start(包括该元素) 到 end (不包括该元素)的 arrayObject 中的元素。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(-3,-1))
console.log(fruits.slice(-3))
// 输出: ['Lemon', 'Apple']
// ['Lemon', 'Apple', 'Mango']
toString() 方法可把数组转换为字符串,并返回结果。
注:数组中的元素之间用逗号分隔。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
console.log(str)
// 输出:Banana,Orange,Apple,Mango
以下这些方法用于获取或设置数组中特定元素的位置或值。
该方法将从头到尾地检索数组,看它是否含有对应的元素,开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时),如果找到一个 item,则返回 item 的第一次出现的位置,开始位置的索引为 0,如果在数组中没找到指定元素则返回 -1。
注:提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法。
语法 :array.indexOf(item,start)
参数说明:
返回值:Number 元素在数组中的位置,如果没有搜索到则返回 -1。
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.indexOf("Apple",4))
// 输出:6
console.log(fruits.indexOf("Apple",0))
// 输出:2
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找,如果要检索的元素没有出现,则该方法返回 -1,该方法将从尾到头地检索数组中指定元素 item,开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时),如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置,数组的索引开始位置是从 0 开始的,如果在数组中没找到指定元素则返回 -1。
注:如果你想查找数组首次出现的位置,请使用 indexOf() 方法。
语法:array.lastIndexOf(item,start)
参数说明:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.lastIndexOf("Apple"))
// 输出:6
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值,此方法改变数组的长度。
提示:移除数组末尾的元素可以使用 pop() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift())
// 输出:Mango
console.log(fruits)
// 输出:[Orange,Apple,Mango]
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度,该方法将改变原数组。
提示: 将新项添加到数组末尾,请使用 push() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits)
// 输出:Lemon,Pineapple,Banana,Orange,Apple,Mango
splice() 方法用于添加或删除数组中的元素,这种方法会改变原始数组,
语法:array.splice(index,howmany,item1,.....,itemX)
参数说明:
返回值:如果删除一个元素,则返回一个元素的数组,如果未删除任何元素,则返回空数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2,1,"Lemon","Kiwi"))
// 移除数组的第三个元素,并在数组第三个位置添加新元素:
// 输出:[Banana,Orange,Lemon,Kiwi,Mango]
pop() 方法用于删除数组的最后一个元素并返回删除的元素,此方法会改变数组的长度。
提示:移除数组第一个元素,请使用 shift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop())
// 输出:Mango
console.log(fruits)
// 输出:["Banana", "Orange", "Apple"]
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度,新元素将添加在数组的末尾,此方法会改变数组的长度。
提示:在数组起始位置添加元素请使用 unshift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push('Cherry'))
// 输出:5
console.log(fruits)
// 输出:['Banana', 'Orange', 'Apple', 'Mango', 'Cherry']
这些方法用于对数组进行排序。
sort() 方法用于对数组的元素进行排序,排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序(当数字是按字母顺序排列时"40"将排在"5"前面),使用数字排序,你必须通过一个函数作为参数来调用,函数指定数字是按照升序还是降序排列,这种方法会改变原始数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort())
//输出:['Apple', 'Banana', 'Mango', 'Orange']
reverse() 方法用于反转数组中元素的顺序。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.reverse())
// 输出: ['Mango', 'Apple', 'Orange', 'Banana']
这些方法允许你遍历数组的每个元素。
forEach() 用于对数组中的每个元素执行一次提供的函数;这个方法不会改变数组的长度。(注: forEach() 对于空数组是不会执行回调函数的)
语法:array.forEach(callback(currentValue, index, arr), thisArg)
参数说明:
var numbers = [65, 44, 12, 4];
var temp=0;
numbers.forEach((item)=>{return temp=temp+item})
console.log(temp)
// 输出:125
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,该方法按照原始数组元素顺序依次处理元素。
注:map() 不会对空数组进行检测;map() 不会改变原始数组。
语法:array.map(callback(currentValue,index,arr), thisArg)
参数说明:
var numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt))//function函数使用Math函数,可选参数均省略
// 输出:2,3,4,5
filter() 方法创建一个新的数组,过滤出旧数组中符合条件的元素,存储到新数组中,筛选条件由调用方提供。(注:filter() 不会对空数组进行检测;filter() 不会改变原始数组)
语法:array.filter(callback(currentValue,index,arr), thisArg)
参数说明:
const ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
const newArr = ages.filter(checkAdult);
console.log(newArr) // 输出:[32,33,40]
var newArr1 = ages.filter((item, index) => (item >= 18));
console.log(newArr1); // 输出:[32,33,40]
这里详细解释一下 thisArg 参数的具体作用,后边再出现就不做解释了!thisArg 参数是 Array.prototype.filter() 方法的一个可选参数。它是一个值,用于指定在回调函数中作为 this 上下文执行时的上下文对象。如果没有提供 thisArg 参数,回调函数将在全局对象上作为 this 上下文执行。当你在回调函数中使用 thisArg 参数时,你实际上是在告诉 JavaScript 在执行回调函数时应该使用哪个对象作为 this 的上下文。这对于那些依赖于特定上下文的对象(如对象方法)尤其有用。
下面是一个简单的例子来帮助理解:
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
return this.isEven(num); // 这里假设有一个名为 isEven 的方法在 this 上
}, { isEven: function(num) { return num % 2 === 0; } });
console.log(evenNumbers); // 输出: [2, 4, 6]
在这个例子中,我们假设存在一个名为 isEven 的方法,该方法用于检查一个数字是否为偶数。我们使用 thisArg 参数来指定一个对象,该对象具有一个名为 isEven 的方法。在 filter() 方法中,回调函数将在这个对象上作为 this 上下文执行,因此this.isEven(num) 将调用该对象上的 isEven 方法。
find() 方法查找目标数组中第一个满足条件的数组元素;find() 方法会为数组中的每个元素依次调用一次传入的筛选条件,找到第一个满足条件的数组元素时,直接返回符合条件的元素,之后的元素不会再调用筛选函数,如果没有符合条件的元素返回 undefined。(注: find() 对于空数组,函数是不会执行的,find() 并没有改变数组的原始值) 语法:array.find(callback(currentValue, index, arr),thisArg)
参数说明:
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= 18;
}
const temp= ages.find(checkAdult);
console.log(temp) // 输出:20
temp = ages.find((item, index) => { return item>= 10; });
console.log(temp) // 输出:12
some() 方法用于检测数组中的元素是否满足指定条件(函数提供),some() 方法会为数组的每个元素依次执行 callback 函数,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
注:some() 不会对空数组进行检测;some() 不会改变原始数组。
语法:array.some(callback(currentValue,index,arr),thisArg) 参数说明:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.some(checkAdult))
// 输出:true
every() 方法用于检测数组中所有元素是否都通过指定的测试函数;如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测;如果所有元素都满足条件,则返回 true。
语法:array.every(callback(currentValue,index,arr), thisArg)
参数说明:
返回值:返回一个布尔值,表示数组中的所有元素是否都通过了测试。
注:every() 不会对空数组进行检测,every() 不会改变原始数组。
const arr = [1, 2, 3, 4, 5];
const isEven = function(num) { return num % 2 === 0; };
const allEven = arr.every(isEven);
console.log(allEven); // 输出: false
var ages = [32, 33, 16, 40];
console.log(ages.every((item)=>item>18)) // 输出:false
console.log(ages.every((item)=>item>10)) // 输出:true
这些方法用于检测数组的一些特性,例如是否存在某个元素或某个值是否存在于数组中。
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
语法:arr.includes(searchElement,fromIndex) 参数说明:
**注:**如果 fromIndex 大于等于数组长度 ,则返回 false,如果 fromIndex 为负值,计算出的索引将作为开始搜索 searchElement 的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
var site = ['runoob', 'google', 'taobao'];
console.log(site.includes('runoob')
// 输出:true
findIndex() 方法查找数组中第一个符合条件的元素位置,findIndex() 方法为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回 true 时,findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数,如果没有符合条件的元素返回 -1。(注: findIndex() 对于空数组,函数是不会执行的; findIndex() 并没有改变数组的原始值)
语法:array.findIndex(callback(currentValue, index, arr), thisArg)
参数说明:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
const temp = ages.findIndex(checkAdult);
console.log(temp)
// 输出:2
const temp = ages.findIndex((item, index) =>( item >= 18))
console.log(temp)
// 输出:2
这些方法允许你将数组的元素解构到变量中。
entries() 方法主要用于遍历数组或对象的键值对。在数组中,entries 方法返回一个新的数组迭代器对象,该对象包含数组中每个索引的键值对。例如,对于数组 arr = ["a", "b", "c"],调用 arr.entries() 后,可以得到如下结果:
[
[0, "a"],
[1, "b"],
[2, "c"]
]
具体使用方式:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var arr = fruits.entries();
console.log((arr.next()).value)
console.log((arr.next()).value[1])
// 输出:[0, 'Banana']
// 输出:Banana
keys() 方法用于从数组创建一个包含数组键的可迭代对象。
const arr = ["Banana", "Orange", "Apple", "Mango"];
const newArr = arr.keys();
for (const iterator of newArr) {
console.log(iterator);
}
// 输出:0 1 2 3
copyWithin() 方法用于将数组的内部元素复制到数组的其他位置,覆盖数组的原有元素,而不会改变数组的长度,是一种移动数组的高效方法。
语法:array.copyWithin(target, start, end)
参数说明:
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
console.log(fruits.copyWithin(2, 0, 2));
// 输出: [Banana,Orange,Banana,Orange,Kiwi,Papaya]
console.log(fruits.copyWithin(2,0,-2));
// 输出:[Banana,Orange,Banana,Orange,Apple,Mango]
fill() 方法用于将一个固定值替换数组的元素(注:该方法会改变原始数组)。
语法:array.fill(value, start, end)
参数说明:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.fill("Runoob",2,4))
// 输出:['Banana', 'Orange', 'Runoob', 'Runoob']
from() 方法是一个静态方法,用于从一个类似数组或可迭代对象中创建一个新的数组实例,如果对象是数组返回 true,否则返回 false;这个方法主要用在以下几个方面:
语法:Array.from(object, mapFunction, thisArg)
参数说明:
var arr = Array.from([1, 2, 3], x => x * 10);
// 输出://arr[0] == 10; arr[1] == 20; arr[2] == 30;
isArray() 方法用于判断一个对象是否为数组,如果对象是数组返回 true,否则返回 false。
语法:Array.isArray(obj)
参数说明:obj 必需,要判断的对象。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits))
// 输出:true
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,reduce() 可以作为一个高阶函数,用于函数的 compose。
注: reduce() 对于空数组是不会执行回调函数的。
语法:array.reduce(callback(total, currentValue, currentIndex, arr), initialValue) 参数说明:
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum))
// 输出:125 //65+44+12+4
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:array.reduceRight(callback(total, currentValue, currentIndex, arr), initialValue) 参数与reduce()一样。
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum))
// 输出:125//4+12+44+65
valueOf() 方法返回 Array 对象的原始值,该原始值由 Array 对象派生的所有对象继承,valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中,**valueOf() 方法不会改变原数组,**valueOf() 是数组对象的默认方法,array.valueOf() 与 array的返回值一样。
of() 方法用于将一组值转换为数组,不考虑参数的数量或类型,Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个 length 为 7 的空数组,如果对象是数组返回 true,否则返回 false。
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
at() 方法用于接收一个整数值并返回该索引对应的元素,允许正数和负数,负整数从数组中的最后一个元素开始倒数,匹配给定索引的数组中的元素,如果找不到指定的索引,则返回 undefined,在传递非负数时,at() 方法等价于括号表示法,例如,array[0] 和 array.at(0) 均返回第一个元素,但是,当你需要从数组的末端开始倒数时,则不能使用 Python 和 R 语言中支持的 array[-1],因为方括号内的所有值都会被视为字符串属性,因此你最终读取的是 array["-1"],这只是一个普通的字符串属性而不是数组索引,通常的做法是访问 length 并将其减去从末端开始的相对索引,例如:array[array.length - 1],at() 方法允许使用相对索引,因此上面的示例可以简化为 array.at(-1),更正式地,当 index < 0 时,该方法将访问索引 index + array.length,at() 方法是通用的,其仅期望 this 具有 length 属性和以整数为键的属性。
const array1 = [5, 12, 8, 130, 44];
let index1 = 2;
strt1 = `索引号为 ${index1} 的值为 ${array1.at(index1)}`;
let index2 = -2;
strt2 = `索引号为 ${index2} 的值为 ${array1.at(index2)}`;
// 输出:
// 索引号为 2 的值为 8
// 索引号为 -2 的值为 130
flat() 方法方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回,flat() 方法返回一个包含将数组与子数组中所有元素的新数组,该方法可用于:扁平化嵌套数组,扁平化与数组空项。
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);// [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat();// [1, 2, 4, 5]
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组,它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些,flatMap() 方法一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为 1。
语法:array.flatMap(callback(currentValue,index,arr), thisArg)
// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )
// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)
参数说明:
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
flatMap 能用于在 map 期间增删项目(也就是修改 items 的数量),换句话说,它允许你遍历很多项使之成为另一些项(靠分别把它们放进去来处理),而不是总是一对一,从这个意义上讲,它的作用类似于 filter的对立面,只需返回一个 1 项元素数组以保留该项,返回一个多元素数组以添加项,或返回一个 0 项元素数组以删除该项。
以上分类并不是绝对的,有些方法可能具有多种功能,可以同时归入多个分类中,除了上述分类方法,还可以根据其他标准对 JavaScript 中的 Array 对象的方法进行分类,例如:
Array 作为 JS 中我们最常用的对象,以上就是 Array 常用的 34 种方法,将这些方法吃透用熟,能使得我们在平常的开发工作中事半功倍,提高开发效率。
作者:克里斯叮,https://juejin.cn/post/7324531750622036003
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 版本。也不用引入其他第三方库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!