第一百一十四篇: JS数组Array(三)数组常用方法

第一,百一,十四篇,js,数组,array,常用,方法 · 浏览次数 : 122

小编点评

**第三个方法是ECMAScript7新增的** ECMAScript7新增了3个方法用于搜索数组元素: * `indexof()` * `lastIndexOf()` * `includes()` **indexof() 方法** `indexof()` 方法用于查找数组中第一个与指定元素匹配的元素的索引。如果元素不在数组中,则方法将返回 -1。 **lastIndexOf() 方法** `lastIndexOf()` 方法用于查找数组中最后一个与指定元素匹配的元素的索引。如果元素不在数组中,则方法将返回数组长度。 **includes() 方法** `includes()` 方法用于检查数组中是否包含指定元素。如果元素不在数组中,则方法将返回 false。 **其他方法** 除了以上方法之外,还提供以下 5 个用于迭代数组元素的方法: * `every()` * `some()` * `map()` * `filter()` * `forEach()`

正文

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记

 

1.数组的复制和填充

批量复制方法 copyWithin(),以及填充数组方法fill()。

这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。

使用这个方法不会改变数组的大小。

 

1.1.fill()方法

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值

开始索引用于指定开始填充的位置,它是可选的。

如果不提供结束索引,则一直填充到数组末尾。

负值索引从数组末尾开始计算。

const array =[0,0,0,0,0];

//填充5
array.fill(5);
console.log(array);

//从索引为3的数开始填充3
array.fill(3,3);
console.log(array);

//在索引为1到3的数中填充8
array.fill(8,1,3);
console.log(array);

 

 

 

1.2.copyWithin()

copyWithin()会按照指定范围浅复制数组中的部分内容,然后将它们插入到指定索引开始的位置

 

const array =[0,1,0,2,0,3,0,4,0,5];

//复制索引0开始的内容,插入到索引8开始时的位置
array.copyWithin(8);
console.log(array);

//复制索引5开始的内容,插入到索引0开始的位置
array.copyWithin(0,5);
console.log(array);

//复制索引0到索引2的内容,插入到索引6开始的位置
array.copyWithin(6,0,2);
console.log(array);

 

 

 

2.转换方法

前面提到过.所有对象都有toLocaleString()、toString()和valueof()方法。

其中,valueof()返回的还是数组本身。

tostring()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的三字符串。

let colors = ["red", "blue", "green"];
console.log(colors.toString());
console.log(colors.valueOf());

//使用join()方法可以使用不同的分隔符
console.log(colors.join("||"));

 

 

3.数组常用方法

方法splice()用于创建一个包含原有数组中一个或多个元素的新数组

splice()方法可以接收一个或两个参数:返回元素的开始索引和结束索引。

如果只有一个参数,则splice()会返回该索引到数组末尾的所有元素。

如果有两个参数,则splice()返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。

记住,这个操作不影响原始数组。

 

或许最强大的数组方法就属splice()了,使用它的方式可以有很多种。

splice()的主要目的是在数组中间插入元素,但有3种不同的方式使用这个方法。

(确实强大)

(1)  删除。需要给splice()传2个参数:要删除的第一个元素的位置和要删除的元素数量。

可以从数组中删除任意多个元素,比如splice(0,2)会删除前两个元素。

 

(2) 插入。需要给splice()传3个参数:开始位置、0(要删除的元素数量)和要插入的元素,可以在数组中指定的位置插入元素。

第三个参数之后还可以传第四个、第五个参数,乃至任意多个要插入的元素。

比如,splice(2,0,"red","green")会从数组位置2开始插入字符串"red"和"green"。

 

(3) 替换。splice()在删除元素的同时可以在指定位置插入新元素,同样要传入3个参数:开始位置、要删除元素的数量和要插人的任意多个元素。

要插入的元素数量不一定跟删除的元素数量一致。比如,s(2,1,"red","green")会在位置2删除一个元素,然后从该位置开始向数组中插入""和"green"。

splice()方法始终返回这样一个数组,它包含从数组中被删除的元素(如果没有删除元素,则返回空数组)

(一个方法,满足三个愿望)

试一试:

let colors = ["red", "blue", "green"];

colors.splice(0,1);
console.log(colors);

colors.splice(1,0,"black","orange");
console.log(colors);

colors.splice(1,1,"pink");
console.log(colors);

 

 

 

 

4.搜索和"判断"方法

 4.1.搜索方法

