javascript数组及其常用方法详解

最新推荐文章于 2021-09-09 09:56:16 发布

LoveyL0201

最新推荐文章于 2021-09-09 09:56:16 发布

阅读量375

点赞数 1

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/chen_junfeng/article/details/109049390

版权

javascript基础专栏收录该内容

18 篇文章 4 订阅

订阅专栏

数组-array

创建数组的两种方式
- Array构造函数创建
```
var arr = new Array();
```
  - 如果想要保存数组的项数
```
var arr = new Array(20);  //创建一个数组为长度20的数组
```
  - 也可以传递字符串，但不能只传递一个数字，只传递一个数字会默认为数组的长度
- 字面量创建
```
var arr = ['red','green','yellow'];
var arr1 = [];
```

length属性

可以通过设置length这个属性，从数组末尾增加或者删除新的数据

var arr = [1,2,3];
arr.length = 4;
arr[3] = 4;  // [1,2,3,4]
arr.length--; //[1,2,3]

检测数组

Array.isArray( value ) 返回值是一个boolean类型

重构
Array.isArray_1=function(list){
      return list.constructor===Array;
    }

var arr = [1,2,3,4];
console.log(Array.isArray(arr));   //true

function fn() {
  console.log(arguments)     //false
}
fn(1,2,3,4)    //arguments 是一个为数组

Array.from( list ) 将非数组列表伪数组转化为数组的静态方法返回一个新的数组

重构
Array.from_1=function(list){
            return [].slice.call(list);
   }

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
        var divs = document.getElementsByTagName('div');
        console.log(divs); //HTMLCollection(5) [div, div, div, div, div]
        console.log(Array.from(divs)); //(5) [div, div, div, div, div]
</script>

将数组转化为字符串

arr.toString( ) 转换的结果以逗号进行拼接会拍平每一项多为数组也会用逗号连接每一项

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

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

数组常用方法

栈方法

push( value ) 向数组中末尾插入数据返回新数组的长度改变原始数组

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

pop( ) 删除末尾的最后一项返回移除的项改变原始数组

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

队列方法
- shift( ) 移出数组的首项。返回移除的项改变原始数组
```
 var arr = [1, 2, 3, 4];
 var res = arr.shift();
 console.log(res);  //1
```
- unshift( value ) 向数组的开始位置插入数据并返回新的数组的长度改变原始数组
```
var arr = [1, 2, 3, 4];
var res = arr.unshift(5);
console.log(res);   //5
```

排序方法

reverse( ) 反转数组项的顺序改变原始数组

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

sort( ) 直接操作原始数组

//升序
 var arr = [1, 3, 32, 9, 24, 19, 3, 90, 35, 4];
        var res = arr.sort(function(a, b) {
            return a - b;
        });
        console.log(res); //1,3,3,4,9,19,24,32,35,90
        console.log(arr); //1,3,3,4,9,19,24,32,35,90

//降序
 var arr = [1, 3, 32, 9, 24, 19, 3, 90, 35, 4];
        var res = arr.sort(function(a, b) {
            return b - a;
        });
        console.log(res); //90,35,32,24,19,9,4,3,3,1
        console.log(arr); 
//随机乱序
var arr = [1,3,3,4,9,19,24,32,35,90]
		var res = arr.sort(function(){
			return Math.random() -0.5;
    })

操作方法

slice( start , end ) 不改变原始数组可以为负值结束位置可以选填

重构
  function slice(arr, start, end) {
            arr1 = [];
            if (start === undefined) start = 0;
            if (end === undefined) end = arr.length;
            if (start < 0) start = start + arr.length;
            if (end < 0) end = end + arr.length;
            for (var i = start; i < end; i++) {
                arr1[arr1.length] = arr[i];
            }
            return arr1;

        }

 var arr=[1,2,3,4,5];
         var arr1=arr.slice();//复制所有元素
         var arr1=arr.slice(2);//从开始到尾部的元素
         var arr1=arr.slice(-2);//如果是负数，从倒数下标开始到尾部的元素
         var arr1=arr.slice(2,3);//从开始位置到结束位置之前，要求结束位置必须大于开始位置，否则返回空数组
         var arr1=arr.slice(-3,5);//负数开始都会先变成整数在做截取复制
         var arr1=arr.slice(-3,-2);
         console.log(arr1);

