数组
索引 从0开始的整数 存储性能比对象好 数组也是一个对象和普通对下个类似
- 找对象
- 搞对象
数组的基本操作
//1.创建对象-构造函数的方法
var arr = new Array();
console.log(typeof arr);//object
// 2.向数组中添加元素 语法： 数组[索引] = 值
arr[0] = 1;
arr[1] = 22;
arr[2]= 33;
console.log(arr);
//3.读取元素 语法： 数组[索引]
console.log(arr[1]);
console.log(arr[10]);//undefined
//4.获取连续的数组的长度(元素的个数) 语法：数组.length
//使用非连续的数组 ，使用length会获取最大索引+1
console.log(arr.length);
//5.修改length的值 语法： 数组.length = 数值
//1、若长度大于原始长度，则会增加数组元素：空白
arr.length = 4;
console.log(arr.length);//4
console.log(arr);//(4) [1, 22, 33, 空白]
//2.若长度小于原始长度，则数组多出部分会被截断
arr.length = 1;
console.log(arr.length);//1
console.log(arr);//[1]
//6.向数组的最后一个位置添加位置 语法： 数组[数组.length]=元素
arr[arr.length] = 44;
console.log(arr); //(4) [1, 22, 33, 44]
字面量创建数组
//使用字面量来创建数组
var arr = [];
console.log(arr);
var arr1 = [1, 2, 3];
console.log(arr1);
//使用构造函数的方法创建数组，也可以同时添加元素
var arr2 = new Array(12, 232, 2, 23);
console.log(arr2);//(4) [12, 232, 2, 23]
//区别两种方法针对于只添加一个元素时
var arr3 = [10];
console.log(arr3);//[10] 数组中只有一个元素10
var arr4 = new Array(10);
console.log(arr4);//(10) [空属性 × 10] 数组的长度为10个空元素
console.log(arr4.length);//10
数组元素可以任意类型
//数组元素可以是任意类型
var obj = {
name: "haha"
}
var arr = [19, 'hello', null, true, undefined, obj];
arr = [{ name: "沙和尚1" }, { name: "沙和尚2" }, { name: "沙和尚3" }]
arr[arr.length] = function () {
alert('hello');
}
arr[arr.length - 1]();
arr[arr.length] = [1, 2, 3];
console.log(arr);
数组的方法
//数组的方法
// 1. push()向数组中末尾添加一个或多个元素 区别：arra[arr.length]只能添加一个
//并返回数组新长度
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "白龙马");
console.log(arr);//(5) ['孙悟空', '猪八戒', '沙和尚', '唐僧', '白龙马']
console.log(result); //5 返回的是新数组的长度
//2.pop()可以删除数组的最后一个元素 -调用一次删除一次
//并返回删除元素
arr.pop();
console.log(arr); (4)['孙悟空', '猪八戒', '沙和尚', '唐僧']
var result1 = arr.pop();
console.log(arr); (3)['孙悟空', '猪八戒', '沙和尚']
console.log(result1);//唐僧 返回删除的是什么元素
//3. unshift() 向数组的开头添加一个或多个元素 注意：其他索引会重新调整
//并返回数组新长度
console.log(arr);//(3) ['孙悟空', '猪八戒', '沙和尚']
arr.unshift("牛魔王", "蜘蛛精");
console.log(arr);//(5) ['牛魔王', '蜘蛛精', '孙悟空', '猪八戒', '沙和尚']
//4. shift() 删除数组中的第一个元素
//并返回删除元素
arr.shift();
console.log(arr);//(4) ['蜘蛛精', '孙悟空', '猪八戒', '沙和尚']
遍历数组
//遍历数组 创建多个Person实例，存为数组对象，并筛选出满足条件的元素保存在新的数组中
var arr = ["孙悟空", "猪八戒", "沙和尚", "蜘蛛精"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//数组中根据条件筛选元素
var per1 = new Person("猪1", 13);
var per2 = new Person("猪2", 14);
var per3 = new Person("猪3", 12);
var per4 = new Person("猪4", 18);
var perArr = [per1, per2, per3, per4];
//不满18岁的person封装到新的数组中返回
function getChild(arr) {
var newArr = [];
for (i = 0; i < arr.length; i++) {// 遍历每一个数组中的元素
var p = arr[i];
if (p.age < 18) {//每一个元素（对象）的age进行判断
newArr.push(p);//添加到新的数组中去
}
}
return newArr; //返回新数组
}
var result = getChild(perArr);
console.log(result);
forEach方法 --- ie8及以下不支持
- 需要一个函数作为参数
- 像这种函数，由我们创建不是我们调用的（浏览器调用的），我们称为回调函数
- 数组中有几个元素，函数就会执行几次，每次执行时，浏览器会遍历道德元素以实参的形式传递进来，我们可以来定义形参，读取这些内容
- 浏览器中在回调中会传递3个参数，(正在遍历的元素，正在遍历的索引，正在遍历的数组)
var arr = ["猪八戒", "孙悟空", "沙和尚", "白龙马"];
arr.forEach(function (a, b, c) {
console.log(a, b, c);
/*
猪八戒 0 (4) ['猪八戒', '孙悟空', '沙和尚', '白龙马']
孙悟空 1 (4) ['猪八戒', '孙悟空', '沙和尚', '白龙马']
沙和尚 2 (4) ['猪八戒', '孙悟空', '沙和尚', '白龙马']
白龙马 3 (4) ['猪八戒', '孙悟空', '沙和尚', '白龙马']
*/
})
slice()
- 可以在数组中提取指定元素
- 参数：(开始索引，结束索引+1)
- 结束索引可以省略，取到最后为止
- 参数可以负数，-1表示倒数第一个为止，-2 表示倒数第二个为止
- 该方法不会改变原数组，而是提取到新数组返回
var arr = ["猪八戒", "孙悟空", "沙和尚", "白龙马"];
var newArr = arr.slice(0, 2);
console.log(newArr);//['猪八戒', '孙悟空']
var newArr1 = arr.slice(1);
console.log(newArr1);//['孙悟空', '沙和尚', '白龙马']
var newArr3 = arr.slice(1, -1);
console.log(newArr3);//['孙悟空', '沙和尚']
splice()
- 可用于删除数组中的指定元素
- 会影响原数组，将指定元素在原数组中删除，删除元素作为返回值返回
- 可以3个参数 (开始位置索引，删除的数量，传递新的元素（放在开始位置索引之前）)
var arr = ["猪八戒", "孙悟空", "沙和尚", "白龙马"];
// var result = arr.splice(0, 2);
// console.log(result);// ['猪八戒', '孙悟空']
// console.log(arr);// ['沙和尚', '白龙马']
// var result = arr.splice(1, 2);
// console.log(arr);//['猪八戒', '白龙马']
// console.log(result);//['孙悟空', '沙和尚']
// arr.splice(0, 1, "牛魔王", "铁扇公主");
// console.log(arr);//['牛魔王', '铁扇公主', '孙悟空', '沙和尚', '白龙马']
arr.splice(0, 0, "白骨精");
console.log(arr);//['白骨精', '猪八戒', '孙悟空', '沙和尚', '白龙马']
数组去重
var arr = [5, 5, 1, 2, 1, 1, 4, 4, 3, 2];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;//后面的元素会自动补位，所以需要再重复比较一此此位置；
}
}
}
console.log(arr);
数组的剩余方法
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
var arr4 = [3, 11, 5, 2, 7, 6, 3, 8, 9, 8, 12];
concat()
合并数组或元素
var result = arr1.concat(arr2, arr3, 999, "数据");
console.log(result);
console.log(arr1);//不会对原数组产生影响
join()
转为字符出串或改变字符之间的分隔符
var result1 = arr1.join();
console.log(result1);//1,2,3
console.log(typeof result1);//string
var result2 = arr1.join("-");
console.log(result2);//1-2-3
var result3 = arr1.join("");
console.log(result3);//123
reverse()
将原数组进行转置
arr1.reverse();
console.log(arr1);//[3, 2, 1] 对原数组产生影响
sort()
数组排序 ——默认按照Unicode升序
arr4.sort();
console.log(arr4);// [11, 12, 2, 3, 3, 5, 6, 7, 8, 8, 9]
可以用回调函数来自己指定排序规则
回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用
使用哪个元素不确定，但是肯定数组中 a在b的前面
- 浏览器会根据函数返回值的不同来决定元素的顺序
- 若返回一个>0 的值，元素交换；
- 若返回一个<0 的值，元素不交换；
- 若返回一个0，则认为两个元素相等，也不会交换；
//升序
arr5 = [5, 4, 12, 3, 6, 8, 7, 11];
arr5.sort(function (a, b) {
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
})
console.log(arr5);//[3, 4, 5, 6, 7, 8, 11, 12]
//降序
arr6 = [5, 4, 12, 3, 6, 8, 7, 11];
arr6.sort(function (a, b) {
if (a > b) {
return -1;
} else if (a < b) {
return 1;
} else {
return 0;
}
})
console.log(arr6);//[12, 11, 8, 7, 6, 5, 4, 3]
//优化
arr6.sort(function (a, b) {
return a - b;//升序
})
console.log(arr6);//[3, 4, 5, 6, 7, 8, 11, 12]
arr6.sort(function (a, b) {
return b-a;//降序
})
console.log(arr6);//[12, 11, 8, 7, 6, 5, 4, 3]
