JavaScript--数组的总结

数组：一组数据，数据的组合，多个数据；需要操作多个数据，但是只能操作一个数据的时候。

创建方式：

字面量：var arr = [];

构造函数： var arr = new Array();

var arr = ["hello",1,2,3,4,"world"];
console.log(arr.length);      //6
console.log(typeof arr);      //object
console.log(arr);              // (6) ["hello", 1, 2, 3, 4, "world"]

 数组的方法：

push():数组的末尾添加元素，并返回新数组长度。

var arr = [1,2,3,4,5,6];
 //原数组及其长度
console.log(arr);              //(6) [1, 2, 3, 4, 5, 6]
console.log(arr.length);       //6
arr.push("world");
  // 添加之后的数组及其长度
console.log(arr);            //(7) [1, 2, 3, 4, 5, 6, "world"]
console.log(arr.length);     //7

unshift():将一个或多个元素添加在数组的开始，并返回数组的新长度。

 var arr = [1,2,3,4,5,6];
   //原数组及其长度
 console.log(arr);              //(6) [1, 2, 3, 4, 5, 6]
 console.log(arr.length);       //6
 arr.unshift("world");
  //添加之后的数组及其长度
 console.log(arr);            //(7) ["hello",1, 2, 3, 4, 5, 6]
 console.log(arr.length);     //7

pop():删除数组中的最后一个元素，并返回该元素的值，此方法更改数组长度。

var arr = [1,2,3,4,5,6];
   //原数组及其长度
console.log(arr);              //(6) [1, 2, 3, 4, 5, 6]
console.log(arr.length);       //6
arr.pop("world");
   //添加之后的数组及其长度
console.log(arr);            //(5) [1, 2, 3, 4, 5]
console.log(arr.length);     //5

shift():删除数组中的第一个元素，并返回该元素的值，此方法更改数组长度。

 var arr = [1,2,3,4,5,6];
 //原数组
 console.log(arr);              //(6) [1, 2, 3, 4, 5, 6]
 //原数组长度
 console.log(arr.length);       //6
 arr.shift("world");
 //删除后的数组及长度
 console.log(arr);            //(5) [ 2, 3, 4, 5, 6]
 console.log(arr.length);     //5

splice():替换，从第几项开始删除，共删除几项，在删除的的位置替换新的元素。

var arr = [1,2,3,4,5,6];
console.log(arr);      //[1, 2, 3, 4, 5, 6]
console.log(arr.length);    //6
arr.splice(1,2,"hello");
arr.splice(4,0,"world");
console.log(arr);          //(6) [1, "hello", 4, 5, "world", 6]
console.log(arr.length);   

 slice():可以用来从数组中提取元素;该方法不会影响原数组，返回新数组；

参数:1:截取开始位置的索引

       2：截取结束位置的索引

第二个参数可以省略不写，表示从start开始的后边都被截取,第二个 参数 还可以传入一个负值 表示 从后开始数

var arr = [1,2,3,4,5,6];
console.log(arr.slice(1,4));  //(3) ["hello", 4, 5]
console.log(arr.slice(4));     //(2) ["world", 6]
console.log(arr.slice(-4))     //(4) [4, 5, "world", 6]

concat(): 连接两个或是多个数组，并将新的数组返回

var arr = ["a",1,2,3,4,];
console.log(arr.concat("hello","world"));     //(7) ["a", 1, 2, 3, 4, "hello", "world"]

console.log(arr.concat([[7,8],{"namr":"admin"}]));    //(7) ["a", 1, 2, 3, 4, Array(2), {…}]

join() :该方法可以将数组转换成为一个字符串,不会对原数组产生影响

var a = [1, "aaa", true];
a.join();              // "1,aaa,true"
a.join("-");         // "1-aaa-true"
a.join(null);       // "1nullaaanulltrue"
    

sort() :该方法可以将数组排序,并返回新数组

//从小到大
var arr = [34,21,15,67,98];
arr.sort(function(a,b){
    return a-b;     //(5) [15, 21, 34, 67, 98]
        });

//从大到小
var arr = [34,21,15,67,98];
arr.sort(function(a,b){
    return b-a;     //(5) [98, 67, 34, 21,15]
        });

reverse():颠倒数组中元素的顺序，并返回新数组

var arr = [1,2,3,4,5,6];
console.log(arr.reverse());    //(6) [6, 5, 4, 3, 2, 1]

toString():可把数组转换为字符串

