JavaScript-数组方法

1.如何给数组的开头添加一个元素?

var arr = ['a','b','c']
for(var i=arr.length-1;i>=0;i++){
    arr[i+1] = arr[i]
}
arr[0] = 'd'
console.log(arr)

这样操作起来比较复杂。为了方便我们对数组进行操作,js提供了一些方法,可以快速的操作数组:

  • unshift - 给数组开头添加一个或多个元素 - 返回数组新长度

var arr = ['a','b','c'];
var l = arr.unshift('d')
console.log(arr) // ['d','a','b','c']
console.log(l) // 4
  • push - 给数组的末尾添加一个或多个元素 - 返回数组新长度

var arr = ['a','b','c'];
var l = arr.push('d')
console.log(arr) // ['a','b','c','d']
console.log(l) // 4
  • shift - 删除数组的第一个元素 - 返回被删掉的元素

var arr = ['a','b','c'];
var ele = arr.shift()
console.log(arr) // ['b','c']
console.log(ele) // 'a'
  • pop - 删除数组最后一个元素 - 返回被删掉的元素

  var arr = ['a','b','c'];
  var ele = arr.pop()
  console.log(arr) // ['a','b']
  console.log(ele) // 'c'
  • splice - 对数组做增、删、改的操作

var arr = ['a','b','c']
// 改 - 参数1:开始下标;参数2:删除的个数;参数3:在删除的位置放上的新的元素 - 可以是多个
arr.splice(1,1,'d') // ['a','d','c']
// 增
arr.splice(1,0,'d') // ['a','d','b','c'] - 删除0个,就是不删除,然后放上新元素
// 删 - 第三个参数可以省略
arr.splice(1,0) // ['a','c']
  • concat - 数组的拼接

var arr = ['a','b','c'];
var brr = ['d','e','f'];
// 将arr和brr合成一个更大的数组
var crr = arr.concat(brr) // ['a','b','c','d','e','f']
// 将一个或多个值和数组合并成一个大数组
var crr = arr.concat(1,2,3)// ['a','b','c',1,2,3]
  • sort - 数组的排序

var arr = [9,5,3,7,1,6,4,8,2];
arr.sort() // 默认升序
console.log(arr) // [1,2,3,4,5,6,7,8,9]
arr.sort(function(a,b){ // a代表前面的数,b代表后面的数
    return a-b; // 升序 - 如果前面的数-后面的数>0,则交换位置
    return b-a; // 降序 - 如果后面的数-前面的数>0,则交换位置
})

reverse - 数组的反转

var arr = ['a','b','c'];
arr.reverse()
console.log(arr) // ['c','b','a']
  • join - 将数组中的元素使用指定的连接符连接在一起

var arr = ['a','b','c'];
var str = arr.join('_') // 参数是连接符
console.log(str) // a_b_c

var str = arr.join() // 默认使用逗号连接
console.log(str) // a,b,c

var str = arr.join('')
console.log(str) // abc
  • slice - 截取数组

var arr = ['a','b','c','d','e','f'];
// 将数组中的 'b','c','d'截取出来,组成新的数组
var brr = arr.slice(1,4) // 参数1是开始截取的下标,参数2是截取的结束下标,结果中不包含结束下标对应的元素
console.log(brr) // ['b','c','d']
// 如果省略第2个参数,默认从开始下标截取到数组末尾
var crr = arr.slice(1)
console.log(crr) // ['b','c','d','e','f']
  • indexOf方法

查找某个元素在数组中第一次出现的位置

语法:

arr.indexOf(元素,[开始查找的起始下标]);
# 参数1:将要查找的元素
# 参数2:可选项。从哪个下标开始往后查找
# 返回值:如果找到了,就返回这个元素在数组中的下标,如果没有找到,就返回-1

例:

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 - 查找数字5在数组中第一次出现的下标
console.log(arr.lastIndexOf(5)); // 5 - 查找数字5在数组中最后一次出现的位置
console.log(arr.indexOf(5,3)); // 5 - 从下标2开始查找数字5在数组中第一次出现的位置
console.log(arr.lastIndexOf(5,4)); // 2 - 从下标4开始查找数字5在数组中最后一次出现的下标
console.log(arr.indexOf("5")); // -1 - 数组中全是数字,找不到字符串5,所以返回-1
  • forEach方法

