数组常用函数有哪些

最新推荐文章于 2023-09-13 10:09:41 发布
原创最新推荐文章于 2023-09-13 10:09:41 发布 · 1.5k 阅读
2 ·
CC 4.0 BY-SA版权
前端基础总结专栏收录该内容
36 篇文章
订阅专栏
常用的数组函数示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>请按F12</h2>
</body>
</html>
<script>
    

  // 返回数组长度
  var str = [1, 5, 5, 63, 4, 5, 5];
  console.log(str.length);

  // push 向数组的末尾添加一个或更多元素，并返回新的长度
  const a = [1, 2, 3, 4];
  const aa = a.push(2);
  console.log("数组的新长度" + aa);
  console.log("新数组" + a);

  // unshift 向数组的开头添加一个或更多元素，并返回新的长度
  const b = [2, 5, 6, 7, 8];
  const bb = b.unshift(3);
  console.log("数组新长度" + bb);
  console.log("新数组" + b);

  // pop 删除数组的最后一个元素返回删除的元素
  const c = [1, 2, 5, 4, 8, 4, 6, 5];
  const cc = c.pop();
  console.log("删除元素是" + cc);
  console.log("新数组" + c);

  // shift 删除并返回数组的第一个元素
  const d = [1, 2, 3, 4, 5, 6];
  const dd = d.shift();
  console.log("删除的元素是" + dd);
  console.log("新数组" + d);

  // reverse  反转数组的元素顺序
  const e = [1, 2, 3, 4, 5];
  const ee = e.reverse();
  console.log("反转的数组为" + ee);
  console.log("原数组为" + e);

  // find 返回符合传入测试（函数）条件的数组元素
  const f = [1, 2, 3, 4, 5];
  get = num => {
    return num > 3;
    // 这里接判断符号
  };
  const ff = f.find(get); // 函数要放在前面
  console.log("比3大的第一个元素是" + ff);

  // findIndex 返回符合传入测试(函数)条件的数组元素索引(下标)
  const g = [1, 2, 3, 4, 5];
  set = num => {
    return num == 2;
    // 如果要查找2的位置，应该用 == 来进行判断，是否等于2，是的话返回坐标
  };
  const gg = g.findIndex(set);
  console.log("2的第一个在数组gg里的坐标为" + gg);

  // slice 选取数组的一部分，并返回一个新数组
  const h = [1, 2, 3, 4, 5, 6];
  console.log("截取坐标0到4的数组" + h.slice(0, 4));
  // 这里不包含坐标为4的数值
  const hh = ["a", "b", "c", "d"];
  console.log("读取左边1和3的两个字符串" + hh.slice(1, 3));
  // 注意是不包含后面那个坐标的

  //splice 从数组中添加或删除元素
  const i = [1, 2, 3, 4, 5, 6];
  const num = i.splice(1, 0, "7");
  console.log("i.splice(1, 0, '7'):在坐标为1的地方添加7:" + i);
  i.splice(3, 1);
  console.log("i.splice(3,1):在坐标为3的地方删除一个数:" + i);

  // join 把数组的所有元素放入一个字符串
  const j = [1, 2, 3, 4, 5];
  const stre = j.join();
  console.log(stre);

  // forEach 迭代数组
  const k = [1, 2, 3, 4, 5];
  fun = (item, index) => {
    console.log("index" + index + ":" + item);
  };
  k.forEach(fun);
  // 遍历数组

  // map 通过指定函数处理数组的每个元素，并返回处理后的数组
  const l = [1, 2, 3, 4, 5, 6];
  sum = num => {
    return (num += 1);
    console.log("每项+1:" + num);
  };
  l.map(sum);
  // 不难发现，不管什么函数都需要返回值才能在外部生效

  // filter 过滤 检测数值元素，并返回符合条件所有元素的数组
  const m = [1, 2, 3, 5, 4, 8];
  bi = num => {
    return num > 2;
  };
  const mm = m.filter(bi);
  console.log("比2大的所有元素的数组为:" + mm);

  // indexOf 搜索数组中的元素，并返回它所在的位置
  const n = [1, 2, 3, 5, 4, 6];
  console.log("2在数组里面的位置为:" + n.indexOf(2));

  // includes 判断一个数组是否包含一个指定的值
  const o = [1, 5, 3, 6, 4, 7, 5];
  console.log("判断数组是否包含o:" + o.includes(o)); //false

  // isArray 判断对象是否为数组
  const p = [1, 2, 4, 5, 6, 3, 4];
  console.log("判断是否是数组" + Array.isArray(p)); // true

  // concat 连接两个或更多的数组，并返回结果
  const sums = a.concat(b, c);
  console.log("a、b、c三个数组连接" + sums);

  // sort 对数组的元素进行排序
  console.log("对数组sums排序:" + sums.sort());
</script>