JavaScript--数组方法使用

Posted 2021-03-17 bigbosscyb

学习完数组的声明、赋值、类型判断，我们开始了解一下数组都有什么方法，但是为了知道这些方法有什么用，我还会举例进行操作。

一、数组转化为字符串(不会改变原数组的值)

1、toString()方法：可以使我们将数组转为每项以逗号隔开的字符串；

var hhh = [1, 2, 3];
/*转换方法*/
console.log(hhh.toString()); //1,2,3

2、join()方法：可以自己指定字符串的形式，如果我们传入的是“*”，那么最终的字符串形式就是以*隔开的字符串；

var hhh = [1, 2, 3];
/*转换方法*/
console.log(hhh.join(‘/‘)); //1/2/3

二、像栈一样操作数组 栈里面的数据特点是后进先出 所以最先收到影响的就是数组尾部--因为它们是后来才进来的(栈方法都会改变原数组的值)

1、push()方法：从数组末尾添加一些项 返回值是操作后的数组长度；

var hhh = [1, 2, 3];
//接受任意数量的项，并将项添加至数据末尾，最后返回数组最终长度
var rtnvalue = hhh.push(‘haha‘, ‘heihei‘);
console.log(hhh);//[ 1, 2, 3, ‘haha‘, ‘heihei‘ ]
console.log(rtnvalue);//5

2、pop()方法：从数组尾部移除一些项 返回值是被移除的那个项的值；

var hhh = [1, 2, 3];
//从末尾移除 并返回了被移除项的值
var removerfromend = hhh.pop();
console.log(removerfromend);//3
console.log(hhh);//[ 1, 2]

三、像队列一样操作数组 队列是先进先出 所以最先收到影响的是数组开头的那些值 因为他们是先进来的(队列方法都会改变原数组的值)

1、shift()方法：从数组首部移除一些项；

var hhh = [1, 2, 3];
//从顶部移除
var ite = hhh.shift();
console.log(ite); //返回被移除的那一项 1
console.log(hhh);//[ 2, 3 ]

2、unshift()方法：从数组首部推入一些项；

var hhh = [1, 2, 3];
//从顶部添加
var rtn = hhh.unshift(‘hua‘, ‘long‘);
console.log(rtn); //返回从顶部添加后的数组长度 5
console.log(hhh);//[ ‘hua‘, ‘long‘, 1, 2, 3 ]

四、数组排序(排序方法都会改变原数组的值)

1、sort()方法：将数组按照升序排列，并返回排序后的数组。这个方法会改变原始数组的值；

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
arr.sort(); //默认升序
console.log(arr);//[  0, 12, 2, 2, 3,  4,  5, 6, 7, 8,  8,  9]

2、自定比较函数，作为参数传入sort()方法中。比如我们想让数组不是默认的升序排序，而是变为降序排序；

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
//自定义比较方法 改变sort排序规则
function comp(v1, v2) {
    if (v1 > v2) {
        return -1;
    } else if (v1 < v2) {
        return 1;
    } else {
        return 0;
    }
}
arr.sort(comp);
console.log(arr);//[ 12, 9, 8, 8, 7, 6, 5, 4, 3, 2, 2, 0]

3、reverse()方法：将数组顺序颠倒；

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
arr.reverse(); //顺序反转
console.log(arr);//[ 12, 8, 8, 7, 2, 5, 4, 0, 9, 6, 2, 3]

五、数组操作(数组操作方法中只有splice方法会改变原数组的值)

1、concat()方法：在末尾连接一些数组，原始数组不变，该方法返回另外一个新数组；

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
/*操作方法*/
var newarr = arr.concat(‘我的‘); //向数组后面连接多个数组
console.log(arr);//[ 3,  2, 6, 9, 0, 4,  5, 2, 7, 8, 8, 12]
console.log(newarr);//[ 3, 2,  6,  9, 0, 4, 5,  2,  7, 8,  8, 12, ‘我的‘]

2、slice()方法：使用起始值和结束值，按照从开始下标开始(包含起始位置)到结束值(不包含结束位置)返回另外一个新的数组；

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
var selectorarr = arr.slice(2, 4); //包含开始位置 而不包含结束位置
console.log(selectorarr); //所以只会有两项 2 3 而不包含4 ：[ 6, 9 ]
console.log(arr)//[3,2,6,9,0,4,5,2,7,8,8,12]

var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
var selectorarr1 = arr.slice(2);
console.log(selectorarr1);//[ 6, 9, 0, 4,  5, 2, 7, 8, 8, 12]

3、splice()方法：该方法有三个参数，分别是起始位置、要移除的项、新的要从该位置插入的项；我们可以通过调整这三个参数，来达到不同的效果；

