JavaScript数组Array的基本操作

Array

定义与基本使用

JS中的数组每一项可以是字符串、数值、对象,大小也是可以动态变化

定义相对基础简单,用实例记忆

构造函数 Array()

var a = new Array();
var b = new Array(10); //定义含有10项数据的数组
var c = new Array('one','two','three');//定义了含三个字符串的数组
//可与省略 new 操作符
var great = {
  name: 'Oh'
}
var d = Array('yes',great,17);
console.log(d)
// (3) ["yes", {…}, 17]
// 0: "yes"
// 1: {name: "Oh"}\
// 2: 17

字面量方式

var a = [];
var b = [1,2,3]; //定义含有3项数据的数组
var c = ['one','two','three'];//定义了含三个字符串的数组
var d = [1,2,]//不建议这样,有的浏览器会创建为 3 个数组项,有的 2 个

简单使用

以数组索引的方式读取和设置数组

var a = [1,2,3];
var b = new Array('one','two','three');
b[3] = 'four';
console.log(a[1])//2
console.log(b[3])//3
console.log(a.length,'-',b.length);//3-4

通过设置length值可以添加新项,添加的新项会被赋值为undefined

若是减小,则索引大于改变后 length值的数组项都不存在,返回 undefined

var a = [1,2,3];
var b = new Array('one','two','three');
a.length = 2;
b.length = 4;
console.log(a[2])//undefined
console.log(b[3])//undefined

b[50] = 'what';
console.log(b.length);//100, 其中 3 到 49都不存在返回 undefined

常用方法

检测数组

由于在多个全局环境中存在构造函数不一样的问题,而instanceof假定为一个全局环境

使用**Array.isArray()**判断一个对象是否是数组

转换方法

toString() , toLocaleString(), valueOf()

  • 数组调用 valueOf() 返回的是数组本身
  • 调用 toString() 返回所有数组项组成的字符串,以逗号分隔,实际上是调用了每一项的 toString() 方法后组成最后的结果
  • 调用 toLocaleString() 与 toString() 一样,也是调用了每一项的 toLocaleString() 方法构成

可以用join方法指定返回的字串以什么字符串样式分隔

  • 若不传入任何值作为分隔符 或者 传入 undefined 则默认用逗号分隔
var a = [1,2,3];
var b = new Array('I','am','Great');

console.log(b.valueOf()); // ["I", "am", "Great"]
console.log(b.toString());// I,am,Great
console.log(b.toLocaleString());// I,am,Great
console.log(b.join(' '));// I am Great
console.log(b.join('%'));// I%am%Great
console.log(b.join(undefined));// I,am,Great

栈方法

模拟栈的操作方式,先进后出,对于数组来说,第一个元素就是栈底,最后一个元素就是栈顶

  • **push()**方法向数组末尾添加一个新项并返回增加后数组的 length 值
  • **pop()**方法删除数组末尾元素,减少数组 length 值,并返回该值
var a = new Array();
console.log(a.push(1,'great'));//2
console.log(a.length);//2
a[2] = {
  name: 'oh'
};
var item = a.pop();
console.log(item);//{name: "oh"}
console.log(a.length);//2

队列方法

先进先出,JS提供了两个方法

  • **shift()**移出数组的第一项,长度减一并返回该值
  • **unshift()**向数组前端添加任意个项并返回改变后数组的长度
var a = new Array(1,2,3);
a.push(4);//进 4
a.shift();//出 1

a.unshift('r','s');// a: s,r,2,3,4

重排序方法

小插曲,比较字符串时,比较两字符串的第一个字符,相等继续比较两字符串的第二个字符,大于小于直接返回,不会管后面的字符

console.log('3'<'6'); //true
console.log('3'<'10'); //false
console.log('3'<'21'); //false
console.log('3'<'34'); //true
console.log('54'<'55'); //true
console.log('54'<'531'); //false

reverse() 反转数组顺序

sort() 默认升序排序,将值当做字符串来比较,即使数值也是这样,但是数值的排序可能会出现上述那种情况所以 sort() 提供了自定义的比较函数

  • 比较函数中接受两个参数,这两个参数一般是要比较数组中的两个值,若是第一个参数应位于第二个参数之前则返回负数,否则返回正数、若是相等返回0
