对数组的操作【数组去重】【数组扁平化】【reduce，concat, isArray...】【数组排序】

喜欢ヅ旅行 2021-11-22 13:44 245阅读 0赞

> 参考：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array]
> 
> [https://www.freecodecamp.org/news/lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae/][https_www.freecodecamp.org_news_lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae]   Let’s clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript

## 基本操作 ##

*MDN的网站对数组的操作方法归类方式是：修改器方法，访问方法，迭代方法。*

### 1. 增加/删除数组：push(), pop(), unshift(), shift() ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

### 2. 数组的转换：join(), split(), toString() ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

### 3. 对数组索引进行的操作：slice()复制, indexOf(), splice() 增加删除 ###

![20200405231354834.png][] slice() 是浅拷贝, 拷贝前后的数组**第一层互不影响**

> *Important Note: the **Slice( )** method can also be used for **strings.***

const animalGo = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    animalGo.indexOf("ant")  // 0
    animalGo.indexOf("line") // -1
    Array.isArray(animalGo)  // true

> *Important Note: the *indexOf ***( )** method can also be used for **strings.***

* **`splice()`** 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式**返回被修改的内容**。此方法会改变原数组。*

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const months = ['Jan', 'March', 'April', 'June'];
    
    // undefined
    months.splice(1,0,"test")  // 从第 1 位开始删除 0 个元素，插入“test”
    // [] // 返回的是被删除的元素
    months
    // (5) ["Jan", "test", "March", "April", "June"]
    months.splice(1,2,"testGo")
    // (2) ["test", "March"]
    months
    // (4) ["Jan", "testGo", "April", "June"]
    months.splice(1,2)
    // (2) ["testGo", "April"]
    months
    // (2) ["Jan", "June"]
    months.splice(0) // 从第 0 位开始删除所有元素
    // (2) ["Jan", "June"]
    months
    // []
    months.splice(0,0,"test1","test2") // 增加了数组
    // []
    months
    // (2) ["test1", "test2"]

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

## 数组去重 ##

### 方法一，关键：indexOf()  push() ###

### 方法二，排序后相邻去除法，关键：sort() ###

const pn = [22,44,11,22,2,1,44,12,9]
    // undefined
    pn.sort()
    // (9) [1, 11, 12, 2, 22, 22, 44, 44, 9]

### 方法三，es6 Set去重 ###

const x = [1, 2, 2, 4, 4, 3, 2];
    console.log(Array.from(new Set(x)));

排序：

## 数组求和 （for; for in; for of; forEach; map; reduce） ##

t4(array: Array<any>) {
        let sum = 0;
        for (let i = 0; i < array.length; i++) {
          if (typeof array[i] === 'number') {
            sum += array[i];
          }
        }
        return sum;
      }
    
      t5(array: Array<number>) {
        let sum = 0;
        for (let x of array) {
          // for of ; for in; forEach
          sum += x;
        }
        return sum;
      }
    
      t6(array: Array<number>) {
        let sum = 0;
        for (let x in array) {
          // for of ; for in; forEach
          sum += array[x];
        }
        return sum;
      }
    
      t7(array: Array<number>) {
        let sum = 0;
        // for of ; for in; forEach
        array.forEach(x => {
          sum += x;
        });
        return sum;
      }
    
      t8(array: Array<number>) {
        let sum = 0;
        array.map(x => {
          sum += x;
        });
        return sum;
      }
    
      t9(array: Array<number>) {
        let sum = 0;
        sum = array.reduce((x, y) => {
          return x + y; // 在块体中，必须使用明确的return语句
        }, 0);
        return sum;
      }
    
      ngOnInit() {
        console.log(this.t4([1, 2, 3]));
      }

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

**循环：**

var cats = \['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'\];    【下列目的：比较 < 和 <= 】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]

break: 完全跳出循环

continue: 跳过当前循环而执行下一个循环

跳过： while 和 do...while

> 建议使用`for`，因为它可能是最简单地帮你记住一切 - 初始化程序，退出条件和最终表达式都必须整齐地放入括号，所以很容易看到他们在哪里并检查你没有丢失他们。

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

for(i=0;i<10;i++)\{console.log(i)\};  //控制台输出 0 到 9。

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

## 杂  ##

**数据与字符互相转换：**

*  如果可以的话， [`Number`][Number] 对象将把传递给它的任何东西转换成一个数字。 
    
        let myString = '123';
        let myNum = Number(myString);
        typeof myNum;
 *  另一方面，每个数字都有一个名为 [toString()][toString] 的方法，它将把它转换成等价的字符串。 
    
        let myNum = 123;
        let myString = myNum.toString();
        typeof myString;

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

“外部”示例中使用了 JavaScript 的一项现代技术（**`async` “异步”属性**）来解决这一问题，它告知浏览器在遇到 `<script>` 元素时不要中断后续 HTML 内容的加载。

脚本调用策略小结：

*  如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 `async`。
 *  如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 `defer`，将关联的脚本按所需顺序置于 HTML 中。

**使用 `defer` 属性**，脚本将按照在页面中出现的顺序加载和运行：

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

我们为变量赋值一个新的更新值，而不是对该值进行操作。 以下将返回错误：3++;

所以，只能增加一个现有的变量：let num1 = 4;   num1++;

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
[https_www.freecodecamp.org_news_lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae]: https://www.freecodecamp.org/news/lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20211122/37f04cf2f18e4aa796023c871c078045.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20211122/d76a9b3a95f04c998a7609db7d3f05d6.png
[20200405231354834.png]: /images/20211122/87db2b24947e44e18ec6948ad29998b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: /images/20211122/d276ad858feb4996b287451fb6fdfbdf.png
[Number]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number
[toString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString