JavaScript数据结构与算法（1）数组常用方法

淩亂°似流年 2022-02-27 13:52 327阅读 0赞

参考资料：《学习JavaScript数据结构与算法》笔记

这本书可以和这个博客一起看：  
https://github.com/wengjq/Blog  
http://www.liuyiqi.cn/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/page/2/  
小火柴：https://www.cnblogs.com/xiaohuochai/tag/javascript%E6%80%BB%E7%BB%93/  
bobo老师JavaScript：https://github.com/biaodigit/Play-with-Data-Structures

数据结构和算法动态可视化：  
https://visualgo.net/zh  
还有算法动画图解APP也推荐

数组还可以查看参考资料：https://juejin.im/post/5c923e936fb9a070b96f06ff

**1.创建和初始化数组**

new Array();
    new Array(7);
    new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday')
    [];
    ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

**2.数组元素的添加和删除**

末尾元素的添加删除：push、pop  
首位元素的添加和输出：unshift、shift

末尾添加元素：

var numbers = [1,2,3,4,5,6];
    numbers[numbers.length] = 7;

数组首位插入元素（实现unshift功能）：

//因为往后移一位，此时宽度就是numbers.length，所以有numbers[i]
    var numbers = [0,1,2,3,4,5,6,7,8,9]
    for(var i=numbers.length;i>=0;i--){
    	numbers[i] = numbers[i-1];
    }
    numbers[0] = -1

数组首位删除元素（实现shift功能）：

var numbers = [0,1,2,3,4,5,6,7,8,9]
    for(var i=0;i<numbers.length;i++){
    	numbers[i]=numbers[i+1];
    }

我们注意最后一次是a\[10\]=a\[9\]，此时a\[9\]是undefined，整个数组长度不变，只是最后一个是undefined。

**3.在任意位置添加或删除元素**

我们可以使用splice方法，简单地通过指定位置/索引，就可以删除相应位置和数量的元素：

//从下标开始，删除
    [1, 2, 3, 4, 6, 6]
    num.splice(1,2)
    [1, 4, 6, 6]

splice还有更多参数，我们可以用于添加元素：

num = [1,2,3,4,5,6,7,8,9]
    num.splice(1,0,2,2,3,3)
    num
    [1,2,2,3,3,2,3,4,5,6,7,8,9]

**4.JavaScript数组方法参考**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

JavaScript数组方法：concat、every、filter、forEach、join、indexOf、lastindexOf、map、reverse、slice、some、sort、toString、valueOf

ECMAScript 6新增的数组方法：@@iterator、copyWithin、entries、includes、find、find Index、fill、from、keys、of、values

**ES5中数组方法**

//concat
    arr = ["George","John","Thomas"];
    arr2 = ["James","Adrew","Martin"]
    arr.concat(arr2)
    ["George", "John", "Thomas", "James", "Adrew", "Martin"]
    
    //join
    arr = ["George","John","Thomas"];
    arr.join()
    "George,John,Thomas"
    arr.join('.')
    "George.John.Thomas"
    
    //slice（如果没有指定end，那么到数组结束的所有元素）
    arr = ["George","John","Thomas"];
    arr.slice(1)
    ["John","Thomas"]
    arr1 = ["George", "John", "Thomas", "James", "Adrew", "Martin"]
    arr1.slice(2,4)
    ["Thomas","James"]
    
    //indexOf
    var str="Hello world!"
    str.indexOf("Hello")    0
    str.indexOf("World")  -1
    str.indexOf("world")   6
    
    //toString() 有点类似默认join效果
    ["George", "John", "Thomas"]
    arr.toString()
    "George,John,Thomas"
    
    //valueOf 和toString类似，将数组作为字符串返回

toString 将数组作为字符串返回  
valueOf 和toString类似，将数组作为字符串返回

下面是some、every、filter、forEach、map（迭代器函数）

var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; 
    var isEven = function (x) {
    	// 如果x是2的倍数，就返回true
    	console.log(x);
     	return (x % 2 == 0) ? true : false;
    }; 
    
    //some
    numbers.some(isEven);
    1
    2
    true
    
    //every
    numbers.every(isEven);
    false
    
    //forEach(不需要判断，返回true/false，不需要返回值)
    numbers.forEach(function(x){
    	console.log((x % 2 == 0));
    }); 
    false
    true
    false
    true
    false
    true
    false
    true
    false
    true
    false
    true
    false
    true
    false
    
    //map
    numbers.map(isEven)
    [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]
    
    //filter
    numbers.filter(isEven);
    [2, 4, 6, 8, 10, 12, 14]

some 对数组中的每一项运行给定函数，如果任一项返回true，则返回true.  
every 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true  
forEach 对数组中的每一项运行给定函数。这个方法没有返回值  
map 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组  
filter 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

**ES5中数组迭代器函数总结：**

forEach()修改原数组无返回值，map()和filter()返回新数组，every()和some()返回布尔值

