JavaScript基础学习-数组方法

Array中的方法

四个方面去学习数组的方法

  • 方法的作用
  • 是否传递参数
  • 有没有返回值
  • 原数组是否发生改变

注意: 类数组:类似于数组,但不是数组。有length属性

1、通过getElementsByTagName获取的元素集合是类数组
2、函数中的实参集合arguments也是类数组

数组中的方法分类

一、增加、删除、修改

ary.push()

  • 作用:向数组末尾增加一项
  • 参数:增加谁就传递谁
  • 返回值:返回新增数组的长度
  • 原有数组发生改变

其他类似方法:ary[ary.length]=value; ary.splice(ary.length-1,0,value)

ary.pop()

  • 作用:删除数组的第最后一项
  • 参数:没有参数
  • 返回值:返回被删除的那一项,这一项数据类型就是啥
  • 原有数组发生改变

其他类似方法:ary.length--; ary.splice(ary.lenght-1,1)

ary.shift()

  • 删除数组的第一项
  • 没有参数
  • 返回被删除的那一项
  • 原有数组发生改变

ary.unshift()

  • 向数组开头增加一项
  • 增加谁就传递谁
  • 返回新增数组的长度
  • 原有数组发生改变

其他类似方法:ary.splice(0,0,x)

ary.splice()

可以实现增删改

删除功能 ary.splice(n,m)
  • 从索引n开始删除m个 (包括索引n那一项)
  • 参数:n索引,m个数
  • 返回值:被删除的内容以一个新数组返回
  • 原有数组发生改变
  • 只传n值:从n开始删除到末尾
  • n=0:将原有数组删除,克隆一个一模一样的数组返回
  • 删除一项:ary.splice(n,1),删除索引为n的这一项
  • 删除从索引n到索引为m之间的值,splice(n,(m-n)+1)
替换功能 ary.splice(n,m,x)
  • 从索引n开始删除m个,用x替换删除的内容
  • 参数:n,m,x(x值可以有多个,从索引n前一项依次增加)
  • 返回值:被删除的内容以一个新数组返回
  • 原有数组发生改变
增加功能 ary.splice(n,0,x)
  • 在索引n前面增加一项
  • 参数:n,0,x(x值也可以有多项)
  • 返回值:返回一个空数组
  • 原有数组发生改变

数组的截取和拼接

截取 ary.slice(n.m)
  • 从索引n开始找到索引m处(不包含m)
  • 参数:n,m
  • 返回值:将找到的内容以新数组返回
  • 原有数组不变
  • 如果只有一个参数ary.slice(n)---从索引n开始找到末尾
  • slice(0)/slice()----克隆一份,原数组不变
  • 获取数组中第n项到第m项的数组,原有数组不变----slice(n-1,m)
  • 从索引n开始,截取m个。slice(n,n+m)
  • Array.prototype.slice.call(arg) 可以将一个类数组转换成数组 但不可以是元素集合
  • slice截取是浅拷贝:意思就是,数组中如果有引用数据类型,这时截取出来的是一个空间地址,而不是具体的值。如果在之后,对这个引用数据进行改变。则对应的截取出来的值也会变化
拼接 ary.concat()
  • 数组拼接
  • 参数:要拼接的数组名或一个具体的数组
  • 返回值:n个数组拼接后的新数组,谁写在前面谁就在前面
  • 原数组不变
  • 当不传递参数的时候,克隆一份
    利用push可以实现数组的合并
  var array = ["football", "basketball"];
var array2 = ["volleyball", "golfball"];
var i = Array.prototype.push.apply(array,array2);
console.log(array); // ["football", "basketball", "volleyball", "golfball"]
console.log(i); // 4

将数组转变为字符串

ary.toString()
  • 将数组的每一项以逗号相隔,成为一个字符串
  • 参数:没有
  • 返回值:一个字符串
  • 原有数组没有改变

当数组直接和字符串作连接操作时,将会自动调用其toString()方法。

  var str = ['aa', 'bb', 'cc', 'dd'] + ',ee';