concat( 元素或者数组) 如果是数组可以拍平一层数组其中每一项添加到原数组后面。不改变原始数组

重构
 function concat(arr) {
            var arr1 = [];
            for (var i = 0; i < arr.length; i++) {
                arr1[arr1.length] = arr[i];
            }
            console.log(arr1);
            for (var j = 1; j < arguments.length; j++) {
                if (arguments[j].constructor === Array) {
                    for (var k = 0; k < arguments[j].length; k++) {
                        arr1[arr1.length] = arguments[j][k];
                    }
                } else {
                    arr1[arr1.length] = arguments[j];
                }


            }
            return arr1;
        }

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

splice( ) 直接操作原始数组返回删除的项如果什么都没有删除返回一个空数组

删除：两个参数 1.要删除的初始位置 2.删除的项数

var arr = [1,2,3,4];
var res1 = arr.splice(0,0);
console.log(res1)   //[]
var res2 = arr.splice(0,2)
console.log(res2)  //[1,2]
console.log(arr)   //[3,4]

插入：1.起始位置 2.要删除的项数-就是0 3.要插入的项

var arr = [1,2,3,4];
var res1 = arr.splice(0,0,4,5);
console.log(res1)   //[]
console.log(arr)    //[4,5,1,2,3,4]
var res2 = arr.splice(0,2,5,6)
console.log(res2)  //[1,2]
console.log(arr)   //[5,6,3,4]

替换：1.起始位置 2.要删除的项数 3.替换的任意项数

var arr = [1,2,3,4];
var res1 = arr.splice(0,1,4,5);
console.log(res1)   //[1]
console.log(arr)    //[4,5,2,3,4]
var res2 = arr.splice(0,2,5,6,7)
console.log(res2)  //[1,2]
console.log(arr)   //[5,6,7,3,4]

indexOf( 要查找的项，起始位置 ) lastIndexOf() 查找成功返回该项的索引只会返回查找的第一个查找失败返回-1

重构
        function indexOf(arr,elem,start){
            if(start===undefined) start=0;
            if(start<0) start=arr.length+start;
            for(var i=start;i<arr.length;i++){
                if(arr[i]===elem) return i;
            }
            return -1;
        }

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

