19 JavaScript数组 &数组增删&最值&排序&迭代

时间：2021-08-04 17:06:02

关联数组（散列）

  • 关联数组又叫做散列，即使用命名索引。
  • 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

数组添加元素：

  1. 使用push方法，array.push("demo");
  2. 使用length属性，array[length] = "demo";
  3. 在大于索引的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>

 

相关文章