这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战
这些方法在实际开发中还是比较常用的,终于把它们给整理好了
转换方法
toLocaleString()&toString()&valueOf()
所有对象都有toLocaleString()、toString()和valueOf()方法;其中,
valueOf()返回的还是数组本身;toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串;- 也就是说,对数组的每个值都会调用其
toSting()方法,以得到最终的字符串。
let colors = ["red", "blue", "green"];
console.log(colors.toString());
console.log(colors.valueOf());
console.log(colors.toLocaleString());
输出结果如下:
tolocaleString()方法可能返回跟toString()和valueOf()相同的结果,也可能得到一个逗号分隔数组值的字符串。与另外两个方法的唯一区别就是,会调用数组每个值的tolocaleString()方法,而不是toString();那么这两者到底有什么不同捏,看看下面这段代码及其打印结果,例如:
const date = new Date();
console.log(date.toString());
console.log(date.toLocaleString());
const number = 8888.88;
console.log(number.toString());
console.log(number.toLocaleString());
输出结果如下:
join()
如果想使用不同的分隔符,则可以使用join()方法;join()方法接收一个参数,即字符串分隔符,返回包含所有项的字符串。
let colors = ["red", "blue", "green"];
console.log(colors.join('||')); // red||blue||green
如果数组中的某一项是null或undefined,则在上面这四个方法中返回的结果会以空字符串的形式表示。
栈和队列方法
- 从数组末尾插入使用
push()方法,删除/取出使用pop()方法; - 从数组头部推入使用
unshift()方法,推出使用shift()方法
let colors = ["red", "blue", "green"];
colors.push('pink'); // ["red", "blue", "green", "pink"]
这几个功能不同,用法相似;
排序方法
数组有两个方法可以用来对元素重新排序:reverse()和sort();
sort()
默认情况下,sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面;sort()会在每一项上调用String()转型函数,然后比较字符串来决定顺序。即使数组中的元素都是数值,也会先把数组转换为字符串再进行比较、排序。
let values = [0, 1, 5, 10, 15, 20];
values.sort();
console.log(values); // [0, 1, 10, 15, 20, 5]
但是sort存在一个问题,就是在比较字符串的时候,是从第一位开始比较的,比如字符串"10"是在字符串"5"前面的。因此,在大多数时候,我们给sort()传入一个比较函数,用于判断哪个值应该排在前面。
reverse()
这个方法起始就是将数组元素方向排列。
操作方法【常用】
concat()
- 可以在现有数组全部元素基础上创建一个新数组。
- 如果传入一个或多个数组,则
concat()会把这些数组的每一项都添加到结果数组。 - 如果参数不是数组,则直接把它们添加到结果数组末尾。
在使用concat()方法的时候,数组默认会被打平,看看下面这段代码的输出结果:
let color = ["red"];
console.log(color.concat("yellow", ["black", "pink"]));
打平数组参数的行为可以重写,在参数数组上指定一个特殊的符号:Symbol.isConcat-Spreadable。把这个符号设置为false就可以阻止concat()打平数组。如:color[Symbol.isConcatSpreadable] = flase
slice()
用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数;返回元素的开始索引和结束索引。
-
如果只有一个参数,返回该索引到数组末尾的所有元素
-
如果有两个参数,则返回开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素
let colors = ["red", "blue", "green", "pink"]; console.log(colors.slice(1)); // ["blue", "green", "pink"] console.log(colors.slice(1, 3)); //["blue", "green"]
如果slice()的参数有负值,那么就以数值长度加删这个复制的结果确定位置,比如,在包含5个元素的数组上调用slice(-2, -1),就相当于调用slice(3, 4);如果开始位置大于结束位置,则返回空数组。
splice()
这个方法的功能很强大的,主要用于在数组中间插入元素
- 删除。给
splice()传入2个参数:要删除的第一个元素和要删除的元素数量。可以从数组中删除任意多个元素,比如splice(0, 2)会删除前2个元素。 - 插入。给
splice()传入3个参数:开始位置、0(要删除的元素数量)和要插入的元素,从第三个参数开始后面的参数都是要插入的参数;比如,splice(2, 0, 'pink', 'blue'),会从数组位置为2开始插入字符串'pink'和'blue'。 - 替换。
splice在删除元素的同时可以在指定位置插入新元素,同样要传入3哥参数:开始位置、要删除元素数量和要插入的任意多个元素
搜索和位置方法
1. 严格相等
indexOf()&includes()&lastIndexOf()
indexOf()和includes()方法从数组前头(第一项)开始向后搜索,而lastIndexOf()从数组末尾(最后一项)开始向前搜索。includes()&lastIndexOf()方法都返回要查找的元素在数组中的位置,如果没找到则返回-1。includes()返回布尔值,表示是否至少找到一个与指定元素匹配的项。- 在比较第一个参数跟数组每一项时,回使用全等(===)进行比较,也就是说两项必须严格相等
2. 断言函数
断言函数接收3个参数:元素、索引和数组本身;find()和findIndex()方法使用了断言函数;
find()&findIndex()
find()返回第一个匹配的元素findIndex()返回第一个匹配元素的索引
const arr = [{name:'mannqo', age:18}, {name:'yt', age:12}]
console.log(people.find(element, index, array) => {element.age<16}); //{name:'yt', age:12}
console.log(people.findIndex(element, index, array) => {element.age<16}); // 0
迭代方法【最常用】
数组的5个迭代方法,每个方法接收2个参数:以每一项为参数运行的函数,以及可选的作为函数运行上下文的作用域对象(影响函数中this的值)。传给每个方法的函数接收3个参数:数组元素、元素索引和数组本身,对数组每一项都运行传入的函数;
every:如果对每一项函数都返回true,则这个方法返回truesome:如果有一项函数返回true,则这个方法返回truefilter:函数返回true的项会组成数组之后返回forEach:没有返回值,相当于使用for循环遍历数组map:返回每次函数调用的结果构成的数组
归并方法
reduce()&reduceRight()
这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值。传给reduce()&reduceRight()的函数接收4个参数:上一个归并值、当前项、当前项的索引和数组本身。
reduce()方法从数组第一项开始遍历到最后一项reduceRight()方法从最后一项开始遍历到第一线
let arr = [1, 2, 3, 4, 5];
console.log(arr.reduce((pre, cur, index, arr) => pre + cur));
这两个方法区别就在于遍历方向的不同;