前端小白的笔记：JavaScript数组

JavaScript数组

1.数组基础

数组的特点

1. 每一项都可以保存任何类型的数据
2. 数组的大小是可以动态调整
3. 数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项

2.数组的创建

1. 字面量创建数组

var arr = [123,'222', "string", true, {}, function(){}, []]

2. 构造函数创建数组

var names = new Array()  //括号中可以设置数组的长度或添加元素

var names = new Array(3);  // 创建一个包含3个元素的数组 var arr = [undefined,undefined,undefined];
var names = new Array('tony','zhu');  //创建一个数组，数组中的元素使用实参初始化

3.访问数组

数组变量名[索引]

var arr = ["tony","curry","zhu"];
arr[0] ;  //访问数组中第一个元素,返回值为tony
arr[10];  //如果索引大于等于数组的长度，返回undefined
arr[3] = 'zhangsan';  //添加元素,数组长度变为4

1）[index] 直接访问,索引可以超过索引范围，只不过访问的值为undefined

2）length-1=Max(index)

3）length+N 或 length-N 开辟新的内存空间 或 数组元素的删除

4.数组API

4.1. 数组序列化

toString() 默认以逗号分隔字符串的形式将数组返回

var arr = [1,5,2,8,10,{a:1}];   //初始化数组
console.log(arr);  //[ 1, 5, 2, 8, 10, { a: 1 } ]
console.log(arr.toString());  //”1,5,2,8,10,[object Object]”

join() 使用指定的字符串用来分隔数组字符串

console.log(arr.join("-"));//”1-5-2-8-10-[object Object]”

4.2. 构造函数的方法
Array.isArray() 判断是否是数组对象
Array.from() 从类数组对象或者可以迭代的对象中创建一个新的数组实例

var newArr = Array.from("Hello");
console.log(newArr);  // ["H","e","l","l","o"]

Array.of() 根据一组参数来创造新的数组实例

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

4.3. 栈与队列的方法
1）Array.prototype.push() 向数组尾部添加若干个元素 返回新的长度

var arr = [1,2,3];
arr.push("ttt");  
console.log(arr); //[1,2,3,"ttt"]

重构push()方法

var arr = [1,2,3,"ttt"];
Array.prototype.myPush = function(){
	for(var i=0;i<arguments.length;i++){ // arguments是传入的参数的类数组对象
		this[this.length] = arguments[i]; //this指向调用该方法的数组
	}
	return this.length; // push()方法规定要返回数组长度
}
console.log(arr.myPush(222,'jack')); //返回数组长度 6

2）Array.prototype.pop() 删除数组尾部元素 返回删除的元素

var arr = [1,2,3,6];
arr.pop();
console.log(arr); // [1,2,3]

重构pop()方法

var arr = [1,2,3,6];
Array.prototype.myPop = function(){
    if(this.length>0){  // 判断数组不为空
        var popItem = this[this.lenght-1];  // 获取所要删除的元素
        this.length -= 1;  // 以缩短数组长度的形式删除元素
    }else{
		return -1;
	}
    return popItem; // 返回所删除的元素
}
console.log(arr.myPop()); // 返回所删除的元素 6

3）Array.prototype.shift() 删除数组头部的元素 返回删除的元素

var arr = [1,2,3];
arr.shift();
console.log(arr); // [2,3]

重构shift()方法

var arr = [666,'tony','zhu'];
Array.prototype.myShift = function(){
	var firstItem = this[0]; // 获取第一个元素
	for(var i=0;i<this.length;i++){
		this[i] = this[i+1]; // 从第二个元素开始，每个元素向前移一位
	}
	this.length -= 1; // 数组长度变短
	return firstItem; // 返回删除的元素
}
console.log(arr.myShift()); // 666

4）Array.prototype.unshift() 向数组头部添加若干元素 返回新长度

var arr = [666,'tony','zhu'];
arr.unshift('aaa',123);
console.log(arr); // ['aaa',123,666,'tony','zhu']

重构unshift()方法

var arr = [666,'tony','zhu'];
Array.prototype.myUnshift = function(){
    for(var i=this.length-1;i>=0;i--){   //从第一个元素开始，向后移arguments.length（参数的个数）个位置
        this[i + arguments.length] = this[i];
    }
    for(var j=0;j<arguments.length;j++){
        this[j] = arguments[j];  // 向数组头按顺序插入参数
    }
    return this.length;  // 返回数组的长度
}
console.log(arr.myUnshift('aaa',123)); // 5

4.4. 排序方法
1）Array.prototype.reverse() 用于颠倒数组中元素的顺序

var arr= [1,2,3,'ttt'];
arr.reverse();
console.log(arr); // ['ttt',3,2,1]

2）Array.prototype.sort() 用于对数组的元素(根据Ascall码)进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits)
//fruits 输出结果：Apple,Banana,Mango,Orange

array.sort(function) sort方法中可放入参数，规定排序顺序，但必须为函数。

