数组

作者: 升龙无涯 | 来源:发表于2020-07-03 19:41 被阅读0次

数组Array

引入：

我们知道一个变量存储一个值，一个变量是一个容器，如果给很多容器中都放入商品的话，我们就可以开超市了。我们都去超市买过东西，超市的东西都整齐的摆放在货架上，而不是所有的东西都堆在一起。为什么呢？因为便于管理商品。咱们代码中也有一个货架，叫数组，为了便于管理多个值的。

假设，我们现在要存一个班的所有学生姓名，如果每个姓名都存在一个变量中，就跟所有商品随便的堆在一起一样，不好管理，所以我们会存到数组中。

数组概念：

内存中的多个容器排列起来，组成的一个大容器。

数组中的每个小容器都有编号，第一个是0，第二个是1，。。。

咱们把编号叫做下标，来区分每个小容器。

数组示意图
1564374824292.png

数组是计算机空间中一段有序的连续空间，使用一个变量名表示。

创建数组：

 语法一：
 var arr = []; # 创建了一个空数组
 var arr = ["张三","李四","王五"]; # 创建了一个数组，里面存了三个姓名
 语法二：
 var arr = new Array(); # 创建了一个空数组
 var arr = new Array(3); # 创建了一个长度为3的数组
 var arr = new Array("张三","李四","王五"); # 创建了一个数组，里面存了三个姓名

使用构造函数的方式创建数组的时候，如果其中只有一个值，如果这个值是整数，表示数组的长度，否则表示这个数组中有一个元素，就是这个值。

数组中可以存放任意类型的值，但实际情况中，我们习惯将同类型的数据存到一个数组中。

数组操作

访问数组中的元素：数组[下标]

例：

var arr = ["张三","李四","王五"];
console.log(arr[1]); // 李四

查看数组中元素的个数 - 数组的长度：数组.length

例：

var arr = ['张三',"李四","王五","赵六"];
var arr1 = [1,2,3,4,5,6];
console.log(arr.length); // 4
console.log(arr1.length); // 6

使用说明：数组的长度可以访问，也可以赋值，用来修改数组的长度。

例：

var arr = ['张三',"李四","王五","赵六"];
console.log(arr); // (4) ["张三", "李四", "王五", "赵六"]
console.log(arr.length); // 4
arr.length = 6;
console.log(arr); // (6) ["张三", "李四", "王五", "赵六", empty × 2] 后面的表示还有两个空元素
console.log(arr.length); // 6

给数组添加元素：数组[下标] = 值

例：

var arr = ["张三","李四"];
arr[2] = "王五";
console.log(arr); // (3) ["张三", "李四", "王五"]
arr[10] = "赵六";
console.log(arr); // (11) ["张三", "李四", "王五", empty × 7, "赵六"] 中间还有7个空元素

修改数组中元素的值：数组[下标] = 值

例：

var arr = ["张三","李四"];
arr[0] = "王五";
console.log(arr); // (2) ["王五", "李四"]

使用说明：如果下标是已经存在的，那赋值操作就是修改数组元素的值，如果下标是不存在，那赋值操作就给数组添加元素。

清空数组：

var arr = [1,2,3];
arr = [];
console.log(arr); // []
// 或者
arr.length = 0;
console.log(arr); // []

数组总结：

数组的第一个元素的下标永远是0；

数组的最后一个元素的下标永远是数组的长度-1

遍历数组：

如果要将数组中的所有元素都输出，操作如下：

var arr = ["张三","李四","王五","赵六"];
console.log(arr[0]); // 张三
console.log(arr[1]); // 李四
console.log(arr[2]); // 王五
console.log(arr[3]); // 赵六

从上面输出的代码中可以看出，多次输出是在进行重复动作，并且多次重复之间是有规律可循的，所以可以使用循环进行这个重复动作：

var arr = ["张三","李四","王五","赵六"];
/*
for(var i=0;i<4;i++){
    console.log(arr[i]);
}
*/
// 条件中的4写死以后，如果数组再添加了新元素，就没办法遍历了，所以将4换成数组的长度。
// 循环中的条件执行5次，也就是我们需要求5次数组的长度，所以将求数组长度的操作放到循环外面可以提高执行效率
var length = arr.length;
for(var i=0;i<length;i++){ 
    console.log(arr[i]);
}

结果：

