0
点赞
收藏
分享

微信扫一扫

JS基础学习(七):对象和数组进行循环、concat、splice、indexOf、push、unshift、pop、shift、confirm

码农K 2022-04-25 阅读 56

1.对象和数组进行循环

例如:

<script>

        // ①for in  对象和数组进行循环

        let obj = {

            name: 'XXX',                                        //数组obj下name属性的值为‘xxx’

            age: 22,                                               //数组obj下age属性的值为22

            OBJ: "学习前端"                                  //数组obj下OBJ属性的值为‘学习前端’

        }

                                        // 注意:变量key的类型就是字符串(string)

        for (var key in obj) {                                                //把obj里每个属性下的属性值赋给key

            document.write(obj[key]+'<br>')                        //在网页输出obj下的全部属性值

        }

        // 把指定属性名的属性值打印出来

        // document.write(obj.name)                                //obj下的name属性的属性值‘xxx’

        // document.write(obj["name"])                            //另外的写法

    </script>

2.concat:数组的合并

字面意思:就是将两个数组中的属性值合并成一个新的数组;

例如:

<script>
        let arr1 = [1, 2, 3];                                        //第一个数组属性值为:123
        let arr2 = [4, 5, 6];                                        //第一个数组属性值为:456;
        let arrAll = arr1.concat(arr2);                       //将两个数组合并一起成立新的数组arrAll
        document.write(arrAll)
</script>

3.splice:数组的添加和删除使用

数组使用splice可以有三个参数

            第一个参数表示 所在数组的位置

            第二个参数1表示 删除1个,参数2表示从splice下第一个参数位置开始数删除2个,0表示添加

            第三个参数表示 添加的内容

例如:

<script>
        let arr = ['奥迪', '宝马', '奔驰'];      //arr(数组名称).'奥迪'(第0个)'宝马'(第1个)'奔驰'(第2个)          
        let a = arr.splice(1, 1);                 // 表示arr数组下第一个位置的值删除一个
        document.write(a);                      // 输出a的值是删除的那个值:宝马
        document.write(arr);                   // 输出arr是删除后的数组:奥迪,奔驰
</script>

注意:也可以同时拥有三个参数

如: let arr = ['奥迪', '宝马', '奔驰']; 

        let str = ['大众']

        let b= arr.splice(1, 2,str);                           //结果是:奥迪,大众

//表示arr数组中第1个位置的值删除两个,也就是删除宝马和奔驰的属性值添加一个str下的属性值'大众'

4.indexOf:数组中返回索引

 复习一下:typeof是返回数字类型

                   indexOf:数组中返回索引

例如:

<script>
        let arr = ['奥迪', '宝马', '奔驰'];
        let index1  = arr.indexOf('奥迪');          //返回数组属性值‘奥迪’的索引赋给index1
        document.write(index1)                      //结果是0,因为‘奥迪’在数组中排列在0的位置上
        let index2  = arr.indexOf('大众');
        document.write(index2)                     //结果是-1,因为‘大众’不在数组属性值中,所以fanhui-1
</script>

5.push:在数组中最后的位置添加一个值

例如:

<button onclick="fn('push')">last添加</button>
<button onclick="fn('show')">打印</button>

<script>
        let arr = ['牛奶','面包','灌饼','鸡蛋'];
        document.write('<br>'+arr)
        //传一个变量str,当点击last添加按钮或者打印按钮调用push或者show时,实现if下的语句
        function fn(str){
            if(str=='push'){
                let msg = prompt('输入想吃的早餐:');
                arr.push(msg)
            }
            if(str=='show'){
                for(var i=0;i<arr.length;i++){
                    document.write(arr[i]+'<br>')
                }
            }
        }
    </script>

6.unshift:在数组中最前面位置挤进去一个值(排第一个)

如上同,输出时在数组的占据第一个位置的属性值。

<button onclick="fn('unshift')">first添加</button>
<button onclick="fn('show')">打印</button>
    <script>
        let arr = ['牛奶','面包','灌饼','鸡蛋'];
        document.write('<br>'+arr)
        function fn(str){
            if(str=='unshift'){
                let msg = prompt('输入想吃的早餐:');
                arr.unshift(msg)
            }
            if(str=='show'){
                for(var i=0;i<arr.length;i++){
                    document.write(arr[i]+'<br>')
                }
            }
        }
    </script>

 

 

7.pop:在数组中删除最后一个值

如上同:删除一个数组中最后一个属性值

<button onclick="fn('pop')">last删除</button>
 <button onclick="fn('show')">打印</button>
    <script>
        let arr = ['牛奶','面包','灌饼','鸡蛋'];
        document.write('<br>'+arr)
        function fn(str){
            if(str=='pop'){
                arr.pop()
            }
            if(str=='show'){
                for(var i=0;i<arr.length;i++){
                    document.write(arr[i]+'<br>')
                }
            }
        }
    </script>

8.shift:在数组中删除第一个值

如同上:会将数组中第一个属性值删除;

<button onclick="fn('shift')">first删除</button>
    <button onclick="fn('show')">打印</button>
    <script>
        let arr = ['牛奶','面包','灌饼','鸡蛋'];
        document.write('<br>'+arr)
        function fn(str){
            if(str=='shift'){
                arr.shift()
            }
            if(str=='show'){
                for(var i=0;i<arr.length;i++){
                    document.write(arr[i]+'<br>')
                }
            }
        }
    </script>

9.confirm

confirm() 方法用于显示一个带有指定消息的确定及取消按钮的对话框。如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。

注意:点击确认或者取消按钮之前,它将阻止用户对浏览器的所有输入,在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。点击确认或者取消按钮之后才会执行下面的语句。

例如:

<script>

        let flag = confirm('你是白富美吗!');

        alert(flag)

        if(flag){

            // 点击确定,默认为true

        }else{

            //点击取消,默认为false

        }

    </script>

如图:

  

10.小练习:排重和多位数的排序

<script>
        var arr=[5,4,26,9,4,8,5,14];
        var str = []
        for(var i in arr){
//建立一个空数组,用indexOf查询数组索引的方法查出不在str空数组的数据,不在里面的就把数据放到str空数组里,里面有的将不在输入进去。
            if(str.indexOf(arr[i]) == -1){
                str.push(arr[i])
            }
        }
        document.write('数组排重后为:' + str);
</script>

 <script>
        let arr = [22,121,33,32,41,40];
        
        /* 多位数的 从小到大的排序 */
        /* arr.sort(function(a,b){
            return a-b;
        }) */
        /* 多位数的 从大到小的排序 */
        arr.sort(function(a,b){
            return b-a;
        })
        document.write(arr)
    </script>


举报

相关推荐

0 条评论