2019-08-26JavaScript数组方法总结

作者: 啊_6424 | 来源:发表于2019-08-26 12:00 被阅读0次

昨天参加了字节跳动的笔试，总共4道编程题。哎！一言难尽，算法渣渣，4道编程题全军覆没。
经过反思总结，我觉得自己的算法已经到了无药可救的地步，继续下去只是浪费时间。遂放弃算法那一块知识，专攻前端基础，就算算法不行，我希望我能用掌握好基础知识，感动面试官们！继续学习算法，我怕我到时候算法没学好，基础也没打牢固，面试官左右都不满意！

一、将数组转为字符串

涉及到的方法有 toString()，join（[parameter]）

（一） toString（）

toString()方法，所有的对象都有这个方法。

参数：无
返回值：数组值（逗号分隔）的字符串
是否改变原数据：否
原理：
分隔符为逗号
Boolean 的数组值返回字符串类型的 true 或者 false
Number 的数组值返回字符串类型的对应数字
null和undefined 的数组值返回空串
Object 的数组值返回字符串[Object Object]

    var arr = [1,3,"45", {id: "23"}, null, undefined, true,[1,2,3]];
    console.log(arr.toString());
    console.log(arr);

image.png

JS中各种数据类型调用toString()：

Boolean类型的 toString() 返回字符串类型的 true 或者 false
Number 类型的 toString() 两种模式，即默认模式和基模式(此时，toString()可以传入一个参数表示数值的进制)
null和undefined没有toString()，调用时会报错。
undefined 实际上是从值 null 派生来，null常用于表示一个为空的对象
typeof null 返回 object typeof undefined 返回 undefined

image.png

（二）join()

join（[param1]）

参数：String类型，可选参数
返回值：
有param1：数组值（param1分隔）的字符串
无param1：数组值（逗号分隔）的字符串
是否改变原数据：否
原理：
分隔符为 param1 或者逗号
Boolean 的数组值返回字符串类型的 true 或者 false
Number 的数组值返回字符串类型的对应数字
null和undefined 的数组值返回空串
Object 的数组值返回字符串[Object Object]

二、数组的基本操作

主要指增删查改

（一）通过索引号

可实现增删查改所有操作

（二）push()，pop()

实现类似于栈的出栈，入栈操作
在数组的尾部进行添加或者删除操作。

push（[param1], [param2],......,[param n]）

在数组尾部添加多个元素（0……n）

参数：可选参数，任意类型
返回值：返回操作完之后，数组的length属性值
是否改变原数据：是，就是在原数据上操作
原理：

pop()

删除最后一个元素

参数：无
返回值：返回删除的元素值
是否改变原数据：是
原理：

例子：

    var arr = [1,3,4];
    console.log(arr.pop());
    console.log("arr", arr);
    console.log(arr.push(2,5,0));
    console.log("arr", arr);

image.png

（三）shift()，unshift()

实现类似于队列的入队，出队操作
在数组的头部进行删除或者添加操作

unshift（[param1], [param2],......,[param n]）

在数组头部添加多个新元素（0……n），并“反向位移”旧元素

参数：可选参数，任意类型
返回值：返回操作完之后，数组的length属性值
是否改变原数据：是
原理：

shift()

删除数组的第一个元素，并“位移”其他元素

参数：无
返回值：返回操作完之后，数组的length属性值
是否改变原数据：是
原理：

例子

    var arr = [1,3,4];
    console.log("arr", arr);
    console.log(arr.shift());
    console.log("arr", arr);
    console.log(arr.unshift(2,5,0));
    console.log("arr", arr);

image.png

（四）splice()

splice(index，count，[param1]，[param2],……,[param n])

拼接数组，可能位移其他元素。
可实现数组的增删改

参数：
index：>= 0，表示新元素应该被添加（接入）的索引值,
count：>= 0，表示应删除多少元素
可选参数：任意类型，表示要添加的新元素
返回值：已删除项组成的数组
是否改变原数据：是

splice实现增删改

