19 JavaScript数组 &数组增删&最值&排序&迭代
关联数组(散列)
- 关联数组又叫做散列,即使用命名索引。
- JavaScript数组只支持数字索引。
- JavaScript对象使用命名索引,而数组使用数字索引,JavaScript数组是特殊类型的对象。
数组的创建:
- 1 var array = ["a","b","c"]; 文本方式创建数组
- 2 var array = new Array("a","b","c"); 数组构造器方式创建数组
处于可读、简洁性、执行速度等方面考虑,推荐使用第一种
第二种的歧义:new Array(40);数组空间为40,new Array(40,50);数组空间为2,一个元素为40,另一个为50
数组添加元素:
- 使用push方法,array.push("demo");
- 使用length属性,array[length] = "demo";
- 在大于索引的length处添加元素会打洞,array[length+2] = "demo";则length+1,length两个索引处的值为undefined
数组遍历:除了常见的for循环索引遍历,还可以使用Array.foreach(func());
<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"]; text = "<ul>"
fruits.forEach(func);
text += "</ul>"
document.getElementById("demo").innerHTML = text; function func(value){
text += "<li>" +value+ "</li>"
}
</script>
JavaScript toString():将数组转换成字符串,并且每个数组元素之间在字符串中默认以逗号分隔。
JavaScript join():将所有数组元素结合为一个字符串,但是需要指定分隔字符。
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组方法</h1> <h2>join()</h2> <p>join() 方法将数组元素连接成一个字符串。</p> <p>在这个例子中我们使用“!”作为元素之间的分隔符:</p> <p id="demo"></p> <script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" ! ");
</script> </body>
</html>
增:
JavaScript push():在数组结尾处向数组添加一个新的元素并返回新数组的长度
JavaScript shift():删除第一个元素并返回,然后整理索引
JavaScript末尾追加新元素还有一个简易方法:arr[length] = "a";
JavaScript splice(begin、number、b1Str、b2Str)拼接数组:删除begin位置开始的number个元素并用后面的字符串代替之,返回原来被删除的元素组成的数组
JavaScript concat()合并数组:arr1.concat(arr2);
删:
JavaScript pop():删除并返回数组的最后一个元素
JavaScript unshift():向第一个索引添加元素并返回新数组的长度,整理其余索引
JavaScript delete运算符:既然JavaScript数组属于对象,其中的元素就可以使用JavaScript delete 运算符来删除。注意:使用delete会留下undefined空洞,请使用pop()或者unshift()取而代之
总结:
push()、pop()针对数组末尾元素,返回的分别是新数组长度与数组末尾被删除的元素
shift()、unshift()针对数组第一个元素,返回的分别是被删除的第一个元素与在第一个位置添加元素后新数组的长度
delete运算符会留下undefined空洞,建议用pop()、shift()替代
数组排序
sort():以字母顺序对数组进行排序。字母顺序靠前的会排在前面.但是对数值按照字符串方式进行排序的时候会出现问题:25>100,因为2>1.
reverse():反转数组顺序,配合sort()可以实现数组倒序。
比值函数:
当sort()函数比较两个值时,会将值发送到比较函数,并根据所返回的值对这些值进行排序。
可以解决数组数值排序问题,比值函数应当返回一个正、负或者零值,比如40-100=-60,则把40排序为比100更低的值
同理,比值函数配合reverse()可以实现数组数值倒序排列。
总结:
- sort():按字母方式排序,对于数值不按大小,只按第一个数字比较,比如20>100,因为2>1
- sort():传入比值函数用数字方式排序,按照数字大小进行排列. 比值函数:function(a,b){return a-b}
- 反转: sort()之后配合reverse方法,或者比值函数将减数与被减数置换: function(a,b){return b-a}
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组排序</h1> <p>单击按钮以升序对数组进行排序。</p> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script>
var points = [43,15,90,2,80];
document.getElementById("demo").innerHTML = points;
function myFunction(){
points.sort(function(a,b){return a-b});
document.getElementById("demo").innerHTML = points.reverse();
}
</script> </body>
</html>
数组随机数排序:
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组排序</h1> <p>请反复点击按钮,对数组进行随机排序。</p> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points; function myFunction(){
points.sort(function(a,b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points; }
</script> </body>
</html>
数组最值:
方式1:排序取值
对数组进行排序后,根据索引取最大最小值。如顺序排列:最大值arr[arr.length-1],最小值arr[0]。
如果仅仅需要找到最高或最低值,对整个数组就那些排序是效率极低的方法
方式2:Math.max.apply(null,arr) Math.min.apply(null,arr)
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组排序</h1> <p>最大值是:<span id="demo"></span></p> <script type="text/javascript" charset="utf-8">
var arr = [100,20,10.5,1000,-1,-2.5];
document.getElementById("demo").innerHTML = Math.max.apply(null,arr);
</script> </body>
</html>
方式3:实现自己的Min/Max JavaScript方法
思路:设置一个flag为无穷小/无穷大,遍历length,将比flag大的元素赋给flag,最后返回flag即为所求。while(n--),n为0停止循环
<h1>JavaScript 数组排序</h1> <p>最小值是:<span id="demo"></span></p> <script type="text/javascript" charset="utf-8">
var arr = [100,20,10.5,1000,-1,-2.5];
document.getElementById("demo").innerHTML = getMin(arr); function getMin(arr){
var flag = Infinity;
var length = arr.length;
while(length--){
if(arr[length] < flag){
flag = arr[length];
}
}
return flag;
}
</script>
以上是JavaScript对字符串、数值数组的排序,以下是JavaScript对对象数组的排序
1 对象数组依据数字排序
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组排序</h1> <p>点击按钮按年份对汽车进行排序:</p> <button onclick="myFunction()">排序</button> <p id="demo"></p> <script>
var cars = [
{type:"audi",year:1997},
{type:"benz",year:1932},
{type:"bmw",year:1999}
]; disPlayCars(); function myFunction(){
cars.sort(function(a,b){return a.year - b.year});
disPlayCars();
} function disPlayCars(){
document.getElementById("demo").innerHTML =
cars[0].type +" " + cars[0].year + "<br>" +
cars[1].type +" " + cars[1].year + "<br>" +
cars[2].type +" " + cars[2].year + "<br>";
}
</script> </body>
</html>
2 对象数组依据字符串排序
<!DOCTYPE html>
<html>
<body> <h1>JavaScript 数组排序</h1> <p>点击按钮按车型对汽车进行排序:</p> <button onclick="myFunction()">排序</button> <p id="demo"></p> <script>
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
]; displayCars(); function myFunction(){
cars.sort(function(a,b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if(x > y) return 1;
if(x < y) return -1;
return 0;
});
displayCars();
} function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script> </body>
</html>
数组迭代:
1 Array.forEach(myFunction):为每一个数组元素调用一次函数(没有返回值)
forEach方法参数是一个函数,该函数包含三个参数(也可以是三个中的其中一个或者两个):数组元素值,索引,数组本身。在这个函数里进行遍历。
function myFunction(value,index,array){}
<h1>JavaScript Array.forEach()</h1> <p>为每个元素调用一次函数。</p> <p id="demo"></p> <script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
</script>
2 Array.map(myFunction):通过对每个数组元素执行函数来创建新数组(返回值是新数组)
map方法参数是一个函数,该函数包含三个参数(也可以是三个参数中的其中一个或者两个):数组元素值,索引,数组本身。
function myFunction(value,index,array){}
<body> <h1>JavaScript Array.map()</h1> <p>通过对每个数组元素执行函数来创建新数组。</p> <p id="demo"></p> <script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value,index,array){
return value * 2 ;
}
</script>
3 Array.filter(myFunction):返回一个由通过测试的数组元素组成的新数组。
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.filter(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value){
return value > 20;
}
</script>
4 Array.reduce(myFunction)在每个数组元素上运行函数,生成单个值(即返回值是单个值)
function myFunction(prev,next,index,array){}
prev:总数/初始值/先前返回的值
当数组只有一个元素的时候prev和next都指第一个元素
示例:累加器
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和为:" +sum; function myFunction(prev,next){
return prev + next;
}
</script>
5 Array.every(myFunction):检查所有数组元素值是否通过测试,返回值是false或者true
function myFunction(value,index,array){}
<script>
var numbers = [45, 4, 9, 16, 25];
var flag = numbers.every(myFunction); document.getElementById("demo").innerHTML = flag; function myFunction(value) {
return value < 1;
}
</script>
6 Array.some(myFunction):检查是否某些数组值通过测试,返回false或者true
function myFunction(value,index,array){}
<script>
var numbers = [45, 4, 9, 16, 25];
var flag = numbers.some(myFunction); document.getElementById("demo").innerHTML = flag; function myFunction(value, index) {
return value < 6;
}
</script>
7 Array.indexOf(str,start):在数组中搜索元素值并返回其索引。
可选参数:start,从指定位置开始检索
<script>
var str = ["a","b","c","a"];
var flag = str.indexOf("a",1);
document.getElementById("demo").innerHTML = flag;
</script>
8 Array.lastIndexOf(str,start):在数组中搜索元素值出现的最后一个位置并返回其索引。从数组结尾开始检索。
可选参数:start,从指定位置开始检索
<script>
var str = ["a","b","c","a"];
var flag = str.lastIndexOf("a");
document.getElementById("demo").innerHTML = flag;
</script>
9 Array.find(myFunction):返回第一个通过测试函数的数组元素的值
function myFunction(value,index,array){}
<script>
var numbers = [4, 9, 16, 25, 29];
var bigger = numbers.find(function(value){
return value > 10;
});
document.getElementById("demo").innerHTML = bigger;
</script>
10 Array.findIndex(function(value,index,array){}):返回第一个通过测试函数的数组元素的索引
<script>
var numbers = [4, 9, 16, 25, 29];
var bigger = numbers.findIndex(function(value){
return value > 10;
});
document.getElementById("demo").innerHTML = bigger;
</script>
19 JavaScript数组 &数组增删&最值&排序&迭代的更多相关文章
- PHP二位数组按照数组的某个字段值排序
不多废话 直接代码 /** * @name 排序 按照数组的某个字段值排序 * @param $array 排序数组 $field 排序字段 $direction 排序顺序 * @author wan ...
- 实现对多维数组按照某个键值排序的两种方法(array_multisort和array_sort)
实现对多维数组按照某个键值排序的两种解决方法(array_multisort和array_sort): 第一种:array_multisort()函数对多个数组或多维数组进行排序. //对数组$ ...
- PHP编程实现多维数组按照某个键值排序的方法
1.array_multisort()函数对多个数组或多维数组进行排序. //对数组$hotcat按照count键值大小降序进行排序: $hotcat =array( array('1501'=&g ...
- php 二位数组按某个键值排序
$arr=[ array( 'name'=>'小坏龙', 'age'=>28 ), array( 'name'=>'小坏龙2', 'age'=>14 ), array( 'na ...
- 二维数组按某个键值排序 FOR PHP
$arr=[ array( 'name'=>'小坏龙', 'age'=>28 ), array( 'name'=>'小坏龙2', 'age'=>14 ), array( 'na ...
- PHP二维数组按某个键值排序
$data=Array( [0] => Array ( [id] => 2 [user_id] => 14 ...
- PHP二位数组/多维数组 根据某个键值排序
$arr[$i]['FirstName'] = $d_first_name;$arr[$i]['MiddleName'] = $d_middle_name;$arr[$i]['LastName'] = ...
- php对数组中指定键值排序
function array_sort($arr,$keys,$type='asc'){ $keysvalue = $new_array = array(); foreach ($arr as $k= ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
随机推荐
- php设计模式之工厂方法实例代码
实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...
- 题解【洛谷P1995】口袋的天空
题面 题解 从图中删边,直到图中只剩\(k\)条边,计算权值之和即可. 代码 #include <iostream> #include <cstdio> #include &l ...
- jumpserver 常见错误解决
官方链接:https://jumpserver.readthedocs.io/zh/master/faq_install.html 重启jumpserver后台 #cd /opt#python3.6 ...
- Oracle创表操作记录
Oracle表操作 --主键,复合主键 create table example (id number primary key, name varchar2(20)); create table ex ...
- 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)
vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...
- Lenet 神经网络-实现篇(1)
Lenet 神经网络结构为: ①输入为 32*32*1 的图片大小,为单通道的输入: ②进行卷积,卷积核大小为 5*5*1,个数为 6,步长为 1,非全零填充模式: ③将卷积结果通过非线性激活函数: ...
- 微信个人支付接口---YunGouOS 1.1.3 版本发布,新增个人微信/支付宝收款接口
软件接口 https://www.oschina.net/news/113305/yungouos-1-1-3-released 文档说明 https://www.oschina.net/p/Yu ...
- 每天进步一点点------SOPC的Avalon-MM IP核(二) AVALON总线的IP核定制
简介 NIOS II是一个建立在FPGA上的嵌入式软核处理器,除了可以根据需要任意添加已经提供的外设外,用户还可以通过定制用户逻辑外设和定制用户指令来实现各种应用要求.这节我们就来研究如何定制基于Av ...
- python获取进程id号:
python获取进程id号: os.getpid()获取当前进程id os.getppid()获取父进程id
- SpringMVC重定向(redirect)传参数,前端EL表达式接受值
由于重定向相当于2次请求,所以无法把参数加在model中传过去.在上面例子中,页面获取不到msg参数.要想获取参数,可以手动拼url,把参数带在后面.Spring 3.1 提供了一个很好用的类:Red ...