用于遍历数组

语法:

arr.forEach(function(值, 下标, 当前数组){
    // 代码段
});
# 在这个方法中需要传入一个函数参数,这个函数的参数说明如下:
# 参数1:数组遍历出来的每个值
# 参数2:可选项。数组遍历出来的每个值对应的下标
# 参数3:可选项。被遍历的当前数组

例:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

使用说明:

这个方法没有返回值,返回值为undefined,不会改变原来数组的值。

  • map方法

遍历数组,并将每个元素经过函数处理后,形成新的元素,所有新元素组成新数组返回

语法:

map方法

遍历数组,并将每个元素经过函数处理后,形成新的元素,所有新元素组成新数组返回

语法:

例:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

使用说明:

这个方法主要用于以同样的规则处理数组中的每个值,并组成新的数组返回

  • filter方法

将数组中满足指定条件的值,组成新的数组返回

语法:

arr.filter(function(值, 下标, 当前数组){
    return 筛选条件
});

例:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(v, index) {
    return v>5
}); 
console.log(arr2); //[6, 7, 8, 9, 10]

使用说明:

使用方法和功能跟map方法很像,只是运行规则不一样。map方法中的函数,用于返回新的元素,而filter方法中的函数,根据返回true或false来筛选元素

  • reduce方法

用于数组求和

语法:

arr.reduce(function(a, b){
    return a + b
});

其中a第一次的时候,表示第一个元素,第二次开始表示上一次返回的数据,b第一次表示第二个元素,第二个开始表示第三个元素、第四个元素。。。

  • some - 判断数组中是否至少有一个元素是满足指定条件的,返回布尔值

语法:

布尔值 = 数组.some(function(v,i,a){
    return 条件;
})
// 上面的i和a是可选参数

例:判断所有成绩中是否有不及格的成绩

var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v<60;
});
console.log(bool); // true

some内置的原理,遍历数组,判断每个值是否满足条件,有满足的就返回true,并break循环,遍历完以后都没有一个是满足的,返回false

var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console.log(bool); // true
console.log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console.log(bool); // false
console.log(k); // 6
  • every - 判断数组中是否所有元素都满足指定的条件,返回布尔值

语法:

布尔值 = 数组.every(function(){
    return 条件
})
// 上面的i和a是可选参数

例:判断是否所有成绩都及格了

var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v>60;
});
console.log(bool); // false

every内置的原理,遍历数组,判断每个值是否满足条件,有不满足的就返回false,并break循环,遍历完以后都满足,返回true

var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console.log(bool); // false
console.log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console.log(bool); // true
console.log(k); // 6
  • find - 查找数组中第一个满足指定条件的值,找到返回值,找不到返回undefined

语法:

值 = 数组.find(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

例:找出所有成绩中第一个不及格的成绩

var arr = [68,95,78,56,86,63];
var ele = arr.find(function(v,i,a){
    return v<60
})
console.log(ele); // 56

find的原理,遍历数组,判断每个元素是否满足条件,满足就返回这个元素,并break循环,如果遍历完了都没有满足条件的,就返回undefined

var arr = [68,95,78,56,55,86,63];
var k = 0
var ele = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(ele); // 56
console.log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var ele = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(ele); // undefined
console.log(k); // 6
  • findIndex - 查找数组中满足条件的第一个对应的下标,找到返回下标,找不到返回-1

语法:

下标 = 数组.findIndex(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

例:找出所有成绩中第一个不及格的成绩的下标

var arr = [68,95,78,56,86,63];
var index = arr.find(function(v,i,a){
    return v<60
})
console.log(index); // 3

findIndex的原理,遍历数组,判断每个元素是否满足条件,满足就返回这个元素的下标,并break循环,如果遍历完了都没有满足条件的,就返回-1

var arr = [68,95,78,56,55,86,63];
var k = 0
var index = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // 3
console.log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var index = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // -1
console.log(k); // 6
  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值