分享

数组

 hdzgx 2019-03-02

一、JavaScript中的数组

  JavaScript中的数组是值得有序集合。数组中值叫做元素,元素在数组的位置叫索引。数组的元素可以是任意类型的,同一个数组中元素类型可以不同。JavaScript中数组是动态的,可以根据需要增加或缩减。数组的索引可以不连续,不连续的数组称为稀疏数组,稀疏数组的长度大于元素的个数,非稀疏数组的元素长度等于元素个数。

  数组是对象的特殊形式。可以把数组看做属性恰巧是整数的对象,但是数组是经过优化的,访问元素的效率比对象访问属性的效率高很多。

二、创建数组

  1、数组直接量 

1 var  arr=[];//空数组
2 var arr=[1,2,,3] //长度为四的数组
3 var arr=[,,,]//三个元素的数组

 

    2、new Array()

  不带参数:创建一个空数组

  只有一个参数且参数为一个数字:创建一个长度为参数的数组,数组的元素为0个。

  带多个参数,参数为数组的元素,数组的长度和元素的个数相等。

1 var arr=new Array();//空数组
2 arr=new Array(5);//长度为5的空数组
3 arr=new Array(1,2,3,'4');//有四个元素的数组

  三、数组的读写

  用对象的([])运算读取和设置数组的元素值。当数组的索引是非负整数,那么数组的length会更新,当索引是其他值,会作为对象的属性。 

1 var arr=new Array(1,2,3,'4');//有四个元素的数组
2 arr[1]=100;//设置数组的元素值
3 console.log(arr[1]);//100//读取元素的值

   四、稀疏数组和非稀疏数组

  稀疏数组的索引是不可连续的。length属性大于元素的个数。可以通过new Array(arg)、对象直接量获得稀疏数组。   

复制代码
1 var arr=new Array(5);//有四个元素的数组
2 console.log(arr.length);
3 arr=[];
4 arr[1001]=1;
5 console.log(arr.length);//1002
6 arr=[1,2,,,4]
7 console.log('2' in arr)//false
复制代码

  五、数组的长度

  每个数组都有一个length属性,就是这个属性使其区别与其他的JavaScript对象。稠密数组的length属性代表元素的个数,其中比数组的最大索引数大1,对于非稠密数组,length大于数组的元素个数,数组中的找不到元素索引大于或等于它的长度的。当给数组赋值时,索引i大于或者等于length,length属性将设置为i+1;当把length属性设置为一个小于当前length的非负整数n时,数组中大于等于n的元素会被删除。 

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

  六、数组元素的添加和删除

  给数组添加元素:

  方法1:为新索引赋值

1 var arr=[1,3,4,5]
2 arr[6]=10;

·  方法2:push()和unshift()方法

  push()方法给数组的末尾添加一个元素。unshift()方法给数组的首位添加一个元素。  

1 var arr=[1,3,4,5]
2 arr.push(1);
3 arr.unshift(10);
4 console.log(arr);

  删除数组的元素

  方法一:delete运算符:使用delete运算符可以删除掉元素,但是不会改变数组的length.

1 var arr=[1,3,4,5]
2 delete arr[3];
3 console.log(arr);
4 console.log(arr.length);

  方法2:改变(减小)length的值:大于或者等于length的元素都会被删除。

  方法三:shift()和pop方法() 

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

  七、数组的遍历

  方法1:for循环

1 var arr=[1,3,4,5]
2 var keys=Object.keys(arr);
3 for(var i=0,len=keys.length;i<len;i++){
4     console.log(arr[keys[i]]);
5 }

 

  当数组是稠密的。

1 var arr=[1,3,4,5]
2 for(var i=0;i<arr.length;i++){
3     console.log(arr[i]);
4 }

  方法二:for/in循环,但是有可能遍历出数组的元素上的可枚举属性。

1 var arr=[1,3,4,5]
2 for(var i in arr){
3     console.log(arr[i]);
4 }

  方法三:forEach()

1 var arr=[1,3,4,5]
2 arr.forEach((ele,i,arr) => {
3     //arr代表数组 ele代表数组的元素 i代表数组的索引
4     console.log(ele);
5 });

  八、Array.prototype上的方法

  1、join()

  join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null, 则会转化成空字符串。指定一个字符串来分隔数组的每个元素。如果省略(),数组元素用逗号分隔。默认为 ","。

