|
1.数组基础
ECMAScript数组是有序列表，是存放多个值的集合。
有以下特性：
每一项都可以保存任何类型的数据。
数组的大小是可以动态调整。
数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项
Var arr = [1,2,3];
Arr.length;
Arr[3] = 4;
或者arr[arr.length(获取最大)] = 5;
arr[arr.length] = 6;
Str = ‘hello’;//类数组对象
js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。
1.1.数组创建
初始化
使用Array构造函数
var arr = new Array();
var arr = new Array(20); // 预先指定数组的大小
var arr = new Array(“terry”,“larry”,“boss”); //传入参数
使用数组字面量
由一对包含数组项的方括号表示，多个数组项之间用逗号分隔
var arr = [“terry”,“larry”,“boss”];
var arr = [] //空数组
Vi array-declare.js
?字面量
由一对包括元素的方括号"[]“表示，元素之间以逗号”,"隔开
var names = [“terry”,“larry”,“tom”]
var name = “name”
var arr = [12,name,true,“larry”,{},function(){},[],null];
console.log(arr,arr[2]);
console.log(arr.length);//arr.length
?构造函数
通过Array构造函数来创建数组
var names = new Array(); // 等价于 var names = [];
// 一个参数，如果是number类型的整数，则代表的是数组的长度。如果是number类型的小数，则报错。如果是其他类型，则当做数组元素放进去。
//var arr = new Array(length); 创建一个长度为length的数组
var names = new Array(3);
// 创建一个包含3个元素的数组 var arr = [undefined,undefined,undefined];
//var ages = new Array(2.4);//Error: Invalid array length
var ages = new Array(“2.4”);
var names = new Array(‘terry’) //创建一个包含1个元素的数组，该元素的值为’terry’
// 两个参数或者多个参数,当做数组元素放进去
var names = new Array(‘terry’,‘robin’)//创建一个数组，数组中的元素使用实参初始化
?数组函数
var names = Array();
var names = new Array(‘terry’);
1.2.数组访问
访问数组元素
数组变量名[索引]
如果索引小于数组的长度，返回对应项的值
var arr = [“terry”,“larry”,“boss”];
arr[0] ; //访问数组中第一个元素,返回值为terry
如果索引大于等于数组的长度，返回undefined
var arr = [“terry”,“larry”,“boss”];
arr[10] //undefined
如果给索引大于等于数组的长度的位置设置了值，数组自动增加到该索引值加1的长度
var arr = [“terry”,“larry”,“boss”];
arr[3] =“jacky”; //添加元素,数组长度变为4
注意！数组最多可以包含4 294 967 295个项
通过索引访问数组，数组的索引从0开始，数组的索引超过数组长度会访问到undefined值而不会报错。数组的长度通过length属性获取
a) [index] 直接访问,索引可以超过索引范围，只不过访问的值为undefined
b) length-1=Max(index)
c) length+N length-N 开辟新的内存空间 数组元素的删除
var arr = [“terry”,“larry”,“tom”]
console.log(arr[0]) //“terry”
arr[7]=12;
console.log(arr,arr.length,arr[5],arr[7])//[…] 8 undefined 12
数组的遍历：
普通的for循环、增强版for循环、while循环、do-while循环
var arr = [1,2,3];
for(var i=0;i<arr.length;i++){
var item = arr[i];
}
for(var index in arr){
var val = arr[index]
}
1.3.数组在内存中的表现
连续开辟内存空间
Array构造函数、数组对象、Array原型
图重画：静态函数、实例函数都重新体现出来：
1.4.数组检测
数组检测
对于一个网页或者一个全局作用域而言，使用instanceof操作符即可判断某个值是否是数组。如果网页中包含多个框架，这样就存在两个不同的全局执行环境，从而存在两个不同版本的Array构造函数，这样就会判断不准确。为解决这个问题，ECMAScript5新增了Array.isArray()方法进行判断
var arr = [];
typeof arr ; //结果为object
arr instanceof Array //结果为true，在同一个全局作用域下可以这么判断
Array.isArray(arr); //结果为true，判断arr是否是数组类型
vi array-type.js
var obj = {
name:“briup”,
age:22
};
var arr = [
1,
2,
obj,
true,
false,
undefined,
null,
“briup”,
function(){
console.log(“function”);
}
];
console.log(arr);
console.log(arr.length);//9
arr8;
console.log(typeof arr);//’object’
var result = Array.isArray(arr);
console.log(result);//true
console.log(arr instanceof Array);//true
console.log(arr instanceof Object);//true
console.log(arr instanceof Number);//false
/* isNaN()
isFinite()*/
1.5.数组序列化
数组序列化
toString() 在默认情况下都会以逗号分隔字符串的形式返回数组项
join() 使用指定的字符串用来分隔数组字符串
例如
var arr = [“terry”,“larry”,“boss”];
arr.toString() //terry,larry,boss
arr.join("||"); //briup||terry||jacky
还有JSON.stringify()和JSON.parse()
vi array-string.js
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]”
console.log(arr.join(""));//”152810[object Object]”
console.log(arr.join("-"));//”1-5-2-8-10-[object Object]”
var result = JSON.stringify(arr);
console.log(result);//”[1,5,2,8,10,{"a":1}]”
console.log(JSON.parse(result));//[ 1, 5, 2, 8, 10, { a: 1 } ]
2.数组API
2.1.构造函数的方法
?Array.isArray()
用来判断某个变量是否是一个数组对象
?Array.from()
从类数组对象或者可迭代对象中创建一个新的数组实例。
Array.from(‘foo’); // [ “f”, “o”, “o” ]
const set = new Set([‘foo’, ‘bar’, ‘baz’, ‘foo’]);
Array.from(set); // [ “foo”, “bar”, “baz” ]
?Array.of()
根据一组参数来创建新的数组实例，支持任意的参数数量和类型。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
2.2.原型的方法
?栈与队列方法
栈，队列方法，改变原数组
栈 LIFO (Last-In-First-Out)
pop() 移除数组中的最后一个项并且返回该项，同时将数组的长度减一，
push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度
队列 FIFO (First-In-First-Out)
shift() 移除数组中的第一个项并且返回该项，同时将数组的长度减一
unshift() 在数组的前端添加任意个项，并返回数组的长度
?Array.prototype.push()
接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
?Array.prototype.pop()
从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。
?Array.prototype.shift()
移除数组中的第一项并返回该项，同时将数组长度减1
?Array.prototype.unshift()
在数组的前端添加人一个项并返回新数组的长度
【对原始数组进行了改变】
vi array-push-pop.js
// 1.方法的作用
// 2.方法需要什么参数
// 3.方法的返回值
// 4.改变原数组吗
var arr = [1,6,2,9,3,5];
// push() 添加元素到末尾 参数是要添加的元素 返回值是修改之后数组的长度【改变原数组】
// pop() 取出最末尾的元素 无参数 返回值是取出的元素【改变原数组】
console.log(arr);
// var result = arr.push("briup");
//<=> arr[arr.length]="briup"
var result = arr.pop();//<=>arr.length--
console.log(arr);
console.log(result)
vi array-unshift-shift.js
// unshift() 往数组头部添加元素 参数是要添加的元素 返回值是改变之后数组的长度 【改变原数组】
// shift() 取出数组头部元素 无参数 返回值是取出的元素 【改变原数组】
var arr = [1,6,2,9,3,5];
console.log(arr);
// var result = arr.unshift("briup");
/*<=>
for(var i=arr.length;i>0;i--){
arr[i]=arr[i-1];
}
arr[0]="briup";
*/
var result = arr.shift();
/*<=>
for(var i=0;i<arr.length-1;i++) arr[i]=arr[i+1];
arr.length--;
*/
console.log(arr);
console.log(result);
?排序方法
排序
reverse() 反转数组项的顺序，改变原数组
sort()
默认排序：该方法会调用每个数组项的toString() 方法，然后按照字符序列排序
自定义排序：
a.该方法可以接受一个比较函数作为参数，比较函数有两个参数
b.如果第一个参数位于第二个参数之前，返回负数
c.如果第一个参数位于第二个参数之后，返回正数
var arr = [11,5,23,7,4,1,9,1];
console.log(arr.sort(compare));
//该比较函数适合于大多数数据类型
function compare(v1,v2){
if(v1>v2){return -1;}
else if( v1<v2){return 1;}
else{return 0;}
}
?Array.prototype.reverse()
反转数组元素的顺序。
?Array.prototype.sort()
默认排序：该方法会调用每个数组元素的toString()方法，然后比较得到的字符串，以确定如何排序。按照每位字符在字符编码表中出现的位置进行排序。
自定义排序：该方法也可以接收一个比较函数，进行自定义比较
arr.sort(函数的声明comparator)
function comparator(a,b){
a在b之前就返回-1
a在b之后返回1
}
【对原始数组进行了改变】
排序的算法：冒泡排序、快速排序、插入排序、选择排序
https://www.jianshu.com/p/5c894e8b1f88
用js语言实现
var arr = [82,1,43,2,8,32,5];
//arr.mySort()//排序算法
arr.sort();//系统默认排序
console.log(arr);
// [1,2,5,8.32,43,82]
vi student-sort.js
var students = [{
id:2,
name:“terry”,
age:12,
grade:89
},{
id:1,
name:“larry”,
age:13,
grade:90
},{
id:3,
name:“jacky”,
age:14,
grade:82
}];
//id排序
function compare(s1,s2){
return s1.id-s2.id;
}
students.sort(compare);
//name排序
students.sort(function(s1,s2){
//s1.name-s2.name=NaN
if(s1.name>s2.name) return 1;
else return -1;
});
//万能比较函数 按照不同的属性升序或者降序
//对学生的任意指定属性进行降序排序
var descProperty=function(pro){
return function(s1,s2){
if(s1[pro]>s2[pro]) return -1;
else return 1;
};
};
console.log(students.sort(descProperty("id")));
console.log(students.sort(descProperty("name")));
?操作方法
截取方法
concat()
数组拼接，先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，返回副本，不改变原数组
slice()
数组切割，可接受一个或者两个参数（返回项的起始位置，结束位置），当接受一个参数，从该参数指定的位置开始，到当前数组末尾的所有项。当接受两个参数，起始到结束之间的项，但是不包含结束位置的项。不改变原数组
splice()
向数组的中部插入数据将始终返回一个数组，该数组中包含从原始数组中删除的项。
删除：指定两个参数(起始位置，要删除的项数)
插入：指定三个参数(起始位置，0，要插入的任意数量的项)
替换：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)
?Array.prototype.concat()
创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
?Array.prototype.slice(index_start[,index_end])
基于当前数组中的一个或多个项创建一个新数组。
范围：[index_start,index_end)左闭右开
?Array.prototype.splice(index_start,deleteCount[,insertEle,…])
功能最为强大的数组，该方法返回一个数组，该数组中包含从原始数据中删除的项，如果没有删除，则返回空数组。
删除：arr.splice(3,2) //删除返回：arr[3],arr[4]
替换：arr.splice(3,2,”zs”,”ls”,”ww”) //删除返回arr[3],arr[4]
//从arr[3]插入”zs”,”ls”,”ww”
新增/插入：arr.splice(3,0,”zs”,”ls”,”ww”) //从arr[3]插入”zs”,”ls”,”ww”
vi array-inter.js
// concat 往数组中添加元素，连接数组
var arr1 = [3,8,2,5,“briup”];
console.log(arr1);//[ 3, 8, 2, 5, ‘briup’ ]
var arr2 = [10,100,1000];
var result1 = arr1.concat(arr2);
var result2 = arr1.concat(“test”,1,[10,100,1000]);
console.log(arr1);//没变 [ 3, 8, 2, 5, ‘briup’ ]
console.log(result1);//[ 3, 8, 2, 5, ‘briup’, 10, 100, 1000 ]
console.log(result2);//[ 3, 8, 2, 5, ‘briup’,“test”,1, 10, 100, 1000 ]
// slice(start,end)方法可从已有的数组中返回选定的元素.返回一个新的数组，包含从 start 到 end （不包括该元素）(左闭右开[start,end))的 arrayObject 中的元素。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
var arr = [3,8,2,5,"briup"];
var result1 = arr.slice(1,4);
var result2 = arr.slice(1);
console.log(arr);//没变 [ 3, 8, 2, 5, 'briup' ]
console.log(result1);//[ 8, 2, 5 ]
console.log(result2);//[ 8, 2, 5, 'briup' ]
// splice
// 删除 两个参数(起始位置，删除项数)
var arr = [3,8,2,5,"briup"];
var result = arr.splice(1,4);
console.log(arr);//[ 3 ]
console.log(result);//[ 8, 2, 5, 'briup' ]
// 替换 至少3个(起始位置，删除项数，放入的元素)
var arr = [3,8,2,5,"briup"];
var result = arr.splice(1,4,"test",[1,2,3]);
console.log(arr);//[ 3, 'test', [ 1, 2, 3 ] ]
console.log(result);//[ 8, 2, 5, 'briup' ]
// 插入元素 至少3个(起始位置，删除项数0，放入的元素)
var arr = [3,8,2,5,"briup"];
var result = arr.splice(1,0,"test",[1,2,3]);
console.log(arr);//[ 3, 'test', [ 1, 2, 3 ], 8, 2, 5, 'briup' ]
console.log(result);//[]
将类数组转成数组
function change(){
console.log(arguments);
//将arguments转成数组，使用数组的forEach遍历方法
var arrArg = Array.prototype.slice.call(arguments,0);
arrArg.forEach(function(item){
console.log(item);
});
//console.log(arrArg);
//console.log(Array.isArray(arrArg));
//arguments.slice(1,4)//error!
//Array.prototype.slice.call(arguments,1,4);
}
change(3,4,5);
?位置方法
索引方法
indexOf()
从数组开头向后查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置
lastIndexOf()
从数组末尾向前查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置
?Array.prototype.indexOf()
?Array.prototype.lastIndexOf()
这两个方法都返回要查找的项在数组中的位置，如果没有找到返回-1，可以接受两个参数，第一个表示要查找的项，第二个表示查找的起点。在比较的时候会使用全等操作符。
查找匹配方式：全等= = =
vi array-index.js
// indexOf 查找某个元素在数组中的位置
var arr = [3,8,2,5,“briup”,“5”,5];
console.log(arr);
var result1 = arr.indexOf(“5”);
var result2 = arr.indexOf(5);
var result3 = arr.indexOf(5,4);
var result4 = arr.lastIndexOf(5);
console.log(arr);//没变，不受影响
console.log(result1,result2,result3,result4);//5 3 6 6
?迭代方法
?Array.prototype.every()
对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true
?Array.prototype.some()
对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true
?Array.prototype.filter()
对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
?Array.prototype.map()
对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
?Array.prototype.forEach()
对数组中的每一项运行给定函数，该方法没有返回值
迭代方法
参数： 每一项上运行的函数，运行该函数的作用域对象（可选）
every()
对数组中的每一元素运行给定的函数，如果该函数对每一项都返回true，则该函数返回true
eg:
var arr = [11,5,23,7,4,1,9,1];
var result = arr.every(function(item,index,arr){
return item >2;
});
console.log(result); //false
Boolean arr.every(函数声明、函数名、函数变量名、匿名函数)
都满足要求才返回true，
有一个不满足就返回false,就会停止执行
//PPT代码实现原理
function condition(item,index,arr){
return item>2;
}
function myEvery(func){
var result=true;
for(var i=0;i<this.length;i++){
If(func(this[i],i,this]) == false){
result=false;
break;
}
}
return result;
}
arr.myEvery(condition)
带入this和实参condition后：
function myEvery(){
var result=true;
for(var i=0;i<arr.length;i++){
If(condition(arr[i],i,arr]) == false){
result=false;
break;
}
}
return result;
}
some()
对数组中的每一运行给定的函数，如果该函数对某一项返回true，则返回true
eg:
var result = arr.some(function(item,index,arr){
return item >2;
});
console.log(result); //true
filter()
对数组中的每一项运行给定的函数，会返回满足该函数的项组成的数组
eg:
var result = arr.filter(function(item,index,arr){
return item >2;
});
console.log(result); // [11, 5, 23, 7, 4, 9]
map()
对数组中的每一元素运行给定的函数，返回每次函数调用的结果组成的数组
eg:
var result = arr.map(function(item,index,arr){
return item * 2;
});
console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2]
vi array-iterator.js
var students = [{
name:“briup”,
age:12,
sno:1001
},{
name:“boss”,
age:32,
sno:1002
},{
name:“lisi”,
age:89,
sno:1003
}];
console.log(students);
//判断是否都是成年人-every
var result = students.every(function(item,index,arr){
return item.age>18;
});
console.log("判断是否都是成年人:"+result);
//判断是否都是成年人-实现every
var result = true;
for(var i=0;i<students.length;i++){
var age = students[i].age;
if(age<18){
result = false;
break;
}
}
console.log("判断是否都是成年人:"+result);
// 查看学生中有没有成年人-some
var result = students.some(function(item,index,arr){
return item.age>18;
});
console.log("查看学生中有没有成年人:"+result);
// 查看学生中有没有成年人-实现some
var result = false;
for(var i=0;i<students.length;i++){
var age = students[i].age;
if(age>18){
result = true;
break;
}
}
console.log("查看学生中有没有成年人:"+result);
// 过滤出成年人-filter
var result = students.filter(function(item,index,arr){
return item.age>18;
});
console.log(students);//学生数组不发生改
console.log(result);//成年人有
// 过滤出成年人-实现filter
var arr = [];
for(var i=0;i<students.length;i++){
if(students[i].age>18){
arr.push(students[i]);
}
}
console.log(result);//成年人有
// 查找所有学生的姓名，并返回数组-map 映射
var result = students.map(function(item,index,arr){
return item.name;
//return item.age-5;
});
console.log(students);//所有学生信息
console.log(result);//只有学生姓名的数组
// 查找所有学生的姓名，并返回数组-实现map 映射
var arr = [];
for(var i=0;i<students.length;i++){
arr.push(students[i].name);
}
console.log(arr);//只有学生姓名的数组
forEach()
对数组中的每一元素运行给定的函数，没有返回值，常用来遍历元素
eg:
var result = arr.forEach(function(item,index,arr){
console.log(item);
});
vi array-forEach.js
var arr = [3,8,2,5,“briup”,“5”,5];
console.log(arr);
var handler=function(item,index,arr){
console.log(“方式一：”,item,index,arr);
}
var result1=arr.forEach(handler);
var result2=arr.forEach(
function(item,index,arr){
console.log(“方式二：”,item,index,arr);
});
console.log(result1,result2);//undefined undefined
//自己实现：在Array的原型中新增实例方法
//--阿里p6--模仿forEach写一个myForeach，其效果与forEach完全相同
Array.prototype.myForEach = function(handler){
for(var i=0;i<this.length;i++){
handler.call(this,this[i],i,this)
}
}
var handler=function(item,index,arr){
console.log("自己实现方式一：",item,index,arr);
}
var arr = [3,8,2,5,"briup","5",5];
console.log(arr);
var result1=arr.myForEach(handler);
var result2=arr.myForEach(
function(item,index,arr){
console.log("自己实现方式二：",item,index,arr);
});
console.log(result1,result2);
|