3.1 数组创建的方式

古城微笑少年丶 2023-09-30 18:23 15阅读 0赞

JS数组创建的四种语法

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            /*第一种
                             *创建了一个空数组 new Array();
                             * */
                            var arr=new Array();
                            arr[0]=1;
                            console.log(arr);
                            
                            /*
                             *第二种
                             * 创建定长数组 new Array(5);
                             * */
                            var arr2=new Array(5);
                            arr2[0]="x";
                            arr2[4]=true;
                            console.log(arr2)
                            
                            
                            /*
                             * 第三种创建语法
                             * 创建时,直接指定元素值
                             * */
                            
                            var arr3=new Array("asdf",10,20.3,true);
                            console.log(arr3)
                            
                            
                            /*
                             *第四种语法
                             * 相当于第三种语法的简写
                             * */
                            var arr4=["asdf",10,20.3,true];
                            console.log(arr4)
                            
                    </script>
            </head>
            <body>
            </body>
    </html>

![5a289d27eb603818d0abb69c1d98bc0e.gif][]

![ed4335f1afb4ae9b45f329ec0e8ae260.gif][]

3.2数组的元素和长度

JS中数组元素和长度使用时的特征

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script type="text/javascript">
                            var arr=[11,22,33];
                            console.log(arr)
                            console.log(arr[0]);
                            console.log(arr.length)
                            
                            /*
                             * JS中的数组是可以通过修改length属性来改变数组长度的
                             * */
                            arr.length=5;
                            console.log(arr)
                            /*
                             * JS的数组可以通过索引改变数组的长度
                             * */
                            arr[9]=99;
                            console.log(arr);
                            
                    </script>
            </head>
            <body>
            </body>
    </html>

![3ff8f75b72d107b0351c262ff348c9e6.gif][]

![8961f4889e807b1e941b50f5a05b6ade.gif][]

3.3数组的遍历方式

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            var arr=[5,7,3,1,6,2,4,9,8];
                            /*
                             * 普通for循环遍历数组
                             * */
                            for(var i=0;i<arr.length;i++){
                                    console.log(arr[i])
                            }
                            
                            /*
                             *foreach循环遍历数组
                             * JS 中foreach写法为  for( var i in 数组)
                             * i 不是元素  是索引
                             * */
                            for (var i in arr){
                                    console.log(arr[i])
                            }
                            
                    </script>
            </head>
            <body>
            </body>
    </html>

![f7c1fcd85185d13401c7061d7ebe786d.gif][]

![e4cfd2246c351e6ecd49dae9dfcdb419.gif][]

3.4数组的常用方法

数组的常用方法

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            var arr=[1,2,3,4,5,6,7,8,9];
                            var index =arr.indexOf(7);//查询元素索引的方法
                            console.log(index)
                            
                            // 合并两个数组
                            var hege = ["Cecilie", "Lone"];
                            var stale = ["Emil", "Tobias", "Linus"];
                            var children = hege.concat(stale);
                            console.log(children)
                            
                            // 合并三个数组
                            var parents = ["Jani", "Tove"];
                            var brothers = ["Stale", "Kai Jim", "Borge"];
                            var children = ["Cecilie", "Lone"];
                            var family = parents.concat(brothers, children);
                            console.log(family)
                            
                            
                            // 合并字符串
                            var fruits = ["Banana", "Orange", "Apple", "Mango"];
                            var fs =fruits.join();
                            console.log(fs)
                            
                            
                            // 移除最后一个元素
                            var fruit=fruits.pop();
                            console.log(fruits)
                            console.log(fruit)
                            
                            // 想结尾增加元素
                            fruits.push("Grape");
                            console.log(fruits)
                            
                            
                            //反转数组
                            fruits.reverse();
                            console.log(fruits)
                            
                            //删除数组第一个元素
                            var ss =fruits.shift();
                            console.log(fruits);
                            console.log(ss)
                            
                            //向第一个位置添加元素
                            fruits.unshift("火龙果");
                            console.log(fruits);
                            
                            // 截取子数组  从哪个索引开始,到哪个索引结束 包头不包尾
                            
                            var citrus = fruits.slice(1,3);
                            console.log(citrus)
                            
                            var numbers =[1,2,3,4,5,6,7,8,9]
                            /*
                             * 删除数组中的某些元素
                             * 2 从哪个索引开始删除
                             * 3 删除多个少个元素
                             * */
                            /*numbers.splice(2,3);
                            console.log(numbers)*/
                            /*
                             * 如果第二个参数是0 那么就变成了在指定索引位置增加元素
                             * */
                            numbers.splice(2,0,100);
                            console.log(numbers)
                    </script>
            </head>
            <body>
            </body>
    </html>

![c0d37011253d78ea5c3fd028ba8c3725.gif][]

![8587d29b54ba3d5ce2d3777d84186baa.gif][]

数组元素的排序

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            var fruits = ["Banana", "Orange", "Apple", "Mango"];
                            fruits.sort();
                            console.log(fruits)
                            
                            var numbers=[5,7,9,6,1,8,3,4,2];
                            numbers.sort(function(a,b){return b-a});
                            console.log(numbers)
                            
                            
                            
                    </script>
            </head>
            <body>
            </body>
    </html>

![c75e3b3e1ee2d06476b0259cb1f785eb.gif][]

![32775dcdf2c8a1348b66d85ff0e08e86.gif][]

[5a289d27eb603818d0abb69c1d98bc0e.gif]: https://img-blog.csdnimg.cn/img_convert/5a289d27eb603818d0abb69c1d98bc0e.gif
[ed4335f1afb4ae9b45f329ec0e8ae260.gif]: https://img-blog.csdnimg.cn/img_convert/ed4335f1afb4ae9b45f329ec0e8ae260.gif
[3ff8f75b72d107b0351c262ff348c9e6.gif]: https://img-blog.csdnimg.cn/img_convert/3ff8f75b72d107b0351c262ff348c9e6.gif
[8961f4889e807b1e941b50f5a05b6ade.gif]: https://img-blog.csdnimg.cn/img_convert/8961f4889e807b1e941b50f5a05b6ade.gif
[f7c1fcd85185d13401c7061d7ebe786d.gif]: https://img-blog.csdnimg.cn/img_convert/f7c1fcd85185d13401c7061d7ebe786d.gif
[e4cfd2246c351e6ecd49dae9dfcdb419.gif]: https://img-blog.csdnimg.cn/img_convert/e4cfd2246c351e6ecd49dae9dfcdb419.gif
[c0d37011253d78ea5c3fd028ba8c3725.gif]: https://img-blog.csdnimg.cn/img_convert/c0d37011253d78ea5c3fd028ba8c3725.gif
[8587d29b54ba3d5ce2d3777d84186baa.gif]: https://img-blog.csdnimg.cn/img_convert/8587d29b54ba3d5ce2d3777d84186baa.gif
[c75e3b3e1ee2d06476b0259cb1f785eb.gif]: https://img-blog.csdnimg.cn/img_convert/c75e3b3e1ee2d06476b0259cb1f785eb.gif
[32775dcdf2c8a1348b66d85ff0e08e86.gif]: https://img-blog.csdnimg.cn/img_convert/32775dcdf2c8a1348b66d85ff0e08e86.gif