【原创】Es6 常用数组函数

2023年1月13日 0条评论 406次阅读 0人点赞慕容

map

返回一个新数组，数组中的元素为原始数组调用函数处理后的值。

map 需要返回值，如果不写 return，则返回 undefined。
map 返回的是一个新的数组。

const arr = [2,4,6,8];
const brr = arr.map(item=> item * 2);
console.log(brr); // [4,8,12,16]

filter

filter() 方法创建一个新数组, 返回所有满足条件的数组元素。

const arr = [2,4,6,8];
const brr = arr.map(item=> item > 4); // [6,8]
console.log(brr);

find

返回符合条件的数组中的第一个元素，如果没有满足元素则返回 undefined。

const arr = [2,4,6,8];
const elem = arr.find(item=> item > 4);
console.log(elem); // 6

every

如果数组中的每个元素都符合给定条件，则返回 true，否则返回 false，即全真则真。

const arr = [2, 4, 6, 8];
const elem = arr.every(item => item > 1);
console.log(elem);

some

数组中的只要有一个元素符合给定条件，就返回 true，否则返回 false，即一真则真。

const arr = [2, 4, 6, 8];
const elem = arr.some(item => item > 6);
console.log(elem);

forEach

forEach() 方法为它在数组内迭代的每个元素调用一次指定的回调函数。forEach 方法不像其他迭代器（如 filter、map 和 sort）那样返回新数组。相反，该方法返回 undefined 本身。

const numbers = [3, 6, 8, 10, 12];
const odd = 6;

numbers.forEach(function (number, index) {
  if (number === odd) {
    numbers.splice(index, 1);
  }
});
// [3, 8, 10, 12]

reduce

参考链接：https://www.jianshu.com/p/e375ba1cfc47

join

join() 方法用于把数组中的所有元素转换成一个字符串。
一个参数是可选的。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let aa = fruits.join('#'); // Banana#Orange#Apple#Mango

concat

concat() 方法用于连接两个或多个数组。

const a = ["Google", "Taobao"];
const b = ["Runoob", "Wiki", "Zhihu"];
const c = ['a','b'];
const d = a.concat(b,c);
console.log(d); // Google,Taobao,Runoob,Wiki,Zhihu,a,b
const e = [...a,...b,...c]; // 使用 ES6 的扩展运算符更简单

findIndex

findIndex() 方法返回符合条件的数组第一个元素位置，只要有一个元素满足条件就返回当前元素的索引，不会再进行检测；如果没有都没有满足条件就返回 -1。

let arr = [
   {
     name: '小明',
     score: 60
   },
   {
     name: '小红',
     score: 50
   },
   {
     name: '小花',
     score: 70
    }
   ]
const res = arr.findIndex(item => item.score > 90)
console.log('res', res) // -1 => 没有同学达到条件所以返回了 -1

indexOf

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。

const str="Hello world, welcome to the universe.";
const n=str.indexOf("welcome"); // 13

includes

includes() 方法用于判断字符串是否包含指定的子字符串。

let arr = ['胡歌', '彭于晏', '吴彦祖']
const res = arr.includes('陈冠希')
console.log(res) // false

IE 11 及更早版本不支持 includes() 方法。

slice

slice() 方法可从已有的数组中返回选定的元素。
array.slice(start, end)

返回一个新的数组，包含从 start（包括该元素）到 end （不包括该元素）的数组中的元素。

start:可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

const arr = [4,5,3,2,5];
const brr = arr.slice(2,4);
console.log(brr); // [3,2]

splice

splice() 方法用于添加或删除数组中的元素。
array.splice(index,howmany,item1,.....,itemX)

index：必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX：可选。要添加到数组的新元素。

const arr = [2, 3, 4, 5, 6];
const brr = arr.splice(0, 2);
console.log(brr); // [2,3]
console.log(arr); // [4,5,6]

at

参考链接：https://segmentfault.com/a/1190000038995631
array.at(index)

参数：要返回的数组元素的索引（位置）。当传递负数时，支持从数组末端开始的相对索引；也就是说，如果使用负数，返回的元素将从数组的末端开始倒数。
返回值：匹配给定索引的数组中的元素。如果找不到指定的索引，则返回 undefined。

let arr = ['珊瑚海', '发如雪', '黑色毛衣']
const res = arr.at(-1)
console.log('res', res) // 黑色毛衣

// ES5取最后一个元素
arr[arr.length - 1]

flat

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，也就是将一个多维数组扁平化。

const arr = [1, [2]]
const res = arr.flat() // [1, 2]

// Infinity关键字参数
const arr1 = [1, [2, [3, [4, 5]]], 6]
const res2 = arr1.flat(Infinity)
console.log(names) // [1, 2, 3, 4, 5, 6]

不传递参数的时候默认为1层，当传入Infinity时，相当于扁平化最深层次的数组。扁平化过程中如果数组元素有空值，会将空值过滤。

fill

fill() 方法用于将一个固定值替换数组的元素。
array.fill(value, start, end)

value 必须要填充的值
start 填充的起始位置
end 填充的结束位置（不包含），默认为 arr.length

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4); // Banana,Orange,Runoob,Runoob

fill() 方法对于初始化数组很方便。

push

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

let arr = []
arr.push('退后', '搁浅', '彩虹')
console.log('arr', arr) // ['退后', '搁浅', '彩虹']

pop

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

let arr = ['青花瓷', '我不配', '甜甜的']
const res = arr.pop()
console.log('res', res) // 甜甜的
console.log('arr', arr) // ['青花瓷', '我不配']

shift

删除数组的第一个元素。
返回值是返回删除的元素。

const arr = ['说好不哭', '烟花易冷', '本草纲目'];
const res = arr.shift();
console.log('res', res); // 说好不哭
console.log('arr', arr); // ['烟花易冷', '本草纲目']

unshift

向数组起始位置添加一个或者多个元素。
返回新数组的长度。

let arr = ['晴天', '暗号']
const res = arr.unshift('外婆')
console.log('res', res) // 3
console.log('arr', arr) // ['外婆', '晴天', '暗号']

sort

sort() 方法用于对数组的元素进行排序。

// 个位数直接 arr.sort() 就可以
let arr = [1, 6, 2, 9, 4]
arr.sort()
console.log('arr', arr) // [1, 2, 4, 6, 9]

// 非个位数
let arr = [40, 100, 1, 5, 25, 10]
arr.sort(function (a, b) {
  return a - b // 如果是b - a 就是倒过来排序了
})
console.log('arr', arr) // [1, 5, 10, 25, 40, 100]

// 字母
let arr = ['Banana', 'Orange', 'Apple', 'Mango']
arr.sort()
console.log('arr', arr) // ['Apple', 'Banana', 'Mango', 'Orange']

reverse

reverse() 方法用于颠倒数组中元素的顺序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse(); // Mango,Apple,Orange,Banana

map 和 forEach 的区别

map 返回一个新数组，forEach 没有返回值，两者都不改变原数组。

map 和 filter 的区别

不会改变原数组

map、filter、forEach、find、some、every、slice、join、reduce、findIndex、indexOf、at、flat、includes、fill、concat

会改变原数组

push、pop、shift、unshift、splice、sort、reverse、

更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在天边资源网。

慕容的工作随笔