js之数组

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量40 收藏
点赞数
文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56436093/article/details/134110828
版权

1. 数组（重点）

思考：如何保存一个班级的所有学生的姓名？ 回答：一种方法利用前面学习过的知识，则每一条信息都需要一个变量去保存，缺点是这样做很麻烦，而且容易出错，又不合理；另一种方法就是利用数组。 概念：数组是存储一系列值的变量集合，可以存储多个值。

1.1 语法

数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。 数组元素：每个数组元素由“索引下标”和“值”构成。

索引下标：简称下标，以数字表示，默认从0开始依次递增，用于识别元素。 值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。1.2 创建数组

两种方式创建数组：直接使用“[]”的方式和实例化Array对象的方式

使用数组直接量是创建数组最简单、最直观的方法，在方括号中将数组元素用逗号隔开即可

例如：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">empty</span> <span style="color:#981a1a">=</span> []; <span style="color:#aa5500">// 没有元素的空数组</span>
​
<span style="color:#770088">var</span> <span style="color:#0000ff">num</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>, <span style="color:#116644">3</span>, <span style="color:#116644">5</span>, <span style="color:#116644">7</span>, <span style="color:#116644">9</span>]; <span style="color:#aa5500">// 有 5 个数值的数组</span>
​
<span style="color:#770088">var</span> <span style="color:#0000ff">mix</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'Bob'</span>, <span style="color:#116644">20</span>, <span style="color:#221199">true</span>]; <span style="color:#aa5500">// 3 种不同元素的数组</span>
​</span></span>

调用构造函数 Array() 是创建数组的另一种方法。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 元素值类型为字符串</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">area</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#aa1111">'Beijing'</span>, <span style="color:#aa1111">'Shanghai'</span>, <span style="color:#aa1111">'Shenzhen'</span>);
<span style="color:#aa5500">// 元素值类型为数值型</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">score</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#116644">56</span>, <span style="color:#116644">68</span>, <span style="color:#116644">98</span>, <span style="color:#116644">44</span>);
<span style="color:#aa5500">// 元素值类型为混合型</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">mix</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#116644">123</span>, <span style="color:#aa1111">'abc'</span>, <span style="color:#221199">null</span>, <span style="color:#221199">true</span>, <span style="color:#221199">undefined</span>);
<span style="color:#aa5500">// 空数组</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">arr1</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>();   <span style="color:#000000">或</span>    <span style="color:#770088">var</span> <span style="color:#0000ff">arr2</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>; <span style="color:#aa5500">//等同于数组直接量 [ ]</span>
<span style="color:#aa5500">// 指定长度的数组</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">len</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#116644">5</span>); <span style="color:#aa5500">//这种方式用来创建指定长度的数组。当预先知道所需元素个数时，这种方式可以用来预先分配一个数组空间。注意，数组中没有存储值，不能认为它是包含 5个值为 undefined 元素的数组</span>
<span style="color:#aa5500">//含有3个空储存位置</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">emptyPlace1</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'abc'</span>, , , ,<span style="color:#aa1111">'123'</span>]; 
<span style="color:#aa5500">//会报语法错误</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">emptyPlace2</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#116644">56</span>, <span style="color:#116644">68</span>, , , ,<span style="color:#116644">98</span>);</span></span>

注意：

1.在创建数组时，最后一个元素后的逗号可以省略，也可以存在。 2.直接法“[]”与Array()对象在创建数组时的区别在于，前者可以创建含有空存储位置的数组，而后者不可以。

1.3 访问和修改数组元素

