JavaScript丨内置函数（一）

这是JavaScript系列的第八期，本期讲的是内置函数，主要是讲常用的函数，在实际项目中用到多的地方。

本期主要讲和数组Array相关的函数的基础用法。

concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

• 合并两个数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = arr1.concat(arr2);

console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]

• 合并三个数组，当然也可以合并很多个，在后面添加即可。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3);

console.log(arr4);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

every()

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

const arr = [9, 10, 11, 12, 13, 14];

console.log(arr.every((v) => v > 10)); // false

every()中，接受的是一个函数，every()可以理解为是一个数组遍历，遍历每一项，看看是不是都大于10，只要有一个不大于10，就返回我false。可以将上面的拆解一下。

const arr = [9, 10, 11, 12, 13, 14];

const isTure = (v) => v > 10;

console.log(arr.every(isTure)); // false

可以看到every()接受的是一个函数

filter

filter()方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。简单地讲，就是过滤，查找数组中符合条件的项，并返回一个新的数组，不更改原来的数组。

const arr = [9, 10, 11, 12, 13, 14];

const filterFn = (v) => v > 10;

console.log(arr.filter(filterFn)); // [ 11, 12, 13, 14 ]

filter()内部接受的也是一个函数，这上面的函数就是过滤一下整个数组中大于10的数字，返回出一个大于10的新数组。当然在实际项目中，我们经常过滤对象中的一个键的值是否满足要求。

const list = [
  { name: "mark", age: 17 },
  { name: "orange", age: 18 },
  { name: "alex", age: 19 },
  { name: "marry", age: 20 },
];

const filterFn = (v) => {
  return v.age >= 18;
};

console.log(list.filter(filterFn)); // [{ name: "orange", age: 18 },{ name: "alex", age: 19 },{ name: "marry", age: 20 }]

以上定义了一个list的数组，定义了一个函数，函数需要返回满足age>=18这个条件中的项。也就是打印的这些。

find()

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

const arr = [1, 2, 1, 2, 3, 4, 5, 6];

const findFn = (v) => v > 2;

console.log(arr.find(findFn)); // 3

可以看到，find()接受的也是个函数，函数要求返回大于2，而find()只会返回大于2的第一项，也就是返回3。

findIndex()

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

const arr = [1, 2, 1, 2, 3, 4, 5, 6];

const findFn = (v) => v > 2;

console.log(arr.findIndex(findFn)); // 4

上面的find()的栗子是返回了对应的第一个数值，那么可以看到这个栗子，打印的是这个数值对应的索引值4，从0开始，从左到右数，索引值刚刚是4。

indexOf()

indexOf()方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

const arr = ["orange", "alex", "marry", "orange"];

console.log(arr.indexOf('orange')); // 0

根据上面的栗子，打印的是0，indexOf()就是寻找整个数组中满足条件的第一个数值对应的索引值。不存在的话，就返回为-1。

includes()

includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const arr = ["orange", "alex", "marry", "orange"];

console.log(arr.includes('orange')); // true

以上的栗子，includes()就是查找整个函数中为oirange这个值，如果存在，就返回了true。

some()

some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

const arr = [1, 2, 1, 2, 3, 4, 5, 6];

const someFn = (v) => v > 5;

console.log(arr.some(someFn)); // true

上面的栗子，就是查询数组中是否有大于5的值，有的话，就返回true，否则返回false。这个和every()的用法一模一样，只是some()只要满足一项就返回true，而every()是需要全部满足才会返回true。这两个可以对对应的记一记。

forEach()

forEach()方法对数组的每个元素执行一次给定的函数。简单的讲，就是一个循环，和for是一样的效果。

const arr = [1, 2, 3, 4, 5, 6];

arr.forEach((v) => {
  console.log(v); // 1,2,3,4,5,6
});

以上的这个栗子，是打印数组中的每一项！也就是1,2,3,4,5,6。但是这个是不能使用break以及continue。

Array.isArray()

Array.isArray()静态方法用于确定传递的值是否是一个 Array。

