跳到主要内容

数组

1、数组定义

通过字面量定义数组

var arr = [10,20,30]; 

通过构造函数定义数组

var arr = new Array(参数); 
// 参数位置为一个数值时为数组长度,多个数值时为数组中的元素。
// 如果没有参数的时候 Array后面的括号可以省略。

2、数组操作

  1. 数组长度: 数组名.length;

问:数组中存储的数据类型一定是一样的吗?

类型可以不一样。

问:数组的长度是不是可以改变呢?

可以改变。

3、数组高级API

3.1、判断数组和转换数组

instanceof // 是一个关键字,判断A是否是B类型:A instanceof B。
isArray() //HTML5中新增 ,判断是不是数组
toString() //把数组转换成字符串,每一项用,分割
valueOf() //返回数组对象本身
join(变量) //根据每个字符把数组元素连起来变成字符串,变量可以有可以没有。不写变量默认用逗号分隔,无缝连接用空字符串。

instanceof

var str1 = new String("abc");
var str2 = "abc";
console.log(str1 instanceof String); // true
console.log(str2 instanceof String); // false str2不是String对象

join

//join是把数组元素用特殊方式链接成字符串(参数决定用什么链接,无参默认用逗号链接)
var arr = ["关羽","张飞","刘备"];
var str1 = arr.join();
var str2 = arr.join(" ");//如果用空格的话,那么元素之间会有一个空格
var str3 = arr.join("");//用空字符串,链接元素,无缝连接
var str4 = arr.join("&");

console.log(str1); // 关羽,张飞,刘备
console.log(str2); // 关羽 张飞 刘备
console.log(str3); // 关羽张飞刘备
console.log(str4); // 关羽 & 张飞 & 刘备

arguements

只在函数中使用,代表传入实参的数组。

arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)

fn(1,2);
fn(1,2,3);
fn(1,2,3,4,5);
function fn(a,b){
//只在函数中使用,实参的数组。
arguments[0] = 0; // 可以修改内容
console.log(arguments);
//伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)
arguments.push(1); // 报错:arguments是伪数组没有push方法,可以用来辨别真伪数组。
console.log(arguments instanceof Array); // false

//形参个数
console.log(fn.length);
//实参个数
console.log(arguments.length);
// 形参和实参个数可以不同,因为实参传入的时候可以形参的个数不一样。

// arguments.callee相当于函数名,这里打印整个函数。
console.log(arguments.callee);
}

3.2、数组增删和换位置(原数组将被修改)

push

向数组的末尾添加一个或更多元素,并返回数组的长度

注意: 新元素将添加在数组的末尾。

注意: 此方法改变数组的长度。

在数组起始位置添加元素请使用 unshift() 方法。

pop

删除数组的最后一个元素并返回删除的元素

注意:此方法改变数组的长度!

移除数组第一个元素,请使用 shift() 方法。

push() //在数组最后面插入项,返回数组的长度
//数组1改后的长度 = 数组.push(元素1);

pop() //取出数组中的最后一项,返回最后一项
//被删除的元素 = 数组.pop();

unshift() //在数组最前面插入项,返回数组的长度
//数组1改后的长度 = 数组.unshift(元素1);

shift() //取出数组中的第一个元素,返回第一项
//被删除的元素 = 数组.shift();

reverse

翻转数组(原数组讲被反转,返回值也是被反转后的数组)

使用方法:反转后的数组 = 数组.reverse();

sort

给数组排序(只能通过第一位字母或数字的 unicode 编码进行排列),返回排序后的数组。

var arr2 = [7,6,15,4,13,2,1];
console.log(arr2); // 7,6,15,4,13,2,1
console.log(arr2.sort()); // 1,13,15,2,4,6,7

解决:sort方法不稳定,设计的时候就是这么设计的,可以通过回调函数进行规则设置。

console.log(arr2);
console.log(arr2.sort(function (a,b) {
return a-b; //a-b,从小到大排序,如果是b-a则从大到小排序
}));

4、迭代方法

作用:代替 for 循环。

forEach(遍历用)

特点:无返回值,纯遍历数组中的元素。

注意:不能使用element直接修改数组的元素,可以使用arr[index]来修改。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var str = "";

// function (element,index,array)
// element:数组元素的值
// index:索引
// array:调用这个方法的整个数组对象(一般不用)

