首页 > 编程语言> 文章详细

一篇搞懂 javascript 数组中常用的属性及方法（案例说明一看就会）

2021-12-19 22:59:28 阅读：234 来源： 互联网

标签：blue javascript green 数组 var 搞懂方法 red

JS数组中常用属性及方法

前言

前言

在Javascript中数组的属性和方法非常的多，并且在实际开发中，我们会经常用到数组的一些方法来实现逻辑，所以今天这里就来总结数组的常用属性和方法。

数组的创建

数组的创建一般有以下三种方法：

使用 JavaScript 关键词 new

var color= new Array("red", "blue", "green");

使用数组文本创建

var color2 = ["red", "blue", "green"];

数组中添加值

color2[3] = 'abc';
color2[4] = 'xyz';

如果想要获取数组中的值，可以这样：

color2[3] ;	//'abc';

获取数组最后一个元素

 color2[color2.length-1];

获取数组长度

color2.length; //5

数组的方法

toString()

toString() 把数组转换为数组值（逗号分隔）的字符串

var arr1 = ["red", "blue", "green"];
arr1.toString();  //"red,blue,green"

join()

join() 方法也可将所有数组元素结合为一个字符串可以定义分隔符

var arr2 = ["red", "blue", "green"];
console.log(arr2.join(":")) //red:blue:green
console.log(arr2.join(" ")) //red blue green

在这里插入代码片

添加新元素

unshift() 方法

在开头向数组添加新元素

var arr3 = ["red", "blue", "green"];
arr3.unshift("abc"); //["abc", "red", "blue", "green"]

push() 方法

在数组结尾处向数组添加一个新的元素

arr3.push("xyz");  //["abc", "red", "blue", "green","xyz"]

删除元素

pop() 方法

从数组中删除最后一个元素 pop()返回的是被弹出的值

var arr4 = ["red", "blue", "green"];
arr4.pop(); //"green"    arr4 ======["red", "blue"]

shift() 方法

会删除首个数组元素，并把所有其他元素“位移”到更低的索引 返回的是被弹出的值

arr4.shift();//"red"

修改元素

splice() 方法

方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组

var arr5 = [5,6,7,8];
arr5.splice(1,1);  //删除了6   arr5 的结果是[5,7,8]
arr5.splice(1,0,9);//arr5 的结果是[5, 9, 6, 7, 8]
arr5.splice(1,2,3);//arr5 的结果是 [5, 3, 8]

slice() 方法

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素

var arr6 = [5,6,7,8];
arr6.slice(1,3) //[6, 7]

arr6 仍然还是[5,6,7,8]; 返回的是选定的元素，该方法不会修改原数组

合并数组

concat() 方法用于连接两个或多个数组 该方法不会改变原有的数组

var arr7 =[1,2,3];
var arr8 = [4,5,6];
var arr9 = arr7.concat(arr8);
    //arr9  [1, 2, 3, 4, 5, 6]

sort()排序

var arr10 =["red", "blue", "green"];
arr10.sort(); // ["blue", "green", "red"]

var arr11 = [1,10,5,12,4,9,22];
arr11.sort();// [1, 10, 12, 22, 4, 5, 9]

reverse() 方法用于颠倒数组中元素的顺序会改变原数组

arr11.reverse();// [22, 9, 4, 12, 5, 10, 1]

遍历数组

for循环遍历

for循环很简单没啥好说的，下面例子应该比较容易懂

var arr12 =["red", "blue", "green"];
var str = "";
for(var i=0;i<arr12.length;i++){
    str += "<p>"+arr12[i]+"</p>"
};
document.getElementById("test").innerHTML= str;

forEach() 方法

forEach用于调用数组的每个元素，并将元素传递给回调函数。
讲arr13里面每一个元素都遍历+1

var arr13 =[1,2,3];
var a14=[];
arr13.forEach(function(item,index){   //item=1  2   3
   a14.push(item+1);
});
console.log(a14);

筛选数组

filter()

对数组的每一项都运行给定的函数，返回结果为 ture 的项组成的数组

 var arr15 = [2,3,5,6,7,18,9];
 var a15 = arr15.filter(function(item,index){
    return item >5;   //满足的条件  大于5的结果[6, 7, 18, 9]
 });

every()

对数组的每一项都运行给定的函数，每一项都返回 ture,则返回 true
每一项都满足条件时返回true,只要有一个不满足返回false

var a16 = arr15.every(function(item,index){
	//return item >5;   //必须要求每一个数字都>5才会返回true  否则返回false   
	return item>1; //true
});

some()

只要有一个满足返回true,都不满足返回false

var a17 = arr15.some(function(item,index){
  //return item >5;   //只要有一个满 足了条件，返回true 
	return item==0; //false   都不满足 返回false
});

最后

以上列举了数组常用的属性和方法，最好还是自己敲一遍加深印象，如果还有补充欢迎留言，纯手敲，总结不易，对你有帮助的话点赞支持下呀~

标签：blue,javascript,green,数组,var,搞懂,方法,red
来源： https://blog.csdn.net/weixin_45745641/article/details/122028165

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一篇搞懂 javascript 数组中常用的属性及方法（案例说明 一看就会）