#Js篇:数组的方法es5和es6

数组方法学习

判断一个数组的方法

Array.isArray()

javascript内置的方法,用于检测给定的对象是否为数组类型。

  • 早期版本兼容性es5引入,对于不支持es5的老旧浏览器(如ie8及更早版本),该方法不可用。

es5实例方法

valueof()

表示对对象求值。

​ 数组的valueOf方法返回数组本身

toString()

​ 数组的toString方法返回数组的字符串形式----基本类型的数组

​ 复杂类型--JSON.stringify()

push

push---往数组末尾添加一个或多个元素---返回添加后的数组长度

unshift

unshift--往数组头部添加一个或多个元素--返回添加后的数组长度

pop

pop---删除数组最后一个元素,并返回删除的元素

Shift

Shift--删除头部元素

Join

指定参数作为分割符,将数组成员连接为一个字符串返回。默认用逗号。

join

Array.pototype.join.call([1,2],'-)

数组合并---浅拷贝concat

参数一

js 复制代码
 let arr1 = [1, 2]
 let contact = arr1.concat(5, 6)
 console.log('contact: ', contact);

参数二

js 复制代码
  let arr1 = [1, 2]
  let arr2 = [3, 4]
  let contact = arr1.concat(arr2)
  console.log('contact: ', contact);

reverse()

---颠倒数组

slice()

---提取数组,返回新数组,原数组不变

​ slice(start,end)---包含start,不包含end;

​ 如果省略第二个参数,则一直返回到原数组的最后一个成员

Splice()方法用于删除原数组的一部分,并可以在删除的位置添加新的数组成员,返回是被删除的元素。该方法会改变原数组

js 复制代码
let arr = [1,2,3,4]
arr.splice(start,count,addE1,addE2)

​ splice参数

第一个参数是删除的开始元素位置

第二个参数是被删除的元素的个数,参数为0代表不删除为插入

后面的参数是被插入的新元素---这个参数可以没有

返回值是被删除的元素

js 复制代码
 let arr = [1, 2, 3, 4, 5]
 let splice = arr.splice(1, 1, 33)
 console.log('splice: ', splice, arr);
// splice:  [2] (5) [1, 33, 3, 4, 5]
js 复制代码
    let arr = [1, 2, 3, 4, 5]
    let splice = arr.splice(1, 1)
    console.log('splice: ', splice, arr);
    // splice:  [2] (4) [1, 3, 4, 5]

sort

作用: 对数组成员进行排序

排序后 :原数组将会改变

参数:

  1. 可以不接收参数,默认按照字典顺序排序;
  2. 按照自定义方式排序,传入一个函数作为参数
js 复制代码
 let arrObj = [
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "王五", age: 28 }
    ]
    let sortAge = arrObj.sort((a, b) => {
      return b.age - a.age
    })
    console.log('sortAge: ', sortAge, arrObj);
// 从大到小

map

作用:将每次指行的结果作为一个新数组返回

参数:

  • 第一个参数:一个函数,

    函数传入三个参数

    第一个当前成员

    第二个当前位置

    第三个数组本身

  • 还一个接受第二个参数,用来绑定回调函数内部的this变量

map()方法不会跳过undefinednull,但是会跳过空位。

如果改变本身就有的属性 原数组也会变

返回值:一个新数组

forEach

作用:处理数据不返回数据,操作数据,不是为了得到返回值,而是为了在屏幕上输出内容

参数:

  • 第一个参数:一个函数,

    函数接受三个参数

    当前值、当前位置、整个数组

  • 也可以接受第二个参数用于绑定函数的this变量

返回:不返回

js 复制代码
    var out = [];

    [1, 2, 3].forEach(function (elem) {
      this.push(elem * elem);
    }, out);

    out // [1, 4, 9]

forEach()方法无法中断,总是会讲所有成遍历完。

如果要中断解决办法

使用for循环

js 复制代码
var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}
// 1

filter

作用:用于过滤数组成员,满足条件的成员组成一个新数组返回。

参数:

  • 第一个参数是一个函数

    函数接受三个参数

    当前值

    当前位置

    这个数组

  • 第二个参数可以绑定this

