js数组方法小结

仙人掌一号
158 阅读5分钟

数组的方法

创建数组

  1. Array(7) //[ , , , , , , ]

    创建一个长度为7的空数组

  2. Array.of(7) //[7]

    创建一个具有单个元素7的数组

  3. Array.from(arrayLike[, mapFn[, thisArg]])

    将两类对象转为真正的数组（不改变原数组）

    1. 伪数组对象（有length，有索引）
    2. 可迭代对象（实现了可迭代协议）

    参数列表：

    • arrayLike 是想要转为数组的伪数组对象或者可迭代对象
    • mapFn 每个数组元素都要执行的回调函数
    • 指定mapFn中的this指向
改变原数组的方法

  1. splice（start，deleteCount，item1.....item2）

    通过删除或替换现有元素或者原地添加新的元素来修改数组

    1. start:修改数组的位置（包含该位置），如果start值大于数组长度就从数组的末尾开始修改，如果为负数，负几就是从倒数第几个开始修改
    2. deleteCount删除元素的数目
    3. item1...item2 添加数组的元素

  2. sort（）对数组进行排序

    默认情况下sort（）函数默认按字母的升序排序，如果元素不是字母的话，会调用toString转化为万国码进行排序。

    参数列表：

    一个函数，该函数内接收两个参数a,b

    • 若函数返回值<0，a在b的前边
    • 若函数返回值>0，b在a的前边
    • 若函数返回值=0，a和b的位置不变

  3. pop（）

    删除数组最后一个元素，返回这个元素

  4. push（）

    向数组末尾添加一个或者多个元素，返回新数组的长度

  5. shift（）

    删除数组第一个元素，返回这个元素

  6. unshift（）

    向数组头部添加一个或者多个元素，返回新数组的长度

  7. reverse（）

    将数组倒序

不改变原数组的方法

slice（begin,end）

方法返回原数组从start到end的浅拷贝数组，

官方定义：**slice()** 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。这涉及到了一个浅拷贝的问题。浅拷贝到底是引用赋值，还是只复制第一层

let arr = [1,2,3,{name:'王志强',age:18}]
let newArr = arr.slice(0)
console.log(newArr);//[ 1, 2, 3, { name: '王志强', age: 18 } ]
console.log(arr);//[ 1, 2, 3, { name: '王志强', age: 18 } ]
console.log(newArr==arr);//false

证明浅拷贝是需要拷贝对象的第一层的，而不是引用类型赋值。

join（str）

通过一个指定的操作符，将数组中所有元素连接成为一个字符串，方法返回这个字符串。

如果数组元素仍然是数组的话，会将里边的数组也调用join连接成字符串。

toString（）

将数组转为由逗号隔开的字符串

toLocalString（）

将数组转为以逗号隔开的字符串

toString和toLocalString的区别是在三位以上的数字中toLocalString会每三位数字加一个逗号，而toString不会。在日期的转换中格式也不相同。

indexof()

方法返回数组中指定元素的第一个索引，如果不存在，则返回-1（致命缺点不能识别NaN）

参数：

searchelement 被查找的元素

fromindex：开始查找的位置（不能大于等于数组长度，返回-1），接受负值

采用严格相等===方式进行搜索的

lastindexOf（）

方法返回数组中指定元素的最后一个索引，如果不存在，则返回-1（从后向前找）

参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。

includes（）

查找数组是否包含某个元素，返回布尔值

参数：

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。

遍历方法

foreach

  • 无法中途退出循环，只能用return结束本次回调，进行下一次回调
  • 他总是返回undefined，即使你return了一个值

every（）

检测数组所有元素是否都符合判断条件

   array.every(function(currentValue, index, arr), thisValue)
      // 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

方法返回规则：

  1. 有一个元素不满足，就返回false
  2. 都满足返回true

some（）

检测数组中是否存在满足条件的元素

方法返回规则：

  1. 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
  2. 如果没有满足条件的元素，则返回false。
 function isBigEnough(element, index, array) {
   return (element >= 10); //数组中是否有一个元素大于 10
 }
 let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
 let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
​

filter（）

过滤原始数组，返回满足函数的元素组成的新数组

 let new_array = arr.filter(function(currentValue, index, arr), thisArg)

map（）

对数组中每个元素都进行处理，返回新的数组

  let new_array = arr.map(function(currentValue, index, arr), thisArg)

reduce（）

    array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

为数组提供累加器，合并为一个值，并返回这个值

    // 回调函数的参数
    1. total(必须)，初始值, 或者上一次调用回调返回的值
    2. currentValue(必须),数组当前元素的值
    3. index(可选), 当前元素的索引值
    4. arr(可选),数组对象本身

实例代码如下：

let arr = [12,3,2,7,9,5,10]
let num = arr.reduce((a,b)=>{
  return a+b
})
console.log(num);//48

find()& findIndex() 根据条件找到数组成员

  let new_array = arr.find(function(currentValue, index, arr), thisArg)
  let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)
      // 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身
​

keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"
​

改文章摘选自juejin.cn/post/684490… 和 developer.mozilla.org/zh-CN/ 并结合自己的理解。

avatar
文章
阅读
粉丝