js之Array的使用

基础

  • array.concat(arr1) \(\Rightarrow\) 连接两个或多个数组，并返回已连接数组的副本
1
2
3
4
5
const arrConcat = (arr, arr1) => {
  console.log("arrConcat=====>>>", arr.concat(arr1));
};
// [ 'apple', 'banana', 'pears' ]
arrConcat(["apple", "banana"], ["pears"]);
  • array.copyWithin(num1,num2)：将数组中的数组元素复制到指定位置或从指定位置复制
1
2
3
4
5
6
7
const copyWithinArray = () => {
  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  // [ 'Banana', 'Orange', 'Apple', 'Orange' ]
  console.log("arrConcat=====>>>", fruits.copyWithin(3, 1));
};

copyWithinArray();
  • array.fill(修改的数据，开始索引，结束索引)：填充数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const fillArr = () => {
  const milkArr = ["蒙牛", "娃哈哈", "AD钙奶", "优酸乳", "伊利"];
  // [ '蒙牛', '娃哈哈', 'AD钙奶', '优酸乳', '伊利' ]
  milkArr.fill("Kiwi", 2, 2);
  // [ '蒙牛', '娃哈哈', 'Kiwi', '优酸乳', '伊利' ]
  milkArr.fill("Kiwi", 2, 3);
  // [ '蒙牛', '娃哈哈', 'Kiwi', 'Kiwi', '伊利' ]
  milkArr.fill("Kiwi", 2, 4);
  // [ '蒙牛', '娃哈哈', 'Kiwi', 'Kiwi', 'Kiwi' ]
  milkArr.fill("Kiwi", 2, 5);
  // [ '蒙牛', '娃哈哈', 'Kiwi', 'Kiwi', 'Kiwi' ]
  milkArr.fill("Kiwi", 2, 7);
  console.log(milkArr);
};
filterArr();
  • Array.from(转为数组的对象)创建数组
1
2
3
4
5
6
7
8
9
const arrayFrom = () => {
  // ['f', 'o', 'o', 'd']
  console.log(Array.from("food"));
  // [2, 4, 6, 8]
  console.log(Array.from([1, 2, 3, 4], (x) => x + x));
  // [0, 1, 2, 3, 4, 5, 6]
  console.log(Array.from({ length: 7 }, (v, i) => i));
};
arrayFrom();
  • array.join(链接条件)：将数组合并成字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function arrayJoin() {
  const fruitsArr = [
    "Banana",
    "Cherry",
    "Peach",
    "Kiwi",
    "Leamon",
    "Watermelon",
    "Strawberry",
    "Orange",
    "Apple",
    "Mango",
    "Banana",
  ];
  // Banana-Cherry-Peach-Kiwi-Leamon-Watermelon-Strawberry-Orange-Apple-Mango-Banana
  console.log("fruitsArr=====>>>", fruitsArr.join("-"));
  // Banana And Cherry And Peach And Kiwi And Leamon And Watermelon And Strawberry And Orange And Apple And Mango And Banana
  console.log("fruitsArr=====>>>", fruitsArr.join(" And "));
  // Banana Cherry Peach Kiwi Leamon Watermelon Strawberry Orange Apple Mango Banana
  console.log("fruitsArr=====>>>", fruitsArr.join(" "));
  // Banana / Cherry / Peach / Kiwi / Leamon / Watermelon / Strawberry / Orange / Apple / Mango / Banana
  console.log("fruitsArr=====>>>", fruitsArr.join(" / "));
}
arrayJoin();
  • array.toString()：转为字符串
1
2
3
4
5
const ArrayToString = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // Banana,Orange,Apple,Mango
  console.log("fruitsAr1r=====>>>", fruitsArr.toString());
};
  • Array.isArray(arr)：arr 是否为数组
1
2
3
4
5
6
7
8
function isArray() {
  const fruitsArr = ["Banana", "Cherry", "Peach", "Kiwi"];
  // true
  console.log("fruitsArr=====>>>", Array.isArray(fruitsArr));
  // false
  console.log("fruitsArr=====>>>", Array.isArray({ name: "sss", age: 13 }));
}
isArray();
  • array.valueOf()：输出原数组