js 复制代码
    let obj = { max: 3 }
    let arr = [1, 2, 3, 4, 5, 6]
    let filter = arr.filter(function (x) {
      return x > this.max
      console.log('this: ', this);
    }, obj)
    console.log('filter: ', filter);
// filter:  (3) [4, 5, 6]

返回:

返回结果为true的成员组成一个新数组返回。

原数组不会改变

Some&every

reduce&reduceRight

reduce

定义: 处理数组的每个成员,最终累计为一个值。

reduce从左到右处理,从第一个成员到最后一个成员

作用: 用于一个数据求和。

参数:

  • 第一个参数,一个函数

    如果有n个成员这个参数函数就会指行n-1次

    函数的参数

    第一个参数--累计变量

    第二个参数 ---当前变量

    第三个参数--当前位置

    第四个参数---原数组

    这四个参数之中,只有前两个是必须的

  • 第二个参数,给定初始值

建议总是加上第二个参数,这样比较符合直觉,每个数组成员都会依次执行reduce()方法的参数函数。另外,第二个参数可以防止空数组报错。

可以用于找出字符长度最长的数组成员

或者数组重最大的值

js 复制代码
   let arr = ['aaa', 'bbbb', 'ccccc']
    // let
    function findMax(entried) {
      return entried.reduce((max, item) => {
        return max.length < item.length ? max : item
      })
    }
    findMax(arr)
    console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  aaa
js 复制代码
   let arr = [1, 2, 3, 4, 5, 6]
    // let
    function findMax(entried) {
      return entried.reduce((max, item) => {
        return max > item ? max : item
      })
    }
    findMax(arr)
    console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  6

indexOf() lastIndexOf

定义:

返回给定元素在数组重第一次出现的位置,如果没有出现则返回-1。

参数:

  • 第一个参数给定元素
  • 第二个参数,表示搜索的开始位置
js 复制代码
    let arr = [1, 2, 3, 4, 5, 6]
    let indexOf = arr.indexOf(2, 2)
    console.log('indexOf: ', indexOf);
    // indexOf:  -1

返回值:

位置下标

注意,这两个方法不能用来搜索NaN的位置,即它们无法确定数组成员是否包含NaN