// 升序
var arr1 = [40,100,1,5,25,10];
points.sort(function(a,b){
	return a-b
});
//arr1输出结果：1,5,10,25,40,100

// 降序
var arr2 = [40,100,1,5,25,10];
points.sort(function(a,b){
	return b-a
});
//arr2输出结果：100,40,25,10,5,1

无论a>b还是b>a，return a-b 总能得到升序的结果，而 return b-a 总能得到降序的结果。

4.5. 操作方法
1）Array.prototype.concat() 拼接若干个数组
语法：array1.concat(array2,array3,…,arrayX)

2）Array.prototype.slice() 从已有的数组中返回以选定的元素
语法：arr.slice(start,end) 参数为元素的索引，截取的部分不包含end处的元素

3）Array.prototype.splice() 删除或添加数组元素
语法：arr.splice(index, howmany, item1,…,itemX)
index: 从何处删除或添加
howmany: 必须为数字，删除多少个元素，可以是0
item1,…,itemX: 添加的元素

4.6. 位置方法
1）Array.prototype.indexOf() 返回数组中某个指定元素的位置
语法：arr.indexOf(item, start) item表示查找的元素，start(可选)表示从何处开始
2）Array.prototype.lastIndexOf() 返回一个指定元素在数组中最后一次出现的位置

4.7. （重点）迭代方法

1）Array.prototype.every() 检测数组中的所有元素是否都符合指定条件
语法：array.every(function(当前元素的值currentValue, 当前元素的索引index, 数组对象arr), thisValue(可选)该对象做为回调函数时，用作‘this’的值)

//检测ages中的元素是否都大于等于18
var ages = [32, 33, 16, 40];

var result = ages.every(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:false

重构every()方法

Array.prototype.myEvery = function(fun, obj){
	for(var i=0;i<this.length;i++){
		// 三目运算符判断有无obj参数，决定this的指向
		if(!(obj?fun.bind(obj)(this[i]):fun(this[i]))){  // 整个语句在不符合条件时返回false
			// if语句中执行fun函数
			// 若有元素不符合条件，fun函数会返回false
			// 想要执行if中的语句，需要条件为true
			// 所以用！进行取反，执行if语句
			return false;
		}		
		// 不执行if语句，即所有元素都符合条件
		return true;
	}
}
var ages = [32,16,33,40];
var result = ages.myEvery(function(item){
	return item>=18;
})
console.log(result);

2）Array.prototype.some() 检测数组中是否有符合指定条件的元素
语法：array.some(function(当前元素的值currentValue, 当前元素的索引index, 数组对象arr), thisValue(可选)该对象做为回调函数时，用作‘this’的值)

// 检测数组中是否有元素大于 18
var ages = [32, 33, 16, 40];

var result = ages.some(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:true

重构some()方法

Array.prototype.mySome = function(fun, obj){
	for(var i=0;i<this.length;i++){
		if(obj?fun.bind(obj)(this[i]):fun(this[i])){
		// 若有符合条件的元素，直接返回true
			return true;
		}
		// 若所有元素都不符合条件，返回false
		return false;
	}
}
var ages = [32,16,33,40];
var result = ages.mySome(function(item){
	return item>18;
})
console.log(result);

3）Array.prototype.filter() 创建一个新数组，将符合指定条件的元素加入新数组中
语法：array.filter(function(当前元素的值currentValue, 当前元素的索引index, 数组对象arr), thisValue(可选)该对象做为回调函数时，用作‘this’的值)

// 返回数组ages中所有元素都大于 18 的元素
var ages = [32, 33, 16, 40];

var result = ages.filter(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:[ 32, 33, 40 ]

重构filter()方法

Array.prototype.myFilter = function(fun, obj){
	var result = []; // 创建一个数组接收符合条件的元素
	for(var i=0;i<this.length;i++){
		if(obj?fun.bind(obj)(this[i]):fun(this[i])){
			// 将符合条件的元素存入新数组
			result.push(this[i]);
		}
	}
	return result;
}
var ages = [32,16,33,40];
var result = ages.myFilter(function(item){
	return item >=18;
})
console.log(result); // [32, 33, 40]

4）Array.prototype.map() 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
语法：array.map(function(当前元素的值currentValue, 当前元素的索引index, 数组对象arr), thisValue(可选)该对象做为回调函数时，用作‘this’的值)

// 返回一个数组，数组中元素为原始数组的平方根
var numbers = [4, 9, 16, 25];

var result = numbers.map(function (number) {
  return Math.sqrt(number) 
})
console.log(result);//输出结果为:[ 2, 3, 4, 5 ]

重构map()方法

Array.prototype.myMap = function(fun, obj){
     var result = [];
     for(var i=0;i<this.length;i++){
     	// 将元素进行处理后存入新数组
         result.push(obj?fun.bind(obj)(this[i]):fun(this[i]));
     }
     return result;
 }

 var arr = [1,2,3,4,5];
 var result = arr.myMap(function(item){
     return item+1;   // 新数组 数组每一项都加一
 },{name:'tony'})
 console.log(result); // [2,3,4,5,6]