实例演示 js中的数组方法

检测是否为数组

                var a = []
                var b = 123
                // 第一种方法
                console.log(a instanceof Array);
                console.log(b instanceof Array);

                // 第二种方法
                console.log(Array.isArray(a) );

实例演示 js中的数组方法_第1张图片

添加数组元素(3种方法)

1、push 在数组尾部添加数据

                var a = [1,2,3]

                // 1、在数组尾部添加数据
                console.log( a.push(4));                
                console.log(a);

实例演示 js中的数组方法_第2张图片
该方法的返回值是添加数据后数组的长度

2、unshift 在数组的头部添加数据

                var a = [1,2,3]

                // 1、在数组尾部添加数据
                console.log( a.push(4));                
                console.log(a);

                // 2、在数组的头部添加数据
                console.log(a.unshift(5));
                console.log(a);

实例演示 js中的数组方法_第3张图片
该方法的返回值是添加数据后数组的长度

3、splice 在数组任意位置添加数据
splice语法
splice(要修改的位置,要移除的元素的个数,添加的数组元素)

                var a = [1,2,3]

                // 1、在数组尾部添加数据
                console.log( a.push(4));                
                console.log(a);

                // 2、在数组的头部添加数据
                console.log(a.unshift(5));
                console.log(a);
                
                // 3、在数组的任意位置添加数据
                console.log(a.splice(3,0,6,7));
                console.log(a);
                // 添加的位置参数为负数代表从数组的尾部计算位置
                console.log(a.splice(-1,0,8));
                console.log(a);

实例演示 js中的数组方法_第4张图片
注意:
1、splice的返回值为移除的元素组成的数组,如果移除的数据为空则返回一个空的数组。
2、splice的位置参数如果为负数则表示从数组的尾部计算位置,比如-1代表的是倒数第二个位置。

删除数组元素(3种方法)

1、pop 删除数组的最后一个元素

                var a = [1,2,3,4,5]

                // 1、删除数组的最后一个元素
                console.log(a.pop());
                console.log(a);

实例演示 js中的数组方法_第5张图片
注意:
1、该方法不需要参数
2、返回值是被删除的元素
3、一次只能删除一个元素

2、shift 删除数组的第一个元素

                var a = [1,2,3,4,5]

                // 1、删除数组的最后一个元素
                console.log(a.pop());
                console.log(a);

                // 2、删除数组的第一个元素
                console.log(a.shift());
                console.log(a);

实例演示 js中的数组方法_第6张图片
注意:
1、该方法不需要参数
2、返回值是被删除的元素
3、一次只能删除一个元素

3、splice 删除数组任意位置的元素

                var a = [1,2,3,4,5]

                // 1、删除数组的最后一个元素
                console.log(a.pop());
                console.log(a);

                // 2、删除数组的第一个元素
                console.log(a.shift());
                console.log(a);

                //3、删除数组的任意位置的元素
                //删除索引为1的元素并在此位置添加新的元素6
                console.log(a.splice(1,1,6));
                console.log(a);

                // 参数为负数
                console.log(a.splice(-1,1));
                console.log(a);

实例演示 js中的数组方法_第7张图片
注意:
1、splice的返回值为移除的元素组成的数组,如果移除的数据为空则返回一个空的数组。
2、splice的位置参数如果为负数则表示从数组的尾部计算位置

关于splice要修改的位置取负数时的情况

注意:取负数时,添加和移除元素的计算起始坐标不一致。
1、添加数据时参数为负数,从倒数第二个开始计算即-1为倒数第二个元素

                var a = [1,2,3,4,5]

                // 1、添加数据时
                console.log(a.splice(-1,0,6));
                console.log(a);

实例演示 js中的数组方法_第8张图片
2、移除数据时参数为负数,从倒数第一个开始计算即-1为倒数第一个元素

                var a = [1,2,3,4,5]

                // 1、添加数据时
                console.log(a.splice(-1,0,6));
                console.log(a);

                //2、删除数据时
                console.log(a.splice(-1,1));
                console.log(a);

实例演示 js中的数组方法_第9张图片
3、修改数据时和删除数据的计算方式一致

                var a = [1,2,3,4,5]

                // 1、添加数据时
                console.log(a.splice(-1,0,6));
                console.log(a);

                //2、删除数据时
                console.log(a.splice(-1,1));
                console.log(a);
                
                // 3、修改数据
                console.log(a.splice(-1,1,7));
                console.log(a);

实例演示 js中的数组方法_第10张图片

数组的排序

1、翻转数组

                var a = [1,2,3,4,5]
                console.log(a.reverse());

在这里插入图片描述
注意:
1、该方法不需要参数
2、该方法会修改数组,返回一个新的数组

2、数组排序

                var a = [1,3,2,5,4]
                console.log(a.sort());

实例演示 js中的数组方法_第11张图片
注意:
1、该方法不需要参数
2、会修改数组,返回一个新的数组

缺点:
当出现例如[11,1,2,3,4,31,111]时无法正确排序

                var a = [11,1,2,3,4,31111]
                console.log(a.sort());

实例演示 js中的数组方法_第12张图片
原因:
该方法在排序时会以出现数字的首位大小排序

解决办法:

                var a = [11,1,2,3,4,31,112]
                console.log(a.sort(
                    function(a,b){
                        return a-b
                    }
                ));

在这里插入图片描述
注意:
1、a-b时为升序排序
2、b-a时为降序排序

查找数组元素

1、indexOf 从数组的头部开始查找

                var a = [1,2,3,1,2,3]
                // 1、从数组的头部开始查找
                console.log(a.indexOf(1));
                console.log(a.indexOf(4));

在这里插入图片描述
注意:
1、存在则返回该元素从头部开始的第一次出现的位置,不存在则为-1
2、该方法只会查询遇到的第一个该元素

2、lastIndexOf 从尾部查找

                var a = [1,2,3,1,2,3]
                // 1、从数组的头部开始查找
                console.log(a.indexOf(1));
                console.log(a.indexOf(4));

                // 2、从尾部开始查找
                console.log(a.lastIndexOf(1));
                console.log(a.lastIndexOf(4));

实例演示 js中的数组方法_第13张图片
注意:
1、存在则返回该元素从尾部开始的第一次出现的位置,不存在则为-1
2、该方法只会查询遇到的第一个该元素

数组与字符串的相互转换

数组转换为字符串

                var a = [1,2,3]
                // 第一种方法
                console.log(a.toString());
                
                // 第二种方法
                console.log(a.join('$'));

实例演示 js中的数组方法_第14张图片
字符串准换为数组

                    var a ='1,2,3'
                    var b ='1#2#3'
                    console.log(a.split(','));
                    console.log(b.split('#')); 

实例演示 js中的数组方法_第15张图片

你可能感兴趣的:(前端技术)