JS数组的概念-CFANZ编程社区

数组介绍

. JS数组的概念

数组的字面意思就是一组数据，一组数据（一般情况下是相同类型的数据, 不一定都是数字）

数组一组数据(可以存放多个数据类型但是一般建议存放一组数据类型)
数组可以容纳多个数据如果数组里面没有数据就是空数组

2. 数组的作用

使用单独的变量名来存储一系列的值, 数组是特殊的变量，它可以同时保存一个以上的值。
如上节课中我们学过的arguments就是一个数组, 里面保存了多个参数.

1.数组定义其实也是一个对象(只是对应的数据结构不同)

<script>
         使用new关键词 Array()
        var arr1 = new Array();//声明空数组
        length属性 是表示数组的长度 也就是里面容纳的数据的个数
        console.log(arr1.length);//0
        var arr2 = new Array(3)//指定数组的长度 里面具备三个元素
        console.log(arr2.length); //3
        var arr3 = new Array(1,2,3) //指定数组的数据 这个里面包含1 2 3三个数据
        console.log(arr3.length);
         对于数组 除了具备length属性同时还具备下标 可以通过对应的下标来指定对应的元素（进行赋值以及获取）
        下标是从0开始到length-1结束 
        console.log(arr3[0]); //获取arr3的第一个元素 打印1
        arr3[1] = 10; //给第二个元素进行赋值
        console.log(arr3[1]);
        console.log(arr3[3]);//数组下标超出了 undefined   
    </script>

数组的定义

<script>
    方式一:  
      new Array（参数，参数,...）: 只有一个数字参数时是数组的长度（new可以省略,但一般尽量写上）
例如: 
     var arr = new Array();   //定义一个空数组 
     var arr = new Array(10);  //创建一个包含 10 个元素的数组，没有赋值
     var arr = new Array(“芙蓉姐姐”,30);  //创建一个数组有两个元素
方式二: 
     var arr = [1,2,3,4,5];  //字面量定义方式
        
    </script>

2, 数组元素的获取(访问)

arr[0]: 表示数组的第一个元素，0是下标，也叫索引
arr[1]: 表示数组的第二个元素，1是下标

3, 数组的长度

数组长度(数组元素的个数) : arr.length
length属性, 不仅是只读的，也可以设置
例如:

<script>
     var colors = new Array("red", "blue", "green");
     colors.length=2;
     console.log(colors[2]); 
    </script>

数组的下标从0开始, 所以数组的最后一个元素的下标为： arr.length – 1

4，数组的赋值

给数组赋值，就是给数组的元素赋值，需要通过给数组的每个元素一一赋值，

<script>
   如：arr[0] = 20;  让数组的第一个元素的值为20；
      arr[1] = 12;  让数组的第二个元素的值为12；

以下为通过for循环给数组的每个元素赋值，赋成下标的平方。
    for(var i=0;i<10;i++){
         arr[i] = i*i;
    }

以下为通过for循环给数组的每个元素赋值，赋值一个随机数:Math.random()
    for(var i=0;i<10;i++){
         arr[i] = Math.random();
    }
Math.random()的范围是: 0~1(包括0, 不包括1)
    </script>

数组的使用

使用数组就是在使用数组的每个元素，因为数组相当于若干个相同类型的变量。

遍历数组:

通过下标获取单个数组元素, 但有时候我们需要批量使用数组, 这个时候我们需要遍历整个数组.
1, 普通for循环
for(var i=0; i<5; i++){
console.log(arr[i]);
}
2, for…in遍历: 用于遍历数组或者对象
for(var i in arr){
console.log(arr[i]);

数组增删改查的方法

删除方法
var arr = new Array(10,20,30);
pop是删除最后一个返回这个被删除的元素
console.log(arr.pop());
console.log(arr);
shift是删除第一个返回这个被删除的元素
console.log(arr.shift());
console.log(arr);
定义一个数组接收一个数据如果对应的输入的是1的话删除第一个元素

弹窗 prompt

打印的删除为什么再打印对应的数组

如果输入的是2的话就添加需要用户输入添加的元素追加到后面

如果输入的是3的话就删除最后一个元素

打印的删除为什么再打印对应的数组

如果输入的是4的话就添加需要用户输入添加的元素追加元素到第一个

<script>
           function fn(){
            var arr1 = ['hello','world','helloWorld']
            var userInput = prompt() //接收一个string类型的值
            switch(userInput){
                case '1':
                    var rmStr = arr1.shift()
                    console.log(rmStr);
                 console.log(arr1);
                    break;
                case '2':
                    var inputAdd = prompt("请输入你要添加的内容")
                    arr1.push(inputAdd)
                    break
                case '3':
                    var rmStr = arr1.pop()
                    console.log(rmStr);
                    // console.log(arr1);
                    break
                case '4':
                    var inputAdd = prompt("请输入你要添加的内容")
                    arr1.unshift(inputAdd)
                    break
                default:
                    console.log("输入出错");
                    fn() 
            }
            console.log(arr1);
        }
        fn()
    </script>

数组增删改查的方法

 <script>
        unshift和push都会改变原来的数组 且返回的数据都是新的数组长度
        增加的方法 push 追加到后面
        组里面最好是同类型的数据
              var arr1 = ['a']
              console.log(arr1);
        里面的类型为你当前里面存储的数据类型 返回值为新的数组长度
              console.log(arr1.push('b'));
       添加到前面 插入一个新的数据到开始位置
              console.log(arr1.unshift('c'));
        某个商品的分类里面有对应的商品 矿泉水
        他是按照销量进行排名 有一天 红牛的销量大于矿泉水  旺仔牛奶的销量小于矿泉水
        现在需要将他们放在一个数组中 并且打印排名最后的商品
        var shopType = ['矿泉水']
        shopType.push('旺仔牛奶')
        shopType.unshift('红牛')
        console.log(shopType[shopType.length-1]);
    </script>

unshift和push都会改变原来的数组且返回的数据都是新的数组长度
增加的方法 push 追加到后面
组里面最好是同类型的数据
var arr1 = [‘a’]
console.log(arr1);
里面的类型为你当前里面存储的数据类型返回值为新的数组长度
console.log(arr1.push(‘b’));
添加到前面插入一个新的数据到开始位置
console.log(arr1.unshift(‘c’));
某个商品的分类里面有对应的商品矿泉水
他是按照销量进行排名有一天红牛的销量大于矿泉水旺仔牛奶的销量小于矿泉水
现在需要将他们放在一个数组中并且打印排名最后的商品
var shopType = [‘矿泉水’]
shopType.push(‘旺仔牛奶’)
shopType.unshift(‘红牛’)
console.log(shopType[shopType.length-1]);

遍历逐个取出来

 一般数组遍历使用循环遍历 一般使用for循环
<script>
             var array = new Array(10,20,30,40,100);
         普通for
                for(var i=0;i<array.length;i++){
              console.log(array[i]);//取出里面的元素 进行打印
              }
        var index 表示里面的下标 in表示在里面 array数组
        for in的形式 专门遍历数组的
        for (var index in array) {
            利用下标取出对应的值进行打印
            console.log(array[index]);
        }  
    </script>

递归

自己调用自己函数内部调用函数
三大问题因素
1.明确对应要解决的问题
2.明确临界点（终止） if else(没有规律的)
3.明确内部需要调用自己的函数
递归调用的方式:
1. 首先去找临界值，即无需计算，获得的值(一般是返回该值)。 //一般是有结果返回的
2. 找这一次和上一次的关系(一般从后往前找) //函数必须要有参其次参数之间得到的结果会存再某种关系
3. 假设当前函数已经可以使用，调用自身计算上一次的运行结果，再写出这次的运行结果
如果当前函数已经使用那么对应的上一次函数我们会把他当值来进行计算

<input type="text" id="input" placeholder="请输入电影名">
    <!-- onclick是所有标签都有的 这个是对应的触发点击事件 里面的值为函数 
    也就是意味着点击这个按钮 调用对应的函数 这个函数调用方式叫做函数的事件调用
    -->
    <button onclick="showInputValue()">搜索</button>

<script>
    function showInputValue(){
        先要获取这个input
        document 文档  get获取  element 元素 by通过 id
        通过id获取对应的元素
       var inputElement =  document.getElementById("input")
       打印对应的里面的value值 input里面显示的内容为value值
       var val = inputElement.value;
       清空
       inputElement.value = ""
       console.log(val);
    }
    showInputValue() //也是事件驱动 加载事件 所有的函数都需要通过事件驱动
    document.write("你好 世界")
    通过文档写入 通过输出流直接发送给浏览器 由浏览器自动渲染
    服务器渲染 加载快（首页渲染）
    //document.write("hello")
</script>