1
2
3
4
5
6
const valueOfArray = () => {
  const fruitsArr = ["Banana", "Cherry", "Peach", "Kiwi"];
  // [ 'Banana', 'Cherry', 'Peach', 'Kiwi' ]
  console.log("fruitsArr=====>>>", fruitsArr.valueOf());
};
valueOfArray();
  • array.pop()：删除最后一个元素
1
2
3
4
5
6
7
const dealArrays = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // 删除项：Mango
  // 数组：['Banana', 'Orange', 'Apple']
  console.log("pop=====>>>", fruitsArr.pop());
};
dealArrays();
  • array.shift()：删除第一个元素
1
2
3
4
5
6
7
const dealArrays = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // Banana
  // 数组：[ 'Orange', 'Apple','Mango']
  console.log("shift=====>>>", fruitsArr.shift());
};
dealArrays();
  • array.unshift()：向数组开头添加一个元素
1
2
3
4
5
6
const dealArrays = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // [ 'Kiwi', 'Banana', 'Orange', 'Apple', 'Mango' ];
  console.log("unshift=====>>>", fruitsArr.unshift("Kiwi"));
};
dealArrays();
  • array.push()：向数组末尾添加一个元素
1
2
3
4
5
6
const dealArrays = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // [ 'Banana', 'Orange', 'Apple', 'Mango', 'Leamon' ]
  console.log("push=====>>>", fruitsArr.push("Leamon"), fruitsArr);
};
dealArrays();
  • array.splice()：向数组添加 / 删除元素
1
2
3
4
5
6
7
const dealArrays = () => {
  const fruitsArr = ["Banana", "Orange", "Apple", "Mango"];
  // 删除项：Mango
  // 数组：['Banana', 'Orange', 'Apple']
  console.log("pop=====>>>", fruitsArr.pop());
};
dealArrays();
  • array.slice(开始索引，结束索引)：截取数组，并返回一个新数组
1
2
3
4
5
6
const dealArrays = () => {
  const fruitsArr = ["Kiwi", "Banana", "Orange", "Apple", "Mango", "Leamon"];
  // [ 'Banana', 'Orange', 'Apple', 'Mango' ]
  console.log("slice=====>>>", fruitsArr.slice(1, 5));
};
dealArrays();
  • array.splice()：向数组添加 / 删除元素