循环输出数组中的每个值
1572421527297.png

这种使用循环将数组中每个元素输出的操作叫做数组的遍历 - 每个元素都经历一次

练习：

例：利用for循环求数字数组中所有元素的和

vararr = [10,20,30,40,50];
var sum = 0;
for(var i = 0;i < arr.length; i++){
   sum += arr[i];
}
alert(sum);

例：利用for in 来遍历的数组

var arr = [10,20,30,40,50];
arr[10] = 80;
for (var i in arr) {
    console.log(arr[i]); // 10 20 30 40 50 80 不包括中间的empty
}

注意：for in不会遍历空元素

例：利用for in 求数组中所有元素的和

var arr = [10,20,30,40,50];
var sum = 0;
for (var i in arr) {
    sum += arr[i];
}
alert(sum);

有一个数组，具体内容如下：

var arr = [
    "越南被曝咖啡造假：咖啡粉里掺加电池芯",
    "抗日神剧被当教材：机密文件居然有女优名字",
    "王俊凯任联合国大使：系最年轻的联合国大使",
    "行人闯红灯遭水喷 目前还在测试阶段",
    "68条鱼估价超600万 什么鱼要这么贵？"
]

利用循环使用js做出如下图效果：

效果图（参考网址：http://news.szhk.com/）
1564374963930.png

代码：

var arr = [
    "越南被曝咖啡造假：咖啡粉里掺加电池芯",
    "抗日神剧被当教材：机密文件居然有女优名字",
    "王俊凯任联合国大使：系最年轻的联合国大使",
    "行人闯红灯遭水喷 目前还在测试阶段",
    "68条鱼估价超600万 什么鱼要这么贵？"
];
document.write("<ul>");
/*
for(var i=0;i<arr.length;i++){
    document.write("<li>");
    document.write(arr[i]);
    document.write("</li>");
}
*/
for(var i=0;i<arr.length;i++){
    document.write("<li>"+arr[i]+"</li>");
}
document.write("</ul>")

例：求数组中的最大值：

var arr = [1,9,3,6,8,5,4,7,2,12];
// 求出最大值
var length = arr.length;
var max = arr[0];
for(var i=1;i<length;i++){
    if(max<arr[i]){
        max = arr[i];
    }
}
console.log(max);

把1~100这个100个数字存到数组中

思考：数组中的类型是没有限制的，那么数组中可以存储数组吗？

二维数组

var arr = [
        "Jack",
        "Rose",
        ["王宝强","马蓉"],
        ["贾乃亮","李小璐"]
    ];
    console.log(arr);
    console.log(arr[2]);
    console.log(arr[2][1]);

效果：

效果图
1564374804306.png

包含数组的数组，叫做多维数组，我们用的最多的就是二维数组。

利用二维数组加载网页内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.container{
    width: 1200px;
    margin:auto;
}
li{
    float:left;
    width: 200px;
    margin:20px;
    border:1px solid #ccc;
}
li img{
    width: 100%;
    height: 100%;
}
</style>
<body>

</body>
<script type="text/javascript">
    var arr = [
        {
                                                                    image_url:"http://www.leawo.cn/attachment/201404/16/1433365_1397624557Bz7w.jpg",
            introudce:"这是小米手机，很好用，很便宜",
            price:"￥20元",
        },
        {
            image_url:"http://imgfs.oppo.cn/uploads/thread/attachment/2017/10/04/15070507024870.jpg",
            introudce:"这是华硕电脑，好用",
            price:"￥60元",
        },
        {
            image_url:"http://www.cphoto.com.cn/dz/attachments/month_1204/12042913298163d0a39dcf0c11.jpg",
            introudce:"华为手机，死贵，摄像头好",
            price:"￥88.8元",
        },
        {
            image_url:"http://hbimg.b0.upaiyun.com/11eb40ac428374964b24948a000ff1b2a18d2e518afa4-v4kiLD_fw658",
            introudce:"苹果手机，垃圾",
            price:"￥99.9元",
        },
        {
            image_url:"http://img3.imgtn.bdimg.com/it/u=671482448,2533267591&fm=26&gp=0.jpg",
            introudce:"这是女朋友，漂亮",
            price:"￥30元",
        },
    ];

