JavaScript数组方法 详解+代码

目录

数组的方法

改变原数组：

1、push()和unshift() 添加

2、pop()和shift() 删除

3、reverse() 翻转

4、sort() 排序

5、splice() 替换/删除/插入元素

不改变原数组的：

6、Array.isArrary()

7、toString()

8、valueOf()

9、join(‘符号’) 分割

10、concat 拼接

11、slice() 下标截取

12、indexOf和lastIndexOf 获取下标

13、filter() 过滤/筛选

14、find()和findIndex()

15、includes() 判断是否包含

16、map() 映射数组

17、every()和some() 判断条件

18、reduce() 叠加

---

数组的方法

改变原数组：

1、push()和unshift() 添加

数组名.push():在数组末尾添加元素

数组名.unshift():在数组开头添加元素

改变原数组

 var nums = [1]
 //push()---在数组末尾进行添加
 nums.push(2)
 console.log(nums)//[1 2]
 //unshift()---在数组开头进行添加
 nums.unshift(0)
 console.log(nums)//[0 1 2]

2、pop()和shift() 删除

数组名.pop()—删除数组末尾的值，并返回删除的值

数组名.shift()—删除数组第一个的值，并返回删除的值

改变原数组

 var arrs = [1, 2, 3, 4]
 //pop()---删除数组末尾的值，并返回删除的值
 console.log(arrs.pop())  //4
 //shift()---删除数组第一个的值，并返回删除的值
 console.log(arrs.shift())//1
 console.log(arrs)//[2,3]

3、reverse() 翻转

数组名.reverse(): 翻转数组

改变原数组

 var arrs = ['李白','赵云','玄策','娜可露露','韩信']
 console.log('翻转前')
 console.log(arrs.toString())//-------李白,赵云,玄策,娜可露露,韩信       
 ​
 //reverse() 翻转函数-----
 console.log('翻转后')
 console.log(arrs.reverse().toString())//-------韩信,娜可露露,玄策,赵云,李白

4、sort() 排序

数组名.sort()----排序

改变原数组

var nums = [15,56,44,2,36]
 console.log(nums.sort(function(a,b){//输出从小到大
     return a-b
 }).toString())//2 15 36 44 56
 console.log(nums.sort(function(a,b){//输出从大到小
     return b-a
 }).toString())//56 44 36 15 2

5、splice() 替换/删除/插入元素

参数： splice(index,len,[item])

index:数组开始下标 len: 替换/删除的长度

item:替换的值，删除操作的话 item为空

改变原数组

 var arr = ['1', '2', '3', '4']

作用1：删除元素 — [item]为0

arr.splice(1, 1)
 console.log(arr)//['1', '3', '4']
 ​
 arr.splice(1, 2)
 console.log(arr)//['1','4']
 ​
 arr.splice(1, 0)
 console.log(arr) //['1','2', '3', '4']

作用2：替换元素 — item为替换的值

arr.splice(1, 1, 'x')
 console.log(arr)//['1','x','3','4'] 替换起始下标为1，长度为1的值为x'
 ​
 arr.splice(1, 2, 'y')
 console.log(arr)//['1','y'','4'] 替换起始下标为1，长度为2的两个值为'y'
 ​
 arr.splice(1, 2, 'x', 'y')
 console.log(arr)//['1','x','y','4'] 替换起始下标为1，长度为2的两个值

作用3：插入元素 — len设置为0，item为添加的值

 arr.splice(1, 0, 'x')
 console.log(arr)//['1','x','2','3','4']
 ​
 arr.splice(1, 0, 'x', 'y', 'z')
 console.log(arr)//['1','x', 'y', 'z','2','3','4']

---

不改变原数组的：

6、Array.isArrary()

判断参数是不是数组，返回布尔值----Array.isArrary()

var arrs = [1, 2, 3, 4, 5]
 console.log(Array.isArray(arrs))  //true
 ​
 var arrs1 = {
     name: 'yangbao', gender: 'nv'
 }
 console.log(Array.isArray(arrs1))  //false

7、toString()

把数组转成字符串------数组名.toString–对象类型数组不能直接转换

