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 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

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

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

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

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

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

精品课程

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

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

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号