js之数组

1. 数组基础

ECMAScript数组是有序列表，是存放多个值的集合。

有以下特性：

每一项都可以保存任何类型的数据。

数组的大小是可以动态调整。

数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项

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

1. 1. 1. 字面量

由一对包括元素的方括号"[]"表示，元素之间以逗号","隔开

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

1. 1. 1. 构造函数

通过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')//创建一个数组，数组中的元素使用实参初始化

1. 1. 1. 数组函数

var names = Array();

var names = new Array('terry');

1. 1. 数组访问

访问数组元素

 数组变量名[索引]

如果索引小于数组的长度，返回对应项的值

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. 1. 数组在内存中的表现

连续开辟内存空间

    Array构造函数、数组对象、Array原型

图重画：静态函数、实例函数都重新体现出来：

1. 1. 数组检测

数组检测

对于一个网页或者一个全局作用域而言，使用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

arr[8]();

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. 1. 数组序列化

数组序列化

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 } ]

1. 数组API
   1. 构造函数的方法
      1. Array.isArray()

用来判断某个变量是否是一个数组对象

1. 1. 1. Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例。

Array.from('foo');   // [ "f", "o", "o" ]

const set = new Set(['foo', 'bar', 'baz', 'foo']);

Array.from(set);    // [ "foo", "bar", "baz" ]

1. 1. 1. Array.of()

根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

Array.of(7);       // [7]

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

1. 1. 原型的方法

• • 栈与队列方法

栈，队列方法，改变原数组

栈  LIFO (Last-In-First-Out)  

pop() 移除数组中的最后一个项并且返回该项，同时将数组的长度减一，

push()  可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度

队列   FIFO (First-In-First-Out)  

shift()   移除数组中的第一个项并且返回该项，同时将数组的长度减一

unshift()  在数组的前端添加任意个项，并返回数组的长度

1. 1. 1. Array.prototype.push()

接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

1. 1. 1. Array.prototype.pop()

从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

1. 1. 1. Array.prototype.shift()

移除数组中的第一项并返回该项，同时将数组长度减1

1. 1. 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;}

}

1. 1. 1. Array.prototype.reverse()

反转数组元素的顺序。

1. 1. 1. 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，要插入的任意数量的项)

替换：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)

1. 1. 1. Array.prototype.concat()

创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组

1. 1. 1. Array.prototype.slice(index_start[,index_end])

基于当前数组中的一个或多个项创建一个新数组。

范围：[index_start,index_end)左闭右开

1. 1. 1. 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。第一个参数为要查找的项，第二个参数（可选）为索引开始位置

1. 1. 1. Array.prototype.indexOf()

1. 1. 1. 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

• • 迭代方法
    1. Array.prototype.every()

对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true

1. 1. 1. Array.prototype.some()

对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

1. 1. 1. Array.prototype.filter()

对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

1. 1. 1. Array.prototype.map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

1. 1. 1. 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);