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全解密-->路易斯