数组

数组

1.哪些数组操作返回新数组

1.1返回新数组，不影响数组

• map
• flat,flatMap
• filter
• slice
• concat

1.2返回修改后的，影响原数组

• fill
• sort
• reverse
• splice
• push,pop,unshift,shift
• copyWithin

2.map(重构)

/**
 * @msg: 把每个元素都重构一边，需要return新结构
 * @param {Function} function(item,index,arr){return~}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)
 * @return {*} 返回新数组，不会对原来造成影响
*/  
array.map();

nodeNames: this.defaultNodeList.map(item => item.nodeName)

3.flat（多维变一维）

/**
 * @msg: 二维数组变成一维数组
 * @param {Number} n flat()默认只会“拉平”一层,n=1
 * @return 该方法返回一个新数组，对原数据没有影响
*/  
array.flat(n)
[1,2,3,[4,[5,6]]].flat(1)//[1,2,3,4,[5,6]]
[1, [2, [3]]].flat(Infinity)// [1, 2, 3]，多少层都被拉平
[1, 2, , 4, 5].flat()// [1, 2, 4, 5],flat会跳过空位

3.1flatMap(变成一维前先map)

/**
 * @msg: 对数组进行过滤，每个元素都要经过条件的筛选，true则保留。
 *创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
 * @param {Function} function(item,index,arr){return~}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)
  *@return 返回新数组，不改变原数组。
*/  
arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

4.filter（过滤）

/**
 * @msg: 对数组进行过滤，每个元素都要经过条件的筛选，true则保留。
 *创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
 * @param {Function} function(item,index,arr){return~}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)
 * @param this(可以被上面的回调使用)return 该方法返回一个新数组，对原数据没有影响
  *@return 过滤后的新数组
*/  
array.filter
例子：饿了么UI--input--远程搜索
<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>
 querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

5.slice(数组/字符串)

/**
 * @msg: 截取
 * @param start 开始，可谓正，可为负
 * @param end？ 结束 若参数为负，表示倒数第几个，-1是最后一个；若为正数，表示截取到end-1
 *@return 过滤后的新数组
*/  
array.slice(start,end) 
["a","b","c"].slice(0,1) //"a"

6.some（判断数组）

/**
 * @msg: 遍历检查数组是否符合条件,有一项为true，就返回true
 * @param {Function} function(item,index,arr){return item >=15}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)return 该方法返回一个新数组，对原数据没有影响
  *@return {Boolean} true/false
*/  
array.some((item,index)=>{
    return item>16//有一项满足>16，就返回true;
})

7.concat（连接）

/**
 * @msg: 连接数组
 * @param 具体的值或者数组，可以多个参数
 *@return 返回连接的新数组，不会影响原数组，浅拷贝
*/  
[].concat(array2,array3,...,arrayX)//该参数可以是具体的值，也可以是数组对象
["a"].concat(["b"],"c")//["a","b","c"]

8.find （找到符合条件的指定值）

/**
 * @msg: find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
 * @param {Function} function(item,index,arr){return~}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)
 *@return 返回连接的新数组，不会影响原数组，浅拷贝
*/  
array.find(function(currentValue, index, arr), this)
[1,2,3,4].find((item=>item===4))//4

8.1findIndex(找到符合条件的指定值第一个索引)

/**
 * @msg: find() 方法返回通过测试（函数内判断）的数组的第一个元素的索引。
 * @param {Function} function(item,index,arr){return~}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)
 *@return 返回连接的新数组，不会影响原数组，浅拷贝
*/  
array.find(function(currentValue, index, arr), this)
[1,2,3,4].findIndex((item=>item===4))//3

9.every（所有元素都要符合条件）

/**
 * @msg: 遍历检查数组是否符合条件,所有项都符合条件，就返回true。否则为false
 * @param {Function} function(item,index,arr){return item >=15}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)return 该方法返回一个新数组，对原数据没有影响
  *@return {Boolean} true/false
*/  
array.every((item,index)=>{
    return item>16//每一项都满足>16，就返回true
})

10.forEach(遍历)

/**
 * @msg: 遍历检查数组是否符合条件,所有项都符合条件，就返回true。否则为false
 * @param {Function} function(item,index,arr){}/函数名（需要定义好了）
 * @param this(可以被上面的回调使用)return 该方法返回一个新数组，对原数据没有影响
  *@return {Undefined} undefined
*/  
array.forEach((item,index)=>{

})
注意：forEach() 本身是不支持的 continue 与 break 语句的,用return实现continue,用every和some实现break

11.fill(填充)

/**
 * @msg: 指定数组的哪个位置开始填充数据，如果填充的是数组和对象，注意填充的每一项都指向同一个引用
 * @param {any} value 必需
 * @param {Number} start 开始的位置 可选 (默认为0)
 * @param {Number} end 最终的位置，实际上是end-1 可选（默认是数组的长度）
  *@return {Array} 数组 ，改变原来的数组
*/  
array.fill(value,start,end)
[1,2,3].fill(4)//[4,4,4]

12.includes(包含)

/**
 * @msg: 判断数组是否包含哪个值
 * @param {any} value 必需
  *@return {Boolean} true/false 包含返回true
*/ 
arr.includes(searchElement)
[1, 2, NaN].includes(NaN) // true,indexOf判断不了NaN

