学习笔记: JS数组

JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。
JS引擎一般会优化数组，按索引访问数组常常比访问一般对象属性明显迅速。
数组长度范围 from 0 to 4,294,967,295(2^23 - 1)

JavaScript 中的数据通常由一个数组来表示, 所以当可视化或分析数据时往往也会操作数组. 常见的数组操作包括切片, 过滤, 遍历等等. JavaScript 本身支持的数组操作可以参考 这里.

主要分为三大类：
JavaScript 中 修改数组自身 的方法:

• array.pop - 移除最后一个元素.
• array.push - 追加一个或多个元素.
• array.reverse - 数组翻转.
• array.shift - 移除第一个元素.
• array.sort - 排序.
• array.splice - 添加或者移除.
• array.unshift - 在数组前添加一个或多个元素.

JavaScript 中数组的 存取 方法 :

• array.concat - 将数组与数组或值合并.

再看看解构方法

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const result = [...arr1, ...arr2];

• array.join - 只用指定的字符串将数组转为一个字符串.
• array.slice - 提取切片.
• array.indexOf - 找出指定元素的索引.(搜索)
• array.lastIndexOf - 找出指定元素的最后一个索引.

JavaScript 中数组的 迭代方法 :

• array.filter - 过滤.
• array.forEach - 对每个元素执行某个方法.
• array.every - 是否每个元素都符合给定的条件.
• array.map - 根据指定的操作对每个元素执行后返回一个新的数组.
• array.some - 是否存在符合某个条件的元素.
• array.reduce - 从左到右执行 reduce 操作并返回一个值.
• array.reduceRight - 从右到左执行 reduce 操作并返回一个值.

基础

数组在数学中也可以称为“数列”，也就是以数字或其他类型内容为元素的有序集合。

// 整型数字数组
const intArray = [ 1, 2, 3, 4, 5 ]
// 浮点型数字数组
const floatArray = [ 1.1, 1.2, 1.3, 1.4, 1.5 ]
// 字符串数组
const strArray = [ 'a', 'b', 'c', 'd', 'e' ]...

在数据科学领域中，数组可以说是承载了绝大部分数据的表达任务，无论是规整的数据表，还是随时间排序的时间序列，或是复杂多变的非结构化数据，都可以使用数组或类数组的形式表达。

数组创建

数组读写

数组 VS. 一般对象

相同点

• 数组是对象，对象不一定是数组
• 都可以继承
• 都可以当做对象添加删除属性

不同点

• 数组自动更新length
• 数组操作通常被优化
• 数组对象继承Array.prototype上的大量数组操作方法

稀疏数组

稀疏数组并不含有从0开始的连续索引。一般length属性值比实际元素个数大。

for in 可以枚举可枚举属性名，对象，数组都是可以使用的，可以把数组理解为一种特殊的对象，常用for in枚举稀疏数组

数组的length属性

我们前面讲到数组是一个有序集合，那么就意味着它包含了若干个元素。当然了，数组可空。因为它是一个包含了若干元素的集合，所以它就肯定天然地包含了一个属性，那便是元素的数量。

const array = [ 1, 2, 3, 4, 5 ]
console.log(array.length) //=> 5

增删改查

因为在计算机中的可用内存是有限的，所以大部分程序在创建数据（比如数组）的时候，都需要先设定好该数据的所占长度。但在 JavaScript 中这并不需要，因为实际在 JavaScript 中数组就是一个特殊的对象。

所以在 JavaScript 中，对数组内容的修改会比较方便。“增查改删”是数据库应用领域中最常见的操作，这在数组中也是一样的。

添加到末端append

• array.push

添加首端prepend

添加到中间insert

array.splice(start, deleteCount, element)

• 第二个参数deleteCount用来删除数组中某个位置开始的若干个元素
• 如果设置为0，该方法第三参数以及后面的参数会被插入到start位置(array[start]开始)