ECMAScript提供了3个严格相等的搜索方法:indexof()、lastIndexof()和includes()。

其中,前两个方法在所有版本中都可用,而第三个方法是ECMAScript7新增的。

这些方法都接收两个参数:要查找的元素和一个可选的起始搜索位置

indexof()和includes()方法从数组前头(第一项)开始向后搜索,而lastIndexof()从数组末尾(最后一项)开始向前搜索。
indexof()和 lastIndexof()都返回要查找的元素在数组中的位置,如果没找到则返回-1。

includes()返回布尔值,表示是否至少找到一个与指定元素匹配的项。

 书里面居然没写includes()方法的参数,补充一下:

 

 

 

const array =[1,2,3,4,5,4,3,2,1];

console.log(array.indexOf(1));
console.log(array.lastIndexOf(1));
console.log(array.includes(1));

console.log(array.indexOf(1,5));
console.log(array.lastIndexOf(1,5));
//从索引5开始找"1",找到就返回true
console.log(array.includes(1,5));

 

 

 

4.2.断言函数

ECMAScript 也允许按照定义的断言函数搜索数组,每个索引都会调用这个函数

断言函数的返回值决定了相应索引的元素是否被认为匹配。
断言函数接收3个参数:元素、索引和数组本身。

其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组就是正在搜索的数组。

断言函数返回真值,表示是否匹配。
find()和findIndex()方法使用了断言函数。

这两个方法都从数组的最小索引开始。

find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。

这两个方法也都接收第二个可选的参数,用于指定断言函数内部this的值。

let people = [{
        name: "panghu",
        age: "80"
    },
    {
        name: "dream",
        age: "50"
    },
    {
        name: "xiaofu",
        age: "30"
    },
];

console.log(people.find((element, index, array) => element.age > 49));

console.log(people.findIndex((element, index, array) => element.age > 49));

 

 

(感觉这个归类进迭代方法也没什么问题)

 

5.迭代方法

ECMAScript为数组定义了5个迭代方法。

每个方法接收两个参数:以每一项为参数运行的函数.个参数:数组元素、元素索引和数组本身。

因具体方法而异,这个函数的执行结果可能会也可能不会影响方法的返回值。

数组的5个迭代方法如下。

 

(1) every():对数组每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true。

(2) some():对数组每一项都运行传入的函数,如果有一项函数返回true,则这个方法返回true。这些方法都不改变调用它们的数组。

(3) map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。


(4) filter():对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回。
(5) forEach():对数组每一项都运行传入的函数,没有返回值。

 

可以说,every(),some(),和map()组成一类,他们像断言函数

filter()和forEach()为一类他们则更像"迭代"操作

重要的例子:

const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];

//every()全部符合要求,才返回true
console.log(array.every((element, index, array) => element > 2));

//some()只要有一个符合要求,就返回true
console.log(array.some((element, index, array) => element > 2));

//map()对所有项调用方法,将每一次调用的结果构成数组返回
console.log(array.map((element, index, array) => element > 2));

//filter()0把符合要求的筛选出来
console.log(array.filter((element, index, array) => element > 2));

//forEach()把符合要求的项进行某些操作
console.log(array.forEach((element, index, array) => element > 2));

 

 

6.归并方法

这个没啥好说的,本质上也是迭代方法的一种,多了几个参数而已

ECMAScript为数组提供了两个归并方法:reduce()和 reduceRight()。

这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。

reduce()方法从数组第一项开始遍历到最后一项。

而 reduceRight()从最后一项开始遍历至第一项。

(一个从左往右,一个从右往左)
这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值:传给reduce()和reduceRight()的函数接收4个参数:上一个归并值、当前项、当前项的索引和数组本身

这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。

如果没有给这两个方法传入可选的第二个参数(作为归并起点值),则第一次迭代将从数组的第二项开始,因此传给归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。
可以使用reduce()函数执行累加数组中所有数值的操作.

 

const array_1 = [9, 90, 900, 9000, 1];

let sum = array_1.reduce((prev, cur, index, array) => 
    prev + cur,
);
console.log(sum);

 

 

 

 

 

That's all

 

与第一百一十四篇: JS数组Array(三)数组常用方法相似的内容:

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百一十八篇: JavaScript 原型链式继承

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。 重温一下构造函数、原型和实例的关系:每个构造函数

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定

第一百一十六篇: JavaScript理解对象

好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特定顺序的值。 对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值。正因为如此(以及其他还未讨论的原因),可以把 EC

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型