数组创建完成后，我们可以 [ ] 操作符访问数组中的元素，数组的引用位于方括号左边。 方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素，又可以修改数组中的元素。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">letters</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'a'</span>, <span style="color:#aa1111">'b'</span>, <span style="color:#aa1111">'c'</span>, <span style="color:#aa1111">'d'</span>];
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">letters</span>[<span style="color:#116644">0</span>]); <span style="color:#aa5500">// 访问索引为 0 的元素 'a'</span>
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">letters</span>[<span style="color:#116644">4</span> <span style="color:#981a1a">-</span> <span style="color:#116644">2</span>]); <span style="color:#aa5500">// 访问索引为 2 的元素 'c'</span>
​
<span style="color:#000000">letters</span>[<span style="color:#116644">1</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>; <span style="color:#aa5500">// 修改索引为 1 的元素 ['a', 1, 'c', 'd']</span>
​
<span style="color:#000000">letters</span>[<span style="color:#116644">1</span> <span style="color:#981a1a">+</span> <span style="color:#116644">2</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">3</span>; <span style="color:#aa5500">// 修改索引为 3 的元素 ['a', 1, 'c', 3]</span></span></span>

  • 根据下标添加和修改

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'Asa'</span>,<span style="color:#aa1111">'Taylor'</span>];
<span style="color:#000000">arr</span>[<span style="color:#116644">2</span>] <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Tom'</span>;
<span style="color:#000000">arr</span>[<span style="color:#116644">3</span>] <span style="color:#981a1a">=</span>  <span style="color:#aa1111">'Jack'</span>;
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>); </span></span>

  • delete关键字只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#770088">var</span> <span style="color:#0000ff">stu</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'Tom'</span>, <span style="color:#aa1111">'Jimmy'</span>, <span style="color:#aa1111">'Lucy'</span>];
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">stu</span>); <span style="color:#aa5500">// 输出结果：(3) ["Tom", "Jimmy", "Lucy"]</span>
  <span style="color:#770088">delete</span> <span style="color:#000000">stu</span>[<span style="color:#116644">1</span>];    <span style="color:#aa5500">// 删除数组中第2个元素</span>
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">stu</span>); <span style="color:#aa5500">// 输出结果：(3) ["Tom", empty, "Lucy"]</span></span></span>

1.4 数组长度

每个数组都有一个 length 属性，length 属性值代表数组中元素的个数。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">empty</span> <span style="color:#981a1a">=</span> []; <span style="color:#aa5500">// 数组没有元素</span>
​
<span style="color:#770088">var</span> <span style="color:#0000ff">letters</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'a'</span>, <span style="color:#aa1111">'b'</span>, <span style="color:#aa1111">'c'</span>, <span style="color:#aa1111">'d'</span>]; <span style="color:#aa5500">// 数组有 5 个元素</span>
​
<span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'a'</span>, , , , <span style="color:#aa1111">'b'</span>, <span style="color:#aa1111">'c'</span>];
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">empty</span>.<span style="color:#000000">length</span>); <span style="color:#aa5500">// 0</span>
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">letters</span>.<span style="color:#000000">length</span>); <span style="color:#aa5500">// 5</span>
​
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>.<span style="color:#000000">length</span>); <span style="color:#aa5500">// 6</span>
​</span></span>

  • 修改数组长度

  • 大于数组长度

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">arr1</span> <span style="color:#981a1a">=</span> [];
<span style="color:#000000">arr1</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">=</span> <span style="color:#116644">5</span>;
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr1</span>);      <span style="color:#aa5500">// 输出结果：(5) [empty × 5]</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">arr2</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>, <span style="color:#116644">2</span>, <span style="color:#116644">3</span>];
<span style="color:#000000">arr2</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">=</span> <span style="color:#116644">4</span>; 
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr2</span>);      <span style="color:#aa5500">// 输出结果：(4) [1, 2, 3, empty]</span>
​</span></span>

  • 小于数组长度

    <span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">arr4</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'hehe'</span>, <span style="color:#aa1111">'xixi'</span>, <span style="color:#aa1111">'gugu'</span>, <span style="color:#aa1111">'jiujiu'</span>];
<span style="color:#000000">arr4</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">=</span> <span style="color:#116644">3</span>; 
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr4</span>);      <span style="color:#aa5500">// 输出结果：(3) ["hehe", "xixi", "gugu"]</span></span>

1.5 数组遍历数组

