JS中的数组

web.jpeg

数组

• 数组:是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示;
• 就是一个容器可以存储很多的值,任何类型的数据都可以存放
• 本质上，数组属于一种特殊的对象，typeof运算符会返回数组的类型是object。

1.数组的声明 和创建

• 通过构造函数创建数组

  var arr = new Array();
    console.log(arr);

• 通过字面量创建数组

 <script>

        var arr = [1,2,3,4,5];
        console.log(arr);
    </script>

2. 数组元素添加和删除

• 直接添加

var arr = new Array();
  /向数组为0的位置 添加一个为10 的元素
    arr[0] = 10;

• push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

 var arr = [1,3,5];
        arr.push(7);
        console.log(arr);
结果变成 :  [1,3,5,7];

//添加多个元素
 arr.push(8,9,10);

• unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

 var arr = [1,3,5] 
 arr.unshift(0) 
  结果变成 [0,1,3,5]

• pop() 删除最后一个元素

var  arr = [1,3,5]   →  arr.pop()  →  结果   [1,3]  

• shift() 删除第一个元素

var  arr = [1,3,5]   →  arr.shift()  →  结果   [3,5] 

3.数组的访问

• 数组名[索引值]
• 索引值是从0开始的
• 如果读取不到索引值为undefiend

 var array = ["IT001","CC","DD","哈哈"];
        console.log(array[1]);
//打印结果是：CC

4. 数组的长度

• 数组的length属性，返回数组的成员数量。
• 访问方法是: 数组名.length；
• 清空数组的一个有效的方法就是可以length设为0

 var arr1 = ['a', 'b'];
    console.log(arr1.length);
//打印结果是：2

5.数组遍历

• for循环遍历

  var array = ["IT001","CC","DD","哈哈"];
        for (var i = 0; i < array.length; i++){

            console.log(array[I]);
        }
//打印结果：
IT001
CC
DD
哈哈

• for…in 循环遍历 【不推荐使用】,

forin循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以不推荐使用forin循环来遍历数组

var a = [1, 2, 3];

for (var i in a) {
  console.log(a[I]);
}
// 1
// 2
// 3

• 利用ES6中推出的for of循环来遍历数组

let arr = [1,3,5];
for (const value of arr) {
        
        console.log(value); // 1,3,5
    }

• some(allback(element,index,array)) 方法 遍历

allback(element, index, array)回调函数,其中element数组里面的元素，index是遍历的索引，array被遍历的数组

var  list = [
                {id:1,name:"奔驰",time: new Date()},
                {id:2,name:"宝马",time: new Date()},
                {id:3,name:"大众",time: new Date()}
            ]
//毁掉函数
  list.some(function (item,index) {
                    console.log(item + "------"+ index);

                })

• forEach(allback(item,index))方法 遍历 类似 some()回调函数的参数一样

var  list = [
                {id:1,name:"奔驰",time: new Date()},
                {id:2,name:"宝马",time: new Date()},
                {id:3,name:"大众",time: new Date()}
            ]

list.forEach(function (item,index) {
                     console.log(item + "----" + index); 
                })

求最大值，平均值，和

• 注意在求最大值的时候，假设数组中的一个值最大，不能直接赋值给0

<script>

 

  let arry = [1,4,7,6,3,10,88,9];

  let sum = 0;

  let pj = 0;
//  假设最大值 ，不能直接赋值为0，因为数组里面 可能的数据 都为负数
  let max = arry[0];

  for (let index = 0; index < arry.length; index++) {
      
      sum += arry[index];
      if(max < arry[index]){
          max = arry[index];
      }
      
  }
  console.log(sum);

  console.log(max);

  pj = sum/arry.length;

  console.log(pj +"++++++"+  arry.length)
</script>

数组元素位置调换

• 调换比较的次数是 length/2

let arr1 = [10,20,30,40,50];

for (let i = 0; i < arr1.length/2; i++) {
    let temp = arr1[i];
    arr1[i] = arr1[arr1.length - 1 -i];
    arr1[arr1.length - 1 - i] =  temp;
    
}

console.log(arr1);

  [50, 40, 30, 20, 10]

冒泡排序

image.png

<script>
    // 冒泡排序

    let array = [30,20,60,40,10,5];
    //外层循环控制比较的 轮数  array.length - 1
    for(var i = 0; i < array.length - 1; i++){
        //内层循环比较次数 array.length - 1 - I
        for(var j = 0; j < array.length - 1 - i; j ++){
            if (array[j] > array[j + 1]) {
                let temp = array[j];
                array[j] = array[j + 1];
                array[j + 1] = temp;
            }
        }
    }

    console.log(array);
</script>

image.png

6.数组中一些常用的方法

拼接

• concat() 用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

  var aa = [1,3,5];  var bb = ["a","b","c"];
       var cc =  aa.concat(bb);
       console.log(cc);
// Array [ 1, 3, 5, "a", "b", "c" ]

数组的截取

• slice("开始位置"，"结束位置") 用来截取数组的部分元素，返回一个新的数组

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']

数组转化成字符串

• join() 将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
• 数组名.join(符号)

var arr = [1,2,3];
        var str = arr.join("-");
        console.log(str);
        console.log(typeof str);
// 打印结果: 1-2-3
//   string

字符串转化成数组

• split()把一个字符串分割成字符串数组
• 语法:stringObject.split(separator,howmany)

var string1 = "h/2/3/l";
        var newArr =  string1.split("/");
        console.log(newArr);

//结果是:Array [ "h", "2", "3", "l" ]