12.1indexOf(指定值的第一个索引)

/**
 * @msg: indexOf() 方法可返回数组中某个指定的元素的第一个位置（索引）
 * @param {any} searchElement 必需
 * @param {any} start 可选，指定从哪里开始搜索
  *@return {Number} n 不存在返回-1
*/ 
arr.indexOf(searchElement,start)
[1,2,3,4,NaN].indexOf(NaN) -1

12.2lastIndexOf(指定值所在的最后一个索引)

/**
 * @msg: lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
 * @param {any} searchElement 必需
 * @param {any} start 可选，指定从哪里开始搜索,但是是从后面开始找
  *@return {Number} n 不存在返回-1
*/ 
arr.lastIndexof(searchElement,start)
[1,2,3,4,NaN].lastIndexof(NaN) -1

13.isArray(判断是否为数组)

/**
 * @msg:判断是否为数组
 * @param {any} value 必需
  *@return {Boolean} true/false
*/ 
Array.isArray(params)

14.join(创建字符串)

/**
 * @msg:取出数组中所有元素创建一个字符串，注意二维数组，同toString()
 * @param {any} separator  可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  *@return {String} 字符串
*/ 
[1,[2,3],4,5].join()//1,2,3,4,5 

14.1暴力创建

[1,[2],23,3].toString()//1,2,23,3

15.sort(排序)

/**
 * @msg:ES2019 明确规定，Array.prototype.sort()的默认排序算法必须稳定。
 * @param {Function} compareFunction  可选。指定要排序的算法。如果不指定，该方法的默认排序算法是先将元素转换为字符串，再将其转换为UTF-16代码，根据元素的UTF-16代码的顺序排序。
  *@return {Array} 排序后的数组,改变了原数组
*/ 
["80","9","1"].sort()
[1,5,3,60,15].sort()//结果不是[1,3,5,15,60],而是[1, 15, 3, 5, 60]
const a=[1,5,3,6];
 a.sort((a,b)=>{
             return a-b//升序
})

15.1 reverse(颠倒，跟sort一致)

/**
 * @msg:颠倒数组的顺序
 *@return {Array} 排序后的数组,改变了原数组
*/ 
["80","9","1"].reverse()//["1","9","80"]

16.slice截取

/**
 * @msg:截取对应位置的数组元素
 * @param {Number}start 截取的开始位置，如果为负数，-1表示倒数第一个的位置，从-1的位置开始截取
* @param  {Number}end 截取的最后位置 实际是end-1，也可为负数，记得end-1
  *@return {Array}返回截取后的新数组，不会影响原数组
*/ 
[1,2,3,4].slice(0,2)//[1,2]

17.增删改,查

功能	描述
push	array.push(item1, item2, ..., itemX)向数组末尾位置添加一个或者多个元素，并返回新的长度
unshift	array.unshift(item1*, item2, ..., itemX)向数组起始位置添加一个或者多个元素，并返回新的长度
pop	删除数组的最后一个元素并返回删除的元素。
shift	数组的第一个元素从其中删除，并返回第一个元素的值。
splice	添加或删除数组中的元素。如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。改变原来的数组 array.splice(index,howmany,item1,.....,itemX) index是删除/添加的起始位置，howmany表示要删除多少个，itemX都是要添加的

18.copyWithin(任意调整内部位置)

/**
 * @msg:截取对应位置的数组元素
 * @param {Number}target 必须  从哪个位置开始粘贴
* @param  {Number}start 可选 复制的开始，可为负数
  * @param {Number}end 可选 停止复制的索引位置 (默认为 array.length)，可为负数
    *@return {Array}返回新数组，影响原数组
*/ 
array.copyWithin(target, start, end)
[1,2,3,4].copyWithin(1,2,3)//[1,3,3,4]

19.Array.from(转换成数组)

/**
 * @msg:将具有迭代器接口的数据结构(arguments,set,map,string,nodeList,array,typedArray)或者类似数组的对象(本质特征只有一点，即必须有length属性。)转换成数组
 * @param {Object}object 需要转换的数据结构
* @param  {Function}mapFunction(item,index){ return item} 可选 对每个元素进行map操作
  * @param {any}this对象 可选 映射到mapFunction的this对象（不能自定义的）
  *@return {Array}返回新数组
*/ 
Array.from(object, mapFunction, thisValue)
例子1：let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
（ES5）[].slice.call(arrayLike)=== Array.from(arrayLike)
例子2：
将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。
对比：
扩展运算符只对有迭代器接口的数据结构

20.entries()，keys() 和 values() 返回遍历器

Array.entries()//返回键值对的遍迭代器历的迭代器
Array.keys()//返回键的遍历的迭代器
Array.values()//返回对键值的遍历的迭代器
使用for-of遍历迭代器
for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);//key:value
}
// 0 "a"
// 1 "b"
for(let key of ["a","b"].keys()){console.log(key)}//0,1

21 reduce

/**
 * @msg:接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
* @param  {Function}function(total, currentValue[, currentIndex[, arr]){ return 表达式} 
  * @param {any}initialValue 传递给函数的初始值
  *@return {any}返回计算结果
*/ 

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

22 reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。