Js字符串和数组方法及使用------Sestid

古城微笑少年丶 2024-04-18 13:32 23阅读 0赞

**目录**

1、字符串长度 length

2、查找字符串中的字符串 indexOf()、lastindexOf()

3、检索字符串中的字符串 search()

4、提取部分字符串

（1）、slice() 方法

（2）、substring() 方法

（3）、substr() 方法

5、替换字符串内容 replace()

6、转换为大写和小写 toUpperCase()、toLowerCase()

7、concat() 方法

8、String.trim()

9、提取字符串字符 charAt(position)、charCodeAt(position)

（1）、charAt() 方法

（2）、charCodeAt() 方法

属性访问（Property Access）

10、把字符串转换为数组 split()

二、JavaScript 数值方法

1、toString() 方法

2、toExponential() 方法

3、toFixed() 方法

4、toPrecision() 方法

5、valueOf() 方法

6、把变量转换为数值 Number()、parseInt()、parseFloat()

全局方法

Number() 方法

用于日期的 Number() 方法

parseInt() 方法

parseFloat() 方法

三、JavaScript 数组方法

1、把数组转换为字符串 toString()

2、Popping 和 Pushing

Popping

Pushing

3、位移元素shift()、unshift()

4、更改元素

5、删除元素 delete

6、拼接数组splice()

7、使用 splice() 来删除元素

8、合并（连接）数组 concat()

9、裁剪数组 slice()

10、自动 toString()

四、JavaScript 数组排序

1、数组排序sort()

2、反转数组 reverse()

3、数字排序

4、比值函数

5、以随机顺序排序数组

6、查找最高（或最低）的数组值

7、对数组使用 Math.max()

8、对数组使用 Math.min()

9、我的 Min / Max JavaScript 方法

10、排序对象数组

实例

五、JavaScript 数组迭代方法

1、Array.forEach()

2、Array.map()

3、Array.filter()

4、Array.reduce()

5、Array.reduceRight()

6、Array.every()

7、Array.some()

8、Array.indexOf()

9、Array.lastIndexOf()

10、Array.find()

11、Array.findIndex()

--------------------

## 1、字符串长度 length ##

length 属性返回字符串的长度：

**实例：**

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var sln = txt.length;
    
    //length 属性返回字符串的长度：
    26

## 2、查找字符串中的字符串 indexOf()、lastindexOf() ##

indexOf() 方法返回字符串中指定文本*首次*出现的索引（位置）：

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.indexOf("China");
    
    //indexOf() 方法返回指定文本首次出现的位置：
    17

JavaScript 从零计算位置。

0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...

lastIndexOf() 方法返回指定文本在字符串中*最后*一次出现的索引：

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.lastIndexOf("China");
    
    //lastIndexOf() 返回指定文本最后出现的位置：
    51

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.indexOf("USA");
    
    //如果未找到文本，则 indexOf() 和 lastIndexOf() 都返回 -1：
    -1

两种方法都接受作为检索起始位置的第二个参数。

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.indexOf("China", 18);
    
    //indexOf() 方法接受第二个参数作为搜索的起始位置：
    51

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.lastIndexOf("China", 50);
    
    //lastIndexOf() 方法接受第二个参数作为搜索的起始位置：
    
    请记住，lastIndexOf（）方法向后搜索，因此位置 50 表示在第 50 位开始搜索，并搜索到开头。
    位置 50 指的是从开头算起的位置 50。
    
    17

## 3、检索字符串中的字符串 search() ##

search() 方法搜索特定值的字符串，并返回匹配的位置：

**实例：**

var str = "The full name of China is the People's Republic of China.";
    var pos = str.search("locate");
    
    //search() 方法返回字符串中指定文本第一次出现的位置：
    
    17

**您注意到了吗？**

两种方法，indexOf() 与 search()，是*相等的*。

这两种方法是不相等的。区别在于：

*  search() 方法无法设置第二个开始位置参数。
 *  indexOf() 方法无法设置更强大的搜索值（正则表达式）。