js 复制代码
[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

in运算--检查某个键名是否存在

for ...in...

仅会遍历数组所有的数字键,还会遍历非数字键。

不推荐使用for...in遍历数组。

js 复制代码
    let arr = [1, 2, 3]
    arr.foo = 123
    for (const key in arr) {
      console.log('key: ', key);
    }
// key:  0
01 function_jiantouhanshu.html:15 key:  1
01 function_jiantouhanshu.html:15 key:  2
01 function_jiantouhanshu.html:15 key:  foo

数组的空位

当某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位。

js 复制代码
let a = [1,,2]

es6数组的扩展

扩展运算符

定义:

三个点...

作用:

  • 复制数组---的便捷方法
  • 合并数组
  • 与解构赋值结合
js 复制代码
    let arr = [1, 2, 3]
    let [a, ...rest] = arr
    console.log('rest: ', rest);
    console.log('a: ', a);
    // rest:  (2) [2, 3]
01 function_jiantouhanshu.html:15 a:  1
  • 字符串

    js 复制代码
     let hellon = 'hellon'
        console.log('hellon: ', [...hellon]);
    // hellon:  (6) ['h', 'e', 'l', 'l', 'o', 'n']
  • 实现iterator接口对象

Array.from

作用:

将用于将两类对象转为真正的数组

第一类---类似数组的对象

第二类---可遍历的对象(包括ES6新增的数据结构Set和Map)

参数:

第一个参数当前对象

第二个参数可以接受一个函数

任何有length属性的对象,都可以通过Array.from()方法转为数组,而此时扩展运算符就无法转换。

类似数组的解释

在Javascript中是指哪些具有数字键和length属性,且可以像数组一项进行索引访问,但并非真正的Array实例对象。

例如

js 复制代码
let arrayLike = {
	0:'apple',
	1: 'banana',
	length:2
}

这样的对象虽然可以模拟数组的行为,但由于不是真正的数组,所以不能直接使用诸如map、forEach、push等的数组方法

Array.prototype.slice.call(arr)

Array.of()

定义:

用于将一组值转为数组----特定元素的数组

js 复制代码
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.from和Array.of区别

Array.of 接受的参数是原始值或对象,直接作为数组的元素

Array.from接受的参数是类数组对象或可迭代对象,并且可以接受一个可选的映射函数对每个元素进行转换。

copyWithin()

定义:

--将指定位置成员复制到其它位置。

参数:

接受三个参数

第一个必须 从该位置开始替换数据。为负,表示从倒数开始;

第二个可选 从该位置开始读取数据,默认为0.为负数,表示从末尾开始计算

第三个参数可选,道该位置前挺尸读取数据,默认为数组长度。

返回:

复制后的数组

find findIndex findLast findLastIndex

find

定义

用于找出第一个符合条件的数据成员

参数

  • 第一个参数回掉函数

​ 函数参数

​ 依次为当前的值、当前的位置和原数组。

  • 第二个参数绑定this

返回:

返回第一个符合该条件的成员值,不符合返回undefined

js 复制代码
function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
findIndex

定义

返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

fill

定义:

使用给定值填充一个数组

参数:

第一个参数给定值

第二个参数 填充起始位置

第三个参数填充结束位置---不包含

js 复制代码
let arr = [1, 2, 3, 4]
let fill = arr.fill(10)
console.log('fill: ', fill);
// [10,10,10,10]

entries,keys,values

entries

定义:

对键值对的遍历

keys

定义:

对键名的遍历

values

定义:

对键值的遍历

includes

定义:

返回一个布尔值。表示某个数组是否包含给定的值,与字符串的inclueds方法类似。

参数:

第一个参数给定值

第二个可选表示搜索的奇石位置

indexOf和includes区别

indexOf方法有两个缺点

第一个它不够语义话;

第二个内部使用严格相等运算符===进行判断,会导致NaN误判

js 复制代码
[NaN].indexOf(NaN)
// -1

includes

js 复制代码
[NaN].includes(NaN)
// true

flat flatMap

flat

定义:

用于将嵌套数组"拉平",变成一维数组。

参数:

  • 参数写成一个整数,表示想要拉平的层数,不传参数默认为1
  • 如果不管有多少嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
js 复制代码
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中,flat()的参数为2,表示要"拉平"两层的嵌套数组。

作用:

该方法返回一个新数组,

对原数据没有影响。

flat方法会跳过空位

js 复制代码
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
flatMap

定义:

对原数组的每个成员执行一个函数,

(相当于=== Array.prototype.map())

然后对返回值组成的数组执行flat()方法

参数:

  • 函数三个参数
  • 第二个参数this

返回:

该方法返回一个新数组,

原数组不变

flatMap只能展开一层数组

at()

解决js不支持数组的负索引,如果要应用数组的最后一个成员,不能写成arr[-1],只能使用arr[arr.length-1]

定义:

取索引对应的值

参数:

接受一个整数作为参数,支持负索引

返回:

返回对应位置的成员值

toReversed toSorted toSpliced with

  • toReversed()对应reverse(),用来颠倒数组成员的位置。

  • toSorted()对应sort(),用来对数组成员排序。

  • toSpliced()对应splice(),用来在指定位置,删除指定数量的成员,并插入新成员。

  • with(index, value)对应splice(index, 1, value),用来将指定位置的成员替换为新的值。

js 复制代码
const sequence = [1, 2, 3];
sequence.toReversed() // [3, 2, 1]
sequence // [1, 2, 3]

const outOfOrder = [3, 1, 2];
outOfOrder.toSorted() // [1, 2, 3]
outOfOrder // [3, 1, 2]

const array = [1, 2, 3, 4];
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]

const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2) // [1, 2, 3]
correctionNeeded // [1, 1, 3]

这些方法不会改变原数组

相关推荐
小菜全4 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风4 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy4 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
车口5 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码5 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Jedi Hongbin8 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
掘金安东尼9 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术9 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun9 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
薛定谔的算法9 小时前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法