arr.indexOf()
-
ES5新增
作用:
arr.indexOf()用于查找指定元素在数组中的索引位置。它接受一个参数,即要查找的元素,并返回该元素在数组中首次出现的索引位置。如果数组中不存在该元素,则返回-1。
示例:
const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];
console.log(fruits.indexOf('apple')); // 输出: 0
console.log(fruits.indexOf('banana')); // 输出: 1
console.log(fruits.indexOf('mango')); // 输出: -1
- 注意:
fruits.indexOf('apple'),找的第一个出现的'apple' 元素的索引位置- 找不到返回
-1
arr.lastIndexOf()
-
ES5新增
作用:
arr.lastIndexOf()是一个数组方法,用于查找指定元素在数组中的最后一个出现的索引位置。它接受一个参数,即要查找的元素,并返回该元素在数组中最后一次出现的索引位置。如果数组中不存在该元素,则返回-1。
示例:
const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];
console.log(fruits.lastIndexOf('apple')); // 输出: 3
console.log(fruits.lastIndexOf('banana')); // 输出: 1
console.log(fruits.lastIndexOf('mango')); // 输出: -1
- 注意:
- 找的是元素在数组中的最后一个出现的索引位置。
- 找不到返回
-1
arr.map()
arr.map()
-
ES5新增
作用:
- map方法创建一个新数组;新数组由原数组 每个元素都调用一次提供的函数后的返回值组成。
- 从数组第一个元素开始遍历的调用回调函数, 每次都返回一个值,最后组成一个新的数组
参数:
arr.map(cbFn)接收一个函数cbFn- cbFn的第一个参数:正在处理的当前的元素 item , el 变量自己命名, 最好语义化。
- cbFn的第二个参数 正在处理的元素的索引号 index , i
返回值:
- 由原数组每个元素都调用回调函数的结果组成的新数组。
- 返回的数组是真数组
注意:
- map() 中传入的函数, 一般都需要写return
演示:
- 输出结果
arr.join()
arr.join(‘分隔符’)
作用:
- 将数组转为字符串; 用分隔符连接
- 把数组的所有元素连接成一个字符串, 并返回这个字符串。
参数:
- 可以传一个分割符, 也可以省略
- 分隔符加引号
演示:
- 输出结果:
- 传空的字符串, 直接将数组中的元素无间隙的连接在一起
arr.forEach()
arr.forEach(cbFn)
-
ES5新增
作用:
- forEach遍历数组
- forEach() 方法对数组的每个元素执行一次给定的函数。
- forEach接收一个回调函数cbFn, cbFn又接收两个参数
参数:
-
- cbFn的第一个参数,el ==> 表示数组里面的元素
-
- cbFn的第二个参数,i ==> 表示数组中每个元素的索引号
返回值:
- 无返回值
语法:
forEach(function(element) { /* … */ })forEach(function(element, index) { /* … */ })
arr.push()
作用:
- 将一个或多个元素添加到数组的末尾
返回值:
- 该数组的新长度,会修改原数组
注:
- 如果一次添加多个数组用逗号隔开即可
arr.unshift()
作用:
- 将一个或多个元素添加到数组的开头
返回值:
- 该数组的新长度,会修改原数组
注:
- 如果一次添加多个数组用逗号隔开即可
arr.pop()
作用:
- 从数组中删除最后一个元素,修改原数组
返回值:
- 该元素的值
例:
arr.shift()
作用:
- 从数组中删除第一个元素,修改原数组
返回值:
- 该元素的值
例:
arr.splice()
作用:
- 可以添加也可以删除数组元素
- 可以从指定位置删除或者增加的数组元素,注意它修改原数组
删除数组用法:
- 语法:
splice(start, deleteCount) - start起始位置:指定修改的开始位置(从0计数)
- deleteCount删除个数:可选的。 如果省略则默认从指定的起始位置删除到最后
增加数组用法:
splice(start, deleteCount, item1...)- start起始位置:指定修改的开始位置(从0计数)
- deleteCount删除个数: 参数必写,不写会有很多问题,如不想删除可 填 0
例:
- 输出结果:
arr.reverse()
基本语法:
arr.reverse()
作用:
reverse()方法是 JavaScript 数组对象的一个方法,用于反转(颠倒顺序)数组中元素的顺序。它会改变原始数组,将数组中的第一个元素放置在最后一个位置,第二个元素放置在倒数第二个位置,以此类推,达到颠倒数组顺序的效果。
注意:
reverse()方法对原始数组进行修改,不会创建新的数组。它直接改变了原始数组的顺序,因此需要小心使用,确保不会对其他地方引用同一数组的代码造成意外的影响。
示例:
arr.filter()
-
ES5新增
作用:
filter()是一个数组方法,用于筛选数组中满足特定条件的元素,并返回一个新数组,其中包含符合条件的元素。
基本语法:
array.filter(callback(element[, index[, array]])[, thisArg])- 其中,
array是要进行筛选的数组,callback是一个回调函数,用于定义筛选的条件。callback函数可以接收三个参数:element表示当前正在处理的数组元素,index表示当前元素的索引(可选),array表示调用filter()方法的数组(可选)。thisArg参数是可选的,用于指定callback函数内部的this值。
示例:
- 在上述示例中,
filter()方法会遍历numbers数组的每个元素,并将每个元素传递给回调函数。回调函数中的条件number % 2 === 0用于判断当前元素是否为偶数。如果条件返回true,则将当前元素添加到新数组evenNumbers - 可以使用箭头函数简化:
arr.reduce()
作用:
- 在 JavaScript 中,reduce() 是一个数组方法,用于将数组中的所有元素通过指定的累加器函数(reducer function)进行累积计算,返回一个单一的值。
语法:
reduce()需要传入一个回调函数和一个可选的初始值。回调函数接受四个参数:累加器(accumulator)、当前值(current value)、当前索引(current index)和原数组(array)。回调函数必须返回累加器的值(即本次操作的结果),累加器的初始值可以通过第二个参数指定。arr.reduce(callbackFn, initialValue)
示例:
- 下面的代码使用
reduce()方法来计算数组[1, 2, 3, 4, 5]中所有元素的和:
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15
- 在上面的代码中,回调函数
(accumulator, currentValue) => accumulator + currentValue对累加器和当前值求和,初始值为0。reduce()方法首先将累加器设置为初始值0,然后依次将数组中的每个元素和累加器传入回调函数,依次计算出1+0=1、2+1=3、3+3=6、4+6=10和5+10=15,最终得到总和15。
arr.find()
-
ES5新增
作用:
- 在 JavaScript 中,
find()方法是用于找到数组中第一个满足给定条件的元素,并返回该元素的值。它接受一个回调函数作为参数,该函数会对每个数组元素进行调用,直到找到一个满足条件的元素为止。如果没有找到符合条件的元素,则返回undefined。
示例:
- 以下代码查找一个数组中第一个大于 10 的数:
const arr = [5, 8, 12, 16, 3];
const result = arr.find(num => num > 10);
console.log(result); // 输出: 12
- 在此示例中,回调函数
num => num > 10用于检查数组中的每个元素是否大于 10。由于第一个满足条件的元素是 12,因此find()方法返回 12。 - 可以封装一个回调函数实现相同效果:
const arr = [5, 8, 12, 16, 3];
function cf(el){
return el > 10
}
const p = arr.find(cf)
console.log(p) // 输出 12
arr.findIndex()
-
ES5新增
作用:
findIndex()方法返回数组中第一个满足给定条件的元素的索引,如果没有满足条件的元素,则返回 -1。
语法:
arr.findIndex(cbFn)- cbFn: 第一个参数: item 当前数组, 第二个参数: Index 索引 (可选).
- 与上面用法find()类似,可参考上面语法
arr.every()
-
ES5新增
作用:
every()方法是 JavaScript 数组的一个方法,它会检查数组中的所有元素是否都满足指定条件。如果数组中的所有元素都满足条件,every()方法将返回 true,否则返回false。
示例:
every()方法接受一个回调函数作为参数,该回调函数会被传递数组中的每个元素和相应的索引。回调函数应该返回一个布尔值,表示元素是否满足条件。- 该示例使用
every()方法检查数组中的所有元素是否为偶数:
const arr = [2, 4, 6, 8];
const allEven = arr.every(num => num % 2 === 0); // true
- 在上述代码中,
every()方法会对数组中的每个元素进行求模运算,并检查结果是否等于 0(即是否为偶数)。由于所有元素都是偶数,因此every()方法返回 true。
arr.some()
-
ES5新增
作用:
- some() 方法是 JavaScript 数组的一个内置方法,用于判断数组中是否至少有一个元素满足指定的条件,如果满足,则返回 true,否则返回 false。它接受一个回调函数作为参数,该回调函数可以对数组中的每个元素进行测试,如果有任一元素通过测试,则 some() 方法返回 true。
示例:
- 检查数组中是否包含特定元素:
const numbers = [2, 4, 6, 8, 10];
const hasSix = numbers.some(num => num === 6);
console.log(hasSix); // true
arr.includes()
-
ES5新增
作用:
includes()是 JavaScript 中的一个方法,它用于检查一个数组或字符串是否包含指定的元素或字符串,并返回布尔值表示是否包含。
语法:
arr.includes(searchValue, fromIndex)- searchValue == 要搜索的元素
- fromIndex ==可选; 从那个索引号开始搜索,默认为0
示例:
- 在数组中使用
includes()方法时,它将检查数组中是否存在一个特定元素,并返回 true 或 false。例如:
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(3,4)); // false
console.log(numbers.includes(6)); // false
arr.flat()
作用:
- 拍平数组。
flat()是 JavaScript 数组的方法,它用于将多维数组(嵌套数组)展平为一维数组。 该方法返回一个新数组,其中包含原始数组的所有元素,这些元素按照在原始数组中出现的顺序排列在一维数组中。flat()方法可以接受一个可选参数,用于指定应该展开的嵌套层数,默认值为 1。
示例:
- 示例1:将嵌套数组展平为一维数组
const arr = [1, 2, [3, 4], 5];
const flattenedArr = arr.flat();
console.log(flattenedArr); // [1, 2, 3, 4, 5]
- 示例2:将二维数组展平为一维数组
const arr = [[1, 2], [3, 4], [5, 6]];
const flattenedArr = arr.flat();
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]
- 示例3:将三维数组展平为一维数组
const arr = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
const flattenedArr = arr.flat(2);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8]
- 在示例3中,我们传递了一个参数 2,表示应该展开两层嵌套的数组。如果不指定参数,则默认值为 1,只展开一层嵌套的数组。
- 注:全部拍平,传入Infinity
arr.fill()
作用:
fill()是一个 JavaScript 数组的方法,用于将数组中所有元素替换为指定的值。可以传递一个参数作为要填充到数组中的值,也可以传递两个参数来指定要填充的起始和结束位置。该方法会修改原始数组,并返回修改后的数组。
语法:
arr.fill(val, start, end)- val === 用于将数组中所有元素替换为指定的值
- start end ===可选; 指定要填充的起始和结束的索引位置
示例:
- 使用单个参数
const arr = [0, 1, 2, 3, 4];
arr.fill(5); // 将数组所有元素替换为 5
console.log(arr); // 输出 [5, 5, 5, 5, 5]
- 使用两个参数
const arr = [0, 1, 2, 3, 4];
arr.fill(5, 1, 4); // 将数组下标从 1 到 3
- end不写,从start直到最后
const array1 = [1, 2, 3, 4];
console.log(array1.fill(5, 1)); // [1, 5, 5, 5]
arr.sort
作用:
- 在 JavaScript 中,
sort()是一个数组方法,用于对数组元素进行排序。它会改变原始数组并返回排序后的数组。 - 默认情况下,
sort()方法将把数组元素转换为字符串并按照 Unicode 编码顺序进行排序。如果想要按照其他顺序进行排序,则可以传递一个比较函数作为参数。
示例:
// 排序数组元素(默认按照 Unicode 编码顺序)
const fruits = ['banana', 'pear', 'apple', 'orange'];
fruits.sort(); // ['apple', 'banana', 'orange', 'pear']
// 按照数字升序排序
const numbers = [3, 1, 5, 2, 4];
numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]
// 按照数字降序排序
const numbers = [3, 1, 5, 2, 4];
numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]
// 按照字符串长度排序
const words = ['dog', 'cat', 'elephant', 'bird'];
words.sort((a, b) => a.length - b.length); // ['cat', 'dog', 'bird', 'elephant']
- 比较函数接受两个参数(通常称为
a和b),它们代表待比较的数组元素。如果返回值小于 0,则a排在b前面;如果返回值大于 0,则b排在a前面;如果返回值等于 0,则a和b在排序后的数组中相对位置不变。
Array.from()
作用:
Array.from()是 JavaScript 中的一个静态方法,它可以用来将类数组(伪数组)对象或可迭代对象(如字符串、Set、Map 等)转换为数组。- 伪数组转为真数组。静态方法。
- 类数组:指的是具有数字索引和 length 属性,但不具备数组对象所拥有的方法(如 push、pop、slice 等)的对象。
- 可迭代对象:指的是可以使用 for...of 循环遍历的对象,例如数组、字符串、Map、Set 等。
示例:
- 假设有一个类数组对象
arguments和一个 Set 对象mySet,可以使用.from()方法将它们转换为数组:
function myFunction() {
const args = Array.from(arguments); // 将 arguments 转换为数组
console.log(args);
}
const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet); // 将 Set 转换为数组
console.log(myArray);
.from()方法也可以接受第二个参数,用于对数组中每个元素进行处理后再返回新的数组。例如:
const myArray = ['1', '2', '3'];
const myNewArray = Array.from(myArray, x => parseInt(x)); // 将字符串数组转换为数字数组
console.log(myNewArray); // [1, 2, 3]
Array.isArray()
作用:
Array.isArray()是一个 JavaScript 的内置方法,用于检测一个值是否为数组。它接受一个参数,即要进行检测的值,然后返回一个布尔值。如果该值是一个数组,则返回true;如果不是数组,则返回false。
示例:
console.log(Array.isArray([])); // true
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray(undefined)); // false
console.log(Array.isArray("array")); // false
arr.concat()
作用:
arr.concat()是一个数组方法,用于将多个数组或值合并成一个新数组。它接受任意数量的参数,可以是数组或值,并返回一个新的数组,其中包含了原始数组和参数中的元素。
示例1:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
示例2:
arr.concat()还可以接受单个的值作为参数,并将其合并到新数组中。例如:
const arr1 = [1, 2, 3];
const arr2 = arr1.concat(4, 5, 6);
console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]
示例3:
arr.concat()方法还可以用于合并多个数组,不仅限于两个数组。例如
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
arr.slice()
作用:
arr.slice()是一个数组方法,用于从原数组中提取指定范围的元素,创建一个新的数组并返回。它接受两个参数,即起始索引和结束索引(不包含结束索引),并返回一个包含了原数组中相应范围的元素的新数组。
示例1:
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 输出: ['banana', 'orange', 'grape']
- 注意:
- 如果省略第二个参数,则
arr.slice()将提取从起始索引到数组末尾的所有元素。 arr.slice()方法不会修改原始数组,而是返回一个新的切片(子数组)。原始数组保持不变。- 提供的索引参数超出了数组的范围,
arr.slice()会自动调整索引,返回有效范围内的切片
示例2:
- 如果起始索引大于等于结束索引,则返回一个空数组。
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(3, 1);
console.log(slicedFruits); // 输出: []
- 在上述示例中,由于起始索引(3)大于等于结束索引(1),所以返回一个空数组。