## 4、提取部分字符串 ##

有三种提取部分字符串的方法：

*  slice(*start*, *end*)
 *  substring(*start*, *end*)
 *  substr(*start*, *length*)

### （1）、slice() 方法 ###

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

**实例**

var str = "Apple, Banana, Mango";
    var res = str.slice(-13,-7);
    
    //slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana

如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

**实例**

var res = str.slice(7);
    
    //slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana, Mango

或者从结尾计数：

**实例**

var res = str.slice(-13);
    
    //slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana, Mango

### （2）、substring() 方法 ###

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

**实例**

var str = "Apple, Banana, Mango";
    var res = str.substring(7,13);
    
    //substring() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana

如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

### （3）、substr() 方法 ###

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的*长度*。

**实例**

var str = "Apple, Banana, Mango";
    var res = str.substr(7,6);
    
    //substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

**实例**

var str = "Apple, Banana, Mango";
    var res = str.substr(7);
    
    //substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Banana, Mango

如果首个参数为负，则从字符串的结尾计算位置。

**实例**

var str = "Apple, Banana, Mango";
    var res = str.substr(-5);
    
    //substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。
    
    Mango

第二个参数不能为负，因为它定义的是长度。

## 5、替换字符串内容 replace() ##

replace() 方法用另一个值替换在字符串中指定的值：

**实例**

str = "Please visit Microsoft!";
    var n = str.replace("Microsoft", "W3School");
    
    //请把下面的段落中的“Microsoft”替换为“W3School”：
    
    请访问 Microsoft！---> 请访问 W3School！

replace() 方法不会改变调用它的字符串。它返回的是新字符串。

默认地，replace() *只替换首个匹配*：

**实例**

str = "Please visit Microsoft and Microsoft!";
    var n = str.replace("Microsoft", "W3School");
    
    //请把下面的段落中的“Microsoft”替换为“W3School”：
    
    请访问 Microsoft 和 Microsoft->请访问 W3School 和 Microsoft->请访问 W3School 和 W3School！

默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT：

**实例**

str = "Please visit Microsoft!";
    var n = str.replace("MICROSOFT", "W3School");
    
    //请把下面的段落中的“Microsoft”替换为“W3School”：
    
    请访问 Microsoft！
    
    此例无效，因为 MICROSOFT 为大写。

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

**实例**

str = "Please visit Microsoft!";
    var n = str.replace(/MICROSOFT/i, "W3School");
    
    //请把下面的段落中的“Microsoft”替换为“W3School”：
    
    请访问 Microsoft！---> 请访问 W3School！

请注意正则表达式不带引号。

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

**实例**

str = "Please visit Microsoft and Microsoft!";
    var n = str.replace(/Microsoft/g, "W3School");
    
    //请把下面的段落中的“Microsoft”替换为“W3School”：
    
    请访问 Microsoft 和 Microsoft！--->请访问 W3School 和 W3School！

## 6、转换为大写和小写 toUpperCase()、toLowerCase() ##

通过 toUpperCase() 把字符串转换为大写：

**实例**

var text1 = "Hello World!";       // 字符串
    var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1
    
    //把字符串转换为大写：
    
    Hello World! ---> HELLO WORLD!

通过 toLowerCase() 把字符串转换为小写：

**实例**

var text1 = "Hello World!";       // 字符串
    var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1
    
    //把字符串转换为小写：
    
    Hello World!  ---> hello world!

## 7、concat() 方法 ##

concat() 连接两个或多个字符串：

**实例**

var text1 = "Hello";
    var text2 = "World";
    text3 = text1.concat(" ",text2);
    
    //concat() 方法连接两个或多个字符串：
    
    Hello World!

concat() 方法可用于代替加运算符。下面两行是等效的：

**实例**

var text = "Hello" + " " + "World!";
    var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

## 8、String.trim() ##

trim() 方法删除字符串两端的空白符：

**实例**

