JavaScript数组

最新推荐文章于 2024-03-29 19:39:55 发布

今天晚上一定要早睡

最新推荐文章于 2024-03-29 19:39:55 发布

阅读量198

点赞数

分类专栏： es5 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48192192/article/details/120186747

版权

es5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

数组的概念

数组是一组数据的集合，数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的方式。
数组中每个数据被称为元素。

创建数组

数组中的数据需要用逗号分隔开

利用new创建数组

var  数组名=new  Array（）；
var  arr = new  Array （）； //创建有一个新的数组

利用数组字面量创建数组

var   数组名=  [ ] ;   // 创建了一个空数组
var   数组名 = [ '小白' , ' 小黑 ' ] ;

获取数组元素

数组的索引（下标）是用来访问数组元素的序号的，数组下标是从0 开始的。

访问数组元素：数组名 [ 索引 ]
由于没有该数组元素而访问不到，则输出的结果是undefined。

遍历数组

遍历：把数组中每个元素从头到尾访问一次。
arr.length : 数组的长度，动态监测数组的元素个数。

var arr = [' xiaoming ' , ' xiaohong ' , ' xiaobai ' , ' xiaohei ' , ' xiaoxiao ' , ' xiaohuang ' ] ;
for (var i=0 ; i < arr.length ; i++){
	console.log(arr[ i ]) ;
}

讲数组转换为字符串，字符串之间用！分隔

var  arr=[' xiaoming ' , ' xiaohong ' , ' xiaobai ' , ' xiaohei ' ];
var str='';
var sep='!';
for(var i=0;i<=arr.length;i++){
	str+= arr[i] + sep;
}
console.log(str);

数组新增元素

1. 修改length值

通过修改length值来实现数组扩容的目的

var arr=[’ xiaoming ’ , ’ xiaohong ’ , ’ xiaobai ’ , ’ xiaohei ’ ];
arr.length=6;
console.log(arr[4]); //undefined
console.log(arr[5]); //undefined

数组扩容长度为六，索引号4,5 对应的元素只进行了变量声明，并没有赋值，因此默认值为undefined。

2.修改索引号

通过修改索引号追加数组元素

var  arr=[' xiaoming ' , ' xiaohong ' , ' xiaobai ' , ' xiaohei ' ];
arr[4]='xiaohuang';  // 原数组中该索引号不存在，赋值新增
arr[2]='xiaohua';  //占用原数组索引号，替换原数组元素

不能直接给数组名赋值，否则里面的所有数组元素会被替换。

数组检测

arr.instanceof Array   //结果为true则arr为数组
Array.isArray(arr)   //结果为true，判断arr是否是数组类型
Object.prototype.toString.call(arr)

数组序列化或反序列化

数组序列化是指将数组内容拼接为字符串，反序列化指将字符串返回为数组

var arr = ["terry","larry","boss"];    
arr.toString()  //terry,larry,boss 
var str = arr.join("|");  //terry|larry|boss   //序列化
var arr = str.split("|"); ["terry","larry","boss"];  //反序列化

数组去重

set()

var arr = [1, 1, 4, 2, 2, 3, 3, 3, 6, 6, 6];
arr = Array.from(new Set(arr));

indexof()

var newArr = [];
	arr.forEach((item) => {
  		newArr.indexOf(item) === -1 ? newArr.push(item) : "";
	});

includes()

var newArr = [];
	arr.forEach((item) => {
  		newArr.includes(item) ? "" : newArr.push(item);
	});

数组深浅拷贝

浅拷贝: (会改变原数组)
就是数组A重新赋值给数组B,数组B里的属性值被改变,则数组A里的值也会跟着发生改变。

深拷贝: (不会改变原数组，返回一个新数组)
（1）使用slice() （截取）和 concat()（数组拼接）方法来实现深拷贝
（2）利用循环实现

可迭代对象

可迭代（Iterable）对象是数组的泛化。这个概念是说任何对象都可以被定制为可在for..of循环中使用的对象。

很多其他内建对象也都是可迭代的。例如字符串也是可迭代的。

如果我们希望一个对象是可以迭代（也可以是自定义对象）,我们必须为对象添加一个Symbol.iterator方法，这个方法必须返回一个 迭代器iterator(内部一个有next方法的对象)。

