JavaScript基础知识-数组

剑来丶阿良
910 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

笔者工作也有几年了的，从没有好好的整理数组的基础知识，希望自己通过对基础知识的整理，能够在以后变得强大吧，也感谢莎老板的鼓励。此篇就是整理下基础的用法。

对于数组的方法要记住的：

  • 方法的作用和含义
  • 方法的实参(类型和含义)
  • 方法的返回值
  • 原数组是否会发生改变

1.数组中能够进行增、删、改、查的方法：

1.这一部分方法都会修改原有数组:

push：向数组末尾增加内容

  • @params:

    • 多个任意类型

  • @return:

    • 新增后的数组长度
let arr = [1,2,3,4,5,6,7,8];
let pushRes = arr.push('测试push方法');
console.log('pushRes',pushRes) //9
console.log([1,2,3,4,5,6,7,8,'测试push方法']);

此外，这种也可以实现数组末尾追加元素--arr.[arr.length] = '向数组末尾追加'

unshift：向数组的开始增加内容

  • @params：

    • 多个任意类型

  • @return:

    • 新增后数组长度

unshift代码实例同push

基于es6展开运算符，把原有的arr克隆一份，在新的数组中创建第一项，其余项的内容使用原始arr中的信息即可

arr = ['测试开头插入',...arr];

shift：删除数组中的第一项

  • @params:

    • 无

  • @return:

    • 删除的那一项
let arr = [1,2,3,4,5,6,7,8];
arr = ['测试开头插入',...arr];
console.log('我是shift返回结果',arr.shift()); // '测试开头插入'

需要注意的是基于原生js中的delete，delete arr[0]只会让数组的指定项为空,并不会改变数组的length长度

pop:删除数组中的最后一个

  • @params：

    • 无

  • @return:

    • 删除的那一项

基于原生js，让数组长度减少一位：arr.length --

splice：能够实现数组的增加、删除和修改

  • @params:

    • n,m（均为数字）,x--从所以n开始,删除m个元素，用x占用删除的部分
    • n,0,x--从索引n开始，一个都不删，把x放到索引n的前面
    • 只传n--从n开始,删除到结尾

  • @return:

    • 把删除的部分用新数组存储起来返回
//删除
let arr1 = [1,2,3,4,5,6,7,8,9];
let spliceRes = arr1.splice(1,5);
console.log('spliceRes的返回值',spliceRes); // [2, 3, 4, 5, 6]
console.log('原始数组',arr1); // [1,7,8,9];
​

arr.splice(0)可以清空原数组，把原始数组的内容，以新数组存储起来（有点类似数组的克隆，把原来的数组克隆一份一模一样的给新数组）

删除数组的第一项:arr.splice(0,1);

删除数组的最后一项:arr.splice(arr.length-1);

向数组arr开始追加:arr.splice(0,0,'追加元素')

向数组arr末尾追加:arr.splice(arr.length-1,0,''追加的元素)

2.数组的查询和拼接：

下面的数组方法，不会改变原数组

slice：数组分割

  • @params

    • n，m都是数字---从索引n开始,找到所以为m的地方（不包含m项）
    • n：只写n会找到末尾

  • @return

    • 把找到的内容以一个新数组的形式返回
let arr2 = [1,2,3,4,5,6];
let sliceRes = arr2.slice(1,3);
console.log('我是sliceRes',sliceRes); // [2, 3]

slice实现数组的克隆，参数0不写也可以：let cloneArr = arr.slice();

concat:数组拼接

  • @params

    • 多个任意类型值

  • @return

    • 拼接后的新数组（原数组不变）
let arr3 = [1,23,4,5,6,7];
let arr4 = ['拼接内容1'];
let str = 'love coding';
​
let concatRes = arr3.concat(str,arr4);
console.log('concatRes',concatRes);
​
//结果如下:
[
    1,
    23,
    4,
    5,
    6,
    7,
    "love coding",
    "拼接内容1"
]

3.把数组转化为字符串：

toString:把数组 => 字符串

  • @params

    • 无参数

  • @return

    • 转换后的字符串,这里注意下的是，toString()字符串，每项用逗号","分隔
// toString();
​
let arr5 = [1,2,3,4,5];
const toStrRes = arr5.toString();
console.log('我是toStrRes',toStrRes)
​
//我是toStrRes 1,2,3,4,5

join:把数组 => 字符串

  • @params

    • 指定的分割符(字符串格式)

  • @return

    • 转换后的字符串(原数组不变)
// join();
​
let arr6 = [1,2,3,4,5,6];
const joinRes = arr6.join(',');
console.log('我是joinRes',joinRes);
​
// 我是joinRes 1,2,3,4,5,6

eval可以把字符串变为js表达式

4.检测数组中是否包含某项：

indexOf/lastIndexOf:检测出当前项，在数组中第一次或者最后一次出现位置的索引值

  • @params

    • 要检索的这一项内容

  • @return

    • 这一项出现的位置的索引值(数字),如果数组中没有这一项，返回结果是-1

  • 此外还需要注意，此方法在ie6~8中不兼容

//indexOf
​
let arr7 = [1,2,3,4,5,6];
const indexOfRes = arr7.indexOf(1);
console.log('我是indexOfRes',indexOfRes); // 0

通过对indexOf返回值结果是否>= 0,从而判断数组中是否罕有某个值

includes:检测出数组中是否有当前项

  • @params：

    • 要检索的内容

  • @return:

    • true/false

  • 同样的，还需要注意，此方法在ie6~8中不兼容

//incluedes
​
let arr8 = [1,2,3,4,5,6];
const includesRes = arr8.includes(6);
console.log('我是includes',includesRes); // true

此篇为第一篇--数组基础知识整理，希望自己的知识能连成体系，第二篇将整理工作中常遇到的数组转树、多找多以及reduce的用法和小技巧

avatar
文章
阅读
粉丝