喵扑的苗圃

外观

本页目录

常用数组方法 ​

push ​

最常用法，在数组的末尾添加新元素 ​

点击查看示例
ts
const array = [1, 2, 3]
array.push(5)
console.log(array)

TIP

push可以插入相同的和不同的类型，

点击查看示例
ts
const array = [1, 2, 3]
array.push({})
console.log(array)

forEach ​

常用的数组循环，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 ​

注意: forEach() 对于空数组是不会执行回调函数的。

TIP

array.forEach(callbackFn(currentValue, index, arr), thisValue)

参数描述说明
callbackFn(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。currentValue 必须。当前元素index 可选。当前元素的索引值arr 可选。当前元素所属的数组对象
thisValue可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值--

其他形式的语法格式：

js
// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
点击查看示例1

forEach() 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数。即map是返回一个新数组，原数组不变，forEach 是不改变原数组（尽管回调函数 callbackFn 在被调用时可能会改变原数组）。

不支持 continue，用 return false 或 return true 代替。

不支持 break，用 try catch/every/some 代替：

实现 break：

js
try {
    var array = ["first","second","third","fourth"];        // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);// first,sencond
    }); 
} catch(e) { 
    if(e.message!="EndIterative") throw e; 
};

实现 continue：

js
var arr = [1,2,3,4,5];
var num = 3;
arr.some(function(v){
    if(v == num) {
        return;  // 
    }
    console.log(v);
});

实现 break：

js
var arr = [1,2,3,4,5]; 
var num = 3; 
arr.every(function(v){
    if(v == num) {
        return false;
    }else{ 
        console.log(v); 
        return true;
    }
});
点击查看示例2
js
var arr = [1, 2, 3, 4, 5];
var a=arr.forEach(function(value,index,arr){
    value=value+7
    console.log(value+" "+index+" "+arr)
},3)

console.log(a)
console.log(arr.toString())

输出结果：

js
8 0 1,2,3,4,5
9 1 1,2,3,4,5
10 2 1,2,3,4,5
11 3 1,2,3,4,5
12 4 1,2,3,4,5
undefined
1,2,3,4,5

map ​

通过指定函数处理数组的每个元素，并返回处理后的数组。 ​

TIP

array.map(function(currentValue,index,arr), thisValue)

参数描述说明
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数currentValue 必须。当前元素的值index 可选。当前元素的索引值arr 可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。--
点击查看示例
ts
const array = [1, 2, 3]
const arr1 = array.map((i) => ({ num: i }))
const arr2 = arr1.map((j) => ({ ...j, is: false }))
const arr3 = array.map((i) => {
  if (i > 1) return i
  else return undefined
})
/**
 * arr1 = [{ num: 1 }, { num: 2 }, { num: 3 }]
 * arr2 = [{ num: 1, is: false }, { num: 2, is: false }, { num: 3, is: false }]
 * arr3 = [undefined, 2, 3]
 */

TIP

map() 不会改变原始数组。
map() 不会对空数组进行检测。

使用key转换成value展示 ​

点击查看示例
ts
formatter(key: number) {
  const map = {
    0: '否',
    1: '是',
  }
  return map[key]
}

join ​

用数组元素组成逗号分隔的字符串，其中逗号可以换成其他字符 ​

点击查看示例
ts
const array = [2023, 12, 3]
const str1 = array.join()
const str2 = array.join('-')
/**
 * str1 = "2023,12,3"
 * str2 = "2023-12-3"
 */

pop ​

删除数组的最后一个元素 ​

点击查看示例
ts
const array = [1, 2, 3]
array.pop()
/**
 * array = [1,2]
 */

shift ​

删除数组的第一个元素 ​

TIP

和pop不同，它返回了删除的元素

点击查看示例
ts
const array = [1, 2, 3]
const item = array.shift()
/**
 * array = [2,3]
 * item = 1
 */

unshift ​

向数组头部添加新元素（可以添加多个，类似push） ​

点击查看示例
ts
const array = [1, 2, 3]
array.unshift(7,8)
/**
 * array = [7,8,1,2,3]
 */

concat ​

合并数组 ​

TIP

concat不会改变原数组

