0

0

JS常用的数组方法总结

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-07 14:51:05

|

2300人浏览过

|

来源于php中文网

原创

这次给大家带来js常用的数组方法总结,在js中使用数据时注意事项有哪些,下面就是实战案例,一起来看一下。

1、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

示例:
var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));

// ["a", "b", "c", "d", "e", "f"]

2、filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 (可用于筛选)

示例:
function isBigEnough(value) {
return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

// ES6 way

const isBigEnough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

let filtered = spread.filter(isBigEnough);

3、find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

示例:
function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

4、findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough); 
// index of 4th element in the Array is returned,
// so this will result in '3'

5、forEach() 方法对数组的每个元素执行一次提供的函数。(相当于JavaScript里的for循环

示例:

const arr = ['a', 'b', 'c'];

arr.forEach(function(element) {
console.log(element);
});

arr.forEach( element => console.log(element));

// a
// b
// c

6、indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

示例:
let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0 
a.indexOf(6); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1

if (a.indexOf(3) === -1) {
// element doesn't exist in array
}

7、map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

示例:
// ES6
let numbers = [1, 5, 10, 15];
let doubles = numbers.map( x => x ** 2);

// doubles is now [1, 25, 100, 225]
// numbers is still [1, 5, 10, 15]

const numbers = [2, 4, 8, 10];
let halves = numbers.map(x => x / 2);

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

8、pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

示例:
let a = [1, 2, 3];
a.length; // 3

a.pop(); // 3

console.log(a); // [1, 2]
a.length; // 2

9、reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

示例:

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
// filtered is [12, 130, 44]

10、Array.isArray() 用于确定传递的值是否是一个 Array

示例:

Array.isArray([1, 2, 3]); 
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar"); 
// false
Array.isArray(undefined); 
// false

11、Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组示例。

示例:
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

12、fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

示例:
var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

语法:
arr.fill(value[, start[, end]])
即(填充的值,开始值(索引),结束值(从1开始))

13、includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

示例:
let a = [1, 2, 3];

DELPHI控件属性、方法、事件及常用函数 word文档 doc格式
DELPHI控件属性、方法、事件及常用函数 word文档 doc格式

DELPHI控件属性、方法、事件及常用函数 一. TmainMemu控件 该控件是一个标准的菜单控件,运用它为窗口提供菜单。该对象的层次结构为:TObject—TPersistent--TCompoment—TMenu。 属性 1-AutoMetge:Boolean 功能:用于确定非MID程序中非主Form上的菜单要不要和主Form的菜单合并。主Form菜单AutoMerge的特性总是False。此外,还要设置菜单项的GroupIndex属性。 2-BiDiMode

下载

a.includes(2); 
// true

a.includes(4); 
// false

14、join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

示例:
let a = ['Wind', 'Rain', 'Fire'];

console.log(a.join()); 
// 默认为 ","
// 'Wind,Rain,Fire'

console.log(a.join("")); 
// 分隔符 === 空字符串 ""
// "WindRainFire"

console.log(a.join("-")); 
// 分隔符 "-"
// 'Wind-Rain-Fire'

15、push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

示例:
var numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers); 
// [1, 2, 3, 4]

numbers.push(5, 6, 7);

console.log(numbers); 
// [1, 2, 3, 4, 5, 6, 7]

16、reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。与 Array.prototype.reduce() 的执行方向相反

示例:
let flattened = [
[0, 1], 
[2, 3], 
[4, 5]
].reduceRight((a, b) => {
return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]

17、shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

示例:
let a = [1, 2, 3];
let b = a.shift();

console.log(a); 
// [2, 3]

console.log(b); 
// 1

18、slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

示例:
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"]

19、some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

示例:
const isBiggerThan10 = (element, index, array) => {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); 
// false

[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

20、sort() 方法用就地( in-place )的算法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

示例:
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); 
// ['apples', 'bananas', 'cherries']

21、splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

示例:
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // 从索引为2的位置删除一项(也就是'drum'这一项)
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

语法:
array.splice(start)

array.splice(start, deleteCount)

array.splice(start, deleteCount, item1, item2, ...)

参数:
start
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从1计数);若只使用start参数而不使用deleteCount、item,如:array.splice(start) ,表示删除[start,end]的元素。
deleteCount 可选
整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
如果deleteCount被省略,则其相当于(arr.length - start)。
item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
splice方法使用deleteCount参数来控制是删除还是添加:
start参数是必须的,表示开始的位置(从0计数),如:start=0从第一个开始;start>= array.length-1表示从最后一个开始。
①、从start位置开始删除[start,end]的元素。
array.splice(start)
②、从start位置开始删除[start,Count]的元素。
array.splice(start, deleteCount) 
③、从start位置开始添加item1, item2, ...元素。
array.splice(start, 0, item1, item2, ...)

22、toString() 返回一个字符串,表示指定的数组及其元素

23、unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

示例:

let a = [1, 2, 3];
a.unshift(4, 5);

console.log(a);
// [4, 5, 1, 2, 3]


24、substring() 方法用于提取字符串中介于两个指定下标之间的字符。
示例:
var str="Hello world!";
document.write(str.substring(3)+"
");//lo world!
document.write(str.substring(3,7));//lo w

语法:
string.substring(from, to)

参数
from 
必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。
to 
可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数,那么返回的子串会一直到字符串的结尾。

25、substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
示例
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7));p//lo worl
语法:
stringObject.substr(start,length)

参数:
start 
必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length 
可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

Android的APP怎样制作LOGO的尺寸

Vue.JS的自定义指令应该如何使用

Node.js的PEGjs该如何使用

JavaScript0

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

3

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

15

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

17

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号