JS — 19 关于数组的一些API

关于数组的一些API

let arr = [1,2,3,4];

一、length

1.获取数组长度

console.log( arr.length );//4

2.通过下标修改值

arr[0] = 11;
console.log( arr );//[11,2,3,4]

3.通过length修改数组长度

arr.length = 2;
console.log( arr );//[11,2]

4.如何快速把数组清空

arr.length = 0;
console.log( arr );//[ ]

5.如果length比原来长

arr.length = 10;
console.log( arr );// [empty × 10]
console.log( arr[7] );//undefined

二、添加删除数组数据的API

let arr_a = [11,22,33,44];

1.push( );

push( ) ：往数组后面添加数据，( )写要新增的数据

arr_a.push( 55,66,77 );
console.log( arr_a ); //[11, 22, 33, 44, 55, 66, 77]

2.pop( );

pop( ) ：删除数组的最后一个数据，( )里面不需要写任何内容，一次只能删一个，删除多个重复写。

arr_a.pop();
console.log(arr_a);//[11,22,33,44,55,66]

3.unshift( );

unshift( ) ：往数组前面添加数据。

arr_a.unshift( 10 );
console.log( arr_a );//[10, 11, 22, 33, 44, 55, 66]

4.shift( );

shift( ) ：删除数组的第一个数据。

arr_a.shift();
console.log( arr_a );//[11, 22, 33, 44, 55, 66]

5.splice( );

splice( ); 有三个参数

• 第一个参数 ：从哪一位开始
• 第二个参数 ：删除多少个
• 第三个参数 ：用什么来替换

let arr_b = [11,22,33,44];

a.删除并替换操作

arr_b.splice( 1,1,99 );//[11,99, 33, 44] 
//删除下标为1的,删除1个,替换成99
console.log( arr_b );

b.新增

arr_b.splice( 2,0,55 );
console.log( arr_b );//[11, 99, 55, 33, 44] 
//在99和33中间添加55

c.在最后新增 (推荐直接用push)

arr_b.splice( arr_b.length,0,100 );
console.log( arr_b );

三、遍历数组的每一项 .forEach( );

forEach用于：

• 数组
• 通过 .querySelectorAll( " " ); 获取的类数组

//格式
.filter(function(item,index,arr){
				//item:数据
				//index:序号,下标
				//arr:原数组
				//三个参数顺序不能改变
	//语句
})

例如：点li出现弹框，弹框内容为li中的内容。

<ul>
	<li>00</li>
	<li>11</li>
	<li>22</li>
	<li>33</li>
	<li>44</li>
</ul>

思路

• 获取所有的li，所有li是一个类数组。
• 遍历这个数组，赋予点击事件，点数组中的每一项，出现对应每一项的内容。

//获取所有的li元素 .querySelectorAll();
let aWrap = document.querySelectorAll("ul>li");
//遍历数组,赋予事件
aWrap.forEach(function(item){//item 获取的是数据,就是元素本身
	item.onclick = function(){//给元素本身赋予点击事件
		alert(this.innerText);//弹框内容为item中的内容
	}
});

这样写就可以实现我们的需求，但并不是最完美的写法，我们在这里可以使用箭头函数。

aWrap.forEach(item => {
	item.onclick = function(){
		alert(this.innerText);
	};
}

四、筛选数组中的数据 .filter( );

.filter( ); 只有return返回值为true才能产生新数组。
它也有三个参数，和 .forEach 的参数一致。

例如：筛选出数组中的偶数
思考：何为偶数，能被2整除的为偶数，除得尽2的数为偶数，即：一个数%2 = 0，此时得到返回值为0，为false，但是在 .filter( ) 中只有只接收返回值为true的数据，因此我们可以取反！

let arr_b = [1,2,3,4,5,6,7];
let arr_c = arr_b.filter(function(item){
	return !(item%2)
});
console.log(arr_c);

打印结果如下：只留下了偶数

那么同样，上述方法我们也可以使用箭头函数来写，会显得简单很多，同时代码量也会大大减少。

let arr_c = arr_b.filter(item => !(item%2));

两次打印结果一致，但是使用剪头函数明显简单了不少。

五.创建一个新数组,接收原来数组调用函数后的返回值 .map( );

.map( ) 和上述两种方法一致，都有三个参数。

用 .map( ) 接收return的返回值，return返回什么，它就接收什么。

例如：创建一个新数组，新数组的每一项都是原来数组的平方。

let arr_e = [1,2,3,4,5,6];
let arr_f = arr_e.map(function(sub){
	return sub*sub;
});
console.log(arr_f);

打印结果如下：新数组的每一项都是原来数组每一项的平方

同样，我们可以用箭头函数来写

let arr_g = arr_e.map(a => a*a)
console.log(arr_g);

六、额外知识点补充

求一个数的n次方， **

let a = 10;
console.log( a ** 3 );