阅读 420

JavaScript引用类型之Array

JSON是前后端交换文本信息的语法,应用广泛。基于这种语法的特点,后端接口返回得前端渲染的数据不是数组形式的就是对象形式的,所以熟练使用数组和对象的操作方法很重要。

一、不改变原数组的方法

(一)检测方法(非常重要)

可以理解为对数组进行遍历,达到检测目标值终止遍历。检测存在某项达到条件,可以用find()、findIndex和some;检测所有项目都达到条件,使用every()。而这些方法的回调函数,都可以是(item)=>{对item进行检测}的形式。下面这些检测方法,不会改变原数组。

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

2、findIndex():返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

3、some():对数组的每一项运行给定函数,如果该函数对任意一项返回true(存在某项),则返回true。

4、every():对数组的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

(二)迭代方法(非常重要)

特别是做react的项目,几乎是一定会用到数组的迭代方法的,下面这些迭代方法,不会改变原数组。

1、forEach():对数组的每一项运行给定函数,没有返回值。

2、filter():对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组。

3、map():对数组的每一项运行给定函数,返回每次调用结果组成的数组。

some()和every()也是迭代方法,归入检测方法就不再列举。过滤数组用filter,重整数据用map,只是想操作值用forEach。

(三)拼接剪切方法

1、colors.concat("yellow"),返回新数组,将接收到的参数添加到当前数组副本的末尾 。

2、colors.slice(1,3),返回新数组,起始和结束位置之间的项但不包括结束位置的项 。

二、改变数组的方法(非常重要)

react中不直接改变state中的数据,常用不改变原数组的方法。而vue中是可以直接改变data的数据的,使用改变原数组的方法反而更简便。以下这些方法都是改变数组本身的。

(一)操作方法

1、colors.push("yellow"),在数组前末尾添加项并返回新数组长度 。

2、colors.pop(),移除数组末项并返回该项。

3、colors.shift() ,移除数组第一项并返回该项 。

4、colors.unshift("yellow") ,在数组前端添加项并返回新数组长度 。

5、colors.splice(起始位置、删除项数、插入的项):这个方法很强大,可以删除、插入或者替换数组元素。

(二)排序方法

1、colors.reverse(),反转数组项顺序 。

2、colors.sort(),默认情况下调用每个数组项的toString()方法转型,比较得到的字符串(字符编码),按升序排序。一般会传入比较方法。

三、归并方法reduce

这个方法很特殊,遍历数组所有项,然后构建一个最新返回的值,这个方法在前端渲染工作中用的比较少。

引用自:developer.mozilla.org/zh-CN/docs/…

reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

  • accumulator 累计器

  • currentValue 当前值

  • currentIndex 当前索引

  • array 数组

回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:如果调用reduce()时提供了initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。

四、解构赋值用来进行数组合并和拷贝(非常重要)

使用解构赋值进行数组的合并和拷贝不会影响原数组。

1、数组拷贝

拷贝的效果是深拷贝,就是在堆内存中创建了一个新数组,和原数组不是同一个。这个引用类型的简单复制是不一样的。

2、数组合并

文章分类
前端
文章标签