JavaScript内置对象之Array的使用小结
更新时间：2020年05月12日 10:32:45 作者：huangfuyk
这篇文章主要介绍了JavaScript内置对象之Array的使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
数组的创建方式：
1.字面量：
放置一个数值时，就是一个数据。
var arr = [6];
2.构造函数：
放置一个数据时，表示长度或数据的个数，空表示undefined。
var arr = new Array(6);
建议：Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。
数组的操作：
1.push();
用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
注意，该方法会改变原数组
var arr = [1,2,3];
console.log(arr.push("hello")); //4
console.log(arr); //[1,2,3,"hello"]---原数组改变
console.log(arr.push("a","b")); //6
console.log(arr); //[1,2,3,"hello","a","b"]---原数组改变
2.pop();
用于删除数组的最后一个元素，并返回该元素。对空数组使用pop方法，不会报错，而是返回undefined。
注意，该方法会改变原数组
var arr = [1,2,3]; console.log(arr.pop()); //3 console.log(arr); //[1,2] →原数组改变
3.concat();
合并数组。
注意，该方法不会改变原数组
var arr1 = [1,2,3]
var arr2 = arr1.concat();
console.log(arr1); //[1,2,3]→→原数组
console.log(arr1 === arr2); //false
console.log(arr2); //[1,2,3]→→原数组的副本
console.log(arr1.concat("hello","world"));
//[1,2,3,"hello","world"]
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));
//[1,2,3,"a","b",[3,4],{"name":"admin"}]
console.log(arr1); //[1,2,3]→→原数组未改变
4.shift();
用于删除数组的第一个元素，并返回该元素。
注意，该方法会改变原数组
var arr = [1,2,3] console.log(arr.shift()); //1 console.log(arr); //[2,3]→→原数组改变
5.unshift();
用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
注意，该方法会改变原数组
var arr = [1,2,3];
console.log(arr.unshift("hello")); //4
console.log(arr); //["hello",1,2,3]→→原数组改变
console.log(arr.unshift("a","b")); //6
console.log(arr); //["a","b","hello",1,2,3]→→原数组改变
6.slice();
用于复制目标数组的一部分，返回一个新数组。
注意，该方法不会改变原数组。
如果slice方法的参数是负数，则表示倒数计算的位置；如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。
var arr = ["a","b","c","d","e"]; console.log(arr.slice(1,3)); //["b","c"] console.log(arr.slice(1)); //["b","c","d","e"] console.log(arr.slice(-4,-1)); //["b","c","d"] console.log(arr.slice(-2)); //["d","e"] console.log(arr.slice(1,-2)); //["b","c"] console.log(arr); //["Tom","Jack","Lucy","Lily","May"]→→原数组未改变
7.splice();
用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。
注意，该方法会改变原数组。
起始位置如果是负数，则表示从倒数位置开始删除。
①不传参时：无操作;
var arr = ["a","b","c","d","e"]; console.log(arr.splice()); //[] console.log(arr); //["a","b","c","d","e"]→→无操作
②只传入start：表示从索引为start的数据开始删除，直到数组结束;
var arr = ["a","b","c","d","e"]; console.log(arr.splice(2)); //["c", "d", "e"] console.log(arr); //["a", "b"]→→原数组改变
③传入start和num：表示从索引为start的数据开始删除，删除num个;
var arr = ["a","b","c","d","e"]; console.log(arr.splice(2,2)); //["c", "d"] console.log(arr); //["a", "b", "e"]→→原数组改变
④传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置;
var arr = ["a","b","c","d","e"]; console.log(arr.splice(2,2,"f","g")); //["c", "d"] console.log(arr); //["a", "c", "f", "g", "e"]---原数组改变
8.reverse();
用于颠倒排列数组元素，返回改变后的数组（还是原数组）。
注意，该方法将改变原数组
var arr = [a,b,c]; console.log(arr.reverse()); //[c,b,a] console.log(arr); //[c,b,a]→→原数组改变
9.sort();
对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变；
注意：sort方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，例如：121排在13的前面；如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。
[10111,1101,111].sort(function(a,b){
return a - b; // 升序
// return b - a; // 降序
}) // [111,1101,10111]
10.join();
以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔；
注意， 该方法不会改变原数组；
如果数组成员是undefined或null或空位，会被转成空字符串。
var arr = [a,b,c];
console.log(arr.join()); // a,b,c
console.log(arr.join("*")); // a*b*c
console.log(arr); //[1,2,3]→→原数组未改变
11.for- in();
遍历语句，类似于循环，但for-in可以遍历没有索引的集合，也被成为枚举。
- for(var i in arr) i是下标;
- for(var i in obj) i是属性名.
补充：
push和pop结合使用，就构成了“后进先出”的栈结构（stack）;
push和shift结合使用，就构成了“先进先出”的队列结构（queue）。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
*
* Array.isArray(对象)---->判断这个对象是不是数组
* instanceof关键字
* .concat(数组,数组,数组,...) 组合一个新的数组
* .every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)
* 如果这个数组中的每个元素的值都符合条件,最后才返回的是true
*
* .filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组
*
* .push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
* .pop();--->删除数组中最后一个元素,返回值就是删除的这个值
* .shift();--->删除数组中第一个元素,返回值就是删除的这个值
* .unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
* .forEach(函数)方法---遍历数组用---相当于for循环
* .indexOf(元素值);返回的是索引,没有则是-1
* .join("字符串");----返回的是一个字符串
* .map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
* .reverse();----->反转数组
* .sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
* .arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
* .splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素
*
*
* */
//构造函数
// var arr1=new Array();
// //字面量的方式
// var arr2=[];
//对象是不是数组类型:两种
//1 instanceof
// var obj=[];
// console.log(obj instanceof Array);//false
//
// //2 使用数组的
// console.log(Array.isArray(obj));//
// var arr=["a","b","c"];
// var newArr=Array.from(arr);
// console.log(newArr);
// var arr1=[10,20,30];
// var arr2=[40,50,60];
// console.log(arr1.concat(arr2));
// var arr=[1000,2000,3000];
// //a----: 元素的值
// //b----: 索引的值
// //c----:谁调用了这个方法,那么c就是谁---->arr
// var flag= arr.every(function (a,b) {
// //console.log(a+"==="+b+"===="+c);
// return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
// });
// var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
// var flag=arr.every(function (ele,index) {
// //数组中的每个元素的长度是不是大于4
// return ele.length>4;
// });
//console.log(flag);
// var arr=[10,20,30,40,50,60,70,80];
// var newArr=arr.filter(function (ele) {//ele---每个元素
// return ele>40;
// });
// console.log(newArr);
// var arr=[10,0,20,0,40,0,60,100];
// var newArr=arr.filter(function (ele) {
// return ele!=0;
// });
// console.log(newArr);
// var arr=[10,20,30,40,50];
// var result=arr.unshift(100);
// console.log(result);
// console.log(arr);
//
// var arr = [10, 20, 30, 40];
// arr.forEach(function (ele,index) {
// console.log(ele+'======'+index);
// });
// var arr=[10,20,30,40];
// var index=arr.indexOf(300);
// console.log(index);
// var arr=["小白","小黑","小红","小芳","小绿","小苏"];
// var str=arr.join("|");
// console.log(str);
// var numbers = [1, 4, 9];
// var roots = numbers.map(Math.sqrt);
// console.log(roots);
// var arr=[10,20,30,40,50];
// arr.reverse();//反转
// console.log(arr);
// var arr=[1,40,20,10,100];
// //a---arr[j]
// //b---arr[j+1]
// arr.sort(function (a,b) {
// if(a>b){
// return 1;
// }else if(a==b){
// return 0;
// }else{
// return -1;
// }
// });
// console.log(arr);
//
// var arr=[10,20,30,40,50,60,70,80,90,100];
// var newArr= arr.slice(3,7);
// console.log(newArr);
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
// myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）
console.log(myFish);
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]
</script>
</head>
<body>
</body>
</html>
到此这篇关于JavaScript内置对象之Array的使用小结的文章就介绍到这了,更多相关JavaScript内置对象Array内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了使用js获取隐藏元素宽高的解决方案以及代码思路，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
今天小编就为大家分享一篇LayUI表格批量删除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了JS作用域链的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript实现读取与输出XML文件数据的方法,结合实例形式分析了JavaScript基于ActiveXObject实现载入、读取与输出xml文件数据的相关操作技巧,需要的朋友可以参考下2018-06-06
JavaScript列表框listbox全选和反选的实现方法
这篇文章主要介绍了JavaScript列表框listbox全选和反选的实现方法,涉及javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效，快跟随小编一起学习一下吧2022-10-10
下面小编就为大家带来一篇JS获取字符串实际长度(包含汉字)的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章介绍了window.open()被浏览器拦截的解决方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
本文主要分享了canvas实现弹幕效果的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
简单写了下，只测试了chrome，道理很简单，其他浏览器自行扩充。2013-05-05
最新评论