var a = [0,23,10,5,1];
function compare(x1,x2) {
  return x1-x2;//降序排序
}
a.sort(compare);
console.log(a);//[0, 1, 5, 10, 23]

操作方法

**concat()**方法,不传入参数则返回数组副本,否则将参数填至副本末尾

var a = [0,1,2];
var b = a.concat();
var c = a.concat(3,4);
console.log(b);//[0, 1, 2]
console.log(c);//[0, 1, 2, 3, 4]

**slice()**方法,可传入两个参数,第一个参数表示起始位置,第二个参数表示结束位置,不包括第二个参数索引的项。若之传入一个参数,则返回从此参数开始至末尾的所有的项,返回剪切下来的数组

var a = [0,1,2,4,5];
var b = a.slice(1,3);
var c = a.slice(2);
console.log(b);//[1, 2]
console.log(c);//[2, 4, 5]

**splice()**方法

  • 两个参数,参数1指定起始位置,参数2指定删除项数,返回原数组中删除的项
var a = [0,1,2,4,5];
var b = a.splice(1,3);
console.log(a);//[0, 5]
console.log(b);//[1, 2, 4]
  • 三个参数,参数1指定开始位置,参数3指定需要增加的数组项,参数2有 0 和 1 两种情况
  • 0表示从当前开始位置向后插入参数3传入的数组项
  • 1表示先删除参数1指定位置的数组项,再从当前开始位置向后插入参数3传入的数组项
var a = [0,1,2,4,5];
var b = [0,1,2,4,5];
var c = a.splice(1,0,10,13);
var d = b.splice(1,1,10,13);
console.log(a);//[0, 10, 13, 1, 2, 4, 5]
console.log(b);//[0, 10, 13, 2, 4, 5]
console.log(c);//[]
console.log(d);//[1]

位置方法

查找指定项,并返回相应的数组下标,接受两个参数,参数1为要查找的项,参数2代表从哪个下标开始

indexOf() 从头开始

lastIndexOf() 从尾部往前找

var a = [1,2,3,4,5,3]
console.log(a.indexOf(3,3));//5
console.log(a.lastIndexOf(3,3));//2

迭代方法

传入一个给定的函数作为参数,根据该函数的条件返回相应的值

every() 与 some() 方法

  • every() 每一项在给定函数的条件下都返回 true,那么该方法就返回 true,否则为 false
  • some() 只要有任意一项在给定函数的条件下返回 true,那么该方法就返回 true,除非都返回 false才返回 false
var a = [1,2,3,4,5,3]
var e = a.every(function(item,index,array) {
  return (item > 3);
})
console.log(e);//false
var s = a.some(function(item,index,array) {
  return (item > 3);
})
console.log(e);//true

filter() 方法

返回符合给定函数条件的数组项

var a = [1,2,3,4,5,3]
var f = a.filter(function(item,index,array) {
  return (item > 2);
})
console.log(f);//[3,4,5,3]

map() 方法 与 forEach() 方法

map() 用来返回原数组每一项在给定函数条件下的新值组成的数组

var a = [1,2,3,4,5,3]
var m = a.map(function(item,index,array) {
  return (item + 10);
})
console.log(m);//[11,12,13,14,15,13]

forEach() 没有返回值,跟 for 循环类似,可以对每一项值进行操作

var a = [1,2,3,4,5,3]
a.forEach(function(item,index,array) {
  if(item > 2) console.log(item);
})
//3
//4
//5
//3

归并方法

reduce() 方法

逐个遍历从头开始,参数中 prev 与 cur 代表上一个值与当前值,给定函数返回的值都会作为第一个参数作为下一次迭代的参数

reduceRight() 方法与上述一样,只不过从尾部开始,倒过来而已。

var a = [1,2,3,4,5]
var sum1 = a.reduce(function(prev,cur,index,array) {
  if(prev > 3) return prev - cur;
  else return prev + cur;
})
console.log(sum1);
//7

var sum2 = a.reduceRight(function(prev,cur,index,array) {
  if(prev < 3) return prev - cur;
  else return prev + cur;
})
console.log(sum2);
//15

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~

  • 很棒哦~