点击查看示例
ts
const array = [1, 2, 3]
const arr1 = [4, 5]
const arr2= [6, 7, 8]
const arr4 = array.concat(arr1)
const arr5 = array.concat(arr1,arr2)
/**
 * arr4 = [1,2,3,4,5]
 * arr5 = [1,2,3,4,5,6,7,8]
 */

reverse ​

将数组反转排序 ​

点击查看示例
ts
const array = [1, 2, 3]
array.reverse()
/**
 * array = [3,2,1]
 */

sort ​

数组排序 ​

点击查看示例
ts
const array = [40, 100, 1, 5, 25, 10];
const array2 = [40, 100, 1, 5, 25, 10];
const array3 = ["Banana", "Orange", "Apple", "Mango"];
array.sort((a, b) => b - a);
array2.sort((a, b) => a - b);
array3.sort();
/**
 * array = [100,40,25,10,5,1] 按照数字顺序降序
 * array2 = [1,5,10,25,40,100] 按照数字顺序升序
 * array3 = ["Apple","Banana","Mango","Orange"] 按照字母顺序升序
 */

toString ​

将数组转换成逗号分隔的字符串（结果上和join一样，但是不能自定义分隔内容） ​

点击查看示例
ts
const array = ["Banana", "Orange", "Apple", "Mango"];
const str = array.toString();
/**
 * str = "Banana,Orange,Apple,Mango"
 */

slice ​

选取数组从 start（包括该元素） 到 end （不包括该元素）的部分，并返回一个新数组 ​

点击查看示例
ts
const array = ["Banana", "Orange", "Apple", "Mango"];
const arr1 = array.slice(1,3);
/**
 * arr1 = ["Orange", "Apple"]
 */

splice ​

从数组中添加或删除元素。如果删除一个元素，则返回删除的一个元素的数组； 如果未删除任何元素，则返回空数组。 ​

TIP

array.splice(index,howmany,item1,.....,itemX)

参数描述说明
index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX可选。要添加到数组的新元素-
点击查看示例
ts
const array = ["Banana", "Orange", "Apple", "Mango"];
const array2 = ["Banana", "Orange", "Apple", "Mango"];
const array3 = ["Banana", "Orange", "Apple", "Mango"];
const arr1 = array.splice(2,0,"Lemon","Kiwi"); // 从下标为2的地方删除0个元素，插入"Lemon"和"Kiwi"
const arr2 = array2.splice(2,1,"Lemon","Kiwi");
const arr3 = array3.splice(2);
/**
 * array = ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
 * array2 = ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]
 * array3 = ["Banana", "Orange"]
 * arr1 = []
 * arr2 = ["Apple"]
 * arr3 = ["Apple", "Mango"]
 */

every ​

检测数值元素的每个元素是否都符合条件。 ​

检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

TIP

array.every(function(currentValue,index,arr), thisValue)

参数描述说明
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数currentValue 必须。当前元素的值index 可选。当前元素的索引值arr 可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"--

every()不会改变原始数组。every()不会对空数组进行检测。
用法和map()基本一致，除了thisValue

点击查看示例
ts
const array = [32, 33, 12, 40];
const age18 = array.every((i) => i >= 18);
/**
 * age18 = false
 */

filter ​

检测数组元素，并返回符合条件所有元素的数组 ​

TIP

filter() 不会改变原始数组。 filter() 不会对空数组进行检测。
参数和用法与every()一致

点击查看示例
ts
const array = [32, 33, 12, 40];
const arr = array.filter((i) => i >= 18);
/**
 * arr = [32,33,40]
 */

reduce ​

将数组元素计算为一个值（从左到右）。 ​

点击查看示例
ts
const array = [0, 1, 2, 3];
const result = array.reduce((a, b) => a + b);
/**
 * result = 6
 */

reduceRight ​

将数组元素计算为一个值（从右到左）。 ​

点击查看示例
ts
const array = [0, 1, 2, 3];
const result = array.reduceRight((a, b) => a + b);
/**
 * result = 6
 */

includes ​

判断一个数组是否包含一个指定的值。 ​

点击查看示例
ts
const array = ["orange", "mango", "banana", "sugar", "tea"];
const result = array.includes("mango");
/**
 * result = true
 */

Copyright © 2023-present ringo@miaopuc.com