• Array.isArray("object") 判断一个对象是否是数组 ，返回时bool值

    //数组
    var obj = [];
    var isTR = Array.isArray(obj);
    console.log(isTR);

• every()方法 返回一个bool值

/*
arra.every(function(数组元素,索引) {  
    })
*/
var arra = ["123","345","12"];
    arra.every(function (ele,index) {
        
        console.log(index);
        
        return true;
        
    });

• filer() 过滤 返回一个新的数组(将满足条件的元素添加到一个新的数组中)

    /*
     * 3个参数
     * 1.数组的元素
     * 2.数组的索引
     * 3.被遍历的数组
     * */
    var arra = [10,20,30,40,50,60,70,80,90];
    var arr1 = arra.filter(function (ele,index,array) {
        
        return ele>40;
    })
    
    console.log(arr1); // [50,60,70,80,90]

自定义函数实现filter方法

Array.prototype.myFilter = function (fn) {
            let newArray = [];
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result){
                    newArray.push(this[i]);
                }
            }
            return newArray;
        }

• map方法：将满足条件的元素映射到一个新的数组中

注意:map方法会把数组中的元素都会调用一次callback函数，callback函数执行后的返回值(包括undefined)组合成一个新的数组 返回

let arr = [1, 2, 3, 4, 5];
  // 2.数组的map方法:将满足条件的元素映射到一个新的数组中
  //注意:map方法会把数组中的元素都会调用一次fcallback函数，
//callback函数执行后的返回值(包括undefined)组合成一个新的数组 返回

  let newArr2 = arr.map(function (item,index,itemArray) {
      if(item % 2 === 0){

          return item;  //满足条件返回item,不满足返回的是undefined
      }
  });

console.log(newArr2); // [undefined,2,undefined,4,undefined];

• 自定义map函数

 // map实现
        Array.prototype.myMap = function (fn) {
            let newArray = new Array(this.length);
            newArray.fill(undefined);
            for(let i = 0; i < this.length; i++){
                let result = fn(this[i], i, this);
                if(result !== undefined){
                    newArray[i] = result;
                }
            }
            return newArray;
        }

• splice("开始的位置"，"要删除的个数"，"要插入的元素")函数

  • 如果是只有2个参数则是删除元素，如果是3个参数都在则是添加元素

• 从第2位开始删除0个元素，插入“drum”

var myFish = ["angel", "clown", "mandarin", "surgeon"];
//从第 2 位开始删除 0 个元素，插入 "drum"
var removed = myFish.splice(2, 0, "drum");
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组：[]，没有元素被删除

• 从第3位开始删除1个元素

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
//运算后的myFish：["angel", "clown", "drum", "sturgeon"]
//被删除元素数组：["mandarin"]

• 从第2位开始删除1个元素，然后插入“trumpet”

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet"); 
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"] 
//被删除元素数组：["drum"]

es6中2个数组的方法

• find()

 //es6中的一个数组方法：find
       // 需要接受一个函数作为参数
 //当某个遍历对象符合 return条件的时候，find终止遍历，同时返回遍历对象
       var stu =  students.find(function (item) {

            return item.id === student.id

        })

        console.log(stu);

        for (var key in student){
           stu[key] = student[key];
        }

• findIndex()查询元素的索引值

function (id) {
                //根据 ID 找到元素的 索引 根据索引删除元素

                //es6 查找元素的Index
                //数组里面存放的是 对象
                var index =  this.list.findIndex(function (item) {

                    return item.id === id;
                });

                this.list.splice(index,1);



            }

数组去重的2种方式

• 双for循环

var arr = [1,2,2,2,3,4,5,2,3,4];
for (let i = 0; i < arr.length; i++) {
       for (let j = i + 1; j < arr.length; j++) {
           if(arr[i] == arr[j]){
       //相同删除这个元素
            arr.splice(j,1);
            //如果有连续相同的元素,那么出现问题,当删除元素时，索引发生了变化
            j--;
           }
       }
        
    }
    console.log("huiswh");
    console.log(arr);
    //结果是 [1,2,3,4,5]

• 利用 json对象去重
  • 原理是:key是唯一的

 //数组去重
    var arr = [1,2,2,2,3,4,5,2,3,4];
    //利用对象 去重
    var arrDic = {};
    arr.forEach(function(item,index){
        arrDic[item] = item;

    });

    console.log(arrDic);

排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选 排他思想</title>
    <style>
        .damao{
            background-color: #FF6B39;
        }
    </style>
    <script>
        window.onload = function () {

            var btns = document.getElementsByTagName("button");
            for (var i = 0; i < btns.length; i ++){

                btns[i].onclick = function () {

                    for (var j = 0; j < btns.length; j++){
                        btns[j].className = "";
                    }

                    this.className = "damao";
                }



            }

        }
    </script>
</head>
<body>

<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>

</body>
</html>

110.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <style>
        .box {
            width: 300px;
            height: 30px;margin: 100px auto;
            position: relative;

        }
        .box input {
            width: 200px;
            height: 25px;
        }

        .box label {
            font-size: 12px;
            color: #ccc;
            position: absolute;
            top: 8px;
            left: 10px;
            cursor: text;
        }

    </style>
    <script>
        window.onload = function () {
            function $(id) {
                return document.getElementById(id);
            }

            $("txt").oninput =function () {

                if (this.value == "") {
                    $("message").style.display = "block"
                } else  {
                    $("message").style.display = "none"
                }

            }

        }
    </script>
</head>
<body>

    <div class="box">
        <input type="text" id="txt">
        <label for="txt" id="message">国际大牌</label>
    </div>



</body>
</html>