1
2
3
4
5
6
7
8
const dealArrays = () => {
	const fruitsArr = ['Kiwi', 'Banana', 'Orange', 'Apple', 'Mango', 'Leamon'];
	/* 在index = 2时，添加一个，名叫Watermelon的元素 */
	fruitsArr.splice(2, 0, 'Watermelon');

	// ['Kiwi', 'Banana', 'Watermelon', 'Orange', 'Apple', 'Mango', 'Leamon']
	console.log('splice=====>>>', fruitsArr, arr);
dealArrays();
1
2
3
4
5
6
7
8
9
const dealArrays = () => {
  const fruitsArr = ["Kiwi", "Banana", "Orange", "Apple", "Mango", "Lemon"];
  /* 在index = 2时，删除一个元素并添加两个元素 */
  const arr = fruitsArr.splice(2, 1, "Watermelon", "Peach");

  // ['Kiwi', 'Banana', 'Watermelon', 'Peach', 'Apple', 'Mango', 'Lemon'];
  console.log("splice=====>>>filterArr", fruitsArr);
};
dealArrays();
1
2
3
4
5
6
7
8
const dealArrays = () => {
  const fruitsArr = ["Kiwi", "Banana", "Orange", "Apple", "Mango", "Lemon"];
  /* 在index = 3时，删除两个元素 */
  fruitsArr.splice(3, 2);
  // [ 'Kiwi', 'Banana', 'Orange', 'Lemon' ]
  console.log("splice=====>>>", fruitsArr);
};
dealArrays();

迭代

循环

  • array.forEach(项目值，项目索引，数组本身)：循环数组，不会更改原来的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function forEachArr() {
  const colorArr = ["Red", "Orange", "Blue", "Purple"];
  const arr = [];
  colorArr.forEach((value, index, array) => {
    // 当前数据
    console.log("val=====>>>", value);
    // 当前index
    console.log("index=====>>>", index);
    // 当前数组
    console.log("array=====>>>", array);

    if (value == "Red") {
      // console.log('1=====>>>');
      value = "Bananas";
    }
    arr.push(value);
  });
  // [ 'Bananas', 'Orange', 'Blue', 'Purple' ]
  console.log(arr);
}
forEachArr();
  • array.map(项目值，项目索引，数组本身)：循环数组，会更改原来的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function mapArr() {
  const colorArr = ["Red", "Orange", "Blue", "Purple"];

  const arr = colorArr.map((value, index, array) => {
    // 当前数据
    console.log("val=====>>>", value);
    // 当前index
    console.log("index=====>>>", index);
    // 当前数组
    console.log("array=====>>>", array);
    if (value == "Orange") {
      value = "哈哈哈";
    }

    return value;
  });
  // [ 'Red', '哈哈哈', 'Blue', 'Purple' ]
  console.log(arr);
}
mapArr();
  • array.filter(项目值)：过滤数组
1
2
3
4
5
6
7
8
9
10
const filterArr = () => {
  const milkArr = [1, 5, 10, 20, 30, 18, 16, 12, 54, 4, 33];
  const arr = milkArr.filter((value) => {
    return value > 8;
  });
  // [ 10, 20, 30, 18,16, 12, 54, 33 ]
  console.log(arr);
};

filterArr();
  • array.reduce()：对数据进行运算处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const reduceArr = () => {
  const numArr = Array.from({ length: 21 }, (v, i) => i);
  // true
  const arr1 = numArr.reduce((acc, e, index, arr) => e > 10);

  const arr2 = numArr.reduce((acc, e) => {
    console.log("acc=====>>>", acc);
    console.log("e=====>>>", e);
    console.log("hhh=====>>>", e - acc);
    return e - acc > 10;
  });
  // false
  console.log("arr=====>>>", arr1);
  // true
  console.log("arr=====>>>", arr2);
};

  • array.every(项目值,项目索引，项目本身)：检查数组中的所有元素是否都通过了测试（返回 true / false ）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const arrEvery = () => {
  const numArr = [1, 5, 8, 10, 12, 16, 20, 30, 40, 42, 54];

  const arr1 = numArr.every((e) => {
    console.log("arr1=====>>>e", e);
    return e * 3 > 10;
  });
  // true
  console.log(arr1);

  const arr2 = numArr.every((e) => {
    console.log("arr2=====>>>e", e);
    return (e = 10);
  });
  // true
  console.log(arr2);
};
arrEvery();

  • array.some(项目值,项目索引，项目本身)：检查数组中的所有元素是否都通过了测试（返回 true / false ）
1
2
3
4
5
6
7
8
9
10
11
function arrSome() {
  const numArr = [1, 5, 8, 10, 12, 16, 20, 30, 40, 42, 54];
  const arr1 = numArr.some((e) => e * 3 > 10);
  // true
  console.log(arr1);

  const arr2 = numArr.some((value) => value > 40);
  // true
  console.log(arr2);
}
arrSome();

[!note] every：有一个不符合条件就停止循环
some：一直循环到符合条件为止

查找元素

  • array.indexOf(val)：在数组中搜索元素并返回其位置，找不到返回-1
1
2
3
4
5
6
7
8
const indexOfArr = () => {
  const numArr = [1, 5, 8, 10, 12, 16, 20, 30, 40, 42, 54, 10];
  // 3
  console.log("numArr=====>>>", numArr.indexOf(10));
  // -1
  console.log("numArr=====>>>", numArr.indexOf(15));
};
indexOfArr();
  • array.lastIndexOf(val)：在数组中搜索元素出现的最后一次并返回其位置，找不到返回-1
1
2
3
4
5
6
7
8
9
10
const lastIndexOfArr = () => {
  const numArr = [1, 5, 8, 10, 12, 16, 20, 30, 40, 42, 54, 10];
  // 11
  console.log("numArr=====>>>", numArr.lastIndexOf(10));
  // 1
  console.log("numArr=====>>>", numArr.lastIndexOf(5));
  // -1
  console.log("numArr=====>>>", numArr.lastIndexOf(9));
};
lastIndexOfArr();
  • array.find(val)：返回符合条件的元素，没有符合的返回 undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const findArr = () => {
  const numArr = [5, 8, 10, 12, 16, 20, 30, 40, 42, 54, 10];

  const isLargeNumber = numArr.find((element) => {
    console.log("ele=====>>>", element);
    return element > 8;
  });
  // 10
  console.log("isLargeNumber=====>>>", isLargeNumber);

  const isSmallerNumber = numArr.find((element) => {
    console.log("ele=====>>>", element);
    return element < 4;
  });
  // undefined
  console.log("isSmallerNumber=====>>>", isSmallerNumber);
};
findArr();
  • array.findIndex(val)：返回符合条件的个数，没有符合的返回-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const findIndexArr = () => {
  const numArr = [5, 8, 10, 12, 16, 20, 30, 40, 42, 54, 10];
  /* 比对是否有比10更大的数字 */
  const isLargeNumber = numArr.findIndex((element) => {
    console.log("ele=====>>>", element);
    return element > 10;
  });
  // 4
  console.log("isLargeNumber=====>>>", isLargeNumber);
  /* 比对是否有比4更小的数字 */
  const isSmallerNumber = numArr.findIndex((element) => {
    console.log("ele=====>>>", element);
    return element < 4;
  });
  // -1
  console.log("isSmallerNumber=====>>>", isSmallerNumber);
};
findIndexArr();
  • array.includes(查找元素, 开始位置)：检测数组是否包含指定的元素。返回 True / False
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function arrayIncludesStr() {
  var fruitsArr = [
    "Banana",
    "Cherry",
    "Peach",
    "Kiwi",
    "Leamon",
    "Watermelon",
    "Strawberry",
    "Orange",
    "Apple",
    "Mango",
    "Banana",
  ];
  // true
  console.log(fruitsArr.includes("Peach"));
  // true
  console.log(fruitsArr.includes("Banana"));
  // false
  console.log(fruitsArr.includes("sss"));
  // false
  console.log(fruitsArr.includes("Peach", 4));
  // true
  console.log(fruitsArr.includes("Banana", 1));
}
arrayIncludesStr();

排序

  • sort：对数组进行正向排序
1
2
3
4
5
6
7
8
9
10
const sortArray = () => {
  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  // ['Apple', 'Banana', 'Mango', 'Orange'];
  console.log("fruits=====>>>", fruits.sort());
  /* 生成10位整数 */
  const strArr = [...`${Math.ceil(Math.random() * 10000000000)}`];
  // ['3', '4', '5', '5', '5', '7', '7', '8', '8', '9'];
  console.log("strArr=====>>>", strArr.sort());
};
sortArray();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const sortArray = () => {
  const strArr = [2, 10, 8, 6, 1, 9, 0, 3, 4, 7];

  const arr = strArr.sort((a, b) => {
    return a - b;
  });
  // [0, 1, 2, 3, 4, 6, 7, 8, 9, 10];
  console.log("arr=====>>>", arr);

  const arr1 = strArr.sort((a, b) => {
    return b - a;
  });
  // [10, 9, 8, 7, 6, 4, 3, 2, 1, 0];
  console.log("arr1=====>>>", arr1);
};
sortArray();
  • reverse()：反转数组
1
2
3
4
5
6
7
8
9
const reverserray = () => {
  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  // ['Mango', 'Apple', 'Orange', 'Banana'];
  console.log("fruits=====>>>", fruits.reverse());
  const strArr = [2, 10, 8, 6, 1, 9, 0, 3, 4, 7];
  // [7, 4, 3, 0, 9, 1, 6, 8, 10, 2];
  console.log("strArr=====>>>", strArr.reverse());
};
reverserray();
  • Math.max(val)：参数 val 中最大的一个数字
1
2
3
const strArr = [2, 10, 8, 6, 1, 9, 0, 3, 4, 7];
// 10
console.log("max=====>>>", Math.max(...strArr));
  • Math.min(val)：参数 val 中最小的一个数字
1
2
3
const strArr = [2, 10, 8, 6, 1, 9, 0, 3, 4, 7];
// 0
console.log("max=====>>>", Math.min(...strArr));
技术分享 > web前端
#web前端 #javaScript
js之Array的使用
https://www.gongyibai.site/Array/
作者
爱吃糖醋排骨的苏小妍.
发布于
2024-11-27 09:39:40
更新于
2024-12-16 16:00:28
许可协议