Bootstrap

【掌握 JavaScript 数组迭代:map 和 includes 的使用技巧】

map

map()方法是数组原型的一个函数,用于对数组的每个元素执行一个函数,并返回一个新的数组,其中包含么哦一个元素执行的结果。

语法

const newArray = array.map(callback(currentValue, index, arr), thisValue)

参数

callback:表示对数组中的每个元素要执行的函数,该函数包含三个参数:

  • currentValue:当前正在处理的元素。
  • index(可选):当前正在处理的元素的索引。
  • arr(可选):调用 map 方法的数组。

thisValue:可选参数,表示实行callback函数时的this指向

示例

let num: number[] = [1, 2, 3, 4, 5];

// #region 基本用法
let doubled = num.map((item) => {
  return item * 2;
})
console.log(doubled); // [2, 4, 6, 8, 10]
// #endregion

//  #region 将对象数组转换为属性值数组
let objects = [{ name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'orange', color: 'orange' }];
let colors = objects.map((item) => {
    if(item.color !='yellow')  return item.color
})
console.log(colors); // [ 'red', undefined, 'orange' ]
// #endregion

// #region map this指向
let num2: number[] = [1, 2, 3, 4, 5];
let obj = { multiplier: 2 };
let doubled2 = num2.map(function (item) {
    return item * this.multiplier;
}, obj);
console.log(doubled2); // [2, 4, 6, 8, 10]
// #endregion

includes

includes 是 JavaScript 数组和字符串原型上的一个方法用于检查某个值是否存在于数组或字符串中。它返回一个布尔值:如果找到了该值,则返回 true;否则返回 false

语法

  • searchElement:必需。要在数组中查找的元素。
  • fromIndex:可选。开始搜索的位置。如果该索引值大于或等于数组长度,则该方法返回 false,因为搜索区间为空。如果省略,则从索引 0 开始搜索。如果是负数,则它代表从数组末尾开始计算的位置。即使该位置是负数,检查时仍是从前往后检查。
arr.includes(searchElement[, fromIndex = 0])

示例

/**
 * includes 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true ,否则返回 false。
 * 语法:
 * array.includes(searchElement,fromIndex)
 */

let arr: number[] = [1, 2, 3];
console.log( `查询数组 arr 中是否存在 1 :${arr.includes(1)}` ); // 查询数组 arr 中是否存在 1 :true
console.log( `查询数组 arr 中是否存在 4 :${arr.includes(4)}` ); // 查询数组 arr 中是否存在 4 :false


console.log( `从 arr 的索引 2 开始查找,是否存在 1 :${arr.includes(1, 2)}` ); // 从 arr 的索引 2 开始查找,是否存在 1 :false
console.log( `从 arr 的索引 0 开始查找,是否存在 2 : ${arr.includes(2, 0)}` ); // 从 arr 的索引 0 开始查找,是否存在 2 : true
console.log( `从 arr 的索引 -1 开始查找,是否存在 1 :${arr.includes(1, -1)}` ); // 从 arr 的索引 -1 开始查找,是否存在 1 :false


/**
 * 当 fromIndex 为负数时,则它代表从数组末尾开始计算的位置;fromIndex 的值是负数时,
 * 如果数组长度小于 fromIndex 的绝对值,则 fromIndex 的值等于 0。
 */

// arr.length = 3
// arr.includes(1,-1) 等价于 arr.includes(1,2)
console.log( arr.includes(1,-1) ) // false
// arr.includes(2,-2) 等价于 arr.includes(2,1)
console.log( arr.includes(2,-2) ) // true
// arr.includes(2,-4) 等价于 arr.includes(2,0)
console.log( arr.includes(2,-4) ) // true
;