在创建完数组后，如何遍历数组中的元素，对其进行操作呢？ 一维数组可以利用for、forEach、for…of进行遍历,目前先介绍for,之后我们再学习其他.

  • 使用 for 循环遍历数组

    <span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">heroes</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'刘邦'</span>, <span style="color:#aa1111">'张良'</span>, <span style="color:#aa1111">'韩信'</span>, <span style="color:#aa1111">'萧何'</span>,<span style="color:#aa1111">'刘备'</span>];
​
<span style="color:#770088">var</span> <span style="color:#0000ff">len</span> <span style="color:#981a1a">=</span> <span style="color:#000000">heroes</span>.<span style="color:#000000">length</span>;
​
<span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">len</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {
​
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">heroes</span>[<span style="color:#0055aa">i</span>])
​
}</span>

1.6 二维数组

  • 数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。

  • 解决开始提出的问题：保存一个班级学生信息，每个数组元素都代表一个学生，而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息，这样通过一个变量即可有规律的保存一个班级的所有学生信息，方便开发时进行处理。 二维数组：是指数组元素的“值”是一个一维数组，如下图。

  • 创建

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 使用“[]”创建数组</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">num</span> <span style="color:#981a1a">=</span> [[<span style="color:#116644">1</span>, <span style="color:#116644">3</span>], [<span style="color:#116644">2</span>, <span style="color:#116644">4</span>]];
<span style="color:#770088">var</span> <span style="color:#0000ff">empty</span> <span style="color:#981a1a">=</span> [[], []];                   <span style="color:#aa5500">// 空二维数组</span>
<span style="color:#aa5500">// 使用Array对象创建数组</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">info</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#aa1111">'Tom'</span>, <span style="color:#116644">13</span>, <span style="color:#116644">155</span>), <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#aa1111">'Lucy'</span>, <span style="color:#116644">11</span>, <span style="color:#116644">152</span>));
<span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Array</span>(<span style="color:#770088">new</span> <span style="color:#000000">Array</span>, <span style="color:#770088">new</span> <span style="color:#000000">Array</span>);<span style="color:#aa5500">// 空二维数组</span></span></span>

  • 二维数组遍历

    二维数组只需在遍历数组后，再次遍历数组的元素即可。

    <span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [[<span style="color:#116644">1</span>, <span style="color:#116644">2</span>, <span style="color:#116644">3</span>], [<span style="color:#116644">4</span>, <span style="color:#116644">5</span>, <span style="color:#116644">6</span>], [<span style="color:#116644">7</span>, <span style="color:#116644">8</span>, <span style="color:#116644">9</span>, <span style="color:#116644">0</span>]];
<span style="color:#aa5500">// 遍历外层</span>
<span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {
    <span style="color:#aa5500">// console.log(arr[i]);</span>
    <span style="color:#aa5500">// 遍历里层</span>
    <span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">j</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">j</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">length</span>; <span style="color:#0055aa">j</span><span style="color:#981a1a">++</span>) {
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>][<span style="color:#0055aa">j</span>]);
    }
}</span>

1.7 数组排序(重点)

1.7.1 最大值和最小值

<span style="background-color:#f8f8f8"><span style="color:#333333">​
    <span style="color:#770088">if</span> (<span style="color:#000000">arr</span>[<span style="color:#000000">i</span>] <span style="color:#981a1a">></span> <span style="color:#000000">max</span>) {    <span style="color:#aa5500">// 当前元素比最大值max大，则修改最大值</span>
      <span style="color:#000000">max</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>[<span style="color:#000000">i</span>];
    }
    <span style="color:#770088">if</span> (<span style="color:#000000">arr</span>[<span style="color:#000000">i</span>] <span style="color:#981a1a"><</span> <span style="color:#000000">min</span>) {    <span style="color:#aa5500">// 当前元素比最小值min小，则修改最小值</span>
      <span style="color:#000000">min</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>[<span style="color:#000000">i</span>];
    }</span></span>