1 var arr=[1,3,4,5]
2 console.log(arr.join(','));//'1,2,3,4'

 

  2、reverse()

  reverse() 方法将数组中元素的位置颠倒。第一个数组元素成为最后一个数组元素,最后一个数组元素成为第一个。reverse 方法颠倒数组中元素的位置,并返回该数组的引用。

1 var arr=[1,3,4,5]
2 console.log(arr.reverse())//[5,4,3,1]

  3、sort()

  sort() 方法用就地( in-place )的算法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。如果数组包含undefined元素,后被排到数组的最后。 

1 var arr=[undefined,'apple','banana','cherries']
2 console.log(arr.sort())//[ 'apple', 'banana', 'cherries',undefined ]

  为了让数组不安字母表的顺序排序,可以给sort()传入一个函数。函数的参数大于0时,第二个参数在前。 

1 var arr=[1,2,3,4,5]
2 console.log(arr.sort(function(a,b){
3     return b-a;
4 }))
5 //[5,4,3,2,1]

  4、concat() 创建并返回一个新的数组。原始数组并未改变。  

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

  5、slice()  

  slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。

1 var arr=[1,2,3,4,5]
2 console.log(arr.slice(1,3))//[2, 3]
3 console.log(arr.slice(1,-1))//[2,3,4]

  6、splice(start, deleteCount, item1, item2, ...  splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容,原始的数组发生了改变。

  start指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数);若只使用start参数而不使用deleteCount、item,如:array.splice(start) ,表示删除[start,end]的元素。

  deleteCount整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。如果deleteCount被省略,则其相当于(arr.length - start)。

  item1, item2, ... 可选要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

  splice方法使用deleteCount参数来控制是删除还是添加:
  start参数是必须的,表示开始的位置(从0计数),如:start=0从第一个开始;start>= array.length-1表示从最后一个开始。
  ①、从start位置开始删除[start,end]的元素。
  array.splice(start)
  ②、从start位置开始删除[start,Count]的元素。
  array.splice(start, deleteCount)    
  ③、从start位置开始添加item1, item2, ...元素。
  array.splice(start, 0, item1, item2, ...)   

  返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

复制代码
var arr=[1,2,3,4,5]
arr.splice(1);
console.log(arr)//[1]
arr=[1,2,3,4,5]
arr.splice(1,3)//[1,5]
console.log(arr);
arr=[1,2,3,4,5]
arr.splice(1,3,1,2,3)
console.log(arr);//[1,1,2,3,5]
复制代码

   7.push()和pop()  pop()方法从数组中删除最后一个元素,并返回该元素的。 

           push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

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

  8、shift()和unshift()

   shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

   unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度.    

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

 

  9、toString()和toLocaleString()

  toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

  toString() 返回一个字符串,数组中的元素将使用各自的 toString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开 

1 var arr=[1,2,3,4,5]
2 console.log(arr.toString());//'1,2,3,4,5'
3 console.log(arr.toLocaleString())//'1,2,3,4,5'

 

  10、遍历方法

  在下面的众多遍历方法中,有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前,数组的length属性会被缓存在某个地方,所以,如果你在回调函数中为当前数组添加了新的元素,那么那些新添加的元素是不会被遍历到的。此外,如果在回调函数中对当前数组进行了其它修改,比如改变某个元素的值或者删掉某个元素,那么随后的遍历操作可能会受到未预期的影响。总之,不要尝试在遍历过程中对原数组进行任何修改,虽然规范对这样的操作进行了详细的定义,但为了可读性和可维护性,请不要这样做。

  10.1、forEach()   forEach() 方法对数组的每个元素执行一次提供的函数。 

1 array.forEach(callback(currentValue, index, array){
2     //do something
3 }, this)
4 
5 array.forEach(callback[, thisArg])

    currentValue  数组中正在处理的当前元素。

      index(索引)         数组中正在处理的当前元素的索引。

   array              forEach()方法正在操作的数组。

   thisArg    可选可选参数。当执行回调 函数时用作this的值(参考对象)。

