JavaScript系列---【数组对象--知识总结】
数组对象
存储任意数据的集合
1.数组对象的创建
- 字面量 []
var arr = [10, 20, 30];
- 构造函数 new Array();
//通过构造函数方式可以传递参数
//单个数值 设置当前这个数组的长度，以empty进行占位
var arr2 = new Array(10);
console.log(arr2); //[empty × 10]
// 传递多个参数 (设置数组中数据)
var testArr = new Array(10, "哈哈", "呵呵", {
name: "你好"
}, "hello");
console.log(testArr);
// 在数组中添加数据（设置）
arr2[0] = 100;
// 获取
console.log(arr2[0]);
var arr3 = [10, 20, 30, 100, 200, 2, 7, 8, 9];
// 设置数组的长度
// length：数组的长度 （可读可写）
arr3.length = 100;
console.log(arr3);// [10, 20, 30, 100, 200, 2, 7, 8, 9, empty × 91]
// 删除数组末尾最后一项
var arr4 = [10, 20, 30, 100, 200, 300];
arr4.length--;
console.log(arr4);//[10, 20, 30, 100, 200]
// 设置可以放多个数据
arr4.length = 2;
console.log(arr4);//[10, 20]
2.数组对象的属性和方法
数组对象属性
- length：数组的长度 （可读可写）
- 获取：获取当前数组的长度
- 设置：规定数据长度（可以放多少条数据）
数组增加修改和删除
-
push(参数,参数,...);
- 作用：在数组末尾进行增加
- 参数：需要传递，可以传递一个也可以传递多个
- 原来数组是否被改变：改变
- 返回值：改变后数组的长度
var arr1 = [10, 20, 30, 100, "哈哈"];
var resArr1 = arr1.push(100, "你好");
console.log(arr1); //[10, 20, 30, 100, "哈哈", 100, "你好"]
console.log(resArr1); //7
-
pop();
- 作用：在数组末尾进行删除（每次删除一个）
- 参数：无
- 原来数组是否被改变：改变
- 返回值：删除的那个数据
var arr2 = [10, 20, 30, 100];
var resArr2 = arr2.pop();
console.log(arr2);//[10, 20, 30]
console.log(resArr2);//100
-
unshift(参数,参数,...);
- 作用：在数组开头进行增加
- 参数：需要传递，可以传递一个也可以传递多个
- 原来数组是否被改变：改变
- 返回值：改变后数组的长度
var arr3 = [10, 20, 30, 100, "哈哈"];
var resArr3 = arr3.unshift(100, "你好");
console.log(arr3);//[100, "你好", 10, 20, 30, 100, "哈哈"]
console.log(resArr3);//7
-
shift();
- 作用：在数组开头进行删除（每次删除一个）
- 参数：无
- 原来数组是否被改变：改变
- 返回值：删除的那个数据
var arr4 = [10, 20, 30, 100];
var resArr4 = arr4.shift();
console.log(arr4);//[20, 30, 100]
console.log(resArr4);//10
-
splice();
- 作用：可以实现增加修改删除
- 参数：传递参数个数的不同作用也不同
- 原来数组是否被改变：改变
- 返回值：删除的每一项以一个新的数组返回,没有删除返回空数组
// splice(x); // x:开始的索引 从当前索引开始删除到末尾 var arr5 = [10, 20, 30, "hello", 2000, "world"]; var resArr5 = arr5.splice(2); console.log(arr5);//[10, 20] console.log(resArr5);//[30, "hello", 2000, "world"] // splice(x,n); // x:开始的索引 n:个数 var arr6 = [10, 20, 30, "hello", 2000, "world"]; var resArr6 = arr6.splice(2, 3); console.log(arr6);//[10, 20, "world"] console.log(resArr6);// [30, "hello", 2000] // splice(x,n,conten1,...); // 将删除的部分以新的内容进行替换 // x:开始的索引 n:个数 conten1:内容 var arr7 = [10, 20, 30, "hello", 2000, "world"]; var resArr7 = arr7.splice(1,3,{name:"哈哈"},"你好啊"); console.log(arr7);//[10, {…}, "你好啊", 2000, "world"] console.log(resArr7);//[20, 30, "hello"] // splice(x,0,conten1,...); // 从当前索引开始删除0个以新的内容进行替换 （新的内容会放到开始索引之前） var arr8 = [10, 20, 30, "hello", 2000, "world"]; var resArr8 = arr8.splice(1,0,{name:"哈哈"},"你好啊"); console.log(arr8);//[10, {…}, "你好啊", 20, 30, "hello", 2000, "world"] console.log(resArr8);//[]
数组对象的其它方法
- sort();
// 不传递参数只能对10以下的数字进行升序排列
// sort();
// 原数组改变
// 返回值:排好序的数组
var arr1 = [9, 1, 2, 4, 6, 7, 3, 8, 0];
var resArr1 = arr1.sort();
console.log(arr1);//[0, 1, 2, 3, 4, 6, 7, 8, 9]
console.log(resArr1); //[0, 1, 2, 3, 4, 6, 7, 8, 9]
// 传递参数
// sort(callBack);
// callBack：函数 将一个函数当做参数进行传递
// 原数组改变
// 返回值:排好序的数组
var arr2 = [100, 1000, 10, 9, 88, 22, 2000, 66, 43, 28];
// callBack需要传递两个形参
var resArr2 = arr2.sort(function (a, b) { //callBack会调用很多次 每次用数组当中后一项和前一项进行比较
// console.log(a,b);
// return a - b; //升序
return b - a; //降序
});
console.log(arr2);//[2000, 1000, 100, 88, 66, 43, 28, 22, 10, 9]
console.log(resArr2);//[2000, 1000, 100, 88, 66, 43, 28, 22, 10, 9]
var arr3 = [
{
date: "1998-10-21",
name: "哈哈"
},
{
date: "2020-10-21",
name: "哈哈"
},
{
date: "2022-10-21",
name: "哈哈"
},
{
date: "2000-10-21",
name: "哈哈"
}
];
// Date.parse(字符串); 获取距离1970午夜0时的毫秒值
console.log(Date.parse("2000-10-21"));
var resArr3 = arr3.sort(function (a, b) {
// 根据时间 根据时间戳
// console.log(a.date, b.date);
return Date.parse(a.date) - Date.parse(b.date);
});
console.log(arr3);
console.log(resArr3);
// 根据名字进行排序
var arr4 = [
{
date: "1998-10-21",
name: "哈哈"
},
{
date: "2020-10-21",
name: "你好"
},
{
date: "2022-10-21",
name: "我好"
},
{
date: "2000-10-21",
name: "大家好"
}
];
// 根据汉字进行排序（拼音） a.localeCompare(b,"zh")
var resArr4 = arr4.sort(function (a, b) {
// return a.name.localeCompare(b.name,"zh");//升序
return b.name.localeCompare(a.name, "zh"); //升序
});
console.log(arr4);
console.log(resArr4);
// 根据英文进行排序 第二个参数可以省略 根据英文字母表 a.localeCompare(b)
var arr5 = [
{
date: "1998-10-21",
name: "zja"
},
{
date: "2020-10-21",
name: "bac"
},
{
date: "2022-10-21",
name: "mmm"
},
{
date: "2000-10-21",
name: "Yn"
}
];
var resArr5 = arr5.sort(function (a, b) {
return b.name.localeCompare(a.name);
});
console.log(resArr5);
- indexOf(数据,[idnex]) / lastIndexOf(数据,[idnex]) 包含 返回数组当中当前项首次或最后一次出现的索引 , 不包含返回-1 不兼容（IE8及以下不兼容）
var arr = [100, 200, 20, 80, 10, 20, 80, 100];
console.log(arr.indexOf(20));//2
console.log(arr.indexOf(20, 4));//5
console.log(arr.lastIndexOf(20));//5
console.log(arr.lastIndexOf(20, 1));//-1
- slice(startIndex,endIndex);
- 作用：数组的截取
- 参数:startIndex:开始索引 endIndex：结束索引（不包含结束索引）
- 是否改变原数组：不变
- 返回值：将截取到的数据以一个新的数组返回,截取不到返回空数组
- 注意点
- 不传递参数截取到末尾
- 传递一个参数，截取数组末尾
- 支持负数索引（两个参数都支持）
var arr1 = [100, 200, 20, 80, 10, 20, 80, 100];
var resArr1 = arr1.slice(-5, -1);
console.log(resArr1);//[80, 10, 20, 80]
- reverse();
- 倒叙，翻转
- 是否改变原数组：变
- 返回值:改变后的数组 （返回一个新数组）
var arr2 = [10, 20, 30];
var resArr2 = arr2.reverse();
console.log(arr2);//[30, 20, 10]
console.log(resArr2);//[30, 20, 10]
- join(连接符);
- 将数组的每一项以某个符号进行连接
- 返回值：字符串
- 是否改变原数组：不变
- 拼接后字符串
var arr3 = [100, 200, 20, 80, 10, 20, 80, 100];
var resArr3 = arr3.join("+");
console.log(resArr3);//100+200+20+80+10+20+80+100
console.log(arr3);//[100, 200, 20, 80, 10, 20, 80, 100]
- concat(数据,数据,...);
- 数据的拼接
- 是否改变原数组：不变
- 拼接后数组
var arr4 = [10, 20, 30];
var resArr4 = arr4.concat(["哈哈", 1000, 200], "你好", true, {
name: "哈哈"
});
console.log(resArr4);// [10, 20, 30, "哈哈", 1000, 200, "你好", true, {…}]
console.log(arr4);//[10, 20, 30]
数组的迭代方法
- every：针对数组做一些判断 返回一个布尔值 都为真才为真(都为真才返回true，否则返回false)
// 某一项不符合条件就停止迭代了
var arr = [10, 20, 30, 1000, 88, 66, 11, 2, 34, 55, 88, 77];
// 某一项不符合条件就停止迭代了
var res1 = arr.every(function (val, index) {
console.log(val, index);
return val > 5;
});
console.log(res1); //false
console.log(arr);
- some: 针对数组做一些判断 返回一个布尔值 一真即真(一个是就返回true,都为假才返回false)
// 某一项符合条件就停止迭代了
var res2 = arr.some(function (val, index) {
console.log(val, index);
return val > 5;
});
console.log(res2);
- filter:针对数组进行过滤，将符合条件的每一项以一个新的数组进行返回
// 每一项进行迭代
var res3 = arr.filter(function (val, index) {
console.log(val, index);
return val % 2 != 0;
});
console.log(res3);
- map:针对数组做一些操作，以一个新的数组返回
var res4 = arr.map(function (val, index) {
console.log(val, index);
// 将原数组当中的每一项扩大100倍 以一个新的数组返回
return val * 100;
});
console.log(res4);
console.log(arr);
- forEach:针对数据进行迭代 返回值是undefined
arr.forEach(function (val, index) {
console.log(val, index);
});
console.log(res5);
浙公网安备 33010602011771号