document.write("<div class='container'>");
document.write("<ul>");
for(var i=0;i<arr.length;i++){
    document.write("<li>");
    document.write("<img src='"+    arr[i].image_url   +"'>");
    document.write("<div>"+arr[i].introudce+"</div>");
    document.write("<p>价格："+arr[i].price+"</p>");
    document.write("</li>");
}
document.write("</ul>");
document.write("</div>");
</script>
</html>

效果图：

根据数据加载页面
1593504072005.png

基础类型和引用类型

简单类型传递值，复杂类型传递地址

简单数据类型：number、string、boolean、undefined、null

复杂数据类型：Array、function, Object

其实函数也是一种类型：

function abc(){}
console.log(typeof abc); // function

值传递时将内存空间的值直接改变

代码：

var num = 11;
var num1 = num;
num = 20;
console.log(num);
console.log(num1);

过程：

值传递过程
1561052957848.png

引用传递时将值改变了，但是地址没有改变

代码：

var obj = {
  name:"zs",
  age:18
}

var obj1 = obj;
obj1.name = "ls";
console.log(obj.name);
console.log(obj1.name);

过程：

引用传递过程
1561053280430.png

练习：

//1.
function fn(a, b) {
  // 相当于
  //  var a = 10;
  //  var b = 20;
  // 函数的参数 其实就是函数内部的局部变量
  a = a + 1;
  b = b + 1;
  console.log(a);
  console.log(b);
}

var x = 10;
var y = 20;
fn(x, y);
console.log(x);
console.log(y);

//2.
var p = {
  name:"zs",
  age:18
}
function fn(person) {
  person.name = 'ls';
  console.log(person.name);
}
fn(p);
console.log(p.name);

//3\.  
function Person(name, age, salary) {
   this.name = name;
   this.age = age;
   this.salary = salary;
 }
 function f1(person) {
   person.name = "ls";
   console.log(person.name);
 }
 var p = new Person("zs", 18, 1000);//创建一个新对象
 console.log(p.name);//
 f1(p);
 console.log(p.name);//

结论：简单类型存储的是值本身，复杂类型存储的是地址，引入如果把第一个对象赋值给另一个变量，此时两个变量会指向同一个对象。

数组操作的方法

splice : 数组任意地方删除或者添加元素

    var arr = ['zs','ls','ww','zl','xmg'];
    // 原来的数组影响
    //- splice(start, deletedCount)   删除元素
    //      - start 开始
    //      - deletedCount 删除个数
    //- splice(start, deletedCount , item) 删除+添加,  第三个参数是在原来删除的位置上新加几个元素
    //- 特殊 : 
    //   splice(start, 0 , item)   就是在某个位置新加元素

数组的增删操作

    var arr = ['zs','ls','ww']

    array.push(元素);//从后面添加元素，返回新数组的length
    array.pop();//从数组的后面删除元素，返回删除的那个元素
    array.unshift(元素);//从数组的前面的添加元素，返回新数组的长度
    array.shift();//从数组的最前面删除元素，返回删除的那个元素

    //总结:
    //1\. shift 在前面 ,所以处理数组前面的
    //2\. p+ 在后面,所以是处理后面的
    //3\. unshift 比 shift 多个un,,所以就是加
    //4\. 添加的都是返回长度
    //5\. 删除的都是返回删除的元素
    //6\. 添加要说明添加什元素,,删除直接删除

    //练习1
    var arr = ["刘备"];
    //添加数据后变成：["赵云","马超","刘备","关羽","张飞"]
    //删除数据后变成：["关羽","张飞"]

    //练习2
    var arr = ["赵云","马超","刘备","关羽","张飞"];
    //把数组的最后一个元素变成数组的第一个元素
    //把数组的第一个元素变成数组的最后一个元素

数组的拼接

    //concat：数组合并，不会影响原来的数组，会返回一个新数组。
    var newArray = array.concat(array2);

数组的排序

    array.sort();//数组的排序，默认按照 字母/首字符 顺序排序 => 1 11 2 3
    var arr1 =  ['a','d','b','c'];
    var arr2 = [3, 6, 1, 5, 10, 2,11];

    //sort方法可以传递一个函数作为参数，这个参数用来控制数组如何进行排序
    arr.sort(function(a, b){
      //如果返回值>0,则交换位置
      return a - b;
    });
    记忆 : b比a高

数组的反转

    array.reverse();//翻转数组