增：count = 0，定义要添加的新元素
splice（index, $\color{red}{0 }$ , param1，param2,……,param n）
删：count > 0，不定义要添加的新元素
splice（index, $\color{red}{ count }$ ），删除count个元素
改：count > 0，定义要添加的新元素
splice（index, $\color{red}{count, param1, param2,……, param n}$ ）

    var arr = [1,3,4,5,6,7];
    console.log("arr", arr);
    var deleteArr = [];
    arr.splice(2,0,"we","our"); // 从索引值 2 开始，删除0位元素，拼接新元素
    console.log("增", arr);
    arr.splice(0,2); // 从索引值 0 开始，删除两位元素
    console.log("删", arr);
    deleteArr = arr.splice(2,1,"edit");
    console.log("改", arr);
    console.log("删除的数据项", deleteArr);

image.png

（五）delete 运算符

将任一索引处的元素，改为 undefined，会在数组留下未定义的空洞，不推荐使用
不涉及位移

三、数组的其他操作

主要指合并，裁剪等操作。

（一）concat()

concat（param1, param2, ……, paramn）

合并（连接）数组，区别于拼接

参数：数组类型
返回值：返回操作完之后，新的数组
是否改变原数据：否

    var arr = [1,3,4,5,6,7];
    var arr2 = [8,9,10,11];
    var concatArr = arr.concat(arr2);
    console.log("arr", arr);
    console.log("arr2", arr2);
    console.log("concatArr", concatArr);

如果需要arr2在前面，则arr2.concat(arr)就可以了

（二） slice()

slice( start，end ) : 裁剪数组
从start开始，直到end（不包括）为止

参数： >= 0
返回值：返回裁剪出来的数组
是否改变原数据：否

    var arr = [1,3,4,5,6,7];
    var sliceArr = arr.slice(2,10);
    console.log("arr", arr);
    console.log("sliceArr", sliceArr);

image.png

四、数组的排序类操作

主要指排序，反转，查找最大，查找最小等操作

（一）sort()

首先明确，排序指的是对数字或者是字符排序
sort（[sortby]）

参数：
sortby：比较函数，规定排序顺序
无参数：按照字符编码的顺序进行排序。先把数组的元素都转换成字符串（如有必要），再比较。
返回值：数组的引用
是否改变原数据：是

比较函数：
该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。
比较函数应该具有两个参数 a 和 b，其返回值如下：
1.若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
2. 若 a 等于 b，则返回 0。
3.若 a 大于 b，则返回一个大于 0 的值。

数组排序

    var arr = [11,3,14,5,6,7];
    console.log("arr", arr);
    arr.sort();
    console.log("未规定按数值从小到大排序", arr);
    arr.sort(sortNumber);
    console.log("规定按数值从小到大排序", arr);
    function sortNumber(a, b){
        return a - b;
    }

正确的按数值排序了

对象数组排序

JavaScript 数组，经常会包含对象，对象拥有不同数据类型的属性，sort() 方法怎么对对象数组排序呢？——通过比较函数对比（数字，字符串）属性的属性值，从而排序

var cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}
];
//比较数值属性
cars.sort(function(a, b){return a.year - b.year});
//比较字符串属性
cars.sort(function(a, b){
      var x = a.type.toLowerCase();
      var y = b.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
      return 0;
});

（二）reverse()

反转数组

参数：无参数
返回值：数组的引用
是否改变原数据：是

（三）查找最值

JavaScript 数组没有查找最高和最低值的内建函数。

通过排序函数

可通过对数组进行排序，然后使用索引来获得最高或最低值。

Math.max() ， Math.min()

    var arr = [11,2,3];
    var max = Math.max.apply(null,arr); // 11
    var min = Math.min.apply(null,[11,2,3]); // 2
    var max2 = Math.max.apply(arr); // -Infinity

自己定义函数

略……

五、数组的迭代类操作

主要指数组迭代，过滤，按条件查找等操作

除非特别说明，此类函数的 $\color{red}{ **参数** }$ 是一个 $\color{red}{回调函数}$ ，回调函数的参数是