range[Symbol.iterator] = function() {
  return {
    current: this.from,
    last: this.to,      
    next() {
      // 4. 它将会返回 {done:.., value :...} 格式的对象
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  };
};

原始就具有迭代器接口的数据类型有：Array、Map、Set、String、TypedArray、arguments、NodeList

可迭代（iterable）和类数组（array-like）

Iterable 是实现了 Symbol.iterator 方法的对象。
Array-like 是有索引和 length 属性的对象，所以看起来很像数组。

var obj = {
    0:'zhangsan',
    1:'lisi',
    2:'wangwu',
    length:3
}

类数组或可迭代对象转换为数组

Array.from()方法进行转换(ES6）
使用遍历方式(for-in)把成员放到一个新数组中

var obj={
1:‘a’,
2:‘b’,
3:‘c’
length:3
}
var arr=[];
for(var i in obj){
arr=arr.push(obj[i])
}

栈，队列方法

栈和队列方法不会改变原数组

栈 LIFO (Last-In-First-Out)

pop() 移除数组中的最后一个项并且返回该项，同时将数组的长度减一，
push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度

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

shift() 移除数组中的第一个项并且返回该项，同时将数组的长度减一
unshift() 在数组的前端添加任意个项，并返回数组的长度

数组截取拼接

concat()：数组拼接，先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾
slice():接收2个参数(start_index,end_index),返回该截取返回的元素。不会改变原数组

var arr=[13,1,15,7,52,34,27,21];
var arr3 = new_arr.slice(0,3);//13,1,15

splice():接收3个参数(start_index,length,替换或追加的元素)。会改变原数组,返回选中的元素。

var arr=[13,1,15,7,52,34,27,21];
arr.splice(2,3,8,8,8);//13, 1, 8, 8, 8, 34, 27, 21
var res = arr.splice(2,3,8,8,8);1,15,7

数组的迭代方法

every 全部成员都满足，才会返回true

var arr=[13,1,15,7,52,1,34,27,21,0];
//判断元素是否都大于0
var res = arr.every(function(v,index,arr){   
return v>=0;
})

some 只要有一个成员满足，就会返回true

//判断成员中是否有满足18岁
res = arr.some(function(v){
return v>=18;
})

filter 过滤器获取满足条件的元素

//获取满足18岁的所有成员
res = arr.filter(function(v){
return v>=18;
})

map方法，有返回值

//所有成员岁数+1
res = arr.map(function(v){
return v+18;
})

forEach方法，对数组的每个元素执行一次提供的函数，无返回值(返回undefined)
forEach方法主要有三个参数，分别是数组内容、数组索引、整个数组（val,index,arr）
forEach适用于循环次数未知或循环次数不好求的情况，效率较高。

//打印所有成员
res = arr.foreach(function(v){
console.log(v)
})

数组实例

1.筛选数组

将数组中大于等于10的元素筛选出来放入新数组
//方法一
var arr=[3,7,4,18,33,2];
var newArr=[];
var j=0;
for(var i=0;i<arr.length;i++){
    if(arr[i]>=10){
        newArr[j]=arr[i];  //新数组下标从0开始，逐步增加
        j++;
    }
}
console.log(newArr);
//方法二 
var arr=[3,7,4,18,33,2];
var newArr=[];
for(var i=0;i<arr.length;i++){
    if(arr[i]>=10){
        newArr[newArr.length]=arr[i];    //新数组通过新数组的长度不断累加
    }
}
console.log(newArr);

2.数组去重

去除数组中值为0的元素

var arr=[3,7,0,4,18,0,33,2];
var newArr=[];
for(var i=0;i<arr.length;i++){
    if(arr[i]!=0){
        newArr[newArr.length]=arr[i];
    }
}
console.log(newArr);

使用set将数组去重：

var arr=[11,2,2,3,4,4,5,6,6,7,8,8,8,8,9,0,9,1] ;
var a=[...new Set(arr)];
console.log(a);

var set=new Set(arr);
console.log(Array.from(set));

使用遍历进行去重

var newarr=[ ];
for(var i in arr){
	if(newarr.indexOf(arr[i])!=-1){
	newarr.push(arr[i])
}

3.翻转数组

var arr=[1,2,3,4,5,6];
var newArr=[];
for(var i=arr.length-1;i>=0;i--){  
    newArr[newArr.length]=arr[i];  //首尾交换
}
console.log(newArr);

4.数组排序

冒泡排序

重复走过要排序的数列，一次比较两个元素，若顺序错误则交换，顺序正确则不交换，直至数列排序完成。

var arr=[1,2,3,4,5,6];
for(var i=0;i<arr.length;i++){  //外层循环，总趟数
    for(var j=0;j<arr.length-i-1;j++){  //内层循环，交换次数
        //内部交换两个变量
        if(arr[j]>arr[j+1]){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
}
console.log(arr);

5.数组求和

利用循环（for循环，forEach，for-in，for-of）
for-in

sum=0;
for(var i in array){
    sum+=array[i];
}
console.log(sum);

for-of

sum=0;
for(var i of array){
    sum+=i;
}
console.log(sum);

forEach

var sum=0;
array.forEach((value)=>{
    sum+=value;
})
console.log(sum);

reduce方法

var sum=array.reduce((total,num)=>{
    return total+num;
});
console.log(sum);