JavaScript的数组（array / arr）操作

    <script>
        // 字面量语法形式
        var arr = ["你好",1,"北京","上海",{name:"张三"}]
        // 构造函数定义形式
        var arr1 = new Array();
        // 控制台输出
        console.log(arr);
        console.log(arr1);
    </script>

运行结果：

其中0,1,2,3,4就是相对应数值的索引下标。第一个数值索引下标为0，第二个为1...

二、数组的基本操作

2.1 调用

数组名[索引下标]

通过[]取值语法调用指定索引下标存储的数据数值。

2.1修改

数组名称[索引下标] = 新数值；

对数组中已经存在的索引下标3 对应的数据单元记性赋值操作，后赋值的会覆盖之前存储的数值，执行效果是数组单元存储的数据的修改操作。

2.3 新增

数组名[数组名.length -1 +1 ] = 新数值；

原始数组的最后一个单元的索引下标是数组.length-1。

新增单元的索引下标是原始数组最后一个单元的索引下标+1。

也就是新增单元的索引下标是数组.length -1 +1

代码展示：

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        // 调用
        console.log(arr[1]);
        // 修改
        arr[2] = "郑州";
        // 新增
        arr[arr.length] = "重庆";
        console.log(arr);
    </script>

运行结果：

三、数组的循环遍历

3.1 for...in

for( var 变量 in 数组 ){

}

变量中存储数组单元的索引下标

数组[变量] 获取索引下标对应单元存储的数值数据

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        // for...in 获取索引下标
        for(var key in arr){
            console.log(key);
            // 调用语法获取索引下标对应的数据数值
            console.log(arr[key]);
        }
    </script>

运行结果：

3.2 for...of