forEach()，用于遍历数组，用于对数组每一项进行操作，在原数组上操作，无返回值  
map()，用于遍历数组，用于对数组每一项进行操作，返回处理之后的新数组  
可以看到，该方法与forEach()的功能类似，只不过map()具有返回值，会返回一个新的数组，这样处理数组后也不会影响到原有数组。

every()，用于判断数组中的每一项元素是否都满足条件，返回一个布尔值、some()，用于判断数组中的是否存在满足条件的元素，返回一个布尔值

filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组。

参考文章：https://www.jianshu.com/p/b728253c90b5

**ES6数组方法：**

ECMAScript 6新增的数组方法：@@iterator、copyWithin、entries、includes、find、find Index、fill、from、keys、of、values

\[ \].slice.call():https://www.jianshu.com/p/ae57baecc57d  
先放结论：\[\].slice.call(arguments)能将具有length属性的对象转成数组。

`Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。

Array.from('hello')
    // ['h', 'e', 'l', 'l', 'o']
    
    let namesSet = new Set(['a', 'b'])
    Array.from(namesSet) // ['a', 'b']

`Array.of`方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]

copyWithin方法复制数组中的一系列元素到同一个数组指定的起始位置。

Array.prototype.copyWithin(target, start = 0, end = this.length)
    
    [1, 2, 3, 4, 5].copyWithin(0, 3)
    // [4, 5, 3, 4, 5]
    
    // 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]
    
    // -2相当于3号位，-1相当于4号位
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
    // [4, 2, 3, 4, 5]

**总结：**  
Array.from方法根据已有的数组创建一个新数组。  
Array.of方法根据传入的参数创建一个新数组。  
fill方法用静态值填充数组。  
copyWithin方法复制数组中的一系列元素到同一个数组指定的起始位置。

数组实例的find方法，用于找出第一个符合条件的数组成员。  
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 4, -5, 10].find((n) => n < 0)
    // -5
    
    [1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) // 2

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

数组实例的 includes()，如果数组里存在某个元素，includes方法会返回true，否则返回false。

console.log(numbers.includes(15));
    console.log(numbers.includes(20));

**总结：**

indexof 返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1。  
find 数组实例的find方法，用于找出第一个符合条件的数组成员，返回找到的数组成员。  
findIndex 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。  
include 如果数组里存在某个元素，includes方法会返回true，否则返回false。

toString 将数组作为字符串返回。  
value 和toString类似，将数组作为字符串返回。  
join 默认情况下，join和上面两个方法一样，’,'组成的字符串，但是join可以指定连接符。

**5.数组中排序**

主要是两个方法：reverse()和sort()

1.reverse()反向输出数组：

[1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
    num.reverse()
    [9, 8, 7, 6, 5, 4, 3, 2, 3, 3, 2, 2, 1]

2.不加参数的sort():

[15, 14, 13, 12, 11, 10, 2, 3, 4, 5, 6, 7, 8, 9, 1];
    nums.sort();
    (15) [1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]

因为sort方法在对数组做排序时，把元素默认成字符串进行相互比较。

3.a-b、b-a的sort():

numbers.sort(functioni(a,b){
    	return a-b;
    });
    
    [1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
    num.sort(function(a,b){return a-b})
    [1, 2, 2, 2, 3, 3, 3, 4, 5, 6, 7, 8, 9]
    
    [1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
    num1.sort(function(a,b){return b-a})
    [9, 8, 7, 6, 5, 4, 3, 3, 3, 2, 2, 2, 1]

a-b升序排序，b-a降序

4.对对象类型的数组排序

在这个例子里，最后会输出Ana(20), Chris(25), John(30)。

5.对字符串排序

var names =['Ana', 'ana', 'john', 'John'];
    console.log(names.sort());

你猜会输出什么？答案是这样的：

["Ana", "John", "ana", "john"]

既然a在字母表里排第一位，为何ana却排在了John之后呢？这是因为JavaScript在做字符比较的时候，是根据字符对应的ASCII值来比较的。

现在，如果给sort传入一个忽略大小写的比较函数，将会输出\[“Ana”, “ana”, “John”,  
“john”\]：

names.sort(function(a, b){
     	if (a.toLowerCase() < b.toLowerCase()){
     		return -1
    	 }
    	if (a.toLowerCase() > b.toLowerCase()){
     		return 1
     	}
     		return 0;
    });

**6.JavaScript数组方法中改变原数组和不改变原数组的方法**

改变原数组

pop、posh、shift、unshift、sort、reverse、splice、foreach

1.push（）

push（）:往数组里面增加东西：从数组最后一位元素后添加。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

2.pop（）

pop(): 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。它直接修改 arrayObject，而不是创建一个新的数组。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
3.unshift（）

unshift（）:是往数组第一位元素前面添加元素

![在这里插入图片描述][20190515223515785.png]

4.shift（）

shit（）：从数组前面的第一位元素开始删除  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

5.reverse（）

reverse（）：把元素的方向调转

![在这里插入图片描述][20190515223907356.png]

6.sort（）

sort（）:给原来的数组进行排序

![在这里插入图片描述][2019051522394398.png]

升序：arr.sort()  
降序：arr.sort().reverse()

**注意：sort（）在是把字符按ASCII排序，看下面代码：**

var arr = [1,2,4,3,5,19]
    arr.sort()
    [1, 19, 2, 3, 4, 5]

所以就需要在sort里面添加一种方法，可以按照我们任何一种方法进行排序。

规则：  
1.必须写俩形参  
2.看返回值  
(1):当返回值为负数时，那么前面的数放在前面  
(2):当返回值为正数时，那么后面的数在前  
(3):当返回值为 0的时候，不动

//升序
    arr.sort(function (a,b){
        if(a > b){ 
            return 1;
        }else{
            return -1;
        }  
    });
    
    //降序
    arr.sort(function (a,b){
     if(a < b){ 
                return 1;
            }else{
                return -1;
            }  
        });

简写方式：

//升序
    arr.sort(function(a,b){
         return a - b;
     });
    
    //降序
    arr.sort(function(a,b){
        return b - a;
    });

7.splice（）

splice：arr.splice(从第几位开始，截取多少的长度，在切口处添加新的数据)，后面那个数据可添加也可不添加，可以添加无数个数据，也可以从负数开始截取，负数就是数组倒数第几位，不过只能截取一个数据的长度。

var arr = [1,1,2,2,3,3];

![在这里插入图片描述][20190515224245850.png]

8.forEach（）

forEach()针对每一个元素执行提供的函数。会修改原来的数组，不会返回执行结果，返回undefined。

不改变原数组的方法

concat、slice、join、toString、map、every、some、filter

1.concat（）

concat：把两个或多个数组拼接，产生一个新的数组

![在这里插入图片描述][20190515225154660.png]

2.slice（）

slice:（从该位开始截取，截取到该位），不改变原数组，所以要返回该值。

分别有三种情况：  
两位参数：

var arr = [1,2,3,4,5,6];
    var newArr = arr.slice(1,3);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
一位参数的情况,

var arr = [1,2,3,4,5,6];
    var newArr1 = arr.slice(1)

从第几位开始，截取到最后

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]  
没有参数的情况, 整个数组截取

var arr = [1,2,3,4,5,6];
    var newArr1 = arr.slice();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

3.join（）

join:传入一个字符串类型的数据，然后依次将数组每个数据连接起来，非常有用

var arr = [1,2,3,4,5,6];
    var newArr = arr.join("-");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]

var arr = [1,2,3,4,5,6];
    var str = arr.join("-");
    var newArr = str.split("-");

首先将数组arr已"-“连接为一个字符串str，再运用split的方法将字符串str的”-"连接符去除，组成一个数组

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]

4.toString（）

toString:把数组输出为字符

![在这里插入图片描述][20190515225944788.png]  
以上的方法都是不会改变原数组的

5.map、every、some、filter

map()创建一个新数组并返回，其中新数组的每个元素由调用原始数组中的每一个元素执行提供的函数得来，原始数组不会改变。

every()对数组中的每个元素都执行一次指定的回调函数，直到回调函数返回false，此时every()返回false并不再继续执行。如果回调函数对每个元素都返回true，那么every()将返回true。

some()对数组中的每个元素都执行一次指定的回调函数，直到回调函数返回true，此时some()返回true并不再继续执行。如果回调函数对每个元素都返回false，那么some()将返回false。

filter()创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

其他

valueOf()： valueOf() 方法返回 Array 对象的原始值。

valueOf()是一个拆封的过程，可以看下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]

参考文章：  
https://blog.csdn.net/Hhjian524/article/details/83066358  
http://www.cnblogs.com/chase-star/p/9947648.html  
https://github.com/yygmind/blog/issues/4

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220227/1711a4568b02455d897836d61e6c3e00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220227/127b11f9076d44ce8dc8670a82457ab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220227/8c89cc8b1f7b42faa887b4dbaa5cd516.png
[20190515223515785.png]: /images/20220227/50950f89f0724e198118908aa4bb3dac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220227/4bc9fc2227e644708ee8f8d3c2084933.png
[20190515223907356.png]: /images/20220227/dfc066d4099249aeb2361a646210496c.png
[2019051522394398.png]: /images/20220227/302be949cbb444faa2cd14c25e596424.png
[20190515224245850.png]: /images/20220227/8c3dcc4744994240b2e2642557e76be0.png
[20190515225154660.png]: /images/20220227/799145a0fb034bdc8a74695404c41f4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220227/e810ddd9fbab44778067e2bfe1c2bcbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220227/382141395ff84cb19fd412b16b2cda7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220227/b4cb369de1e541548047e084afe9f481.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220227/03d376d80a504eb7a79f3c1980d7a2fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: /images/20220227/24972b66240e4122a5cebc0802e2bd0e.png
[20190515225944788.png]: /images/20220227/8799381742d94f04a4c39199004bff74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: /images/20220227/c1b01a9b99974be38dbcad0ef5da64af.png