js数组方法

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