一站式搞定Javascript(三）一篇教会你用数组与对象

数组

数组的创建

简单来说，数组的特征是[ ]包起来的形式
数组可以为空，例如：

var arr = [];//创建一个空数组

数组中的数据可以使任意数据类型，用逗号分割,我们把数组中的数据称为元素。

数组的下标

通过数组索引可以获取数组中的单个元素，获取的形式为：数组名[索引（也称为下标）] 索引是从0开始。

var arr1 = [1,"hhh",true,[]]
console.log(arr1[1])//结果为hhh

遍历数组

For循环遍历数组

遍历数组通过数组中存在一个length属性，可以取到数组元素的个数。我们还是用刚刚上面的那个数组：

var arr1 = [1,"hhh",true,[]]
console.log(arr1.length)
for(var i = 0; i < arr1.length;i++){
     console.log(arr1[i])
 }
 

运行结果：

可以看见，我们数组中有4个元素，所以length为4；而我们的i在这里是当作数组下标的遍历，因为数组下标是从0开始的，我们从0累加到3，每一次都打印一遍我们新累加得到的数组下标对应的元素。

补充知识：关于for循环
形式 ：for (初始化; 条件表达式; 迭代表达式) {
循环体（要重复执行的代码） }
1.初始化：在循环开始之前执行一次，用于设置循环控制变量的初始值。
2.条件表达式：每次循环开始前都会检查此条件，如果为真（true），则执行循环体；如果为假（false），则循环结束。
3.迭代表达式：在每次循环体执行完毕后执行，通常用于更新循环控制变量。
4.循环体：需要重复执行的代码块。

forEach遍历数组

如果想要同时遍历到数组的下标、数组对于元素的值、以及当前所在数组的话，你可以尝试一下forEach。JavaScript中的forEach方法是一种遍历数组元素的便捷方式，它是为数组中的每个元素执行一次提供的函数。

forEach基础用法：
forEach有三个基本参数：
第一个参数就代表数组中的每一个元素的值（必选）
第二参数就代表数组每一个元素下标（可选）
第三个参数就代表被遍历的数组（可选）

     var arr1 = [1,"hhh",true,[]]
        arr1.forEach(function(value,index,arr){
            console.log(value,index,arr)
        })

执行结果：

练习

愿意动脑筋的，来写个简单的小练习：
使用forEach或者for，来求数组 [2,6,1,77,52,25,7,99]中的最大值返回。
答案放上面可以自己对照

     // 求数组 [2,6,1,77,52,25,7,99]中的最大值返回
        var arr = [2,6,1,77,52,25,7,99]
        function getMax(qwe){
            //方法一
            // var max = qwe[0];
            // for(var i = 1 ; i < qwe.length;i++){
            //     if(qwe[i] > max){
            //         max = qwe[i]
            //     }
            // }
            // console.log(max)
            // return max
            //方法二
            var max = qwe[0];
            qwe.forEach(function(v,i,a){
                if(v > max){
                    max = v
                }
            });
            console.log(max)

        }
        console.log(getMax(arr))

数组下标的灵活使用（增删改查）

增、改

单个增

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

结果：

循环增

var arr = [];
for(var i = 1 ; i <= 5 ;i++){
   arr[arr.length] = i;
 }
console.log(arr)

结果：

直接通过length增

 var arr = [];
        arr.length = 8;
        console.log(arr)
        console.log(arr.length)//可读可改属性，当数组没有具体内容时会被empty填充

结果：

改

直接通过数组下标改：

arr[4] = 123;

删

使用 delete 操作符删除数组中的元素后，arr2 中索引为 2 的元素（值为 3）被删除，但数组的长度不会改变，被删除的位置会被替换undefined。

而arr2.length -= 1，数组的长度减少了 1。这意味着数组的最后一个元素（之前的 5）现在被“移除”了。这个操作并不移动数组中的元素来填补被删除元素留下的空位，而是直接缩短数组，可能导致数组末尾出现未定义的空洞。

    var arr2 = [1,2,3,4,5]
    delete arr2[2];
    console.log(arr2)
    console.log(arr2[2])
    arr2.length -= 1;
    console.log(arr2)

结果：

查

console.log(arr2[3])

数组的API（方法）：

利用数组的方法，我们可以对数组进行更灵活的增删改查。
push(newData1,newData2....) 在数组末尾添加元素
pop() 在数组末尾删除一个元素
shift() 在数组开头删除一个元素
unshift(newData1,newData2.....) 在数组开头添加
indexOf() 查找数组中是否存在一个元素，找得到返回元素下标，找不到返回-1
splice(index,num,tihuan) 从数组的index位置开始删除num个，替换可写可不写，写的话就是把刚刚删除的元素位置替换成新的数据

简单运用：

        var arr = [22,33,44,55,66]
        arr.push(99,88)
        console.log(arr)
        arr.unshift(0,11)
        console.log(arr)
        arr.pop()
        console.log(arr)
        arr.shift()
        console.log(arr)
        var arr1 = [1,2,3,4];
        arr1.splice(2,2,"laila")
        console.log(arr1)
        

结果：

练习一：把数组[2,0,6,1,77,0,52,0,25,7]中大于10的元素组成一个新的数组

        var arr3 = [2,0,6,1,77,0,52,0,25,7]
        function fun(poi){
            var newArr = [];
            for(var i = 0 ; i < poi.length ; i++){
                if(poi[i] > 10){
                    newArr.push(poi[i])
                }
            }
            return newArr;
        }
        console.log(fun(arr3))

练习二：将数组arr3翻转到新数组中方法

      var arr3 = [2,0,6,1,77,0,52,0,25,7]
      var newArr2 = []
        for(var i = arr3.length - 1 ; i >= 0 ; i--){
            // newArr2.push(arr3[i])
            newArr2[newArr2.length] = arr3[i]
        }
        for(var i = 0 ; i < arr3.length ; i++){
            newArr2.unshift(arr3[i])
        }
        console.log(newArr2)

练习三：对arr4数组去重

        var arr4 = [12,25,66,98,77,1,12,36,88,66];
        var newArr = []
        for(var i = 0;i < arr4.length;i++){
            if( newArr.indexOf(arr4[i]) == -1 ){
                newArr.push(arr4[i])
            }
        }
        console.log(newArr)
        console.log(arr4.indexOf(11))
        console.log(arr4.indexOf(77))

对象

创建 对象

//创建空对象
var obj = {}
//创建一般对象：
        var obj = {
            // 属性名 : 属性值
            name : "小翠",
            age : 18,
            sex : true,
            hobby : ["打王者","打金铲铲","唱歌"],
            money : {
                jianhang : 1,
                zhaohang : 9999999999
            },
            // 方法名 ： 方法值
            say : function(aaa){
                console.log("哈喽"+aaa)
            },
             // 数字作为键名，合法但访问时需要注意
            0 : 123
        }
        console.log(obj)

结果：
注意：1.使用数字作为键名，合法但访问时需要注意
2.对象没有length属性

如果直接访问

console.log(obj.0); // 这是错误的，会引发语法错误

会报错，正确用法：

console.log(obj[0]);

结果：

对象的循环方法 for in

还是用上面创建好的obj

 for(var key in obj){
            console.log(key)//对象的属性名
            console.log(obj[key])
        }

结果：

查

对象名.属性名/方法名 对象名[‘属性名’]/[“方法名”]

     	console.log(obj.hobby)//方法1
        console.log(obj["hobby"])//方法2
        console.log(obj.hobby[2])
        obj.say("world")

结果：

删

delete 对象名.属性名/方法名

     delete obj.money.zhaohang
        console.log(obj)

结果：

增

对象名.属性名/方法名 = 属性值/方法

        obj.guoji = "中国";
        obj.sing = function(){
            console.log("我和我的祖国，一刻也不能分割")
        }
        console.log(obj)

结果：

原创不易，转载请标注原文链接！！！