1.7.2 冒泡排序

实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，将值大的元素或最小的元素交换至右端。

1. 算法步骤

比较相邻的元素。如果第一个比第二个大，就交换他们两个。

对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。

针对所有的元素重复以上的步骤，除了最后一个。

持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

2. 动图演示

img

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">10</span>, <span style="color:#116644">2</span>, <span style="color:#116644">5</span>, <span style="color:#116644">27</span>, <span style="color:#116644">98</span>, <span style="color:#116644">31</span>];
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'待排序数组：'</span> <span style="color:#981a1a">+</span> <span style="color:#000000">arr</span>);
  <span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span><span style="color:#981a1a">-</span><span style="color:#116644">1</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {          <span style="color:#aa5500">// 控制需要比较的轮数</span>
    <span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">j</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">j</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">-</span> <span style="color:#0055aa">i</span><span style="color:#981a1a">-</span><span style="color:#116644">1</span>; <span style="color:#0055aa">j</span><span style="color:#981a1a">++</span>) {    <span style="color:#aa5500">// 控制参与比较的元素</span>
      <span style="color:#770088">if</span> (<span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span>] <span style="color:#981a1a">></span> <span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>]) {                  <span style="color:#aa5500">// 比较相邻的两个元素</span>
        [<span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span>], <span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>]] <span style="color:#981a1a">=</span> [<span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>], <span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span>]];<span style="color:#aa5500">//解构交换</span>
      }
    }
  }
  <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'排序后的数组：'</span> <span style="color:#981a1a">+</span> <span style="color:#000000">arr</span>);</span></span>
<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#aa5500">//两个变量值的交换---》面试题</span>
​
  <span style="color:#770088">var</span> <span style="color:#0000ff">temp</span><span style="color:#981a1a">=</span><span style="color:#221199">null</span>; <span style="color:#aa5500">//定义一个第三方的变量</span>
  <span style="color:#000000">temp</span><span style="color:#981a1a">=</span><span style="color:#000000">num1</span>  <span style="color:#aa5500">//temp=10</span>
  <span style="color:#000000">num1</span><span style="color:#981a1a">=</span><span style="color:#000000">num2</span>  <span style="color:#aa5500">//num1=100</span>
  <span style="color:#000000">num2</span><span style="color:#981a1a">=</span><span style="color:#000000">temp</span>  <span style="color:#aa5500">//num2=10</span>
  </span></span>

1.7.3 选择排序

1. 算法步骤

首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。

再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。

重复第二步，直到所有元素均排序完毕。

2. 动图演示

img

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//选择排序</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">arr</span><span style="color:#981a1a">=</span> [<span style="color:#116644">10</span>, <span style="color:#116644">2</span>, <span style="color:#116644">5</span>, <span style="color:#116644">27</span>, <span style="color:#116644">98</span>, <span style="color:#116644">31</span>];
    <span style="color:#770088">var</span> <span style="color:#0000ff">len</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span>;
    <span style="color:#770088">var</span> <span style="color:#0000ff">minIndex</span>, <span style="color:#0000ff">temp</span>;
    <span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">len</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {
        <span style="color:#000000">minIndex</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">i</span>;
        <span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">j</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">i</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>; <span style="color:#0055aa">j</span> <span style="color:#981a1a"><</span> <span style="color:#000000">len</span>; <span style="color:#0055aa">j</span><span style="color:#981a1a">++</span>) {
            <span style="color:#770088">if</span> (<span style="color:#000000">arr</span>[<span style="color:#0055aa">j</span>] <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>[<span style="color:#000000">minIndex</span>]) {     <span style="color:#aa5500">// 寻找最小的数</span>
                <span style="color:#000000">minIndex</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">j</span>;                 <span style="color:#aa5500">// 将最小数的索引保存</span>
            }
        }
        <span style="color:#000000">temp</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>];
        <span style="color:#000000">arr</span>[<span style="color:#0055aa">i</span>] <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>[<span style="color:#000000">minIndex</span>];
        <span style="color:#000000">arr</span>[<span style="color:#000000">minIndex</span>] <span style="color:#981a1a">=</span> <span style="color:#000000">temp</span>;
    }
     <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'排序后的数组:'</span><span style="color:#981a1a">+</span><span style="color:#000000">arr</span>);
  </span></span>

