JS数组的高级用法

news/2024/7/19 14:37:28 标签: js

1、forEach

(1)作用:对数组的每个元素执行一次给定的函数。
(2)参数:回调函数(处理的当前元素,索引,当前操作的数组)、this的值(可选)
(3)返回值:undefined

let arr = [1, 2, 3];
let sum = 0;
arr.forEach(function (value, index, array) {
    console.log('每一个数组元素' + value);
    console.log('每一个数组元素的索引号' + index);
    console.log('数组本身' + array);
    sum += value;
})
console.log(sum); // 6

2、filter

(1)作用:创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
(2)参数:回调函数(处理的当前元素,索引,当前操作的数组)、this的值(可选)
(3)返回值:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

let arr = [12, 66, 4, 88, 3, 7];
let newArray = arr.filter(function (value, index, array) {
    // return value >= 20; // [66,88]
    return value % 2 == 0;
})
console.log(newArray); // [12,66,4,88]

3、some

(1)作用:测试数组中是不是至少有1个元素通过了被提供的函数测试。
(2)参数:回调函数(处理的当前元素,索引,当前操作的数组)、this的值(可选)
(3)返回值:数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为false。

let arr = [10, 30, 4];
let flag = arr.some(function (value, index) {
    return value >= 20;
})
console.log(flag); // true

let arr1 = ['red', 'pink', 'blue'];
let flag1 = arr1.some(function (value) {
    return value == 'green';
})
console.log(flag1); // false

4、map

(1)作用:创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
(2)参数:回调函数(处理的当前元素,索引,当前操作的数组)、this的值(可选)
(3)返回值:一个由原数组每个元素执行回调函数的结果组成的新数组。

let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
  return item + index + array[index] + this.val; 
  //对第一个元素,1 + 0 + 1 + 5 = 7
  //对第二个元素,2 + 1 + 2 + 5 = 10
  //对第三个元素,3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

5、reduce

(1)作用:对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
(2)参数:回调函数(累计器、当前值、当前索引(可选)、当前数组(可选))、initialValue可选(作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。)
(3)返回值:函数累计处理的结果

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

在这里插入图片描述

上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}0) //注意这里设置了初始值
console.log(arr, sum);

在这里插入图片描述

这个例子index是从0开始的,第一次的prev的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback
方法,跳过第一个索引。如果提供initialValue,从索引0开始。

6、sort

(1)作用:用原地算法对数组的元素进行排序,并返回数组
(2)参数:接收一个用于比较的函数,比较函数默认接收两个参数,分别代表比较的两个元素。
(3)返回值:经过比较函数调用的数组,此函数会改变原数组。

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

http://www.niftyadmin.cn/n/1556604.html

相关文章

ansible软件2

常用软件安装及使用目录 ansible使用1 第1章 copy模块 1.1 创建文件及写入内容 1. [rootm01 scripts]# ansible oldboy -m copy -a "contentwo shi hao ren dest/machangwei/11" 2. [rootweb02 machangwei]# cat 11 3. wo shi hao ren[rootweb02 machangwei]# …

如何用无监督模型,防范信用卡欺诈?

小叽导读:国际支付是指在国际经济活动中的当事人以一定的支付工具和方式,清偿因各种经济活动而产生的国际债权债务的行为。在支付中,如果伪造、冒用他人的卡进行支付或者用自己的信用卡进行恶意透支,就构成了欺诈。本文将无监督模…

Vue事件监听

与用户进行交互时&#xff0c;需要监听到用户发生的事件&#xff0c;比如&#xff1a;点击、拖拽、键盘事件等等。 可以用 v-on 指令监听 DOM 事件&#xff0c;并在触发时运行一些 JavaScript 代码。 一、v-on的基本使用 <button v-on:click"counter"></b…

JS的事件委托(事件代理)

一、前言 委托(代理)顾名思义就是请别人帮忙做某件事情而达到自己的需求&#xff0c;那么JS中的事件委托又是怎么样的呢&#xff1f;现在我们有公司员工拿快递这样一个需求&#xff0c;要实现这个需求有两个方案&#xff1a;一是公司的每个人都自己去快递点排队取快递&#xf…

顷刻应用—给你看得见的安全感

作为小区的业主&#xff0c;我们都希望在一个安静、祥和、安全的小区里生活&#xff0c;其中安全又是我们最基本的要求。可是现状却总是让我们无法满意&#xff0c;当大家在一起闲聊时&#xff0c;似乎吐槽各自的小区的各种问题是一个永恒的话题。虽然小区中已经运用了多种高科…

Vue的条件判断

1、Vue的条件判断 1.vue的条件判断&#xff1a;v-if、v-else-if、v-else&#xff0c;这三个指令与JS的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。 2.指令v-if:可以用v-if指令的条件(判断)值来决定DOM的元素是否渲染出来&a…

SequoiaDB巨杉数据库携手民生银行分布式数据管理平台

日前&#xff0c;SequoiaDB巨杉数据库成功中选民生银行新一期“年度生产运营商业软件许可和服务采购”项目&#xff0c;再次携手推进分布式数据库管理平台建设。自从2014年正式和民生银行建立合作&#xff0c;巨杉数据库至今已经管理超过2PB的数据&#xff0c;节点数超过130台物…

JavaScript原型与原型链

一、普通对象与函数对象 在JavaScript的世界里&#xff0c;万物皆对象。对象分为普通对象和函数对象 function f1() { }; var f2 function () { }; var f3 new Function();var o1 {}; var o2 new Object(); var o3 new f1(); // 等同于下面的o4 var o4 new new Functio…