//toString() 将数组转化为字符串
 var arrs = [7, 1, 4, 5, 0, 13]
 console.log(arrs.toString())//7, 1, 4, 5, 0, 13
 //相当于
 console.log(`${arrs}`)//7, 1, 4, 5, 0, 13

8、valueOf()

返回数组本身-----数组名.valueOf()

//valueOf()  返回数组本身
 var arrs = [1, 4, 8, 1, 7, 32]
 console.log(arrs.valueOf())//Array(6)

9、join(‘符号’) 分割

数组名.join(‘分割符号’)----以所用的符号对数组进行拼接方法

 var arrs = ['李白','赵云','玄策','娜可露露','韩信']
 //join('符号')-------以所给的符号对数组进行拼接
 console.log(arrs.join('☀'))//以☀符号对数组进行拼接-----李白☀赵云☀玄策☀娜可露露☀韩信

10、concat 拼接

数组名.conta(数组名1)把多个数组拼接成一个数组 并且不影响原有的数组 数组名.conta(数组名1,…数组名N)把多个数组拼接成一个数组 并且不影响原有的数组

注意：参数可以是一个也可以是多个

 var a = [1, 2, 3]
 var b = [4, 5, 6]
 var c = [7, 8, 9]
 console.log(a.concat(b))//[1,2,3,4,5,6]
 console.log(a.concat(a, b))//[1,2,3,1,2,3,4,5,6]
 console.log(a)//[1,2,3]
 console.log(b)//[4,5,6]
 console.log(c)//[7,8,9]

11、slice() 下标截取

数组名.slice()：根据下标截取里面参数

说明：slice(开始索引值，结束索引值) 数组截取（下标）包括左边不包括右边

 `正常现象:`
     var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]
     // slice(开始索引值，结束索引值) 数组截取（下标）包括左边不包括右边
     console.log(nums.slice(0, 4))   //1,2,3,4 
 ​
 `开始索引:`
     // 如果开始索引为负数:
     // 1、开始值绝对值小于数组长度时：
     // 开始索引+数组长度作为为开始索引（结束索引所对应的值不包括）
     console.log(nums.slice(-8, 9))  //[2,3,4,5,6,7,8.9]
     console.log(nums.slice(-3, 8))  //[7,8]
 ​
     // 2、开始值绝对值大于或等于数组长度时:
     // 开始索引都当成0看待（结束索引所对应的值不包括）
     console.log(nums.slice(-15, 8)) //[1,2,3,4,5,6,7,8]
     console.log(nums.slice(-9, 8))  //[1,2,3,4,5,6,7,8]
 ​
     // 如果开始索引为正数：
     // 开始索引大于或等于数组的长度, 返回空数组
     console.log(nums.slice(15, 8))  //[]
     console.log(nums.slice(9, 8))   //[]
 `结束索引:`
     // 如果结束索引为负数：
     // 结束索引+数组长度作为结束索引
     console.log(nums.slice(5, -2))  //[6,7]
     // 如果此时还为负数或小于开始索引, 返回空数组
     console.log(nums.slice(5, -12))   //[]
     console.log(nums.slice(5, -7))  //[]
 ​
     // 如果结束索引为正数：
     //小于开始索引，返回空数组
     console.log(nums.slice(7, 3))   //[]
 ​
     // 如果结束索引省略，则截取到数组最后一位
     console.log(nums.slice(2))  //[3, 4, 5, 6, 7, 8, 9]

12、indexOf和lastIndexOf 获取下标

数组名.indexOf():某个元素从左到右第一次出现的下标

数组名.lastIndexOf：某个元素从左到右最后一次出现的下标

说明：根据参数返回对应的下标

var str = "hello world";
 var a = str.indexOf("l");   //返回第一个字符l的下标
 console.log(a) //2
 var n = str.indexOf("l", 5);    //从下标5开始，返回第一个字符l的下标
 console.log(n)  //9
 ​
 var b = str.lastIndexOf("l");   //返回最后一个字符l的下标
 console.log(b) //9
 var z = str.lastIndexOf("l", 5);    //以下标5为终点,返回最后一个字符l的下标 
 console.log(z) //3
 `// 空格也占有一个下标的位置(一个空格一个下标)`

13、filter() 过滤/筛选

数组名.filter():过滤满足条件为true的元素

