js数组方法

谁借莪１个温暖的怀抱￠ 2022-12-29 14:03 120阅读 0赞

# js数组 #

1.掌握数组的创建、遍历、常用的数组方法
    2.掌握数组元素的访问及数组的长度

1.数组元素的访问
    2.数组的遍历
    3.数组方法
    4.数组的运用

--------------------

### 1 定义数组 ###

数组定义：一系列数据的集合。有序值的集合，数组的元素可以是任何数据类型。

#### 1.1 字面量方式★★★★ ####

var arr=[1,"a",true,undefined,null,function a(){ } ];

#### 1.2 new Array() 方式★★★ ####

var arr1=new Array();	//创建一个空数组 == arr1=[];
    var arr2=new Array(3);//创建一个长度为n 的空数组 == arr2=[,,]
    var arr3=new Array(1,2,3)//创建一个值为n1,n2,n3...的数组 arr3=[1,2,3]

### 2 数组元素访问及属性 ###

#### 2.1 数组元素访问★★★★ ####

var arr=[1,"a",true,undefined,null,function a(){ } ];
    // 通过 数组下标 获取 数组元素
    arr[0];
    arr[1];

#### 2.2 length属性★★★★ ####

length属性 获取数组元素个数/长度

var arr=[1,"a",true,undefined,null,function a(){ } ];
    arr.length;

### 3 数组元素访问及属性★★★★★ ###

#### 3.1 for 遍历 ####

var arr=[1,"a",true,undefined,null];
    // 0 1 2 3 4
    for(var i=0;i< arr.length;i++){ 
    		// i 数组的下标
      	// arr[i]
    }

#### 3.2 for in 遍历 ####

var arr=[1,"a",true,undefined,null];
    // 0 1 2 3 4
    for(var 变量（下标） in 数组){ 
      	
      // i 就是 数组的 下标 0开始--下标结束
      // 0 1 2 3 4 
    }

#### 3.3 forEach 遍历 ####

var arr=[1,"a",true,undefined,null];
    // 0 1 2 3 4
    // 将 函数 当作 另一个函数的 参数。这个函数 称为 回调函数 ；
    数组.forEach( function(元素/值/val,下标index,要循环的数组){ 
      
    } )

### 4 数组方法★★★★★ ###

#### 4.1 concat join toString ####

concat() 合并数组 返回 新数组，不会改变原数组

var arr1=[1,2];
    	var arr2=[2,3];
      var arr3 = arr1.concat(arr2); //[1,2,2,3]

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的

将数组中的元素 以 分隔符 连接 ，返回一个字符串 （默认分隔符是 逗号，）

var arr1=[1,2,3];
    var str1 = arr1.join();	// 1,2,3
    var str2 = arr1.join("-");// 1-2-3

toString() 转为字符串

var arr1=[1,2,3];
    var str= arr1.toString();//1,2,3

#### 4.2 indexOf lastIndexOf slice ####

indexOf（）查找元素 在 数组中 第一次出现 的的下标，( 从左到右查找，有–下标 没有 -1 )；

var str="a";
    var arr=['b','c','a',"d","a"];
    arr.indexOf(str); // 2

lastIndexOf() 查找元素 在 数组中 最后一次出现 的的下标。（从左到右查找,有–下标 没有 -1 ）

var str="a";
    var arr=['b','c','a',"d","a"];
    arr.lastIndexOf(str); // 4

slice（start,end）从数组中返回指定元素。 **包头不包尾** 。如果是 负数 从右到左。 -1 是最后一个元素

var arr=["a","b","c","d","e"];
    // 0 1 2 3 4
    console.log("不加参数", arr.slice() ); // 返回所有
    console.log("加一个参数", arr.slice(1) ); // 返回 从下标 1 开始 到结束 的元素
    console.log("加俩个参数", arr.slice(1,3) ); // 返回 从下标 1 开始 到3 结束的元素，不包含 下标3 的元素
    
    console.log("参数是负数",arr.slice(-2));// [d ,e]
    console.log("参数是负数",arr.slice(-3,-1));//[c,d]

#### 4.3 unshift shift push pop ####

unshift() 向数组开头添加元素,返回数组长度

var arr=["a","b","c","d"];
    var length= arr.unshift("哈哈");
    console.log(arr);//["哈哈","a","b","c","d"]
    console.log(length);// 5 数组长度

shift() 从数组开头 删除 元素,返回删除的元素

var arr=["a","b","c","d"];
    var res=arr.shift();
    console.log(arr);// ["b","c","d"]
    console.log(res);// a 删除的那个元素

push() 向数组 末尾 添加元素,返回数组长度

var arr=["a","b","c","d"];
    var length= arr.push("呵呵");
    console.log(arr);// ["a","b","c","d","呵呵"];
    console.log(length);// 5 数组长度

pop () 从数组末尾 删除元素，返回删除的元素

var arr=["a","b","c","d"];
    var res=arr.pop();
    console.log(arr);//["a","b","c"]
    console.log(res);// d 删除的那个元素

#### 4.4 find findIndex filter map ####

find() 从左到右查找，如果符合条件 返回元素，没有符合条件 返回 undefined

var arr=["a","b","c","d","c"];
    var str1="c";
    var res= arr.find(function(value,index){ 
    		retrun value == str1
    }); //
    console.log(res);// c
    
    var str2="ccc"
    var res= arr.find(function(value,index){ 
    		retrun value == str2
    }); //
    console.log(res);// undefined

findIndex() 从左到右查找，如果符合条件 返回元素下标，没有符合条件返回 -1

var arr=["a","b","c","d","c"];
    var str1="c";
    var res= arr.findIndex(function(value,index){ 
    		retrun value == str1
    }); //
    console.log(res);// 2
    
    var str2="ccc"
    var res= arr.findIndex(function(value,index){ 
    		retrun value == str2
    }); //
    console.log(res);// -1

filter() 将满足条件的 组成新数组 返回，没有满足条件返回 \[ \]

var arr=[18,19,21,30,40,15,14,16];
    // 小于 18
    var res= arr.filter( function(val,index){ 
      return val<18
    } ) // [15,14,16]
    
    
    var res2= arr.filter( function(val,index){ 
      return val>88
    } ) // []

map() 遍历数组，返回 新数组

var arr=[1,2,3]；
    var res=arr.map( functon(value,index){ 
         	return value *2           
     } );// [2,3,6]

#### 4.5 includes reverse sort ####

includes() 数组中是否包含某个元素 ，包含返回 true 不包含返回false；

var arr=["a","b","c"];
    
    console.log( arr.includes("c") ); // true

reverse() 反转数组 ，返回新数组

var arr=["a","b","c"];
    arr.reverse();// ["c","b","a"]

sort() 排序 **改变原数组**

var arr=["abc","b","ad","c","f","e"]
    var arr2= arr.sort(); // 首字母 从 小 到大
    console.log(arr2);
    
    var arr3=[12,10,18,13,7,6,9];
    arr3.sort( function(a,b){ 
      // retrun a-b; // 从小到大
      return b-a; // 从大到小
      
    } )
    console.log("arr3",arr3)

#### 4.6 splice Array.isArray() Array.from() ####

Array.isArray()判断 是不是 数组，是 true 不是 false；

var arr=[];
    var str="111";
    console.log( Array.isArray(arr) );// true
    console.log( Array.isArray(str) );// false

Array.from() 类数组/ 伪数组 转数组

function a(){ 
    	console.log(arguments); // 类数组/ 伪数组
    	console.log( Array.from( arguments ) ); // 转为数组
    }
    a(1,3,5,4,6,7);

splice() 删除元素/添加元素 – **改变原数组**

splice(开始下标，删除个数，值1，值2)

### 5 数组的运用 ###

#### 5.1 数组去重 (关于数组去重可以看我前面的文章) ####

/* indexOf(); includes(); find(); findIndex(); */
     
    var arr=["a","b","a","c","b","d"];
    var arr2=[];
    
    for(var i=0;i<arr.length;i++){ 
    // 判断 arr2 数组中 是否 有 a / b /a /c
    if( arr2.indexOf(arr[i]) == -1 ){ 
    	arr2.push(arr[i]); // [a,b,c]
    }   
    }
    
    console.log(arr2);