4、数组扁平化及去重、数组、字符串和Math的API汇总

4.1 数组方法

MDN——数组

修改器方法、访问方法、迭代方法
1、修改器方法：会改变调用它们的对象自身的值。

2、访问方法：不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

3、迭代方法：遍历数组元素

4.2 字符串方法

MDN——字符串

4.3 Math方法

MDN——Math

4.4 数组扁平化

数组扁平化是指将一个多维数组(含嵌套)变为一维数组

1. toString
如果数组元素都是数字，那么我们可以考虑使用 toString 方法，因为：

[1, [2, [3, 4]]].toString() // "1,2,3,4"

调用 toString 方法，返回了一个逗号分隔的扁平的字符串，这时候我们再 split，然后转成数字不就可以实现扁平化了吗？

function flatten(arr) {
  return arr.toString().split(',').map(function (item) {
    return +item
  })
}

var arr = [1, [2, [3, 4]]];
console.log(flatten(arr))

//arr.toString().split(',')，里面的元素是字符串
const flatten = arr.toString().split(',').map(item => Number(item))

console.log(flatten);

优点：简单，方便，对原数据没有影响
缺点：最好数组元素全是数字或字符，不会跳过空位

2. join

//与toString类似
function flatten(arr) {
  //return arr.join(','),split(',').map(Number)
  return arr.join(',').split(',').map(item => parseInt(item))
}
console.log(flatten);

优点和缺点同 toString

3. flat

const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.flat(Infinity);
console.log(flatten);

优点：会跳过空位，返回新数组，不会修改原数组。
缺点：无

4. 扩展运算符(…)

const arr = [1, 2, 3, [4, 5]];

console.log([].concat(...arr));

优点：简单，方便
缺点：只能扁平化一层

5. 自己实现

//循环数组元素，如果还是一个数组，就递归调用该方法：
function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]))
    }
    else {
      result.push(arr[i])
    }
  }
  return result;
}
var arr = [1, [2, [3, 4]]];
console.log(flatten(arr)) //[ 1, 2, 3, 4 ]

6、reduce

// reduce
function flatten(arr) {
  return arr.reduce(function (prev, next) {
    return prev.concat(Array.isArray(next) ? flatten(next) : next)
  }, [])
}
var arr = [1, [2, [3, 4]]];
console.log(flatten(arr))

实现数组扁平化的多种方法（去重和排序）

4.5 数组去重

1、使用双重for和splice

// 双重for加splice
function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        //第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr; 
}

2、ES6 提供了新的数据结构 Set

function unique(arr) {
  const result=new Set(arr);
  return [...result];
  //使用扩展运算符将Set数据结构转为数组
}

3、利用reduce+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

4、indexOf

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) === -1) {
      array.push(arr[i])
    }
  }
  return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
 // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

面试题数组去重引出的多元宇宙

4.6 数组遍历方法的对比

1、普通for循环，经常用的数组遍历

var arr = [1,2,0,3,9];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

2、优化版for循环
使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显

for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

3、forEach
ES5推出的,数组自带的循环，主要功能是遍历数组，实际性能比for还弱，执行完毕后返回 undefined 值

arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);
})

forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

解决方法：

try {
  let arr = ['first', 'second', 'three']

  arr.forEach((item, index) => {
    if (item == 'second') {
      throw new Error('error')
    }
    console.log(item)
  })
} catch(e) {
  console.log(e) //抛出错误error
}
console.log(10) //会继续输出

4、map遍历
map即是 “映射”的意思 用法与 forEach 相似，map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

arr.map(function(value,index){
    console.log('map遍历:'+index+'--'+value);
});

map遍历支持使用return语句，支持return返回值

var temp=arr.map(function(val,index){
  console.log(val);  
  return val*val           
})
console.log(temp);  

forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持

5、for-of遍历——是ES6新增功能

for( let i of arr){
    console.log(i);
}

for-of这个方法避开了for-in循环的所有缺陷
与forEach()不同的是，
可以正确响应break、continue和return语句
for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。
for-of循环也支持字符串遍历

6、JS对象遍历：for-in遍历

for-in是为遍历对象而设计的，不适用于遍历数组。

遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0",“1”,"2"等是字符串

for (var index in arr){
    console.log(arr[index]);
    console.log(index);
}

补充：[‘1’,‘2’,‘3’].map(parseInt)的返回值是什么

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。

等同于如下代码

['1', '2', '3'].map((item, index) => {
  return parseInt(item, index) // index代表几进制
})
//输出[1, NaN, NaN]

参考文章

前端计划——JavaScript的Math、数组和字符串方法总结
MDN文档