js之数组内置方法

2019-09-17 admin
  1. Array.concat() 该方法可以合并一个或者多个数组

    let arr = [1,2,3];
    let arr1 = [4,5,6];
    let arr2 = [7,8,9];
    let newArr = arr.concat(arr1);  //[1,2,3,4,5,6]
    let newArr1 = arr.concat(arr1,arr2);  //[1,2,3,4,5,6,7,8,9]
    
  2. Array.copyWithin() 该方法复制数组内的某些值到到另一个索引位置,用法arr.copyWithin(target,start,end)执行后,该数组发生改变,可以传三个参数 target 是目标索引 start 复制源索引的开始,可以忽略,默认为0,复制源包含该索引的值 end 复制源索引的结束,可以忽略,默认为arr.length+1,复制源不包含该索引的值

    let arr = [1,2,3,4,5,6];
    let arr1 = [1,2,3,4,5,6];
    let arr2 = [1,2,3,4,5,6];
    let arr3 = [1,2,3,4,5,6];
    arr.copyWithin(0,2,3); //[3,2,3,4,5,6]
    arr1.copyWithin(0,2,4); //[3,4,3,4,5,6] 这里可以看到如果复制源为多个值,他也会替换掉目标索引后面的值
    arr2.copyWithin(3) //[1,2,3,1,2,3]  这里默认start=0,end=5,也就是整个数组都是复制源,从目标索引为3的位置开始复制,因为后面只有三个位置,所以复制源后面的4,5,6就没有再复制,也就是数组长度不会变
    arr3.copyWithin(3,-2,-4) //[1, 2, 3, 3, 4, 6] 负数的时候从右边开始算
    
  3. Array.every() 遍历数组,遍历的时候检测一旦有值不符合就返回false,他的使用arr.every(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。

    var arr = [2,5,6,7,4,5];
    var arr1 = [15,34,55,654,4343];
    arr.every(function(item,index.array){
      return item>5
    }) //false
    arr1.every(function(item,index.array){
      return item>5
    }) //true
    
  4. Array.fill() 向数组特定位置插入某个值,使用fill(value,start,end);value要插入的值,start插入的开始索引,默认为0,end插入的结束索引,默认为array.length

    [1,2,3,4,5].fill(3) //[3,3,3,3,3]
    [1,2,3,4,5].fill(3,2) //[1,2,3,3,3]
    [1,2,3,4,5].fill(3,2,4) //[1,2,3,3,5]
    [1,2,3,4,5].fill(3,-5,-2) //[3, 3, 3, 4, 5]  start和end允许负值
    
  5. Array.filter() 通过遍历数组来过滤某些值,它的使用arr.fill(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。

    [null,1,2,3,4,null].filter(function(item,index,array){
     return item
    }) //[1,2,3,4]
    
  6. Array.find() 查找数组的第一次出现的值,它的使用arr.find(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。

    var arr= [
    {
    name:"教师1",
    teaid:1
    },
    {
    name:"教师2",
    teaid:2
    },
    {
    name:"教师1",
    teaid:3 
    }
    ]
    arr.find(function(item,index,array){
      return item.name=="教师1"
    })  // {name: "教师1", teaid: 1} 只返回找到的第一个值
    
  7. Array.findIndex() 查找数组的第一次出现的值的索引,没有找到返回-1,它的使用arr.findIndex(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。

     [1,2,3,4].findIndex(function(item,index,array){
        return item == 2
      }) //1
     [1,2,3,4].findIndex(function(item,index,array){
        return item == 25
      }) //-1
    
  8. Array.flat() 通过遍历可以将数组内的数组合并成为一个数组,用法arr.flat(deep) 参数deep为合并的层数,该方法会改变原数组

    [1,2,[3,4,[5,6]],7,8].flat() //[1,2,3,4,[5,6],7,8]
    [1,2,[3,4,[5,6]],7,8].flat(2) //[1,2,3,4,5,6,7,8]
    
  9. Array.forEach() 该方法可以遍历数组内的每一项,用法arr.forEach(callback(item,index,array),thisArg),该方法不会改变数组本身

    var arr= [
    {
       name:"教师1",
       teaid:1
    },
    {
       name:"教师2",
       teaid:2   
    },
    {
       name:"教师1",
       teaid:3 
    }]
    arr.forEach((item,index,array)=>{
         console.log(item.name)
     })// 教师1 教师2 教师1
    
  10. Array.includes() 判断数组中是否含有某个值,如果有返回true,没有返回false,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找。

```
var arr=["hello","world"]
arr.includes("hello") //true
arr.includes("hello",1)//false
```
  1. Array.indexOf() 查找数组中是否含有某个值,如果有返回找到的第一个值的下标,没有返回-1,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找
```
var arr=[1,2,3,4,5]
arr.indexOf(1)//0
arr.indexOf(4)//3
arr.indexOf(2,3)//-1
```
  1. Array.join() 将数组内的值全部拼成一个字符串,用法arr.join(partition),partition是指定某个字符将数组内的元素隔开,默认为","
```
var arr=["hello","world"]
arr.join(); //"hello,world"
arr.join("-"); //"hello-world"
arr.join(" "); //"hello world"
```
  1. Array.lastIndexOf() 和indexOf()相似,该方法会返回数组中最后一个值的下标,没有返回-1,只是checkIndex是从该下标开始逆向查找
```
var arr=[1,2,1,4,5,4,2]
arr.lastIndexOf(1)//2
arr.lastIndexOf(6)//-1
arr.lastIndexOf(2,3)//1
```
  1. Array.map() 遍历数组,并根据处理返回一个新的数组,但是不会改变原来数组,和forEach用法类似,与forEach区别是map()方法要有返回值;
```
var arr=[1,2,3,4];
var newArr=arr.map((item,index,array)=>{
                        return item+2
                   })
arr //[1,2,3,4]
newArr //[3,4,5,6]
```
  1. Array.pop() 删除数组最后一个值并返回数组最后一个值,该方法会改变原来数组
```
var arr=[1,2,3,4,5]
var lastNum=arr.pop();
lastNum//5
arr//[1,2,3,4]
```
  1. Array.push() 从数组尾部添加元素并返回数组改变后的数组长度,该方法会改变原来数组
```
 var arr=[1,2,3,4,5]
 var arrlength=arr.push(6);
 arr.push(6,7,8,9);
 arr //[1,2,3,4,5,6]
 arrlength //6
```
  1. Array.reverse() 将原数组反转,该方法会改变原数组
```
var arr=[1,2,3,4,5]
arr.reverse()
arr// [5,4,3,2,1]
```
  1. Array.shift() 删除数组中的第一个元素,该方法会改变原数组
```
var arr=[1,2,3,4,5]
var shiftNum=arr.shift();
shiftNum//1
arr//[2,3,4,5]
```
  1. Array.unshift() 从数组开始位置添加数据,该方法会改变原数组
```
var arr=[1,2,3,4,5]
var length=arr.unshift();
length//6
arr//[2,3,4,5]
```
  1. Array.slice() 提取数组特定下标范围内的值,用法arr.slice(start,end),start开始提取的下标值,end结束提取的下标值(提取出来的数组包含start下标的元素值,不包含end下标的元素值),该方法不会改变数组
```
var arr=[1,2,3,4,5]
var sliceArr=arr.slice(1,2)
arr// [1,2,3,4,5]
sliceArr//[2]
```
  1. Array.some() 遍历判断数组内是否符合要求的元素,只有有一个就返回true,没有就返回false,它的使用arr.some(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数当前处理的数组元素item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。 //判断是否有大于2的元素
```
[null,1,2,3,4,null].some(function(item,index,array){
   return item>2
})//true 
```
  1. Array.sort() 对数组进行排序,用法arr.sort(callback(compareFir,compareSed)),compareFir、compareSed分别是比较的第一个和第一个元素,该方法会改变原来数组排序;
```
var arr=[1,56,2,54,776];
arr.sort() // arr=[1,2,54,56,776]
 //也可以用于成绩排序之类的
var stuScore=[
{
   stuName:'job',
   score:45,
 },
 {
   stuName:'jack',
   score:4
 },
 {
   stuName:'tom',
   score:90,
 },
 {
   stuName:'alice',
   score:89,
  },
  {
   stuName:'lei',
   score:63,
  }
  ]
  stuScore.sort((firVal,sedVal)=>{
   if(firVal.score>sedVal.score){
      return 1
  }else{
      return -1
  }
  return 0
  })
  console.log(stuScore) //
  [
  {stuName: "jack", score: 4}
  {stuName: "job", score: 45}
  {stuName: "lei", score: 63}
  {stuName: "alice", score: 89}
  {stuName: "tom", score: 90}
  ]
```
  1. Array.splice() 该方法可以删除或者向数组内添加元素,用法arr.splice(start,deleteSum,item1,item2…),start表示开始删除或者添加开始的下标,deleteSum表示要删除元素的个数,要添加元素时,deleteSum应为0或者为负数,item1,item2…这些表示要添加的元素,该方法会修改原来数组。
```
var arr=[1,2,3,4,5];
var spliceArr=arr.splice(2,2) //此时arr为[1,2,5],spliceArr为[3,4]
arr.splice(2,0,5,6) //此时arr为[1,2,5,6,3,4,5]
```
  1. Array.toString() 将数组转换成字符串,
```
var arr = [1,2,3,4,5]
arr.toString() //"1,2,3,4,5" 该方法不会改变原数组,arr依然是[1,2,3,4,5]
```
  1. Array.concat() 该方法可以合并一个或者多个数组
```
let arr = [1,2,3];
let arr1 = [4,5,6];
let arr2 = [7,8,9];
let newArr = arr.concat(arr1);  //[1,2,3,4,5,6]
let newArr1 = arr.concat(arr1,arr2);  //[1,2,3,4,5,6,7,8,9]
```
  1. Array.copyWithin() 该方法复制数组内的某些值到到另一个索引位置,用法arr.copyWithin(target,start,end)执行后,该数组发生改变,可以传三个参数 target 是目标索引 start 复制源索引的开始,可以忽略,默认为0,复制源包含该索引的值 end 复制源索引的结束,可以忽略,默认为arr.length+1,复制源不包含该索引的值
```
let arr = [1,2,3,4,5,6];
let arr1 = [1,2,3,4,5,6];
let arr2 = [1,2,3,4,5,6];
let arr3 = [1,2,3,4,5,6];
arr.copyWithin(0,2,3); //[3,2,3,4,5,6]
arr1.copyWithin(0,2,4); //[3,4,3,4,5,6] 这里可以看到如果复制源为多个值,他也会替换掉目标索引后面的值
arr2.copyWithin(3) //[1,2,3,1,2,3]  这里默认start=0,end=5,也就是整个数组都是复制源,从目标索引为3的位置开始复制,因为后面只有三个位置,所以复制源后面的4,5,6就没有再复制,也就是数组长度不会变
arr3.copyWithin(3,-2,-4) //[1, 2, 3, 3, 4, 6] 负数的时候从右边开始算
```
  1. Array.every() 遍历数组,遍历的时候检测一旦有值不符合就返回false,他的使用arr.every(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
```
var arr = [2,5,6,7,4,5];
var arr1 = [15,34,55,654,4343];
arr.every(function(item,index.array){
  return item>5
}) //false
arr1.every(function(item,index.array){
  return item>5
}) //true
```
  1. Array.fill() 向数组特定位置插入某个值,使用fill(value,start,end);value要插入的值,start插入的开始索引,默认为0,end插入的结束索引,默认为array.length
```
[1,2,3,4,5].fill(3) //[3,3,3,3,3]
[1,2,3,4,5].fill(3,2) //[1,2,3,3,3]
[1,2,3,4,5].fill(3,2,4) //[1,2,3,3,5]
[1,2,3,4,5].fill(3,-5,-2) //[3, 3, 3, 4, 5]  start和end允许负值
```
  1. Array.filter() 通过遍历数组来过滤某些值,它的使用arr.fill(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
```
[null,1,2,3,4,null].filter(function(item,index,array){
 return item
}) //[1,2,3,4]
```
  1. Array.find() 查找数组的第一次出现的值,它的使用arr.find(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
```
var arr= [
{
name:"教师1",
teaid:1
},
{
name:"教师2",
teaid:2
},
{
name:"教师1",
teaid:3 
}
]
arr.find(function(item,index,array){
  return item.name=="教师1"
})  // {name: "教师1", teaid: 1} 只返回找到的第一个值
```
  1. Array.findIndex() 查找数组的第一次出现的值的索引,没有找到返回-1,它的使用arr.findIndex(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
```
 [1,2,3,4].findIndex(function(item,index,array){
    return item == 2
  }) //1
 [1,2,3,4].findIndex(function(item,index,array){
    return item == 25
  }) //-1
```
  1. Array.flat() 通过遍历可以将数组内的数组合并成为一个数组,用法arr.flat(deep) 参数deep为合并的层数,该方法会改变原数组
```
[1,2,[3,4,[5,6]],7,8].flat() //[1,2,3,4,[5,6],7,8]
[1,2,[3,4,[5,6]],7,8].flat(2) //[1,2,3,4,5,6,7,8]
```
  1. Array.forEach() 该方法可以遍历数组内的每一项,用法arr.forEach(callback(item,index,array),thisArg),该方法不会改变数组本身
```
var arr= [
{
   name:"教师1",
   teaid:1
},
{
   name:"教师2",
   teaid:2   
},
{
   name:"教师1",
   teaid:3 
}]
arr.forEach((item,index,array)=>{
     console.log(item.name)
 })// 教师1 教师2 教师1
```
  1. Array.includes() 判断数组中是否含有某个值,如果有返回true,没有返回false,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找。
```
var arr=["hello","world"]
arr.includes("hello") //true
arr.includes("hello",1)//false
```
  1. Array.indexOf() 查找数组中是否含有某个值,如果有返回找到的第一个值的下标,没有返回-1,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找
```
var arr=[1,2,3,4,5]
arr.indexOf(1)//0
arr.indexOf(4)//3
arr.indexOf(2,3)//-1
```
  1. Array.join() 将数组内的值全部拼成一个字符串,用法arr.join(partition),partition是指定某个字符将数组内的元素隔开,默认为","
```
var arr=["hello","world"]
arr.join(); //"hello,world"
arr.join("-"); //"hello-world"
arr.join(" "); //"hello world"
```
  1. Array.lastIndexOf() 和indexOf()相似,该方法会返回数组中最后一个值的下标,没有返回-1,只是checkIndex是从该下标开始逆向查找
```
var arr=[1,2,1,4,5,4,2]
arr.lastIndexOf(1)//2
arr.lastIndexOf(6)//-1
arr.lastIndexOf(2,3)//1
```
  1. Array.map() 遍历数组,并根据处理返回一个新的数组,但是不会改变原来数组,和forEach用法类似,与forEach区别是map()方法要有返回值;
```
var arr=[1,2,3,4];
var newArr=arr.map((item,index,array)=>{
                        return item+2
                   })
arr //[1,2,3,4]
newArr //[3,4,5,6]
```
  1. Array.pop() 删除数组最后一个值并返回数组最后一个值,该方法会改变原来数组
```
var arr=[1,2,3,4,5]
var lastNum=arr.pop();
lastNum//5
arr//[1,2,3,4]
```
  1. Array.push() 从数组尾部添加元素并返回数组改变后的数组长度,该方法会改变原来数组
```
 var arr=[1,2,3,4,5]
 var arrlength=arr.push(6);
 arr.push(6,7,8,9);
 arr //[1,2,3,4,5,6]
 arrlength //6
```
  1. Array.reverse() 将原数组反转,该方法会改变原数组
```
var arr=[1,2,3,4,5]
arr.reverse()
arr// [5,4,3,2,1]
```
  1. Array.shift() 删除数组中的第一个元素,该方法会改变原数组
```
var arr=[1,2,3,4,5]
var shiftNum=arr.shift();
shiftNum//1
arr//[2,3,4,5]
```
  1. Array.unshift() 从数组开始位置添加数据,该方法会改变原数组
```
var arr=[1,2,3,4,5]
var length=arr.unshift();
length//6
arr//[2,3,4,5]
```
  1. Array.slice() 提取数组特定下标范围内的值,用法arr.slice(start,end),start开始提取的下标值,end结束提取的下标值(提取出来的数组包含start下标的元素值,不包含end下标的元素值),该方法不会改变数组
```
var arr=[1,2,3,4,5]
var sliceArr=arr.slice(1,2)
arr// [1,2,3,4,5]
sliceArr//[2]
```
  1. Array.some() 遍历判断数组内是否符合要求的元素,只有有一个就返回true,没有就返回false,它的使用arr.some(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数当前处理的数组元素item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。 //判断是否有大于2的元素
```
[null,1,2,3,4,null].some(function(item,index,array){
   return item>2
})//true 
```
  1. Array.sort() 对数组进行排序,用法arr.sort(callback(compareFir,compareSed)),compareFir、compareSed分别是比较的第一个和第一个元素,该方法会改变原来数组排序;
```
var arr=[1,56,2,54,776];
arr.sort() // arr=[1,2,54,56,776]
 //也可以用于成绩排序之类的
var stuScore=[
{
   stuName:'job',
   score:45,
 },
 {
   stuName:'jack',
   score:4
 },
 {
   stuName:'tom',
   score:90,
 },
 {
   stuName:'alice',
   score:89,
  },
  {
   stuName:'lei',
   score:63,
  }
  ]
  stuScore.sort((firVal,sedVal)=>{
   if(firVal.score>sedVal.score){
      return 1
  }else{
      return -1
  }
  return 0
  })
  console.log(stuScore) //
  [
  {stuName: "jack", score: 4}
  {stuName: "job", score: 45}
  {stuName: "lei", score: 63}
  {stuName: "alice", score: 89}
  {stuName: "tom", score: 90}
  ]
```
  1. Array.splice() 该方法可以删除或者向数组内添加元素,用法arr.splice(start,deleteSum,item1,item2…),start表示开始删除或者添加开始的下标,deleteSum表示要删除元素的个数,要添加元素时,deleteSum应为0或者为负数,item1,item2…这些表示要添加的元素,该方法会修改原来数组。
```
var arr=[1,2,3,4,5];
var spliceArr=arr.splice(2,2) //此时arr为[1,2,5],spliceArr为[3,4]
arr.splice(2,0,5,6) //此时arr为[1,2,5,6,3,4,5]
```
  1. Array.toString() 将数组转换成字符串,
```
var arr = [1,2,3,4,5]
arr.toString() //"1,2,3,4,5" 该方法不会改变原数组,arr依然是[1,2,3,4,5]
```

[转载]原文链接:https://segmentfault.com/a/1190000020399839

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75266.html

文章标题:js之数组内置方法

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部