2.数组操作方法(重点)

学习数组的方法要关注以下3个重点:

  • 方法参数

  • 返回值

  • 改变不改变原数组

2.1 栈方法和队列方法

2.1.1 push()

push()
功能描述将一个或多个元素添加到数组的末尾。
语法arr.push(element1, ..., elementN)
参数被添加到数组末尾的元素。
返回值返回数组的新长度。
改不改变原数组改变原数组

2.1.2 pop()

pop()
功能描述从数组的末尾删除一个元素。
语法arr.pop()
参数无
返回值返回数组中删除的元素,若是空数组则返回undefined。
改不改变原数组改变原数组

2.1.3 unshift()

unshift()
功能描述将一个或多个元素添加到数组的开头。
语法arr.unshift(element1, ..., elementN)
参数要添加到数组开头的元素或多个元素。
返回值返回数组的新长度。
改不改变原数组改变原数组

2.1.4 shift()

shift()
功能描述从数组的开头删除一个元素。
语法arr.shift()
参数无
返回值返回数组中删除的元素,若是空数组则返回undefined。
改不改变原数组改变原数组

  • 栈结构特点:先进后出 push(),pop();

  • 队列结构特点:先进先出 unshift(),shift();

2.2 检索方法

2.2.1 includes()

includes()
功能描述用于确定数组中是否含有某个元素。
语法array.includes(item, [start])
参数item是查找的元素,start可选，规定在数组中开始检索的位置（包含本身的位置）。
返回值true或false。
改不改变原数组不改变原数组
不同参数情况分析:

  • 如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。

  • 如果 array.length + start为负值，则整个数组都会被搜索。

  • 如果start大于等于数组长度 ，则返回 false 。该数组不会被搜索。

2.2.2 indexOf()

indexOf()
功能描述检测当前值在数组中第一次出现的位置索引。
语法indexOf(item,[start])
参数item是查找的元素,start可选，规定在数组中开始检索的位置（包含本身的位置）。
返回值返回值是在数组中可以找到给定值的第一个索引，如果不存在，则返回-1。
改不改变原数组不改变原数组

不同参数情况分析:

  • 如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。

  • 如果 array.length + start为负值，则整个数组都会被搜索。

  • 如果start大于等于数组长度 ，则返回-1 。该数组不会被搜索。

2.2.3 lastIndexOf()

lastIndexOf()
功能描述检测当前值在数组中最后一次出现的位置索引，从数组的后面向前查找，从 start处开始。
语法lastIndexOf(item,[start])
参数item是查找的元素,start可选,规定在数组中开始检索的位置（包含本身的位置）。
返回值返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。
改不改变原数组不改变原数组

不同参数情况分析:

  • 如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。

  • 如果 array.length + start为负值，则该数组不会被搜索,则返回 -1。

  • 如果start大于等于数组长度 ，则整个数组都会被搜索。

2.3 数组转字符串

2.3.1 join()

join()
功能描述将数组的所有元素连接到一个字符串中。
语法arr.join([separator])
参数指定一个字符串来分隔数组的每个元素。 如果缺省该值，数组元素用逗号（,）分隔。 如果separator是空字符串 ("")，则所有元素之间都没有任何字符。
返回值一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串。
改不改变原数组不改变原数组

2.3.2 toString()

toString()
功能描述返回包含所有数组值的字符串，以逗号分隔。
语法arr.toString()
参数无
返回值一个表示指定的数组及其元素的字符串。
改不改变原数组不改变原数组

注意:

  1. join()和toString()方法的相同点:

可将多维数组转为字符串，默认情况下使用逗号连接。 当数组元素为undefined、null或空数组时，数组会被转换为空字符串

  1. join()和toString()方法的不同点:

join()方法可以指定连接数组元素的符号。

2.4 其他方法

2.4.1 Array.isArray()

Array.isArray()
功能描述用于确定传递的值是否是一个数组。
语法Array.isArray(obj)
参数需要检测的值
返回值如果值是 Array，则为 true；否则为 false。
改不改变原数组不改变原数组

2.4.2 splice()(重点)

splice()
功能描述通过删除或者替换(修改)现有元素或者原地添加新的元素来修改数组。
语法array.splice(index[, deleteCount[, item1[, item2[, ...]]]])
参数index:必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 deleteCount:表示要移除的数组元素的个数。 item1, item2, ...:要添加进数组的元素。
返回值以数组形式返回被修改的内容。
改不改变原数组改变原数组

不同参数情况分析:

对数组进行增删改

  • 增加：arr.splice(index, 0, item)

    • 从索引index开始， deleteCount(可选):0

    • 把item或者更多的内容插入到索引index的前面

    • 返回值:返回空数组

  • 修改： arr.splice(index, x, item)

    • 从索引index开始,删除x个元素， item替换删除的部分

    • 把原有内容删除掉， 然后用新内容替换掉

    • 返回值:修改掉原有内容的数组

  • 删除：arr.splice(index,x)

    • 从索引index开始,删除x个元素

    • （如果第二个参数省略， 则从index删除到末尾）

    • 返回值:删除掉原有内容的数组

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//增加</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">ary1</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">33</span>,<span style="color:#116644">44</span>,<span style="color:#116644">55</span>,<span style="color:#116644">66</span>,<span style="color:#116644">77</span>,<span style="color:#116644">88</span>];
<span style="color:#000000">ary1</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">2</span>,<span style="color:#116644">0</span>,<span style="color:#aa1111">'a'</span>,<span style="color:#aa1111">'b'</span>)
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary1</span>);<span style="color:#aa5500">// [33, 44, "a", "b", 55, 66, 77, 88]</span>
​
<span style="color:#aa5500">//修改</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">ary2</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">33</span>,<span style="color:#116644">44</span>,<span style="color:#116644">55</span>,<span style="color:#116644">66</span>,<span style="color:#116644">77</span>,<span style="color:#116644">88</span>];
<span style="color:#000000">ary2</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#aa1111">'x'</span>,<span style="color:#aa1111">'y'</span>)
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary2</span>);<span style="color:#aa5500">// [33, "x", "y", 66, 77, 88]</span>
​
<span style="color:#aa5500">//删除</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">ary3</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">33</span>,<span style="color:#116644">44</span>,<span style="color:#116644">55</span>,<span style="color:#116644">66</span>,<span style="color:#116644">77</span>,<span style="color:#116644">88</span>];
<span style="color:#aa5500">//console.log(ary3.splice(3,2))//[66, 77]</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary3</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">3</span>));<span style="color:#aa5500">//[66, 77, 88]</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary3</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">0</span>));<span style="color:#aa5500">//[33,44,55,66,77,88]</span></span></span>

2.4.3 slice()

slice()
功能描述复制原数组的部分内容。
语法array.slice(start, end)
参数start:可选。规定从何处开始选取。 如果是负数，那么它规定从数组尾部开始算起的位置。 也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。如果省略 start，则 slice 从索引 0 开始。 end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。(不包含end)
返回值返回一个含有被提取元素的新数组。
改不改变原数组不改变原数组

不同参数情况分析:

array.slice(start, end)，从索引start开始查找到end处（不包含end）

array.slice(start) 第二个参数省略，则一直查找到末尾

array.slice(0)原样输出内容，可以实现数组克隆