$\color{red}{item（项目值）, index（项目索引）, array（数组本身）}$

（一） forEach()

遍历数组全部元素，利用回调函数对数组进行操作
自动遍历整个数组，且无法break中途跳出循环体
不支持 return 操作输出和结束函数，return只用于结束本轮循环。

返回值：无（函数无返回值时，返回值为 undefined）
是否改变原数据：否
注意区别，我们可以在回调函数内部通过索引值修改数组元素，但是forEach函数不会修改原数组。
应用：
主要用于需要循环遍历每一项数组元素的时候，或者，需要对每一个元素进行相同的操作的时候。

    var arr = [1,2,3,4,5];
    var res = arr.forEach(function (item,index,array) {
        console.log("sss", item);
        array[index] = item + 1; // 通过数组索引改变了原数组；
        return 1; //这里加上这句之后，跳出当前循环，不会跳出函数
        array[index] = item * 10; // 不会执行这句
    });
    console.log(res);//undefined;
    console.log(arr);//[2,3,4,5,6]

image.png

    var arr = [1,2,3,4,5];
    var res = arr.forEach(function (item,index,array) {
        item --;
        console.log("sss", item);
        // array[index] = item + 1; // 通过数组索引改变了原数组；
        // return 1; //这里加上这句之后，跳出当前循环
        // array[index] = item * 10; // 不会执行这句
    });
    console.log(res);//undefined;
    console.log(arr);//[1,2,3,4,5]

可见forEach不会修改原数组，我们操作了item，原数组的元素也不会变，除非通过索引赋值

（二）map()

按照原始数组元素顺序依次操作元素
return 语句结束本轮循环，并将 return语句后面的表达式结果，保存到一个新数组里边

返回值：新数组，与原数组等长
是否改变原数据：否
应用

    var arr = [1,2,3,4,5];
    var resArr = arr.map(function (item) {
        return  -- item; 
        console.log("sss", item); // 不会执行这一步
    });
    console.log("resArr", resArr);//[0,1,2,3,4];
    console.log("arr", arr);//[1,2,3,4,5]

image.png

（三）filter()

filter()方法筛选符合条件的元素，以数组形式输出。

返回值：包含通过测试的数组元素的新数组
是否改变原数组：否
应用：搜索功能，数组去重

（四）reduce()

（五）every()

检测是否所有元素都符合条件的，return false结束函数。每一轮循环默认return false

返回值：
false：默认返回值
true：
是否改变了原数据：否
应用：

    var arr = [1,2,3,4,5,6,7,8];
   
    var everyFlag = arr.every(function(item,index){
        console.log("index2",index);
    });

第一轮循环，默认return false，从而终止了函数

（六）some()

检测 是否所有元素中有符合条件，return true 结束函数。每一轮循环默认return false

返回值：
true：
false：默认返回值
是否改变了原数据：否
应用：

var someFlag = arr.some(function(item,index){
        console.log("index1",index);
});

每一轮循环，默认return false，故没有终止函数直到循环结束函数执行完毕

（七）indexOf()，lastIndexOf()

（八）findIndex()，find()

find() 返回符合条件的第一个元素
兼容性差

2019-08-26JavaScript数组方法总结

一、 将数组转为字符串

（一） toString（）

（二）join()

二、数组的基本操作

（一）通过索引号

（二）push()，pop()

push（[param1], [param2],......,[param n]）

pop()

例子：

（三）shift()，unshift()

unshift（[param1], [param2],......,[param n]）

shift()

例子

（四）splice()

splice实现增删改

（五）delete 运算符

三、数组的其他操作

（一）concat()

（二） slice()

四、数组的排序类操作

（一）sort()

数组排序

对象数组排序

（二）reverse()

（三） 查找最值

通过排序函数

Math.max() ， Math.min()

自己定义函数

五、数组的迭代类操作

（一） forEach()

（二）map()

（三）filter()

（四）reduce()

（五）every()

（六）some()

（七）indexOf()，lastIndexOf()

（八）findIndex()，find()

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、将数组转为字符串

（三）查找最值