var str = "       Hello World!        ";
    alert(str.trim());
    
    //删除空白字符的字符串：
    
     Hello World!

## 9、提取字符串字符 charAt(*position*)、charCodeAt(*position*) ##

这是两个提取字符串字符的*安全*方法：

*  charAt(*position*)
 *  charCodeAt(*position*)

### （1）、charAt() 方法 ###

charAt() 方法返回字符串中指定下标（位置）的字符串：

**实例**

var str = "HELLO WORLD";
    str.charAt(0);            // 返回 H
    
    //charAt() 方法返回字符串中指定位置的字符串：
    
    H

## （2）、charCodeAt() 方法 ##

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

**实例**

var str = "HELLO WORLD";
    
    str.charCodeAt(0);         // 返回 72
    
    //charCodeAt() 方法返回字符串中指定位置的字符 unicode 编码：
    
    72

### 属性访问（Property Access） ###

ECMAScript 5 (2009) 允许对字符串的属性访问 \[ \]：

**实例**

var str = "HELLO WORLD";
    str[0];                   // 返回 H
    
    //ECMAscript 5 允许对字符串的属性访问：
    
    H

## 10、把字符串转换为数组 split() ##

可以通过 split() 将字符串转换为数组：

**实例**

var txt = "a,b,c,d,e";   // 字符串
    txt.split(",");          // 用逗号分隔
    txt.split(" ");          // 用空格分隔
    txt.split("|");          // 用竖线分隔

function myFunction() {
      var str = "a,b,c,d,e,f";
      var arr = str.split(",");
      document.getElementById("demo").innerHTML = arr[0];
    }
    
    //a

如果省略分隔符，被返回的数组将包含 index \[0\] 中的整个字符串。

如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

**实例**

var txt = "Hello";       // 字符串
    txt.split("");           // 分隔为字符

var str = "Hello";
    var arr = str.split("");
    var text = "";
    var i;
    for (i = 0; i < arr.length; i++) {
      text += arr[i] + "<br>"
    }
    document.getElementById("demo").innerHTML = text;
    
    //
    H
    e
    l
    l
    o

# 二、JavaScript 数值方法 #

## 1、toString() 方法 ##

toString() 以字符串返回数值。

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

**实例**

var x = 123;
    x.toString();            // 从变量 x 返回 123
    (123).toString();        // 从文本 123 返回 123
    (100 + 23).toString();   // 从表达式 100 + 23 返回 123

var myNumber = 32;
    document.getElementById("demo").innerHTML =
    "32 = " + "<br>" + 
    " Decimal " + myNumber.toString(10) + "<br>" +
    " Hexadecimal " + myNumber.toString(16) + "<br>" +
    " Octal " + myNumber.toString(8) + "<br>" +
    " Binary " + myNumber.toString(2);
    
    //toString() 方法以基数 2 到 36 输出字符串：
    
    32 =
    Decimal 32
    Hexadecimal 20
    Octal 40
    Binary 100000

## 2、toExponential() 方法 ##

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

**实例**

var x = 9.656;
    x.toExponential(2);     // 返回 9.66e+0
    x.toExponential(4);     // 返回 9.6560e+0
    x.toExponential(6);     // 返回 9.656000e+0

var x = 9.656;
    document.getElementById("demo").innerHTML =
      x.toExponential() + "<br>" + 
      x.toExponential(2) + "<br>" + 
      x.toExponential(4) + "<br>" + 
      x.toExponential(6);
    
    //9.656e+0
    9.66e+0
    9.6560e+0
    9.656000e+0

该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

## 3、toFixed() 方法 ##

toFixed() 返回字符串值，它包含了指定位数小数的数字：

**实例**

var x = 9.656;
    x.toFixed(0);           // 返回 10
    x.toFixed(2);           // 返回 9.66
    x.toFixed(4);           // 返回 9.6560
    x.toFixed(6);           // 返回 9.656000

toFixed(2) 非常适合处理金钱。

