JavaScript-数组

数组

• 数组是一个有序，可以存储多个单元的数据结构
• 数组是我们后期用到最多的一种数据结构（储存数据）
• 数组的长度可以自由指定
• 数组值可以任意的类型

数组的定义

• 字面量方式

var arr1 = [1,2,4];

• 构造函数

var arr2 = new Array(5);   //声明数组的长度为5；
var arr3 = new Array("你","好","世界",10,false); 
// 创建数组并指定数据内容

访问数组

• arr[n] 数组的第n个元素，从0开始
• arr.length 访问数组的长度
• arr[arr.length - 1] 访问数组的最后一个元素

var arr = ["你","好","世界",10,false];
alert(arr[0]);   // 数组的第一个元素
alert(arr.length)  // 数组的长度
alert(arr[arr.length - 1]);  // 数组的最后一个元素

修改数组

// 修改数组的第几个元素
var arr = [1,2,3];
arr[0] = "javascript";  // 修改数组第一个元素
console.log(arr);   // ["javascript",2,3]

// 如果修改的数据的位置超过了数组本身的长度，则成为了动态添加，添加到对应的位置，其他位置补位null
var arr = [1,2,3];
arr[5] = "jQ";
console.log(arr);   // [1,2,3,null,null,"jQ"];

遍历数组

for 循环遍历

var arr = ["你","好","世界",10,false];
for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

for in 遍历

var arr = ["你","好","世界",10,false];
for(var k in arr) {   // k 对应的是数组的下标
	console.log(arr[k]);
}

for of 遍历

var arr = ["你","好","世界",10,false];
for(var i of arr) {   // i 就是对应的值
	console.log(i);
}

数组的增，删，改，查，方法

数组的追加
- unshift(“追加的东西”); 在数组前面添加
- push(“追加的东西”); 在数组的后面添加
- 这些会破坏原数组

var arr = ["你","好","世界",10,false];
arr.unshift("html"); // ["html","你","好","世界",10,false]
arr.push("jQ");  //  ["html","你","好","世界",10,false,"jQ"]

数组的删除

• shift(); 删除数组前面的的元素
• pop(); 删除数组后面的元素
• 这些会破坏原数组

var arr = ["你","好","世界",10,false];
arr.shift(); // ["好","世界",10,false]
arr.pop();   // ["好","世界",10]

• splice(start,length,“添加的东西”,…); 从start开始删除，删除length个，添加东西到删除的位置
• 这些会破坏原数组

var arr = ["你","好","世界",10,false];
arr.splic(3,1,"php","mySql"); // ["你","好","世界","php","mySql",false]

数组的切割

• slice(start,end); 从start开始，到end结束，不包含end
• 不破坏原数组

var arr = ["你","好","世界",10,false];
arr.slice(2,4); // ["世界",10]

数组的结合

• arr.concat(结合的数组);
• 不破坏原数组

var arr1 = [1,2];
var arr2 = [3,4];
var arr = arr1.concat(arr2);
console.log(arr)  // [1,2,3,4]

数组的查找

• indexOf(“查找的东西”); 查找字符在数组的位置，返回对应位置的下标，找不到返回-1

var arr = ["你","好","世界",10,false];
alert(arr.indexOf("好"));    // 1

数组的排序

• Array.sort(); 排序 从小到大，按数字的第一位开始排序

var arr = [1,5,2,6,3];
arr.sort();  // [1,2,3,5,6]

var arr = [1,15,28,6,3];
arr.sort();  // [1,15,28,3,6]  显然这么排序不是我们所期望了

• Array.sort(一个函数); 这样可以正确的排序

var arr = [1,15,28,6,3];
arr.sort(function(a,b) {
	if(a > b) {  // 改变条件 b > a 可以变成降序
		return 1   	//  升序
	}else {
		return -1 
	}
})
console.log(arr)
// 另一种写法
arr.sort(function(a,b) {
	return a - b;
})

var objArr = [
	{name : "mm",age : 15},
	{name : "smm",age : 23},
	{name : "nmm",age : 55}
]
objArr.sort(function(a,b) {
	return a.age - b.age
})
console.log(objArr)

• reverse() 翻转

var arr = [1,5,2,6,3];
arr.reverse();  // [3,6,2,5,1]

数组链接为字符串

join(连接的符号)

var arr = ["你","好","世","界"];
var str = arr.join("-");
console.log(str)   // 你-好-世-界

综合案例

// "good|好的/hello|你好/base|基础" ==> [["good","好的"],["hello","你好"],["base","基础"]]
var str = "good|好的/hello|你好/base|基础";
var arr1 = str.split("/");
for(var i = 0; i < arr1.length; i++) {
	arr1[i] = arr1[i].split("|");
}
console.log(arr1);

数组的高阶函数方法

forEach(function( item,index,self) {})—遍历

var arr = ["你","好","世界",10,false];
arr.forEach( function(item,index,self) {
	console.log(item,index,self);
	// item  当前遍历的数组元素
	// index 当前数组的下标
	// self  当前的数组
})

map(function(item) {} )—映射，把当前的数组映射成为一个新的数组

var arr = ["你","好","世界",10,false];
arr.map( function(item,index,self) {
	console.log(item,index,self);
	// item  当前遍历的数组元素
	// index 当前数组的下标
	// self  当前的数组
})

var arr = [1,2,3];
var newArr = arr.map(function(item) {
	return item * 2;
})
console.log(newArr); // [2,4,6]

filter(function(itme,index,self) {})—过滤，返回新数组

var arr = [1,2,3,7,32,55,13];
var newArr = arr.filter(function(item) {
	return item > 12;
})
console.log(newArr); // [32,55,13]

reduce(function(prev,next) {})—前一项与后一项累加

var arr = [1,2,3,4,5];
var newArr = arr.reduce(function(prev,next) {
	return prev + next;
})
console.log(newArr);   // 15

every(function(item,index) {})—检查数组中的每一项是否符合条件

var arr = [1,2,3,4,5];
var newArr = arr.every(function(item,index) {
	return item > 0;
})
console.log(newArr);   // true    全部满足才为true

some(function(item,index) {})—检测数组是否有某些符合条件

var arr = [1,2,3,4,5];
var newArr = arr.some(function(item,index) {
	return item > 3;
})
console.log(newArr);   // true    只要满足一个即为true

去重

• […new Set(arr)] 解构，Set(Array),去重

var arr = [1,3,4,5,1,4,2,55,22,33,11,11,55];
var newArr = [...new Set(arr)];
console.log(newArr);  // [1,4,5,2,55,22,33,11]

• filer 过滤去重

var arr = [1,3,4,5,1,4,2,55,22,33,11,11,55];
var newArr = arr.filter(function(item,index) {
	if(arr.indexOf(item) != index) {
		return false;
	}else {
		return true;
	}
})
console.log(newArr)  // [1,4,5,2,55,22,33,11]
// filter 如果回调函数
	// 返回true，则该元素保留，
	// 返回false，则该元素过滤掉