array.slice(-start,-end) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">ary1</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span>,<span style="color:#116644">7</span>,<span style="color:#116644">8</span>,<span style="color:#116644">9</span>];
 <span style="color:#aa5500">//console.log(ary1.slice(2,8));//从索引2开始查找到索引为8的内容，结果为[3, 4, 5, 6, 7, 8]</span>
 <span style="color:#aa5500">//console.log(ary1.slice(0));</span>
 <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary1</span>.<span style="color:#000000">slice</span>(<span style="color:#981a1a">-</span><span style="color:#116644">2</span>,<span style="color:#981a1a">-</span><span style="color:#116644">1</span>));<span style="color:#aa5500">//[8]</span></span></span>

2.4.5 reverse()

reverse()
功能描述数组中元素的位置颠倒，并返回该数组。
语法arr.reverse()
参数无
返回值颠倒后的数组。
改不改变原数组改变原数组
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">ary1</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">6</span>,<span style="color:#116644">8</span>,<span style="color:#116644">10</span>,<span style="color:#116644">12</span>]; 
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary1</span>.<span style="color:#000000">reverse</span>());<span style="color:#aa5500">//[12, 10, 8, 6]</span></span></span>

2.4.6 concat()

concat()
功能描述用于连接两个或多个数组。
语法concat(value1[, value2[, ...[, valueN]]])
参数value可选,参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值返回连接后的新数组。
改不改变原数组不改变原数组
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">ary1</span> <span style="color:#981a1a">=</span> [<span style="color:#aa1111">'你'</span>];
<span style="color:#770088">var</span> <span style="color:#0000ff">ary2</span> <span style="color:#981a1a">=</span> <span style="color:#000000">ary1</span>.<span style="color:#000000">concat</span>(<span style="color:#aa1111">'好'</span>);
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">ary2</span>);<span style="color:#aa5500">//["你", "好"]</span></span></span>

2.5 清空数组（内容）

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 方式1 推荐 </span>
<span style="color:#000000">arr</span> <span style="color:#981a1a">=</span> [];
<span style="color:#aa5500">// 方式2 </span>
<span style="color:#000000">arr</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;
<span style="color:#aa5500">// 方式3</span>
<span style="color:#000000">arr</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">0</span>, <span style="color:#000000">arr</span>.<span style="color:#000000">length</span>);
<span style="color:#000000">arr</span>.<span style="color:#000000">splice</span>(<span style="color:#116644">0</span>);</span></span>

2.6 数组方法总结

改变原数组方法
arr.push()将一个或多个元素添加到数组的末尾。
arr.pop()从数组的末尾删除一个元素。
arr.unshift()将一个或多个元素添加到数组的开头。
arr.shift()从数组的开头删除一个元素。
arr.splice()通过删除或者替换现有元素或者原地添加新的元素来修改数组。
arr.reverse()数组中元素的位置颠倒，并返回该数组。
不改变原数组方法
arr.includes()用于确定数组中是否含有某个元素。
arr.indexOf()检测当前值在数组中第一次出现的位置索引。
arr.lastIndexOf()检测当前值在数组中最后一次出现的位置索引，从数组的后面向前查找，从 start处开始。
arr.join()将数组的所有元素连接到一个字符串中。
arr.toString()返回包含所有数组值的字符串，以逗号分隔。
arr.slice()复制原数组的部分内容。
arr.concat()用于连接两个或多个数组。