## 4、toPrecision() 方法 ##

toPrecision() 返回字符串值，它包含了指定长度的数字：

**实例**

var x = 9.656;
    x.toPrecision();        // 返回 9.656
    x.toPrecision(2);       // 返回 9.7
    x.toPrecision(4);       // 返回 9.656
    x.toPrecision(6);       // 返回 9.65600

## 5、valueOf() 方法 ##

valueOf() 以数值返回数值：

**实例**

var x = 123;
    x.valueOf();            // 从变量 x 返回 123
    (123).valueOf();        // 从文本 123 返回 123
    (100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

在 JavaScript 中，数字可以是原始值（typeof = number）或对象（typeof = object）。

在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。

没有理由在代码中使用它。

所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。

## 6、把变量转换为数值 Number()、parseInt()、parseFloat() ##

这三种 JavaScript 方法可用于将变量转换为数字：

*  Number() 方法
 *  parseInt() 方法
 *  parseFloat() 方法

这些方法并非*数字*方法，而是*全局* JavaScript 方法。

### 全局方法 ###

JavaScript 全局方法可用于所有 JavaScript 数据类型。

这些是在处理数字时最相关的方法：

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number()</td> 
   <td>返回数字，由其参数转换而来。</td> 
  </tr> 
  <tr> 
   <td>parseFloat()</td> 
   <td>解析其参数并返回浮点数。</td> 
  </tr> 
  <tr> 
   <td>parseInt()</td> 
   <td>解析其参数并返回整数。</td> 
  </tr> 
 </tbody> 
</table>

### Number() 方法 ###

Number() 可用于把 JavaScript 变量转换为数值：

**实例**

x = true;
    Number(x);        // 返回 1
    x = false;     
    Number(x);        // 返回 0
    x = new Date();
    Number(x);        // 返回 1404568027739
    x = "10"
    Number(x);        // 返回 10
    x = "10 20"
    Number(x);        // 返回 NaN

如果无法转换数字，则返回 NaN。

### 用于日期的 Number() 方法 ###

Number() 还可以把日期转换为数字：

**实例**

Number(new Date("2019-04-15"));    // 返回 1506729600000

上面的 Number() 方法返回 1970 年 1 月 1 日至今的毫秒数。

### parseInt() 方法 ###

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

**实例**

parseInt("10");         // 返回 10
    parseInt("10.33");      // 返回 10
    parseInt("10 20 30");   // 返回 10
    parseInt("10 years");   // 返回 10
    parseInt("years 10");   // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

### parseFloat() 方法 ###

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

**实例**

parseFloat("10");        // 返回 10
    parseFloat("10.33");     // 返回 10.33
    parseFloat("10 20 30");  // 返回 10
    parseFloat("10 years");  // 返回 10
    parseFloat("years 10");  // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>MAX_VALUE</td> 
   <td>返回 JavaScript 中可能的最大数。</td> 
  </tr> 
  <tr> 
   <td>MIN_VALUE</td> 
   <td>返回 JavaScript 中可能的最小数。</td> 
  </tr> 
  <tr> 
   <td>NEGATIVE_INFINITY</td> 
   <td>表示负的无穷大（溢出返回）。</td> 
  </tr> 
  <tr> 
   <td>NaN</td> 
   <td>表示非数字值（"Not-a-Number"）。</td> 
  </tr> 
  <tr> 
   <td>POSITIVE_INFINITY</td> 
   <td>表示无穷大（溢出返回）。</td> 
  </tr> 
 </tbody> 
</table>

# 三、JavaScript 数组方法 #

## 1、把数组转换为字符串 toString() ##

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.toString(); 
    
    结果：
    Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

实例

var fruits = ["Banana", "Orange","Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.join(" * "); 
    
    结果：
    Banana * Orange * Apple * Mango

## 2、Popping 和 Pushing ##

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：

从数组*弹出*项目，或向数组*推入*项目。

### Popping ###

pop() 方法从数组中删除最后一个元素：

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
    
    //pop() 方法从数组中删除最后一个元素。
    
    Banana,Orange,Apple

pop() 方法返回“被弹出”的值：

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.pop();      // x 的值是 "Mango"
    
    //pop() 方法从数组中删除最后一个元素。
    
    pop() 方法的返回值是已删除的项目。
    
    Banana,Orange,Apple

### Pushing ###

push() 方法（在数组结尾处）向数组添加一个新的元素：

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.push("Kiwi");       //  向 fruits 添加一个新元素
    
    //push() 方法将新元素追加到数组中。
    
    Banana,Orange,Apple,Mango,Kiwi

push() 方法返回新数组的长度：

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x =  fruits.push("Kiwi");   //  x 的值是 5
    
    //无限增加

## 3、位移元素shift()、unshift()  ##

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
    
    //Orange,Apple,Mango

shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML = fruits;
    document.getElementById("demo2").innerHTML = fruits.shift();
    document.getElementById("demo3").innerHTML = fruits;
    
    //
    Banana,Orange,Apple,Mango
    Banana
    Orange,Apple,Mango

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

**实例**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"
    
    //Lemon,Banana,Orange,Apple,Mango

unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML = fruits;
    document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
    document.getElementById("demo3").innerHTML = fruits;
    
    //
    Banana,Orange,Apple,Mango
    5
    Lemon,Banana,Orange,Apple,Mango

## 4、更改元素 ##

通过使用它们的*索引号*来访问数组元素：

数组*索引（下标）*以 0 开始。\[0\] 是第一个数组元素，\[1\] 是第二个，\[2\] 是第三个 ...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML = fruits;
    fruits[0] = "Lemon";
    document.getElementById("demo2").innerHTML = fruits;
    
    //
    Banana,Orange,Apple,Mango
    
    Lemon,Orange,Apple,Mango

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    
    function myFunction() {
      fruits[fruits.length] = "Lemon";
      document.getElementById("demo").innerHTML = fruits;
    }
    
    //
    Banana,Orange,Apple,Mango,Lemon,Lemon,Lemon........

## 5、删除元素 delete ##

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来*删除*：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML =
    "第一种水果是：" + fruits[0];
    delete fruits[0];
    document.getElementById("demo2").innerHTML =
    "第一种水果是：" + fruits[0];
    
    //
    第一种水果是：Banana
    
    第一种水果是：undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

## 6、拼接数组splice() ##

splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
    function myFunction() {
      fruits.splice(2, 0, "Lemon", "Kiwi");
      document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
    }
    
    //
    原数组：
    Banana,Orange,Apple,Mango
    
    新数组：
    Banana,Orange,Lemon,Kiwi,Apple,Mango

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo1").innerHTML = "原数组：<br> " + fruits;
    
    function myFunction() {
      var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
      document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
      document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed; 
    }
    
    //
    原数组：
    Banana,Orange,Apple,Mango
    
    新数组：
    Banana,Orange,Lemon,Kiwi
    
    已删除项：
    Apple,Mango

## 7、使用 splice() 来删除元素 ##

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    function myFunction() {
      fruits.splice(0, 1);
      document.getElementById("demo").innerHTML = fruits;
    }
    
    //Orange,Apple,Mango

第一个参数（0）定义新元素应该被*添加*（接入）的位置。

第二个参数（1）定义应该*删除多个*元素。

其余参数被省略。没有新元素将被添加。

## 8、合并（连接）数组 concat() ##

concat() 方法通过合并（连接）现有数组来创建一个新数组：

**实例（合并两个数组）**

var myGirls = ["Emma", "Isabella"];
    var myBoys = ["Jacob", "Michael", "Ethan"];
    var myChildren = myGirls.concat(myBoys);
    
    document.getElementById("demo").innerHTML = myChildren;
    
    //Emma,Isabella,Jacob,Michael,Ethan

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

**实例（合并三个数组）**

var arr1 = ["Emma", "Isabella"];
    var arr2 = ["Jacob", "Michael", "Ethan"];
    var arr3 = ["Joshua", "Daniel"];
    
    var myChildren = arr1.concat(arr2, arr3); 
    
    document.getElementById("demo").innerHTML = myChildren;
    
    //Emma,Isabella,Jacob,Michael,Ethan,Joshua,Daniel

concat() 方法也可以将值作为参数：

**实例（将数组与值合并）.**

var arr1 = ["Emma", "Isabella"];
    var myChildren = arr1.concat(["Jacob", "Michael", "Ethan"]); 
    document.getElementById("demo").innerHTML = myChildren;
    
    //Emma,Isabella,Jacob,Michael,Ethan

## 9、裁剪数组 slice()  ##

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （"Orange"）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1);
    document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    
    //
    此例从数组元素 1（“Orange”）开始切出数组的一部分：
    
    Banana,Orange,Lemon,Apple,Mango
    
    Orange,Lemon,Apple,Mango

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （"Apple"）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(3);
    document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    
    //
    此例从数组元素 3（“Apple”）开始切出数组的一部分：
    
    Banana,Orange,Lemon,Apple,Mango
    
    Apple,Mango

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1,3);
    document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    
    //
    当给 slice() 方法赋予两个参数时，它从 start 参数中选择数组元素，直到（但不包括）end 参数：
    
    Banana,Orange,Lemon,Apple,Mango
    
    Orange,Lemon

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(2);
    document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    
    //
    此例从数组元素 2（“Lemon”）开始切出数组的一部分：
    
    Banana,Orange,Lemon,Apple,Mango
    
    Lemon,Apple,Mango