const arr = [1, 2, 3, 4, 5, 6];

const str = "1,2,3,4,5,6";

console.log(Array.isArray(arr)); // true

console.log(Array.isArray(str)); // false

join()

join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.join()); // 1,2,3,4,5,6
console.log(arr.join(' ')); // 1 2 3 4 5 6
console.log(arr.join('-')); // 1-2-3-4-5-6

可以看到以上的栗子，join()不填写任何的分隔符号，默认就是,。填写其他的分隔符就会按照填写的来分割为一个字符串。

map()

map()方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const arr = [1, 2, 3, 4, 5, 6];

const arr1 = arr.map((v) => v * 2);

console.log(arr1); // [ 2, 4, 6, 8, 10, 12 ]

以上的栗子就是对数组每一项乘以2，返回新的数组。当然我们可以对对象数组进行处理。

const list = [
  { name: "mark", age: 17 },
  { name: "orange", age: 18 },
  { name: "alex", age: 19 },
  { name: "marry", age: 20 },
];

const arr = list.map((v) => v.age + 2);

console.log(arr); // [ 19, 20, 21, 22 ]

对list的年龄都加2，然后返回年龄。

pop()

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.pop()); // 6
console.log(arr); // 1,2,3,4,5

从上面栗子看到，pop()执行后，删除的是6，剩下的就是1，2，3，4，5了。

push()

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.push(7)); // 7
console.log(arr); // 1,2,3,4,5,6,7

可以明显的看到，我们把7插入了数组的结尾！

reverse()

reverse() 方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。

要在不改变原始数组的情况下反转数组中的元素，使用 toReversed()。

const arr = [1, 2, 3, 4, 5, 6];
const arr1 = arr.toReversed()
console.log(arr1); // 6, 5, 4, 3, 2, 1 
console.log(arr.reverse()); // 6, 5, 4, 3, 2, 1

可以看到，完全都是反转了数组，第一个变成了最后一个，最后一个变成了第一个了！

shift()

shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const arr = [1, 2, 3, 4, 5, 6];

arr.shift()
console.log(arr); // 2,3,4,5,6

slice()

slice()方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

const arr = [1, 2, 3, 4, 5, 6];

const arr1 = arr.slice(2, 4);

console.log(arr1); // [ 3, 4 ]

splice()

splice()方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。

const arr = [1, 2, 3, 4, 5, 6];

arr.splice(1, 0, "orange");

console.log(arr); // [ 1, 'orange', 2, 3, 4, 5, 6 ]

上面的splice()，第一位是索引值，就是需要替换或者删除的位置。第二位是删除的数量，如果是0的话，就是在索引值的地方添加一位。第三位就是需要添加的值。比如上面这个就是在索引值为1的地方添加一个为orange的值。

const arr = [1, 2, 3, 4, 5, 6];

arr.splice(1, 1, "orange");

console.log(arr); // [ 1, 'orange', 3, 4, 5, 6 ]

这上面的，第二位填写了1，就是删除1位，从索引值1开始，然后这里添加一个orange的值。

sort()

sort()方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

const arr = [2, 5, 1, 3, 6];

arr.sort();

console.log(arr);

上面这个栗子，就是将数组从小到大排序。

const arr = [2, 5, 1, 3, 6];
arr.sort((a, b) => {
  return b - a;
});
console.log(arr); // [ 6, 5, 3, 2, 1 ]

上面的栗子，通过传入两个参数，实现了倒叙排序。

unshift()

unshift()方法将指定元素添加到数组的开头，并返回数组的新长度。

const arr = [1, 2, 3, 4, 5, 6];

arr.unshift(0)

console.log(arr); // [0, 1, 2, 3,4, 5, 6]

从上面栗子可以看到，在原来的数组前面加了一位0。

总结

这里全都是针对数组的内置函数，都是常用的，基本上项目中会用到的部分，还有一些不常用的，有兴趣可以去 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator 看看。

下一期还是讲的内置函数，除了数组的内置函数外，还有其他的常用的内置函数，有兴趣可以继续关注学习下。