//splice方法 增、删、改
var myarr = [1, 2, 3, 4, 5, 6];
var res = myarr.splice(2, 3, ‘掺入一个‘, ‘又插入一个‘); //从位下标二处删除3项(3 4 5) 又新插入两项
console.log(res);//谁被删除了:[ 3, 4, 5 ]
console.log(myarr);//[ 1, 2, ‘掺入一个‘, ‘又插入一个‘, 6 ]
var myarr2 = [1, 2, 3, 4, 5, 6];
var res2 = myarr2.splice(2, 0, ‘插入一个‘, ‘再插入一个‘); //从位置二处删除0项 又插入两项
console.log(res2); //没有项被删除 返回空数组 
console.log(myarr2); //返回被操作后的数组 [ 1, 2, ‘插入一个‘, ‘再插入一个‘, 3, 4, 5, 6 ]
//第二个参数为n，则插入n个新值可以实现数组替换
var readyarr = [1, 2, 3, 4];
var rmv = readyarr.splice(2, 1, ‘baba‘);
console.log(rmv);//[ 3 ]
console.log(readyarr);//[ 1, 2, ‘baba‘, 4 ]

六、搜索某项在数组中的位置(返回值为number类型，操作都不改变原数组的值)

1、indexof()方法：从左到右搜做。该方法有两个参数，第一个是待搜索的值，第二个是起始位置；默认情况下起始位置是从0(即数组开头)开始搜索；

/*位置方法*/
var operatearr = [1, 3, 2, 7, 8, 2];
var index = operatearr.indexOf(3); //寻找3在哪儿 默认从下标零开始找
console.log(index); //返回下标1
console.log(operatearr.indexOf(3, 0)); //从下标零开始 找3在哪儿 返回1
console.log(operatearr.indexOf(3, 2)); //从下标2开始找 最后没找到返回-1

2、lastindexof()方法：从右到左搜索。该方法也有两个参数，第一个是待搜索的值，第二个是起始位置；默认情况下起始位置是从数组末尾开始搜索；

/*位置方法*/
var operatearr = [1, 3, 2, 7, 8, 2];
console.log(operatearr.lastIndexOf(2)); //从后往前找2在哪个位置 默认从最后一个下标开始找 返回5
console.log(operatearr.lastIndexOf(2, operatearr.length - 1));//返回 5

七、数组的迭代方法（迭代方法都不会改变原数组的值）

1、every()方法：该方法最终返回一个布尔值。该方法会对数组中每项都运行给定函数，该函数每一项都返回true 才会返回true；

var useoperate = [1, 2, 3, 4, 5, 6, 7];
// 使用every方法 对数组中每项都运行给定函数 该函数每一项都返回true 才会返回true
// 比如；判断某个数组都大于2么(使用every迭代 必须是每一项都比二大才会返回true)
var results = useoperate.every(function(itm, idx, arrs) {
    return (itm > 2);
});
console.log(results);//false

2、some()方法：该方法最终返回的也是布尔值。该方法会对数组中的每项都运行给定函数，该函数只要其中一项返回true 整个some函数的返回值就为true；

var useoperate = [1, 2, 3, 4, 5, 6, 7];
//使用some 对数组中的每项都运行给定函数 该函数只要其中一项返回true 整个some函数的返回值就为true
var results2 = useoperate.some(function(itm, idx, arrs) {
    return (itm > 2);
});
console.log(results2);//true

3、filter()方法：该方法返回另外一个新数组。该方法会对数组每项都运行给定函数，最后返回函数返回值为true的项组成的数组；

var useoperate = [1, 2, 3, 4, 5, 6, 7];
///使用fiter方法 数组每项都运行给定函数 最后返回函数返回值为true的项组成的数组
var results3 = useoperate.filter(function(itm) {
    return (itm > 2);
});
console.log(results3);//[ 3, 4, 5, 6, 7 ]
console.log(useoperate);//[ 1, 2, 3, 4, 5, 6, 7]

4、map()方法：map方法会对数组中的每一项都运行给定函数，操作完成后map方法会将改变后的数组返回；

var useoperate = [1, 2, 3, 4, 5, 6, 7];
//使用map方法 将数组中的每项都运行给定函数 最后返回被函数操作后的数组
//比如使用map方法可以使数组每项放大十倍
var results4 = useoperate.map(function(item) {
    return item * 10;
});
console.log(results4);//[ 10, 20, 30, 40, 50, 60, 70]
console.log(useoperate);//[1, 2, 3, 4, 5, 6, 7]

5、foreach()方法：该方法会对数组中的每一项都运行给定函数，它的本质与for()没有区别，该方法没有返回值；

var useoperate = [1, 2, 3, 4, 5, 6, 7];
//使用foreach方法 仅仅是对数组的每一项运行给定函数 本质与for差不读 没有返回值
useoperate.forEach(function(t) {
    console.log(‘当前项：‘ + t);
});
执行结果：
当前项：1
当前项：2
当前项：3
当前项：4
当前项：5
当前项：6
当前项：7