## 10、自动 toString() ##

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.toString();
    
    //toString() 方法以逗号分隔的字符串返回数组：
    
    Banana,Orange,Apple,Mango

所有 JavaScript 对象都拥有 toString() 方法。

# 四、JavaScript 数组排序 #

**sort() 方法是最强大的数组方法之一。**

## 1、数组排序sort() ##

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    
    function myFunction() {
      fruits.sort();
      document.getElementById("demo").innerHTML = fruits;
    }
    
    //sort() 方法按字母顺序对数组进行排序。
    
    Apple,Banana,Mango,Orange

## 2、反转数组 reverse() ##

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序：

// Create and display an array:
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    
    function myFunction() {
      // First sort the array
      fruits.sort();
      // Then reverse it:
      fruits.reverse();
      document.getElementById("demo").innerHTML = fruits;
    }
    
    //通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。
    
    Orange,Mango,Banana,Apple

## 3、数字排序 ##

默认地，sort() 函数按照*字符串*顺序对值进行排序。

该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。

不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个*比值函数*来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = points;  
    
    function myFunction() {
      points.sort(function(a, b){return a - b});
      document.getElementById("demo").innerHTML = points;
    }
    
    //升序对数组进行排序。
    
    1,5,10,25,40,100

使用相同的技巧对数组进行降序排序：

