关于JS数组常用方法的剖析

数组也是对象数据类型的，也是由键值对组成的

var ary = [12,23,34];
/*
 * 结构:
 *  0:12
 *  1:23
 *  2:34
 *  length:3 
 */
1. 以数组作为索引（属性名），索引从零开始递增
2. 有一个LENGTH属性存储的是数组长度

ary[0] 获取第一项
ary[ary.length-1] 获取最后一项

数组中每一项的值可以是任何数据类型的

//=>多维数组
var ary = [
    {
      name:'xxx',
      age:20
    },
    {
      name:'xxx',
      age:20
    }
];

数组中的常用方法

按照四个维度记忆：

方法的作用

方法的参数

方法的返回值

原有数组是否改变

push
作用：向数组“末尾”追加新的内容
参数：追加的内容（可以是一个，也可是多个）
返回值：新增后数组的长度
原有数组改变

var ary = [12,23,34];
ary.push(100); //=>4  ary:[12,23,34,100]
ary.push(100,{name:'xxx'}); //=>6  ary:[12,23,34,100,100,{...}]

pop
作用：删除数组最后一项
参数：无
返回：被删除的那一项内容
原有数组改变
Alt text

shift
作用：删除数组中的第一项
参数：无
返回：被删除的那一项内容
原有数组改变
Alt text

unshift
作用：向数组开始位置追加新内容
参数：要新增的内容
返回：新增后数组的长度
原有数组改变
Alt text

splice
基于 SPLICE可以对数组进行很多的操作：删除指定位置的内容、向数组指定位置增加内容、还可以修改指定位置的信息

1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数)
2.插入-向数组指定位置插入任意项元素。三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项)
3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)

删除：ary.splice(n,m)
从索引n开始，删除m个内容，把删除的部分以一个新数组返回，原有数组改变
Alt text

新增：ary.splice(n,0,x,...)
从索引n开始删除零项（没删除），把X或者更多需要插入的内容存放到数组中索引N的“前面”
Alt text

修改：ary.splice(n,m,x,...)
修改的原理就是把原有内容删除掉，然后用新的内容替换这部分信息即可
Alt text

扫描二维码关注公众号，回复： 7512074 查看本文章

需求扩展：

删除数组最后一项，你有几种办法?

向数组末尾追加新内容，你有几种办法?

//=>删除最后一项
ary.pop()
ary.splice(ary.length-1)
ary.length--

//=>向数组末尾追加新内容
ary.push(100)
ary.splice(ary.length,0,100)
ary[ary.length]=100

Alt text

slice
作用：在一个数组中，按照条件查找出其中的部分内容
参数：两个参数（n/m），从索引n开始，找到索引m处，但是不包含m
返回：以一个新数组存储查找的内容
原有数组不会变
Alt text

concat
作用：实现多个数组(或者值)的拼接
参数：数组或者值
返回：拼接后的新数组
原有数组不变
Alt text

toString
作用：把数组转换为字符串
参数：无
返回：数组中的每一项用逗号分隔的字符串
原有数组不变

join
作用：和toString类似，也是把数组转换为字符串，但是我们可以设置变为字符串后，每一项之间的连接符
参数：指定的链接符
返回：字符串
原有数组不变
Alt text

reverse
作用：把数组倒过来排列
参数：无
返回：排列后的新数组
原有数组改变
Alt text

sort
作用：给数组排序
参数：无/函数
返回：排序后的新数组
原有数组改变

//=>sort在不传递参数的情况下，只能处理10以内数字排序
var ary=[1,3,2,4,5,6,7,9,8];
ary.sort(); =>[1,2,3,4,5,6,7,8,9]

var ary=[18,1,23,27,2,35,3,56];
ary.sort(); =>[1, 18, 2, 23, 27, 3, 35, 56] 没有按照我们想象中的排序

//=>真实项目中，基于sort排序，我们都需要传递参数
var ary=[18,1,23,27,2,35,3,56];
ary.sort(function (a,b){
    return a-b;//=>升序  return b-a; 降序
});

indexOf / lastIndexOf
这两个方法不兼容IE低版本浏览器(IE6~8)
作用：检测当前值在数组中第一次或者最后一次出现位置的索引
参数：要检测的值
返回：索引
原有数组不变
Alt text

//=>验证数组中是否包含某一项
if(ary.indexOf(100)>-1){
   //=>ARY中包含100这一项
}

除了以上方法，数组中还包含很多常用的方法（Array.prototype）

every
filter
find
forEach
includes
keys
map
reduce / reduceRight
some
...

第一阶段咱们不深入研究这些方法，搞懂这些方法需要了解OOP/作用域/回调函数等，第二阶段咱们在去研究这些

Web全栈-JavaScript-笔记4

关于JS数组常用方法的剖析

数组中的常用方法

猜你喜欢