var arr = [1,2,3,4,5,6];
console.log(arr.toString());   //1,2,3,4,5,6

map():原数组的每一项执行函数后，返回一个新的数组。原数组不变。

<script>
    var arr = [1,4,8,10];
    var arr2 = arr.map(function(currentValue){
        return currentValue*currentValue;
    });
    console.log(arr2);    // [1, 16, 64, 100]
</script>

forEach()：对数组进行遍历循环，这个方法没有返回值,原数组不变。

indexOf()和lastIndexOf();接收两个参数，要查找的项和从哪个位置开始查找（可有可无）；返回元素在数组中的位置，没有找到返回-1；

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));           //2
console.log(arr.lastIndexOf(5));      //5
console.log(arr.indexOf(5,2));         //2
console.log(arr.lastIndexOf(5,4));     //2
console.log(arr.indexOf("5"));          //-1

every();判断数组中的项是否满足条件，只有全部项都满足才返回ture;

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2);                  //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3);                  // false

some():判断数组中的项是否满足条件，只要有一项满足就返回ture;

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2);             //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3);           // false

reduce()和 reduceRight():这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum);         //25

数组的分类：

数值数组：var arr = [3,4,5,6,7];

字符数组：var arr = ["a","b","c"];

多维数组：var arr = [[2,5],["a","b"],[true,"hello"]];

对象数组：var arr = [{name:"admin"},{name:"root"}];

数组的遍历：

for...in语句:for.....in语句可以实现对一个对象的所有属性的遍历,也可以使用for...in语句实现对一个数组的所有元素的遍历

语法：

for( var i in array ){

}

原理：数组中有几个元素，for..in语句就循环执行多少次

每次执行时，将当前数组元素的下标存放到变量i中

 var row = ['a','b','c','d'];
 
 for (var i in row){
     document.write( row[i] + '<br>');
 } 
  //a
  //b
  //c
  //d

for......of遍历(需要ES6支持):for...of语句在可迭代对象上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

// for-of遍历数组，不带索引，i即为数组元素
for(let i of arrTmp){
    console.log(i)
}
//输出 "value1" "value2" "value3"
 
// for-of遍历Map对象
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
  console.log(value);
}
//输出 1 2 3
 
// for-of遍历字符串
let iterable = "china中国";
for (let value of iterable) {
  console.log(value);
}
//输出 "c" "h" "i" "n" "a" "中" "国"

冒泡排序：

var arr = [45,6,65,3,43,27];
console.log(arr);
for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
        if(arr[j]>arr[j+1]){
            var ls=arr[j];
             arr[j]=arr[j+1];
             arr[j+1]=ls;
        }
    }
}
console.log(arr);

选择排序：

<script>
    var arr = [34,6,78,45,27,3];
    console.log(arr);
    for(var i=0;i<arr.length-1;i++){
        var ls=arr[i];
        var lsIndex=i;
        for(var j=i+1;j<arr.length;j++){
            if(ls>arr[j]){
                ls=arr[j];
                lsIndex=j;
        }
    }
    arr[lsIndex]=arr[i];
    arr[i]=ls;
}
    console.log(arr);
</script>

练习：

生成一个数组，并进行排序和去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="max">
    <input type="text" id="min">
    <input type="text" id="num">
    <input type="button" id="btn1" value="生成">
    <input type="button" id="btn2" value="排序">
    <input type="button" id="btn3" value="去重">
</body>
<script>
    var omax = document.getElementById("max")
    var omin = document.getElementById("min")
    var onum = document.getElementById("num")
    var obtn1 = document.getElementById("btn1")

    obtn1.onclick = function(){
        var max = parseInt(omax.value);
        var min = parseInt(omin.value);
        var num = parseInt(onum.value);
        var arr = [];
        for(var i=0;i<num;i++){
            arr.push(random(max,min))
        }
        console.log(arr);
    }



    function random(a,b){
        return Math.round(Math.random()*(a-b)+b)
    }
</script>
</html>

生成十个四位数的随机验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>    
</body>
<script>
    function randomNum(){
        var arr = [];
        for(var i=0;i<10;i++){
            var a = Math.round(Math.random()*9);
            var b = Math.round(Math.random()*9);
            var c = Math.round(Math.random()*9);
            var d = Math.round(Math.random()*9);
            arr.push(""+a+b+c+d)
        }
        return arr;
    }
    console.log(randomNum())
</script>
</html>