var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = points;
    
    function myFunction() {
      points.sort(function(a, b){return b - a});
      document.getElementById("demo").innerHTML = points;
    }
    
    //按降序对数组进行排序。
    
    100,40,25,10,5,1

## 4、比值函数 ##

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

**实例：**

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。

该函数计算 40-100，然后返回 -60（负值）。

排序函数将把 40 排序为比 100 更低的值。

您可以使用下面的代码片段来测试数值和字母排序：

## 5、以随机顺序排序数组 ##

var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = points;  
    
    function myFunction() {
      points.sort(function(a, b){return 0.5 - Math.random()});
      document.getElementById("demo").innerHTML = points;
    }
    
    //随机
    25,1,100,40,10,5
    ........
    ........
    ........

## 6、查找最高（或最低）的数组值 ##

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return a-b});
    document.getElementById("demo").innerHTML = points[0];
    
    //最低值是：1

降序排序：

var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return b-a});
    document.getElementById("demo").innerHTML = points[0];
    
    //最高值是：100

如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

## 7、对数组使用 Math.max() ##

您可以使用 Math.max.apply 来查找数组中的最高值：

var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = myArrayMax(points);
    
    function myArrayMax(arr) {
      return Math.max.apply(null, arr);
    }
    
    //最高值是：100