复制代码
 1 function logArrayElements(element, index, array) {
 2     console.log("a[" + index + "] = " + element);
 3 }
 4 
 5 // 注意索引2被跳过了,因为在数组的这个位置没有项
 6 [2, 5, ,9].forEach(logArrayElements);
 7 
 8 // a[0] = 2
 9 // a[1] = 5
10 // a[3] = 9
复制代码

 

   10.2 map()  map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回的数组和原数组等长。 

1 let new_array = arr.map(function callback(currentValue, index, array) { 
2     // Return element for new_array 
3 }[, thisArg])

  参数和forEach()一样。  

1 var arr=[1,2,3,4,5];
2 //数组的元素翻倍
3 var new_arr=arr.map((currentValue)=>{
4     return currentValue*2;
5 });
6 console.log(new_arr);//[2,4,6,8,10]

  10.3 filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 fileter()方法回跳过稀疏数组中缺少的元素。 

1 var new_array = arr.filter(callback[, thisArg])

  callback()  用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。
  thisArg可选。执行 callback 时的用于 this 的值。 

1 var arr=[1,2,3,4,5];
2 //数组的元素翻倍
3 var new_arr=arr.filter((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//[4,5]

  10.4、every()  every() 方法测试数组的所有元素是否都通过了指定函数的测试。

1 arr.every(callback[, thisArg])

  every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 truecallback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。callback 被调用时传入三个参数:元素值,元素的索引,原数组。 

1 var arr=[1,2,3,4,5];
2 //检测数组的元素是否都大于3
3 var new_arr=arr.every((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//false

 

  some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

  some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 falsecallback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。

1 arr.some(callback[, thisArg])

 

1 var arr=[1,2,3,4,5];
2 //检测数组的元素是否都大于3
3 var new_arr=arr.some((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//true

  10.5 reduce()和reduceRight()

  reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。数组中被删除的索引或从未被赋值的索引会跳过

  reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。数组中被删除的索引或从未被赋值的索引会跳过 

1 arr.reduce(callback[, initialValue])

  callback执行数组中每个值的函数,包含四个参数:

  accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

  currentValue 数组中正在处理的元素。
  currentIndex 可选数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。
  array可选    调用reduce的数组

  initialValue 可选用作第一个调用 callback的第一个参数的值。 reduce()如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。reduceRight()没有提供初始值,则使用最后一个。 

复制代码
 1 var arr=[1,2,3,4,5];
 2 //检测数组的元素是否都大于3
 3 var new_arr=arr.reduce((accumulator,currentValue)=>{
 4     return currentValue*accumulator;
 5 },10);
 6 console.log(new_arr);//1200
 7 var new_arr=arr.reduceRight((accumulator,currentValue)=>{
 8     return currentValue*accumulator;
 9 },10);
10 console.log(new_arr);//1200
复制代码

  10.6、indexOf()    方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

      lastIndexOf()        方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。     

1 arr.indexOf(searchElement)
2 arr.indexOf(searchElement[, fromIndex = 0])
3 arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
1 var arr=[1,2,3,4,5,1];
2 //检测数组的元素是否都大于3
3 console.log(arr.indexOf(1));//0
4 console.log(arr.lastIndexOf(1));//5

九、数组类型 

  判断对象数组的方法:

  1、Array.isArray()方法

  2、instanceof

  3,检查对象的类属性;  

1 var arr=[1,2,3,4,5,1];
2 //检测数组的元素是否都大于3
3 console.log(Array.isArray(arr));//true
4 console.log(arr instanceof Array);//true
5 console.log(Object.prototype.toString.call(arr).slice(8,-1)) //Array

 十、类数组对象

  把一个拥有数值length和非负整数属性的对象看做类数组对象,函数的argument对象、document.getElementByTagName()都是类数组对象。数组的方法时通用的,可以用Function.call()间接调用。  

复制代码
1 var arr={
2     '0':100,
3     '1':10,
4     '2':100,
5     length:3
6 };
7 //调用数组方法
8 console.log(Array.prototype.join.call(arr,"+"))//'100+10+100'
复制代码

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多