join( 连接符号）不写默认是逗号返回一个以该链接符连接每项的字符串不改变原始数组

重构
function join(arr,separator){
            if(separator===undefined) separator=",";
            separator+="";
            var str="";
            for(var i=0;i<arr.length;i++){
                str+=arr[i]+(i<arr.length-1 ? separator : "");
            }
            return str;
        }

var var arr = [1, 2, 3, 4];
        var res = arr.join()
        console.log(res); //1,2,3,4
        var res1 = arr.join('-')
        console.log(res1); //1-2-3-4
        var res2 = arr.join(null);
        console.log(res2); //1null2null3null4
        var res3 = arr.join(true);
        console.log(res3); //1true2true3true4
        var res4 = arr.join(undefined);
        console.log(res4); //1,2,3,4
        console.log(arr);

forEach(function(item, index, arr){ }) 没有返回值仅仅是对数组进行遍历

重构
function forEach(arr,fn){
            for(var i=0;i<arr.length;i++){
                // arr[i]   i  arr
                if(i in arr)fn(arr[i],i,arr);   
            }
        }

var arr = [2,3,4,5,6];
arr.forEach(function( item, index) {
	if (item > 3) console.log(item);
})

map(function(item, index, arr){ }) 映射数组返回回调函数结果组成的函数数组长度一定等于原数组不改变原始数组

重构
        function map(arr,fn){
            var list=[];
            for(var i=0;i<arr.length;i++){
                if(i in arr)  list[i]=fn(arr[i],i,arr);
            }
            return list;
        }

 var arr = [1,2,3,4,5]
 var arr1 = arr.map(function(item, index, arr) {
            if (item > 3) return item;
        });
        console.log(arr1);// [undefined, undefined, undefined, 4, 5]

every( function(item , index , arr){ }). 如果item的每一项都为真则返回true 否则为false

重构
 function every(arr,fn){
            for(var i=0;i<arr.length;i++){
                if(!(i in arr))continue;
                // var b=fn(arr[i],i,arr);
                // if(!b) return false;
                if(!fn(arr[i],i,arr)) return false;
            }
            return true;
        }

some(function( item， index ， arr) { }) 只要有一项为真就返回true 否则为false

重构

        function some(arr,fn){
            for(var i=0;i<arr.length;i++){
                if(!(i in arr))continue;
                if(fn(arr[i],i,arr)) return true;
            }
            return false;
        }

filter(function(item, index, arr) { }) 对数组每一项运行函数，返回该函数会返回true的数组不改变原始数组

重构
    function filter(arr,fn){
                var arr1=[];
                for(var i=0;i<arr.length;i++){
                    if(!(i in arr))continue;
                    if(fn(arr[i],i,arr)) arr1[arr1.length]=arr[i];
                }
                return arr1;
            }

fill( 要填充的数据 , 开始索引，结束索引) 前提数组要有length 返回填充好的数组

 var arr = new Array(5)
    //使用 '填充内容' 去把数组填满
    var res = arr.fill(1)
    console.log(res)  //[1，1，1，1，1]

 	var res1 = arr.fil(1,3); //[empty*3,1,1]
	var res2 = arr.fill(1,1,3) //[empty,1,1,1,empty]

Includes( 数据 ) 查看数组中是不是有某一个数据返回一个布尔值查询到true 否则为false
```
var arr = [1,2,3,4,5];
var res = arr.includes(3);
console.log(res) //true
```

flat( 扁平化数组的层数默认为1 ) 若数字为Infinity 则将拍平任意层数数组返回拍平以后的数组

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

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

flatmap( function( item , index, arr){ 条件 } ) 拍平一层数组并映射返回一个新数组

var arr = [
            [10, 21, 30],
            [40, 51, 60]
        ]
        var res = arr.flatMap(function(item) {
            return item.filter(function(item) {
                return item % 2 === 0
            })
        })
        console.log(res)  //[10,30,40,60]

find(function( item , index, arr){ 条件 } ) 找到满足条件的数据。返回那个数据，只会返回查询到的第一个

var arr = [1, 2, 3, 4, 5];
        var res = arr.find(function(item) {
            return item > 3
        });
        console.log(res);  //4

findIndex(function( item , index, arr){ 条件 }) 找到满足条件数据的索引返回该数据的索引，只会返回第一个数据的索引

var arr = [1, 2, 3, 4, 5];
        var res = arr.find(function(item) {
            return item > 3
        });
        console.log(res);  //3

归并方法
- reduce(function(value, item, index, arr) { },value初始值) 这个过程会把整个数组的每一项都访问一遍，最后返回结果
- 前一个值，当前值，项的索引，数组对象
```
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(value,item,index,arr){
	return value + item;
});
console.log(sum);  //15
```

LoveyL0201

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript数组及其常用方法详解

数组-array创建数组的两种方式Array构造函数创建var arr = new Array();如果想要保存数组的项数var arr = new Array(20); //创建一个数组为长度20的数组也可以传递字符串，但不能只传递一个数字，只传递一个数字会默认为数组的长度字面量创建var arr = ['red','green','yellow'];var arr1 = [];length属性可以通过设置length这个属性，从数组末尾增
复制链接

扫一扫