for(var 变量 of 数组）{

}

变量中存储数组单元的数值数据

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        // for...of 获取数据数值
        for(var value of arr){
            console.log(value);
        }
    </script>

运行结果：

3.3 forEach

数组.forEach(function(参数1,参数2,参数3){

})

参数1 存储数组的数值数据
参数2 存储数组的索引下标
参数3 存储原始数组内容

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        arr.forEach(function(value,key,Array){
            // 数据数值
            console.log(value);
            // 对应的索引下标
            console.log(key);
            // 原数组
            console.log(Array);
        })
    </script>

运行结果：

四、数组ES5的函数操作语法

4.1 数组的映射

数组.map(function(参数1,参数2,参数3){ return 参数1的操作 })

将数组中每一个单元的数据执行相同的操作生成一个新的数组
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        // 映射操作
        var arr1 = arr.map(function(value,key,Array){
            // value的操作(参数一)
            return "城市"+value;
        });
        console.log(arr1);
    </script>

运行结果：

4.2 数组的过滤

数组.filter(function(参数1,参数2,参数3){ return 参数1的判断比较 })

将数组中每一个单元执行判断比较将符合条件的数据生成一个新的数组
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
        // 数组的过滤操作
        var arr1 = arr.filter(function(value,key,Array){
            // value的操作(参数一) 大于等于5。
            return value >= 5;
        });
        console.log(arr1);
    </script>

运行结果：

4.3 数组的判断

数组.some(function(参数1,参数2,参数3){ return 参数1的判断比较 })

将数组中每一个单元执行判断比较只有要符合条件的数据返回值就是 true
将数组中每一个单元执行判断比较将符合条件的数据生成一个新的数组
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
        // 数组的判断操作(some)只有要符合条件的数据 返回值就是 true
        var arr1 = arr.some(function(value,key,Array){
            // value的操作(参数一) 大于等于5。
            return value >= 5;
        });
        console.log(arr1);
    </script>

运行结果：

数组.every(function(参数1,参数2,参数3){ return 参数1的判断比较 })

将数组中每一个单元执行判断比较必须所有的数据都符合条件返回值就是 true
将数组中每一个单元执行判断比较将符合条件的数据生成一个新的数组
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
        // 数组的判断操作(every)必须所有的数据都符合条件 返回值就是 true
        var arr1 = arr.every(function(value,key,Array){
            // value的操作(参数一) 大于等于5。
            return value >= 5;
        });
        console.log(arr1);
    </script>

运行结果：

五、数组的新增与删除

5.1 首位新增

数组.unshift（数据1，数据2...）可以新增多位

5.2 末位新增

数组.push(数据1，数据2...)可以新增多位

5.3 首位删除

数组. shift()只能删除一位

5.4 末尾删除

数组.pop()只能删除一位

    <script>
        var arr = [1,2,3,4,5,6,7,8];
        // 首位新增，可以新增多个。
        arr.unshift("北京","深圳");
        // 末位新增，可以新增多个。
        arr.push('上海',"郑州");
        // 首位删除，只能删除一个。
        arr.shift();
        // 末尾删除，只能删除一个。
        arr.pop();
        console.log(arr);
    </script>

运行结果：

5.5数组指定单元的删除

数组.splice(参数1，参数2，其他所有参数)

参数1；删除单位起始位置的索引下标。

参数2：删除的个数

其他所有参数：替换在删除参数的位置的参数，多个参数用逗号隔开。

    <script>
        var arr = [1,2,3,4,5,6,7,8];
        // 数组指定单元的删除
        arr.splice(2,2,"北京","上海","广州");
        console.log(arr);
    </script>

运行结果：

六、数组的查询

6.1 数组.indexOf （查询的数据）

如果有就返回第一个值的索引下标。没有就返回 -1

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        var key = arr.indexOf('上海');
        console.log(key);
    </script>

运行结果：

6.2 数组.lastIndexOf （查询的数据）

如果有就返回最后一个值的索引下标。没有就返回 -1

    <script>
        var arr = ["北京","上海","广州","深圳","上海","杭州","南京"];
        var key = arr.lastIndexOf("上海");
        console.log(key);
    </script>

运行结果：

七、数组的反转

7.1 数组,reverse() 反转数组

  <script>
        var arr= [1,2,3,4,5,6,7,8,9];
        // 数组的反转
        var arr1 = arr.reverse();
        console.log(arr1);
    </script>

运行结果：

八、数组与字符串的转换

8.1 数组到字符串

数组.join（’‘）；

设定间隔符号为空字符串，字符之间效果是没有间隔。

数组. join（‘间隔符号‘）；

获取数组数值，拼接成字符串，单元数组之间用间隔符号隔开。

数组.join() ;

获取数组数值，拼接成字符串，单元数组之间用逗号隔开。

    <script>
        var arr = ["北京","上海","广州","深圳","杭州","南京"];
        // 字符之间效果是没有间隔。
        var arr1 = arr.join('');
        // 单元数组之间用间隔符号隔开。可以是任意符号。
        var arr2 = arr.join("——");
        // 单元数组之间用逗号隔开。
        var arr3 = arr.join();
        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
    </script>

运行结果：

8.2字符串到数组

字符串. split() ;

将字符串作为一个整体存储到数组中

字符串.split('间隔符号') ;

按照间隔符号将字符串分割为数据数值存储到数组中分割之后数组中没有间隔符号存储

字符串.split('') ;

每一个字符串都分割为一个数据数值存储到数组中

    <script>
        var str = "你 好 我 叫 大 聪 明 码 农 徐";
        // 将字符串作为一个整体存储到数组中
        var arr = str.split();
        // 按照间隔符号("空格") 将字符串分割为数据数值 存储到数组中分割之后数组中没有间隔符号存储
        var arr1 = str.split(" ");
        // 每一个字符串 都 分割为一个数据数值 存储到数组中
        var arr2 = str.split("");
        console.log(arr);
        console.log(arr1);
        console.log(arr2);
    </script>

运行结果：

九、数组的排序

9.1 数组,sort()；

按首字母的ascii码排序。小在前大在后。

数组.sort(function(参数大，参数小 ){return（参数大 - 参数小）}) 从小到大排序

数组.sort(function(参数大，参数小 ){return（参数小 - 参数大）}) 从大到小排序

    <script>
        var arr = [1,21,3,4,0,23,65,97,425,3455,253,34,2,56];
        // 从小到大
        var theMax =arr.sort(function(max,min){
            return(max - min);
        }) 
        var arr1 = [1,21,3,4,0,23,65,97,425,3455,253,34,2,56];
        // 从大到小
        var theMin =arr1.sort(function(max,min){
            return(min - max);
        }) 
        console.log(theMax);
        console.log(theMin);
    </script>

代码展示：

十、数组的拼接

10.1 数组.concat() ;

不会改变原数组的值，返回值为拼接的数组。

    <script>
        var arr = [1,2,3,4];
        var arr1 = ["北京","上海","广州"];
        // 数组的拼接操作
        var arr2 = arr.concat(arr1);
        console.log(arr2);
    </script>

运行结果：

十一、数组的截取

11.1 数组.slice (参数)；

从设定的索引下标开始一直到数组结束

11.2 数组.slice（参数1，参数2）；

从参数一设定的索引下标开始到参数2 结束但不包括2.

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
        // 从设定的索引下标开始一直到数组结束
        var newArr1 = arr.slice(5);
        // 从参数一设定的索引下标开始到参数2 结束但不包括参数2
        var newArr2 = arr.slice(5,7);
        console.log(newArr1);
        console.log(newArr2);
    </script>

运行结果：

十二、数组的扁平化处理

所谓的数组扁平化就是将多维数组转化为一维数组。

    <script>
        var arr = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
        console.log( arr );
        // 转化为 一维数组
        // 将 数组 转化为 字符串 
        // 转化结果都是以 逗号为间隔字符串
        var res1 = arr.toString() ;
        var res2 = arr.join() ;
        // 将字符串以都好为间隔转化为数组
        var newArr = res1.split(',');
        console.log( newArr );

    </script>

运行结果：

十三、数组的坍塌

13.1 定义

数组在执行删除操作时，删除数组单元之后i，后面的数组会向前移动，出现在删除单元的位置上，造成数组长度减少的现象，称为数组的坍塌。

    <script>
        // sort排序 删除重复数据 数组去重
        // 原始数组
        var arr = [ 1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7 ] ;

        // 数组排序
        arr.sort(function(a,b){ return a-b });
        console.log( arr );

        // 循环遍历数组 
        // 当前的单元 和 下一个单元 进行数据的比较判断 
        // 最后一个单元 没有 下一个单元进行比较判断
        // 循环到 倒数第二个单元 就可以了 
        // 也就是 循环至 倒数第二个单元的索引下标就可以了
        for( var i = 0 ; i <= arr.length-1 -1 ; i++ ){
            // i 是 索引下标 
            // arr[i]   是 当前索引下标对应的单元
            // arr[i+1] 是 下一个索引下标对应的单元
            // 如果 两个单元 存储的数据相同 删除 后一个单元的数据
            if( arr[i] === arr[i+1] ){
                // 从 i+1 也就是下一个单元开始删除 删除 一个 数据单元
                arr.splice( i+1 , 1 );
            }
        }
    </script>

运行结果：

13.2 影响

只要数组执行删除操作,会立即触发数组的坍塌,数组坍塌不能阻止, 只能消除数组坍塌造成的影响.

13.3 解决方法

    <script>
        // sort排序 删除重复数据 数组去重
        // 原始数组
        var arr = [ 1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7 ] ;

        // 数组排序
        arr.sort(function(a,b){ return a-b });
        console.log( arr );

        // 循环遍历数组 
        // 当前的单元 和 下一个单元 进行数据的比较判断 
        // 最后一个单元 没有 下一个单元进行比较判断
        // 循环到 倒数第二个单元 就可以了 
        // 也就是 循环至 倒数第二个单元的索引下标就可以了
        for( var i = 0 ; i <= arr.length-1 -1 ; i++ ){
            // i 是 索引下标 
            // arr[i]   是 当前索引下标对应的单元
            // arr[i+1] 是 下一个索引下标对应的单元
            // 如果 两个单元 存储的数据相同 删除 后一个单元的数据
            if( arr[i] === arr[i+1] ){
                // 从 i+1 也就是下一个单元开始删除 删除 一个 数据单元
                arr.splice( i+1 , 1 );

// 防止数组坍塌造成的影响
                i-- ;


            }
        }
    </script>

运行结果：

十四、总结

14.1会直接改变原始数组的操作

首位新增 arr.unshift(数据1，数据2,...);

首位删除 arr.shift();

末位新增 arr.push(数据1，数据2,...);

末位删除 arr.pop();

数组指定单元的删除 arr.splice(参数1,参数2,其它所有参数);

反转数组 arr.reverse();

数组排序 arr.sort();

14.2不会改变原始数组的操作

数组的映射 arr.map(function(参数1,参数2,参数3){ return 参数1的操作 })

数组的过滤 arr.filter(function(参数1,参数2,参数3){ return 参数1的判断比较 })

数组的判断 arr.some(function(参数1,参数2,参数3){ return 参数1的判断比较 })

arr.every(function(参数1,参数2,参数3){ return 参数1的判断比较 })

数组的查询 arr.indexOf( 查询的数据 );

arr.lastIndexOf( 查询的数据 )

数组转化字符串 arr.join();

字符串转化数组 str.spilt();

数组的拼接 arr.concat();

数组的截取 arr.alice();

大聪明码农徐

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的数组（array / arr）操作

数组的定义字面量语法形式var 变量 = [ 数据1 , 数据2 , 数据3 .... ];在[]中定义数组存储的数据单元，数据单元可以是一个可以是多个，多个数据单元之间用逗号隔开，数组中可以存储所有JavaScript支持的数据结构。构造函数定义形式var 变量 = new Array() ;代码展示： <script> // 字面量语法形式 var arr = ["你好",1,"北京","上海",{name:"张三"}]..
复制链接

扫一扫