console.log(str); // "aa,bb,cc,dd,ee"
ary.join()
  • 给每一项内容之间添加一个分隔符,以字符串的形式返回
  • 参数:分隔符('+')/('-')/('*')等等。缺省默认为逗号
  • 返回值:以字符串的形式返回
  • 原有数组没有改变

排序

ary.sort()
  • 只能排序0~9之间的数,否则它会以数字的第一个字为基础进行排序
  • 参数:没有
  • 返回值:排序好的数组
  • 原数组发生改变
  • 数组从小到大排序 ary.sort(function(a,b){ return a-b})
  • 数组从大到小排序 ary.sort(function(a,b){ return b-a})
  • 如果数组的内容不是数字,而是字母或者是汉字
    ary.sort(function(a,b){return a.localCompare(b)})
ary.revers()
  • 把数组倒过来排序,原来的数组改变

不兼容的方法

indexOf()
  • 在数组中第一次出现的索引
  • 参数:数组中的值
  • 返回:参数对应的索引
  • 原有数组不发生改变
lastIndexOf()
  • 在数组中最后一次次出现的索引
  • 参数:数组中的值
  • 返回:参数对应的索引
  • 原有数组不发生改变

ES6新增的构造函数方法

构造器相关API

Array.of

Array.of用于将参数一次转化为数组中的一项,然后返回这个新数组,而不管这个参数是数字还是其他。它基本上与Array构造器功能一致,唯一的区别就在单个参数的处理。

与Array的不同
    Array.of(8); // [8]
    Array(8); // [undefined x 8]。在Array的单个参数为数字时,创建一个数组长度为传进来的数值的数组,每一项都为undefined.

Array.from

语法:Array.from(arrayLike[, processingFn[, thisArg]])

可以从一个类似数组的可迭代对象创建一个新的数组实例,返回一个新的数组,并不改变原数组。

其拥有三个参数,第一个为类似数组的对象,必选。第二个为加工函数,新生的数组会经过该函数的加工再返回。第三个为this作用域,表示加工函数执行时this的值。

当适用加工函数时,默认会有两个形参,值和索引。并且必须明确指定返回值,否则将隐式的返回undefined

拥有迭代器的对象还包括:String、Set、Map、arguments。

Array.isArray()

判断一个变量是否是一个数组。判断是否是一个数组的方法:

 var a = [];
// 1.基于instanceof
a instanceof Array;
// 2.基于constructor
a.constructor === Array;
// 3.基于Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4.基于getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5.基于Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';

除了第五种,其他都不可靠。

prototype原型上的方法

改变自身的方法

copyWithin方法

用于数组内元素之间的替换,即替换的元素和被替换元素均是数组内的元素。

语法:arr.copyWithin(target, start[, end = this.length])

taget指定被替换元素的索引,start指定替换元素起始的索引,end可选,指的是替换元素结束位置的索引。

如果start为负,则其指定的索引位置等同于length+start,length为数组的长度。end也是如此

注意: 目前只有FireFox(32以上)实现了该方法。

var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2); // true [4, 5, 3, 4, 5]
var array = [1,2,3,4,5]; 
console.log(array.copyWithin(0,3,4)); // [4, 2, 3, 4, 5]
var array = [1,2,3,4,5]; 
console.log(array.copyWithin(0,-2,-1)); // [4, 2, 3, 4, 5]
fill方法

与copyWidthin类似,不同之处就是,它主要用于将数组指定区间内的元素替换为某个值。

不改变自身的方法

includes(ES7)

它用来判断当前数组是否包含某个特定的值,如果是则返回true,否则返回false.

语法:arr.includes(element, fromIndex=0)

element为需要查找的元素

fromIndex表示从该索引位置开始查找element,缺省为0,它是正向查找,即从索引处往数组末尾查找。

与indexOf方法的区别就是includes可以发现NaN.

var array = [NaN];
console.log(array.includes(NaN)); // true
console.log(arra.indexOf(NaN)>-1); // false

引用来源

【深度长文】JavaScript数组所有API全解密-->路易斯

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容