Math.max.apply(\[1, 2, 3\]) 等于 Math.max(1, 2, 3)。

## 8、对数组使用 Math.min() ##

您可以使用 Math.min.apply 来查找数组中的最低值：

var points = [40, 100, 1, 5, 25, 10];
    document.getElementById("demo").innerHTML = myArrayMin(points);
    
    function myArrayMin(arr) {
      return Math.min.apply(null, arr);
    }
    
    //最低值是：1

Math.min.apply(\[1, 2, 3\]) 等于 Math.min(1, 2, 3)。

## 9、我的 Min / Max JavaScript 方法 ##

最快的解决方法是使用“自制”方法。

此函数遍历数组，用找到的最高值与每个值进行比较：

**实例（查找 Max）**

此函数遍历数组，用找到的最低值与每个值进行比较：

**实例（查找 Min）**

## 10、排序对象数组 ##

JavaScript 数组经常会包含对象：

### 实例 ###

var cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}];

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

解决方法是通过比较函数来对比属性值：

比较字符串属性会稍复杂：

# 五、JavaScript 数组迭代方法 #

# #

## 1、Array.forEach() ##

forEach() 方法为每个数组元素调用一次函数（回调函数）。

var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;
    
    function myFunction(value, index, array) {
      txt = txt + value + "<br>"; 
    }
    
    //为每个元素调用一次函数。
    
    45
    4
    9
    16
    25

注释：该函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

上面的例子只用了 value 参数。这个例子可以重新写为：

var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;
    
    function myFunction(value) {
      txt = txt + value + "<br>"; 
    }
    
    //为每个元素调用一次函数。
    
    45
    4
    9
    16
    25

## 2、Array.map() ##

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

这个例子将每个数组值乘以2：

var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);
    
    document.getElementById("demo").innerHTML = numbers2;
    
    function myFunction(value, index, array) {
      return value * 2;
    }
    
    //通过对每个数组元素执行函数来创建新数组。
    
    90,8,18,32,50

请注意，该函数有 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);
    
    document.getElementById("demo").innerHTML = numbers2;
    
    function myFunction(value) {
      return value * 2;
    }
    
    //通过对每个数组元素执行函数来创建新数组。
    
    90,8,18,32,50

## 3、Array.filter() ##

filter() 方法创建一个包含通过测试的数组元素的新数组。

这个例子用值大于 18 的元素创建一个新数组：

var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);
    
    document.getElementById("demo").innerHTML = over18;
    
    function myFunction(value, index, array) {
      return value > 18;
    }
    
    //使用通过测试的所有数组元素创建一个新数组。
    
    45,25

请注意此函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：

var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);
    
    document.getElementById("demo").innerHTML = over18;
    
    function myFunction(value) {
      return value > 18;
    }
    
    //使用通过测试的所有数组元素创建一个新数组。
    
    45,25

## 4、Array.reduce() ##

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。

reduce() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和：

var numbers = [45, 4, 9, 16, 25];
    var sum = numbers.reduce(myFunction);
    
    document.getElementById("demo").innerHTML = "总和是：" + sum;
    
    function myFunction(total, value, index, array) {
      return total + value;
    }
    
    //此例确定数组中所有数字的总和：
    
    总和是：99

请注意此函数接受 4 个参数：

*  总数（初始值/先前返回的值）
 *  项目值
 *  项目索引
 *  数组本身

上例并未使用 index 和 array 参数。可以将它改写为：

var numbers = [45, 4, 9, 16, 25];
    var sum = numbers.reduce(myFunction);
    
    document.getElementById("demo").innerHTML = "总和是：" + sum;
    
    function myFunction(total, value) {
      return total + value;
    }
    
    //此例确定数组中所有数字的总和：
    
    总和是：99

