近期项目中学习到的JS方法

一、array.map()迭代数组

1. 定义

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

注意：

1. map()不会对空数组进行检测
2. map()不会改变原始数组

array.map()与array.forEach()的区别是：map返回一个新的数组，不改变原数组，forEach不返回新的数组，改变原数组。

2. 语法

array.map(function(currentValue, index, arr), thisIndex)

其中：

function(currentValue, index, arr)：必须。为一个回调函数，数组中的每一个元素都会迭代执行这个函数。

1. currentValue：必须。当前索引项的值。
2. index：可选。当前元素的索引。
3. arr：可选。当前元素属于的数组对象。

thisIndex：可选。对象作为该执行回调时使用，传递给函数，用作”this“的值。

返回值：迭代后的新的数组

3. 应用场景

1.两个数组合并成一个对象数组

2.返回由原数组中每个元素的平方组成的新数组

这种处理方式类似于Array.foreach()

二、Array.from()将可遍历对象转换成数组

1. 定义

Array.from()方法就是将一个类(伪)数组对象(具有length属性的对象)或者可遍历对象转换成一个真正的数组。

注意：

1. Array.from()不会改变原对象，会生成一个新数组

2. 语法

Array.from(object, mapFunction, thisValue)

其中：

object：必须，要转换为数组的对象。

mapFunction：可选，数组中每个元素要调用的函数。

thisValue：可选，映射函数(mapFunction)中的this对象。

返回值：转换后的新的数组

3. 应用场景

1.将类数组对象转换为真正的数组。

那么，什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

如下图所示，传入的是类数组对象时，成功转换成数组。

那么，当删除length属性，对象不再是类数组对象时，输出结果如下，可以看到转换结果为空数组。

这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，结果如下：

会发现结果是长度为7，对象属性名不是数字的元素均为undefined，并且属性名序号是从0开始计数的，长度为七，不会转换对象属性名为7的属性值为数组元素。

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1. 该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2. 该类数组对象的属性名必须为数值型或字符串型的数字。
3. 该类数组对象的序号属性名从0开始计数。

ps：该类数组对象的属性名可以加引号，也可以不加引号。

2.将Set结构的数据转换成真正的数组

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组，如下：

3.将字符串转换为数组

三、array.sort()数组元素排序

1. 定义

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

注意：

1. 众所周知默认排序顺序为升序，当不传入参数时，40将排在5前面，这是因为sort()排序是按照字符串的Unicode码来进行排序的，40和5将自动转换为字符串。
2. sort()直接对元素操作，不返回新数组

2. 语法

array.sort(sortfunction)

其中：

sortfunction：可选。规定排序顺序，必须是函数。

返回值：排序后的原数组，不返回新数组。

3. 应用场景

1.字符串排序

2.数字升序

3.数字降序

四、array.concat()连接字符串

1. 定义

concat() 方法用于连接两个或多个字符串。

注意：

1. 该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

2. 语法

string.concat(string1, string2, ..., stringX)

其中:

string1, string2, ..., stringX：必须，将被连接为一个字符串的一个或多个字符串对象。

返回值：连接后的新字符串

3. 应用场景

1.连接多个字符串

五、Object.assign()实现对象属性的合并

1. 定义

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。

1. 如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。
2. 如果该函数只有一个参数，当参数为对象时，直接返回该对象，当参数不是对象时，会先将参数转为对象然后返回。

2. 语法

Object.assign(target, ...sources)

其中：

target：必须，目标对象。

source：可选，源对象。

返回值：target，即目标对象。

3. 应用场景

1.对象属性合并

情况一：只传一个参数，参数是对象，则不变，不是对象则会自动转换为对象。

情况二：传两个参数，且两个对象不存在重名属性。属性合并，且返回的结果就是目标对象。

情况三：传两个参数，有同名属性，后面的会覆盖签名的同名属性。

六、array.join()将数组的所有元素转换成一个字符串

1. 定义

js中的join()方法可以将数组中的所有的元素放入到一个字符串内，并以指定的字符进行分割，并返回。主要分三种情况：

1. 不传入任何值：返回默认逗号分隔的字符串。
2. 传入空字符：返回无分隔符(空)的字符串。
3. 传入指定字符串：返回指定分隔符的字符串。
   返回值：新字符串，不改变原数组。

2. 语法

arr.join('str')
str:可选。分隔符。

3. 应用场景

1.数组转字符串（传入空字符串）

2.数组转指定字符分隔的字符串（传入指定字符）