Waldeinsamkeit46
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之数组扁平化详解
10-16
主要介绍了JavaScript之数组扁平化详解的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
JavaScript之数组（Array）详解
10-24
主要介绍了JavaScript之数组（Array）详解,本文详细讲解了JavaScript数组的创建、检测数组、转化方法、栈方法、队列方法、重排序方法、操作方法、位置方法等内容,需要的朋友可以参考下
js数组常用方法
夏天的博客
03-27 8万+
js数组常用方法还挺多的，如果面试官问你这道题可不要只回答几个哟，那是会扣分的！下面是一篇详细的js数组教程文章
JavaScript之数组的定义和访问数组元素
qq_54854574的博客
09-30 2847
1、数组的定义 a、数组的概念。 数组，就是我们可以用一个变量名来存储一系列数值。我们将数值或者字符串赋值给变量时，一个变量里只能存储一个数值或者字符串。而数组这个数据类型，就是可以使用同一个变量，存储一系列值。当我们使用数组时，需要用中括号“[]”将元素包围起来。 b、数组的赋值。 数组定义的两种方式： 方式一： ...
JavaScript之数组方法map详解（一）
News777的博客
07-01 1万+
与其它数组迭代方式一样，map的回调函数也有三个参数(可以单独使用，隐藏和)： 注：返回 val 的绝对值 注：返回 val 的平方根 2.2 String 与 Number 类型互转 String 转为 Number Number 转为 String 2.3 取数组对象中某一属性组成新数组 不仅仅于此，你也可以对这一属性或是新数组进行满足需求的一些操作，如： 年龄数组降序 名称数组转成字符串 2.4 提取数组对象的属性值组成新的数组对象 2.5 提取值，改变键值，组成新的数组对
JavaScript 多维数组
zsx0728的博客
04-21 7316
文章目录创建多维数组访问数组的元素将元素添加到多维数组将元素添加到外部数组将元素添加到内部数组从多维数组中删除元素从外部数组中删除元素从内部数组中删除元素迭代多维数组参考文档     在本教程中，您将借助示例了解 JavaScript 多维数组。     多维数组是包含另一个数组的数组。例如， // multidimensional array const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]]; 创建多维数组     这是在 JavaScript 中创建多维数组
JavaScript 删除数组中指定元素(5种方法)
热门推荐
欢迎光临~
05-13 12万+
以上是 JavaScript 删除数组中指定元素的多种方法。我们可以根据需求选择适合自己的方法来删除数组中的元素。希望这篇文章能够帮助你更好地掌握 JavaScript 中的数组操作。
JavaScript——数组——数组长度
realzhangsan的博客
09-15 2978
JavaScript——数组——数组长度 JavaScript中的数组长度是可变的，可用赋值运算符改变数组大小，如果改变之后的数组的长度比原数组大，则新数组会在末尾补充相应数量的空位，空位上的数组元素的值是undefined；如果改变之后的数组的长度比原数组小，则新数组会被从后往前截断相应的长度，示例如下，(<< 表示打印结果) let arr = [1,2,3,4,5,6] console.log(arr) << Array(6) [ 1, 2, 3, 4, 5, 6 ] cons
JavaScript——数组
遇见的博客
06-25 1066
JavaScript 中声明一个数组有两种方法：使用数组字面量和使用 Array() 构造函数。
【JavaScript—数组】详解js数组一篇文章吃透js-数组
zhaochen1127的博客
08-23 1883
这篇文章将教会你js中的数组，包括了数组的概念，如何进行筛选数组元素，如何添加新数组 以及用两种不同的方式进行数组的筛选，一文即可搞懂js-数组
JS 删除数组元素（ 5种方法 ）
大剑师兰特的GIS世界
04-23 1944
- `splice()` 适合删除任意位置的元素，且可以一次删除多个。 - `pop()` 和 `shift()` 分别用于删除末尾和头部的单个元素。 - 使用 `delete` 操作符会导致数组中出现 `undefined` 值，而非真正缩小数组大小。 - 调整 `length` 属性可快速截断数组，但请确保了解其对数组影响的特殊性。
js 打印数组
2203_75410429的博客
05-02 421
let arr = ['刘','刘','刘','刘']
js多维数组转一维数组
06-16
js基础代码实现
javascript判断数组内是否重复的方法
10-24
主要介绍了javascript判断数组内是否重复的方法,涉及javascript针对数组的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 192
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 639
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 229
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
用vue实现json模版编辑器
qq_44428688的博客
05-14 529
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
js定型数组
05-25
这些数组提供了更加高效的内存操作和更好的类型检查，比普通的JavaScript数组更适合处理二进制数据。 JS定型数组由以下几种类型： 1. Int8Array、Uint8Array、Uint8ClampedArray 2. Int16Array、Uint16Array 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值