【JS基础】Array对象

最新推荐文章于 2023-05-06 15:24:36 发布

Lana学习中

最新推荐文章于 2023-05-06 15:24:36 发布

阅读量199

点赞数

分类专栏：前端学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sinat_41838682/article/details/125289683

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1 构造函数

Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。
用Array() 构造函数时，不同参数个数会导致不一样的行为
- 单个正整数参数，表示返回的新数组长度
- 非整数的数值，报错
- 单个非数值（如字符串等），返回为新数组的成员
- 多参数时，都返回为新数组成员
！！直接使用数组字面量生成新数组，更好。

   var arr = [1,2];

在这里插入图片描述
其实上图也符合所见的效果的吧。

2.静态方法

Array.isArray() 返回一个布尔值，表示参数是否为数组。密闭typeof运算符的不足。
- typerof 运算符只能显示数组的类型是Object，（或者说，在判断中，不能区分对象和数组）

3.实例方法

3.1 valueOf()，toString()

对象的通用方法。
数组的valueOf方法返回数组本身。
数组的toString方法返回数组的字符串形式。

3.2 push()，pop()

会改变原数组。
push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
pop方法用于删除数组的最后一个元素，并返回该元素。
对空数组使用pop方法，不会报错，而是返回undefined。
push和pop结合使用，就构成了“后进先出”的栈结构（stack）。

3.3 shift()，unshift()

会改变原数组
shift()方法用于删除数组的第一个元素，并返回该元素。
shift()方法可以遍历并清空一个数组。它的前提是数组元素不能是0或任何布尔值等于false的元素，因此这样的遍历不是很可靠。（如果数组元素有0或者false，遍历到这就停止了。返回后面的剩余元素）
push()和shift()结合使用，就构成了“先进先出”的队列结构（queue）
unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。

3.4 join()

join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。
如果数组成员是undefined或null或空位，会被转成空字符串。
结合call方法（不太了解）

3.5 concat()

原数组不变
concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组
对于数组成员中的对象，其实是对它的值的引用，或者也可以说是一种指向？（所以最好不要用这种方法来拷贝对象数组吧。（会受到原数组的影响？

3.6 reverse()

改变原数组
reverse方法用于颠倒排列数组元素，返回改变后的数组。

3.7 slice()

原数组不变
slice(start,end)方法用于提取目标数组的一部分，返回一个新数组
起始位置的元素会包括在新数组中，终止位置的元素不会。（注意要跟数组长度做区别，这里用的是终止位置的值作为参数）
省略终止元素时，返回到数组最后一个。无参数时，实际上等于返回一个原数组的拷贝。
倒数计算，顺序是这样的

var a = ['a', 'b', 'c'];
a.slice(0) // ['a', 'b', 'c']
a.slice(-1) // ["c"]
a.slice(-2, -1) // ["b"]

如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。
slice()方法的一个重要应用，是将类似数组的对象转为真正的数组。
又见神奇的call方法。

3.8 splice()

改变原数组
splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。
arr.splice(start, count, addElement1, addElement2, ...);
起始位置如果是负数，就表示从倒数位置开始删除。（和3.7这部分一样的）
如果只想插入元素，splice方法的第二个参数设为0。
如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组。
- 原数组包括指定位置之前的元素、
- 指定位置之后的数组可以设置变量获取，var b = a.splice(位置)

3.9 sort()

改变原数组
sort方法对数组成员进行排序，默认是按照字典顺序排序。
- 字典顺序：数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。
- 自定义方式排序：sort((a, b) => a - b)
  - 数值>0，a在b后面。（其实也就是，a-b>0,表示a>b，a就在后面了）
  - 不推荐用 a>b（这种布尔值）返回。不同的浏览器可能有不同的实现，不能保证结果都一致。

3.10 map()

不改变原数组
map()方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
map()方法接受一个函数作为参数。该函数调用时，map()方法向它传入三个参数：当前成员、当前位置和数组本身。（普通的map处理）
map()方法还可以接受第二个参数，用来绑定回调函数内部的this变量
map()方法不会跳过undefined和null，但是会跳过空位。

3.11 forEach()

不改变原数组？ ~~（好像只是处理+输出）~~
与map()方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach()方法不返回值，只用来操作数据。==>如果数组遍历的目的是为了得到返回值，那么使用map()方法，否则使用forEach()方法。
forEach()方法无法中断执行，总是会将所有成员遍历完。
forEach()方法也会跳过数组的空位。
感觉比较复杂的一部分，就是数组1执行方法实际是为了给数组二值什么的0 0 用回调函数内部的this来指向forEach()的第二个参数~~（其实也相当于外部的一个数组了）~~

3.12 filter()

不改变原数组
filter()方法用于过滤数组成员，满足条件的成员组成一个新数组返回。
它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。
filter()方法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。（跟3.10、3.11一样）
filter()方法还可以接受第二个参数，用来绑定参数函数内部的this变量。（跟3.10、3.11一样）
== 第一个参数是参数函数（它又可以接受3个参数），第二个参数绑定参数函数内部的this变量 ==有点意思。

3.13 some()，every()

不会改变原数组
这两个方法类似“断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。
它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。
some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。
注意，对于空数组，some方法返回false，every方法返回true，回调函数都不会执行。（这个具体为啥，也不明白0.0）

3.14 reduce()，reduceRight()

reduce()方法和reduceRight()方法依次处理数组的每个成员，最终累计为一个值。
差别：reduce()是从左到右处理（从第一个成员到最后一个成员），reduceRight()则是从右到左（从最后一个成员到第一个成员）
这2个方法的第一个参数是一个函数，该函数接受以下四个参数。
- 累积变量。第一次执行时，默认为数组的第一个成员；以后每次执行时，都是上一轮的返回值。
- 当前变量。第一次执行时，默认为数组的第二个成员；以后每次执行时，都是下一个成员。
- 当前位置。一个整数，表示第二个参数（当前变量）的位置，默认为1。
- 原数组。
  这四个参数之中，只有前两个是必须的，后两个则是可选的。
- 如果要对累积变量指定初值，可以把它放在reduce()方法和reduceRight()方法的第二个参数。
- 建议加上第二个参数，还是要根据处理方式区别的吧。如果处理是求乘积，就不能把第二个参数设为0，如果是求和，就不能把第二个参数设为1。不过如果是字符串，就用 ‘’（空字符串就挺好）（感觉有点麻烦0.0）。但可以防止空数组报错。
- 由于这两个方法会遍历数组，所以实际上可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。
  挺清晰的一段代码，但我自己手写可能写不来哦0.0

3.15 indexOf()，lastIndexOf()

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1
indexOf方法还可以接受第二个参数，表示搜索的开始位置。
lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN
- 这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN是唯一一个不等于自身的值。

3.16 链式使用

var users = [
  {name: 'tom', email: 'tom@example.com'},
  {name: 'peter', email: 'peter@example.com'}
];

users
.map(function (user) {
  return user.email;
})
.filter(function (email) {
  return /^t/.test(email);   //这行看不懂。test怎么来的0 0
})
.forEach(function (email) {
  console.log(email);
});
// "tom@example.com"