数组和字符串的转换

    //语法：array.join(分隔符)
    //作用：将数组的值拼接成字符串,并且返回字符串

    var arr = [1,2,3,4,5];
    arr.join();//不传参数，默认按【,】进行拼接
    arr.join("");//按【"】进行拼接
    arr.join("-");//按【-】进行拼接

    //split:将字符串分割成数组（很常用）
    //功能和数组的join正好相反。
    var str = "张三,李四,王五";
    var arr = str.split(",");

冒泡排序

相邻两个元素进行比较，将一个数组中的数字使用循环进行升序或降序的排列

// var arr = [1,2,3,4]; // arr = [4,3,2,1]
/*for(var i=0;i<3;i++){
    if(arr[i]<arr[i+1]){
        var a = arr[i];
        arr[i] = arr[i+1];
        arr[i+1] = a;
    }
    // [2,1,3,4]
    // [2,3,1,4]
    // [2,3,4,1]
}
console.log(arr);
for(var i=0;i<3;i++){
    if(arr[i]<arr[i+1]){
        var a = arr[i];
        arr[i] = arr[i+1];
        arr[i+1] = a;
    }
    // [3,2,4,1]
    // [3,4,2,1]
    // [3,4,2,1]
}
console.log(arr);
for(var i=0;i<3;i++){
    if(arr[i]<arr[i+1]){
        var a = arr[i];
        arr[i] = arr[i+1];
        arr[i+1] = a;
    }
    // [4,3,2,1]
    // [4,3,2,1]
    // [4,3,2,1]
}
console.log(arr);*/

/* 冒泡排序 */
var arr = [1,2,3,4];
for(var j=0;j<3;j++){
    for(var i=0;i<3;i++){
        if(arr[i]<arr[i+1]){
            var a = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = a;
        }
    }
}
console.log(arr);

冒泡排序示意图
冒泡排序1.gif

选择排序

降序：先找最大值，排在最左边，再找第二大的值，往左边靠...，已经排好的，不再参与比较

var arr = [1,2,3,4];
// 让每个位置上的数都和其他位置上的数进行比较
// 第一次让arr[0]和所有其他位置上的数进行比较   比较3次，将第一个位置的数确定下来
// 第二次让arr[1]和剩下所有位置上的数进行比较   比较2次，将第二个位置的数确定下来
// 第三次让arr[2]和剩下所有位置上的数进行比较   比较1次，将第三个位置的数确定下来
var arr = [1,2,3,4];
var tmp;
for(var i = 0; i < arr.length-1; i++){
    for(var j = i + 1; j < arr.length; j++){
        if(arr[i] < arr[j]){
            tmp = arr[i];
            arr[i] = arr[j];
            arr[j] = tmp;
        }
        console.log(arr);
    }
}

选择排序示意图
选择排序1.gif

随机点名程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    h1{
        text-align:center;
    }
    #box{
        width:350px;
        height:150px;
        font-size:100px;
        border:#abcdef 5px solid;
        line-height:150px;
        margin:auto;
        text-align:center;
    }
    #btn{
        display:block;
        margin:0 auto;
        width:350px;
        height:80px;
        font-size:50px;
        background: yellowgreen;
    }
</style>
</head>
<body>
    <h1>点名程序</h1>
    <div id="box"></div>
    <input type="button" value="开始" id="btn">
</body>
<script type="text/javascript">
// 定时器 每隔多长时间做什么事情
// setInterval(function(){
//     console.log(1);
// },1000);

// 随机数
// console.log(Math.random()); // >=0    <1的随机数  
// console.log(parseInt(Math.random()*11));
    var arr = ["张三","李四","王五","赵六","孙七","周八","吴九","郑九"];
    var timerId;
    btn.onclick=function(){
        // 使用this代表触发当前事件的那个事件源
        // input的值都使用value可以获取到
        // 标签内容：innerText
        if(this.value == "开始"){
            this.value = "停止";
            timerId = setInterval(function(){
                box.innerText = arr[parseInt(Math.random()*11)];
            },30);
        }else{
            this.value = "开始";
            // 结束定时器  clearInterval(定时器的变量)
            clearInterval(timerId);
        }
    }
</script>
</html>

数组

数组Array

引入：

数组概念：

创建数组：

数组操作

练习：

二维数组

基础类型和引用类型

数组操作的方法

冒泡排序

选择排序

随机点名程序

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读