• 返回一个新数组

• 不会影响原数组

筛选单个值：

 var money = [1500, 1200, 2000, 2100, 1800]
 var arrs = money.filter(function (v) {
     //输出数组里小于2000的元素
     return v <= 2000
 })
 console.log(arrs.toString())//1500,1200,2000,1800

筛选对象：

//筛选出工资大于4000的员工信息
     var people = [
         { name: '赵俊', age: 18, salary: 8000 },
         { name: '张三', age: 18, salary: 4000 },
         { name: '李四', age: 18, salary: 6000 },
         { name: '王麻子', age: 18, salary: 3000 },
         { name: '刘辰', age: 18, salary: 2200 }
     ]
     var arrs = people.filter(function (v) {
         return v.salary >= 4000
     })
     console.log(arrs)//Array(3)
 ​
 //补充：
 //只筛选符合薪资的人名:
 var names = people.filter(function (v) {
      return v.salary >= 4000;
  }).map(function (v) {
      return v.name;
  });
 console.log(names); //['赵俊', '张三', '李四']

14、find()和findIndex()

数组名.find()方法:返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。参数是回调函数。

参数：回调函数（回调函数参数必带element（当前元素）、可选index（当前元素下标）、可选array（当前数组）） 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

find()方法基本使用：

 let arr = [12, 32, 43, 2, 4, 11, 55, 12];
     let val = arr.find(function (ele, index) {
         return ele > 32;
     });
     console.log(val);   //43

数组名.findIndex()方法:返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。参数是回调函数

参数：回调函数（回调函数参数必带element（当前元素）、可选index（当前元素下标）、可选array（当前数组）） 返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1

findIndex()方法基本使用：

let arr = [12, 32, 43, 2, 4, 11, 55, 12];
 let val = arr.findIndex(function (ele, index) {
     return ele > 32;
 });
 console.log(val);  //2

15、includes() 判断是否包含

数组名.includes():判断数组是否包含某个元素，不用回调函数（不用函数作为参数）不包含返回false

 var nums = [15, 56, 44, 2, 36]
  if (nums.includes(15)) {
      console.log('包含')//包含
  } else {
      console.log('不包含')
  }

16、map() 映射数组

数组名.map(function(v,index,arr){ }):返回原来的数组操作之后的数据

 var salary = [1500, 1200, 2000, 2100, 1800]
 //给每个员工涨工资翻倍
 var arrs = salary.map(function (v) {
     return v * 2
 })
 console.log(arrs) //[3000, 2400, 4000, 4200, 3600]
 console.log(salary)//[1500, 1200, 2000, 2100, 1800]

17、every()和some() 判断条件

数组名.every()—全部满足条件 全部都满足则返回true,否则返回false 相当于&&

数组名.some()—只要有一个满足就返回true 全部都不满足则返回false 相当于||

var people = [
         { name: '赵俊', age: 18, year: 1, salary: 8000 },
         { name: '张三', age: 18, year: 2, salary: 4000 },
         { name: '李四', age: 18, year: 3, salary: 6000 },
         { name: '王麻子', age: 20, year: 4, salary: 3000 },
         { name: '刘辰', age: 18, year: 6, salary: 2200 }
     ]
     // every()-- - 全部都  全部都满足则返回true, 否则返回false
     var a = people.every(function (v) {
         return v.salary < 7000
     })
     console.log(a) //false
     //console.log(a)   //空数组返回true
 ​
     //some()---只要有一个满足就返回true  全部都不满足则返回false
     var a = people.some(function (v) {
         return v.age > 18
     })
     console.log(a)  //true
     //console.log(a) 空数组返回false

18、reduce() 叠加

数组名.reduce(function(返回值，元素，下标，当前数组){

},返回值的初始值)

求和：

 var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]
 var sum = nums.reduce(function (a, b) {
     return a + b
 }, 0)
 console.log(sum) //45

二维数组转一维数组：

 var nums = [
     [1, 2, 3],
     [4, 5, 6],
     [7, 8, 9]
 ]
 var arrs = nums.reduce(function (a, b) {
     return a.concat(b)
 }, [])
 console.log(arrs)// [1,2,3,4,5,6,7,8,9]