reduce() 方法能够接受一个初始值：

var numbers = [45, 4, 9, 16, 25];
    var sum = numbers.reduce(myFunction, 100);
    
    document.getElementById("demo").innerHTML = "总和是：" + sum;
    
    function myFunction(total, value) {
      return total + value;
    }
    
    //此例确定数组中所有数字的总和：
    
    总和是：199

## 5、Array.reduceRight() ##

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。

reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和：

var numbers = [45, 4, 9, 16, 25];
    var sum = numbers.reduceRight(myFunction);
    
    document.getElementById("demo").innerHTML = "总和是：" + sum;
    
    function myFunction(total, value, index, array) {
      return total + value;
    }
    
    //此例确定数组中所有数字的总和：
    
    总和是：99

请注意此函数接受 4 个参数：

*  总数（初始值/先前返回的值）
 *  项目值
 *  项目索引
 *  数组本身

上例并未使用 index 和 array 参数。可以将它改写为：

var numbers = [45, 4, 9, 16, 25];
    var sum = numbers.reduceRight(myFunction);
    
    document.getElementById("demo").innerHTML = "总和是：" + sum;
    
    function myFunction(total, value) {
      return total + value;
    }
    
    //此例确定数组中所有数字的总和：
    
    总和是：99

## 6、Array.every() ##

every() 方法检查所有数组值是否通过测试。

这个例子检查所有数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.every(myFunction);
    
    document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
    
    function myFunction(value, index, array) {
      return value > 18;
    }
    
    //every() 方法检查所有数组值是否通过测试。
    
    所有大于 18 的是：false

请注意此函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

如果回调函数仅使用第一个参数（值）时，可以省略其他参数：

var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.every(myFunction);
    
    document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
    
    function myFunction(value) {
      return value > 18;
    }
    
    //every() 方法检查所有数组值是否通过测试。
    
    所有大于 18 的是：false

## 7、Array.some() ##

some() 方法检查某些数组值是否通过了测试。

这个例子检查某些数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
    var someOver18 = numbers.some(myFunction);
    
    document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
    
    function myFunction(value, index, array) {
      return value > 18;
    }
    
    //some() 方法检查某些数组值是否通过了测试。
    
    某些值大于 18 是：true

请注意此函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

## 8、Array.indexOf() ##

indexOf() 方法在数组中搜索元素值并返回其位置。

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
    var a = fruits.indexOf("Apple");
    document.getElementById("demo").innerHTML = "Apple 被找到的位置是：" + (a + 1);
    
    //Apple 被找到的位置是：1

**语法**

array.indexOf(item, start)

<table> 
 <tbody> 
  <tr> 
   <td>item</td> 
   <td>必需。要检索的项目。</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。</td> 
  </tr> 
 </tbody> 
</table>

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

## 9、Array.lastIndexOf() ##

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

检索数组中的项目 "Apple"：.

var fruits = ["Apple", "Orange", "Apple", "Mango"];
    var a = fruits.lastIndexOf("Apple");
    document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
    
    //Apple is found in position 3

array.lastIndexOf(item, start)

<table> 
 <tbody> 
  <tr> 
   <td>item</td> 
   <td>必需。要检索的项目。</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。</td> 
  </tr> 
 </tbody> 
</table>

## 10、Array.find() ##

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找（返回）大于 18 的第一个元素的值：

var numbers = [4, 9, 16, 25, 29];
    var first = numbers.find(myFunction);
    
    document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
    
    function myFunction(value, index, array) {
      return value > 18;
    }
    
    //大于 18 的第一个值是：25

请注意此函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

## 11、Array.findIndex() ##

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引：

var numbers = [4, 9, 16, 25, 29];
    var first = numbers.findIndex(myFunction);
    
    document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
    
    function myFunction(value, index, array) {
      return value > 18;
    }
    
    //大于 18 的第一个值的索引是：3

请注意此函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身