删除数组中某特定元素

    let keys = ['纯新客', '品类转化新客', '老客']
    keys.splice(keys.indexOf('纯新客'), 1)

vue源码中就用的此方法

/**
 * Remove an item from an array
 */
function remove (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

查找内容

数组是个有序集合,我们在对数组中的元素进行查找的时候也是一个有序进行的过程，而最常用的查找方法便是filter过滤器.

过滤器的逻辑是：定义一个过滤函数，该函数会有序地被传入数组中当前下标的元素，而它则需返回该函数是否符合其过滤要求，即结果为true或false
在数组中找出偶数项：

判断字符串是否是数组中元素

常用于权限验证

字符串转数组

数组转字符串

判断是否是数组

Array.isArray([]);//true
[] instanceof Array; //true
({}).toString.apply([])==='[object Array]';//true
[].constructor ===Array;//true

js实现对象-数组-字符串之间的相互转化
对象-数组-字符串：　　

　　例如：
　　var data = {
           user:”userName”,
     　　pass:”12121”
　　};//这是一个对象
　　
　　如果要给这个data 对象追加一个属性就比如：
 
　　new Date( ).getTime( );//获取当前时间到那个时间的时间间隔单位是毫秒；
 
　　data.time = new Date( ).getTime( );
 
　　此时data 里面就多了一个属性： time : “ 获取到的那个毫秒数"      
　　即：　var data = {
　　　　　　user:”userName”,
　　　　　　pass:”12121”
　　　　　　time:"获取的时间数值"
　　　　　};
　
　1:　对象转化为数组：
 
　　var arr = [ ];
 　　for ( var i in data ){
         　　 var str = i + “=“ + data[ i ]// i 就代表 data 里面的 user pass 等等 而data[ i ] 就代表 userName    12121 就是 i 所对应的值；
          　　arr.push( str );
　　}
　　这样就会得到 arr  =  [ user = userName, pass = 12121 ];
　　
　2:数组转化为字符串:
　　
　　两种方法：
　　　　1：arr.join( “&”)//意思是用&f符代替“ ， ”然后把数组变成字符串连接；          这时候 arr 里面的内容就是 user = tangcaiye&pass = 12121
　　　　2： 比如：
　　　　　　var arr = [1,2];
　　　　　　var str = JSON.stringify(arr);//这样也能转化为字符串但现在还是数组的形式不过类型已经是字符串了；
　　　　　　var arr2 = JSON.parse(str);//这样就是把字符串解析 其实就是把外面的中括号去掉；
 
　　　　前后台交互的：
　　　　后台接收的时候只能接收字符串类型的；
　　　　如果前台要传递一个数组就必须先把数组进行stringify( )的操作再进行传递；
　　　　而后台返回给前台的也是字符串简称json串；这时需要解析一下就需要 JSON.parse( );操作完了再用；
 
　3：字符串转化为数组：
　　
　　例如：
　　有个这样的 ： url = “login.php?user=“+user.value+”&pass=“+pass.value;
 
　　那我想要得到login.php就是这样写：var urlArr = url.split(“?”);
 
　　上面那个意思就是以？为分割点把这个字符串劈开变成一个数组的两部分；
 
　　那么 aa = urlArr[0];此时 aa 就等于 login.php;
　　bb = urlArr[1];此时bb 就等于 后面那一坨

　　　　

怎么实现range函数

js怎么实现类似python的range函数

Array.apply(null, {length: N}).map(Number.call, Number)为range的hack；

对象转数组

Array.from()ES6为Array增加了from函数用来将其他对象转换成数组。

当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

比如：

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

这里用到的 rest参数

在数组中搜索

数组转对象

注意这里加了键值 0

用concat()和apply()将一个两维数组扁平化

使用Array对象的　concat()　方法，将多维数组合并为一个单维数组：

删除或替换数组元素

使用Array的indexOf()和splice()方法，找到并删除/替换数组元素　

提取一个数组的一部分

使用Array对象的slice()方法，来提取已有数组的一部分的一个浅拷贝(shallow copy)

注意slice()方法复制一个已有的数组的一部分，返回一个新数组。
它执行的是浅拷贝，这意味着：

• 如果数组元素是对象，两个数组都指向相同的对象，对新数组中的对象修改，会在旧的数组的相同对象中反应出来。

• 如果数组元素是基本数据类型，例如，字符串或数字，它们将按照值(by value）来复制（值是按照引用来复制的）,也就是说，对新数组的修改，不会在旧数组中反映出来（如最上面的例子）

对每个数组元素应用一个函数

注意：　不要从传递给forEach的函数返回一个值，因为该值会被丢弃
但是用map就需要
因为：map()的结果是一个新的数组，而不是像forEach()一样修改最初的数组

使用forEach() and call() 遍历querySelectAll()的结果

可以将forEach()强制地和一个NodeList(querySelectorAll()返回的集合)一起使用

//使用querySelector找到第二列中的所有单元格
var cells = document.querySelectorAll("td+td");
[].forEach.call(cells, function(cell) {
  sum += parseFloat(cell.firstChild.data);
});

数组去重

sort()方法排序后比较

var arr = [1, 2, 3, 1, 2, 3, 4, 5, 5];
var resultArr = [];
//使用数组的sort()方法对arr进行排序,也可以使用冒泡排序
arr.sort(function (a, b) {
    return a - b;
});
//排序后,arr变成了[1, 1, 2, 2, 3, 3, 4, 5, 5]

//使用for循环,从上面的数组可以看出,如果数组元素arr[i]和arr[i+1]不相等,则表示arr[i]之后不再有与arr[i]相等的重复元素
for (i = 0; i < arr.length; i++) {
    if (arr[i] != arr[i + 1]) {
        //将arr[i]赋值给resultArr数组.
        resultArr[resultArr.length] = arr[i];
    }
}
console.log(resultArr); //1,2,3,4,5

set方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
    
    // [2, "12", 12, 1, 6, 13]

在这我们可以看见，重复的项目已经被去掉了，包括NaN。正常情况下，NaN === NaN 返回的是false，但是在set里，一样能够帮你去重

但是这里大家可以看到，set返回的是一个对象，但是我们想要的是数组啊。

这回，就该轮到Array.from出场了，它的作用，就是可以把类数组对象、可迭代对象转化为数组。

filter方法

缓存方法

快速的让一个数组乱序

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);

首先： 当return 的值

    小于 0 ，那么 a 会被排列到 b 之前；
    等于 0 ， a 和 b 的相对位置不变；
    大于 0 ， b 会被排列到 a 之前；

这里你会 发现起始 的时候数组是正序排列，每当进行一次排列的时候， 都会先随机一个随机数 
（注意这里的每一次排列 指 每一个红框指一次排列， 共9次排列 ， 一次排列中可能存在多次比较）；

当一次排列的 随机数大于0.5 时 将会进行第二次比较， 当第二次随机数 仍然大于0.5 时 ，
    将会再 进行一次比较， 直到 随机数大于0.5 或者排列到第一位；

当一次排列的 随机数 小于0.5时 当前比较的两项 索引将不会改变 ，继续下一次 的排列；

数组求最大值

复制数组

数组合并

注意和下面的区别

迭代输出

数组内元素求和

更多查看Array.prototype.reduce()
这是reduce实现过程:

Array.prototype.reduce=function(callback){
    var total=0;
    this.forEach(function(e){ total=callback(total,parseInt(e));});
   return total;

 };

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

let arr = [2, 5, 8, 1, 4, 17, 89]

// filter 实现
let result = arr.filter(item => {
    return item > 9
}).length > 0


// find 实现
let result = arr.find(item => {
    return item > 9
})  !== undefined


// some 实现
let result =  arr.some(item => {
    return item > 9
})

---

d3-array

下面是d3-array中涉及的一些数组操作

统计类方法 Statistics

• d3.min(array[, accessor]) <源码>

对指定的 array 进行自然排序返回最小值. 如果数组为空则返回 undefined. 可选的参数 accessor 可以用来自定义如何访问数组中的元素. accessor 将会被传递给 map 以在数组的每个元素上进行调用, 返回值将会被作为对比依据.

与内置的 Math.min 不同, 这个方法可以忽略 undefined, null 和 NaN 等特殊值. 在可视化中用来忽略缺失数据是很有用的. 需要注意的是, 对比是以自然排序进行的, 而非数值对比. 比如对字符串 ['20', '3'] 进行 min 操作返回 20, 而对数值 [20, 3] 进行 min 操作则返回 3.

笛卡尔乘积

d3.cross

方差

d3.variance(array[, accessor])：　准确的说它返回的是总体方差无偏估计量

将数组中相邻的两个元素两两结合

数组元素最大值

数组元素占最大值比例（数据归一化）

lodash

常见数组操作问题

let a = [ { name:"1", status:"1" }, { name:"2", status:"1" }, { name:"3", status:"2" }, { name:"4", status:"2" }, { name:"5", status:"3" }, { name:"6", status:"bbb" } ]
     
{ '1':[{ name:"1", status:"1" }, { name:"2", status:"1" }], '2':[{ name:"3", status:"2" }, { name:"4", status:"2" } ], '3':[ { name:"5", status:"3" }],'bbb':[{ name:"6", status:"bbb" }] }

用ES6如何把上面的变成下面这种结构.
不用一个一个 push，对每一个 status 直接 filter 一下就行了

let result = a.reduce((acc, {status}) => (
  acc[status] ? acc: {
    ...acc,
    [status]: a.filter(item => item.status === status)
  }
), {})

ramda

常见数组utils

export function delFromArr (val, arr) {
  if (arr && arr.indexOf(val) !== -1) {
    arr.splice(arr.indexOf(val), 1)
  }
}

export function clearArr (...arrs) {
  arrs && arrs.forEach(arr => arr.splice(0, arr.length))
}

/**
 * key: 'val'
 * arr: [{val: 1}, {val: 2}]
 * return [1, 2]
 */
export function getKeyMap (key, arr) {
  return arr.map(i => {
    return i[key]
  })
}

/**
 * key: 'val'
 * arr: [{val: 1}, {val: 2}]
 * return 2
 */
export function getMax (key, arr) {
  let result = arr.reduce((pre, next) => {
    return parseInt(pre[key]) > parseInt(next[key]) ? pre : next
  })

  return result[key]
}

export function arrDelObj (arr, key, val) {
  if (!(arr && key && val)) {
    console.error('arrDelObj error: arr, key or val is undefined')
  }
  return arr.filter(item => {
    return item[key] !== val
  })
}

特异性数据处理

每个菜鸟前端都会遇到一个菜鸟后端督促你学习数据处理，下面罗列一些遇到过的数据处理.

归一化下面数据，变成想要的格式

接口数据：

前端想要的数据:

实现：

降维、去重、排序

给出：let arr = [[1, 2, 3], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10, 0];
需求：降维、去重、排序
做法：Array.from(new Set(arr.flat(Infinity).sort((a, b) => a - b)))


解析如下：
0. arr.flat(Infinity)  //直接降维值一维数组。
1. sort     //排序就不说了。
2. new Set()  //达到去重效果
3. Array.from(上一步输出的结果)  //将上一步结果转换为数组

给对象包裹一个[]

参考

JS数组学习笔记
Array MDN
《数据结构与算法javascript描述》
JavaScript30-Challenge/04 - Array Cardio Day 1/
ES6，Array.from()函数的用法
《javascript经典实例》
Array.prototype.slice()
Array.prototype.forEach()
Array.prototype.map()
ES6的新方法实现数组去重
d3-array
lodash
d3-array 解释
https://segmentfault.com/q/10...
d3array 测试