JavaScript基础之数组常用方法
JS 数组常用API
常用属性
- length 属性
- prototype
常用方法
from 从一个类似数组或可迭代对象中创建一个新的数组实例。
isArray 用于确定传递的值是否是一个 Array。
of 创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
concat 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
copyWithin 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
entries 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
every 测试数组的所有元素是否都通过了指定函数的测试。
fill 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
filter 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
find 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
flat 会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap 首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
forEach 对数组的每个元素执行一次提供的函数。
includes 用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。(注意:对象数组不能使用includes方法来检测。)
indexOf 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
join 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
keys 返回一个包含数组中每个索引键的Array Iterator对象。
lastIndexOf 返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
map 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
pop 从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
push 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
reduce 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
reduceRight 接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。
reverse 将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
shift 从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
slice 返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。
some 测试是否至少有一个元素通过由提供的函数实现的测试。
sort 用原地算法对数组的元素进行排序,并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。
splice 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
toLocaleString 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
toString 返回一个字符串,表示指定的数组及其元素。
unshift 将一个或多个元素添加到数组的开头,并返回该数组的新长度。
values 返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值
常见方法语法解释
上面列出了在js
数组当中常见的方法,下面在其中选取一些比较高频和重要的方法来说明。
from方法
从一个类似数组或可迭代对象中创建一个新的数组实例。
语法:
Array.from(arrayLike[, mapFn[, thisArg]])
参数:
- arrayLike
想要转换成数组的伪数组对象或可迭代对象。 - mapFn (可选参数)
如果指定了该参数,新数组中的每个元素会执行该回调函数。 - thisArg (可选参数)
可选参数,执行回调函数 mapFn 时 this 对象。
返回值:
一个新的数组实例。
demo:
Array.from('foo');
// ["f", "o", "o"]
isArray
用于确定传递的值是否是一个 Array。
语法:
Array.isArray(obj)
参数:
- obj
需要检测的值。
demo:
Array.isArray([1, 2, 3]); // true
concat
用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
语法:
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
参数:
- valueN
将数组和/或值连接成新数组。
demo:
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
every
测试数组的所有元素是否都通过了指定函数的测试。
语法:
arr.every(callback[, thisArg])
参数:
- callback
用来测试每个元素的函数。 - thisArg
执行 callback 时使用的 this 值。
demo:
function isBelowThreshold(currentValue) {
return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
fill
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
语法:
arr.fill(value[, start[, end]])
参数:
- value
用来填充数组元素的值。 - start 可选
起始索引,默认值为0。 - end 可选
终止索引,默认值为 this.length。
返回值:
修改后的数组。
filter
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数:
- callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数: - element
数组中当前正在处理的元素。 - index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时,用于 this 的值。
返回值:
一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
demo:
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
find
返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法:
arr.find(callback[, thisArg])
参数:
- callback
在数组每一项上执行的函数,接收 3 个参数:
element
当前遍历到的元素。
index可选
当前遍历到的索引。
array可选
数组本身。 - thisArg可选
执行回调时用作this 的对象。
demo:
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// expected output: 12
forEach
对数组的每个元素执行一次提供的函数。
语法:
arr.forEach(callback[, thisArg]);
参数:
- callback
为数组中每个元素执行的函数,该函数接收三个参数:
currentValue
数组中正在处理的当前元素。
index可选
数组中正在处理的当前元素的索引。
array可选
forEach() 方法正在操作的数组。 - thisArg可选
可选参数。当执行回调函数时用作 this 的值(参考对象)。
demo:
var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
console.log(element);
});
// expected output: "a"
// expected output: "b"
// expected output: "c"
indexOf
返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
语法:
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])
参数:
- searchElement
要查找的元素 - fromIndex
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
返回值:
首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
demo:
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
join
将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
语法:
arr.join([separator])
参数:
- separator
指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果省略(),数组元素用逗号分隔。默认为 ","。如果separator是空字符串(""),则所有元素之间都没有任何字符。
返回值:
一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。
demo:
var elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
keys
返回一个包含数组中每个索引键的Array Iterator对象。
语法:
arr.keys()
返回值:
一个新的 Array 迭代器对象。
demo:
var array1 = ['a', 'b', 'c'];
var iterator = array1.keys();
for (let key of iterator) {
console.log(key); // expected output: 0 1 2
}
map
创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
参数:
- callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 数组中正在处理的当前元素。
index可选
callback 数组中正在处理的当前元素的索引。
array可选
callback map 方法被调用的数组。 - thisArg可选
执行 callback 函数时使用的this 值。
返回值:
一个新数组,每个元素都是回调函数的结果。
demo:
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
pop
从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
语法:
arr.pop()
返回值:
从数组中删除的元素(当数组为空时返回undefined)。
demo:
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
reduce
对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
语法:
arr.reduce(callback[, initialValue])
参数:
- callback
执行数组中每个值的函数,包含四个参数:
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
currentValue
数组中正在处理的元素。
currentIndex可选
数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1。
array可选
调用reduce()的数组
2. initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值:
函数累计处理的结果.
demo:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
reverse
将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
语法:
arr.reverse()
demo :
var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']
var reversed = array1.reverse();
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']
/* Careful: reverse is destructive. It also changes
the original array */
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']
slice
返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。
语法:
arr.slice();
// [0, end]
arr.slice(begin);
// [begin, end]
arr.slice(begin, end);
// [begin, end)
参数:
- begin 可选
从该索引处开始提取原数组中的元素(从0开始)。
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
如果省略 begin,则 slice 从索引 0 开始。 - end可选
在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end 的所有元素(包含begin,但不包含end)。
slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。
如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
如果 end 被省略,则slice 会一直提取到原数组末尾。
如果 end 大于数组长度,slice 也会一直提取到原数组末尾。
返回值:
一个含有提取元素的新数组
demo:
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
some
测试是否至少有一个元素通过由提供的函数实现的测试。
语法:
arr.some(callback(element[, index[, array]])[, thisArg])
参数:
- callback
用来测试每个元素的函数,接受三个参数:
element
数组中正在处理的元素。
index 可选
数组中正在处理的元素的索引值。
array可选
some()被调用的数组。 - thisArg可选
执行 callback 时使用的 this 值。
返回值:
如果回调函数返回任何数组元素的truthy值,则返回true;否则为false。
demo:
var array = [1, 2, 3, 4, 5];
var even = function(element) {
// checks whether an element is even
return element % 2 === 0;
};
console.log(array.some(even));
// expected output: true
sort
用原地算法对数组的元素进行排序,并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。
语法:
arr.sort([compareFunction])
参数:
- compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
返回值:
排序后的数组。请注意,数组已原地排序,并且不进行复制。
demo:
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
splice
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
语法:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数:
start
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。deleteCount 可选
整数,表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
返回值:
由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
demo:
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
具体方法介绍可以访问:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
JavaScript基础之数组常用方法的更多相关文章
- JavaScript 基础回顾——数组
JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中, ...
- javascript基础知识-数组
1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...
- JavaScript基础——使用数组
Array对象提供存储和处理一组其他对象的一种手段.数组可以存储数值.字符串或其他JavaScript对象.创建JavaScript数组有几种不同的方法.例如,下面的语句穿件同样的驻足的3个相同的版本 ...
- JavaScript 基础(二)数组
字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单 ...
- javascript基础之数组一
<script type="text/javascript"> //求数组中最大的数 var arr=[123,456,789,657,432,564]; var ar ...
- javascript基础之数组对象
一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var m ...
- JavaScript 基础(六) 数组方法 闭包
在一个对象中绑定函数,称为这个对象的方法.在JavaScript 中,对象的定义是这样的: var guagua = { name:'瓜瓜', birth:1990 }; 但是,如果我们给瓜瓜绑定一个 ...
- JavaScript基础04——数组的创建及方法
数组的概念及定义 数组的概念: 一组数据,数据的组和 哪些数据的组和,只要是数据(所有数据),就可以放在数组中 数组的意义: 可以同时操作多个数据 数组 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
随机推荐
- anaconda应答文件
一.anaconda和isolinux anaconda是linux安装程序的安装想到,在我们的系统安装光盘内有一个isolinux的目录,这个目录是用来启动光盘镜像的,下面我们说一下这个目录下的文件 ...
- react 项目 mock数据
前言 我们都知道在实际的开发阶段,后端接口开发是和前端开发同步进行,甚至迟于前端的进度,这就直就导致前端需要等待后端接口的时间. 这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数 ...
- robotframework 模拟滚动鼠标到底部
Execute Javascript var ele = document.getElementsByClassName("right_main")[0];ele.scrollTo ...
- 题解 [CQOI2015]任务查询系统
题面 解析 首先,我们考虑下暴力的做法: 每次将一个任务的重要度加入到它的区间中, 询问的时候就直接加前\(k\)大. 然而,这样肯会炸的(都说了是暴力了). 其实,我们可以转化一下区间修改(因为区间 ...
- 【数据库】-各类数据库链接驱动和URL的书写格式
oracle: driver="oracle.jdbc.driver.OracleDriver" url="jdbc:oracle:thin:@localhost:152 ...
- 卸载python
# rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps # whereis python|xargs rm -frv
- redis异步处理
$reids = new Redis; $redis->connect('localhost',6379); $redis->auth(''); //将数组转换成字符串再存到redis中 ...
- SSH整合框架
实现登录.新闻增删改查.树形菜单 引入pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...
- Sublime Text 3 全程详细图文使用教程
一. 前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知.最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎.片面,不够系统 ...
- delphi请求http接口并上传附件
实现附件的上传:需要使用TIdMultiPartFormDataStream控件, uses IdMultipartFormData; 例子: procedure TClientForm.Button ...