arr.forEach(function (ele,index,array) {
str+=ele;
});
console.log(str); // 关长张飞赵子龙马超黄忠

注意:

只写一个参数就是 element;

写两个参数就是 element 和 index

写三个参数就是: element 和 index 和 array本身。

map(遍历用)

map有返回值,返回什么都添加到新数组中。

注意:map可以直接使用ele修改数组里面的值。这是与forEach的区别,

还有一个区别是map有返回值,而forEach没有。

特点:遍历数组使用。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr2 = arr.map(function (ele,index,array) {
return ele+"你好";
})

console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]

every

返回值是一个 boolean 类型值。而参数是一个回调函数。 参数有三个。名字随便起,但是表示的意思还是这样顺序的。

特点:只要有一个不满足条件,就返回false。

var arr = ["青花瓷", "一路向北", "轨迹"];
var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false
return ele.length > 2;
});

console.log(flag); // false

some

特点:如果函数结果有一个是true,那么some方法结果也是true。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var flag = arr.some(function (ele,index,array) {
if(ele.length>2){
return true;
}
return false;
})

console.log(flag); // true

filter

filter 返回值是一个新数组。

特点:返回一个返回值为 true 的新数组。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr1 = arr.filter(function (ele,index,array) {
return ele.length > 2;
});

console.log(arr1); // ["赵子龙"]

reduce

reduce()方法对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。

特点:按照某种规律遍历数组。

var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(a,b){
return a-b; // 1-2-3-4-5 = -13
});

reduceRight

特点:从右开始执行某种规律。

var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(a,b){
return a-b; // 5-4-3-2-1 = -5
});

5、了解方法

concat()

把参数数组拼接到当前数组。 举个🌰:新数组 = 数组1.concat(数组2);

slice()

从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始。 举个🌰:新数组 = 数组1.slice(startIndex,endIndex);

indexOf()、lastIndexOf()

查找数组中有没有某个元素,找到了返回这个元素在数组中的索引,如果没找到返回-1。 举个🌰:索引值 = 数组.indexOf/lastIndexOf(数组中的元素);

delete

删除数组中的某个值。

特点:只删除值,不删除位置,删除后原位置的值为 undefined。

splice() --- 增删改

增加,删除或替换当前数组的某些元素。影响原来的元素。 举个🌰:新数组 = 数组1.splice(起始索引,删除个数 [,替换内容,替换内容,...]);

var arr = [1, 2, 3, 4, 5];
// 增
arr.splice(1, 0, 'a', 'b', 'c'); // 1,a,b,c,2,3,4,5
// 删
arr.splice(1, 2); // 1,4,5
//改
arr.splice(1, 3, 'a', 'b', 'c'); // 1,a,b,c,5

6、清空数组

var array = [1,2,3,4,5,6];

// 方法一:删除数组中所有项目(替换的内容为空)
array.splice(0,array.length);

// 方法二:length属性可以赋值,其它语言中length是只读
array.length = 0;

// 方法三:
array = []; //推荐

7、区分伪数组和真数组

// 真数组
var arr = [10,20,30];
// 伪数组
var obj = {
0:10,
1:20,
2:30,
length: 3
};
// 真数组的访问
for(var i=0; i<arr.length; i++) {
console.log("真数组的访问:"+arr[i]);
}
// 伪数组的访问
for(var j=0; j<obj.length; j++) { // 错误:对象中没有length方法
console.log("伪数组的访问:"+obj[j]);
}

方法1、使用 length 来区分

这样看起来,真数组和伪数组就没法区别了。

但是真数组的长度 length 可以改变,伪数组不可以,貌似可以区分了。

但是,你还记得有个 arguement 这个伪数组(对象)的 length 是可以改变的,方法一区分失败。

其实 childNodes 也是伪数组。

方法2、使用数组的方法来鉴别

因为每个数组都是 Array 的实例对象,而 forEach 等在 Array 的原型对象中,所以其他的伪数组是不能使用的。方法二成功。

方法3、Array.isArray(数组); // 真数组返回 true,伪数组返回 false。

方法4、

伪数组 instanceof Array === false;

真数组 instanceof Array === true;

方法5、

Object.prototype.toString.call(伪数组) === "[object Object]";

Object.prototype.toString.call(真数组) === "[object Array]"