Javascript方法整理（持续更新中...）

Array

Array.from()

Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

//将Set结构的数据转换为真正的数组
console.log(Array.from(new Set([1,5,2,8,8,4])))//[1,5,2,8,4]

//将字符串转换为数组
console.log(Array.from('foo'))//["f", "o", "o"]

//接受第二个参数，作用类似于数组的map方法
console.log(Array.from([1, 2, 3], x => x + x))//[2, 4, 6]

Array.prototype.flat()

Array.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。换句话说，就是将嵌套的数组“拉平”（默认只会“拉平”一层），变成一维数组。该方法返回一个新数组，对原数据没有影响

var newArray = arr.flat([depth])
depth指定要提取嵌套数组的结构深度，默认值为 1。

//默认depth为 1
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());//[0, 1, 2, 3, 4]

//depth为 2
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));//[0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组
var arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr3.flat(Infinity));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//flat() 方法会移除数组中的空项
var arr4 = [1, 2, , 4, 5];
console.log(arr4.flat());//[1, 2, 4, 5]

补充：flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 只能展开一层数组。相当于 [[2, 4], [3, 6], [4, 8]].flat()
console.log([2, 3, 4].flatMap((x) => [x, x * 2]));// [2, 4, 3, 6, 4, 8]

将二维数组转化为一维的其他方法

//reduce方法
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
//将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

Array.prototype.sort()

Array.sort()对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

console.log(['March', 'Jan', 'Feb', 'Dec'].sort());//["Dec", "Feb", "Jan", "March"]
console.log([1, 3, 1000,'a', 'Dec','A'].sort());//[1, 1000, 3, "A", "Dec", "a"]

//一个数组按照另一个数组排序
let arr = [{id:5},{id:8},{id:4},{id:1},{id:6}]
let arr2 = [1,2,3,4,5,6,7,8]
let arr3 = arr.sort((a,b)=>{
    return arr2.indexOf(a.id) - arr2.indexOf(b.id)
})
console.log(arr3)// [{id: 1}, {id: 4}, {id: 5}, {id: 6}, {id: 8}]

Array.prototype.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素

//去重
let arr = [1,4,6,3,6,8,9,1];
let newarr = arr.filter((item,index,array) => {
  return array.indexOf(item) === index
})
console.log(newarr);// [1,4,6,3,8,9]

//筛选出不同元素
let arr = [{id:5},{id:8},{id:4},{id:1},{id:6}]
let arr2 = [{id:1},{id:2},{id:3},{id:4},{id:5}]
let arr3 = arr.filter(x=> arr2.every(y=>x.id !== y.id))
console.log(arr3)//[{id: 8},{id: 6}]

去重其他方法

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

//利用set
console.log([...new Set(arr)])//[1,2,3,4]

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

let arr = ['apple','banana','orange','pear','watermelon'];
let every = arr.every((item,index,array) => {
  return item.length>10
})
console.log(every);//false

Array.prototype.some()

some() 方法与every() 方法相反，some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

let arr = [1,2,3,4,5];
let someResult = arr.some((item,index,arr) => item%2==0);
console.log(someResult); //true

Array.prototype.forEach()和Array.prototype.map()

forEach()方法对数组的每个元素执行一次给定的函数。
map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
区别：forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

//forEach
let arr = [1,2,3,4,5];
arr.forEach((item,index,array) => {
    arr[index] = item + 1;
}) 
console.log(arr)//[ 2, 3, 4, 5, 6 ]

//map
let arr = [1,2,3,4,5];
let arr2 = arr.map((item,index,arr) => item*2)
console.log(arr2)//[ 2, 3, 4, 5, 6 ]

Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
第一个参数callback函数： pre为上次return的值，next为数组的本次遍历的项
第二个参数为初始值，也是第一个pre

let arr = [1,2,3,4,5];
let sum = arr.reduce((pre,next) => {
    console.log(pre,next)//0,1 1,2 3,3 6,4 10,5
    return pre + next
},0)
console.log(sum) //15

//若initialValue 为 1
let sum = arr.reduce((pre,next) => {
    console.log(pre,next)//1,1 2,2 4,3 7,4 11,5
    return pre + next
},1)
console.log(sum) //16

//引申 pipe
const pipe = ...args => x => 
  args.reduce(
    (outputValue, currentFunction) => currentFunction(outputValue),
    x
  )

//示例
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

const f1 = x => {
    return x+1;
}

const f2 = x => {
    return 2 * x;
}

// (1+1)*2 = 4
let result = pipe(f1, f2)(1);
console.log(result);

ES6数组:两个数组或数组对象取并集、交集、差集
https://www.jianshu.com/p/20523688cbee

Object

Object .entries()，Object .keys()和Object .values()

都返回一个由一个给定对象的自身可枚举属性的数组。唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
补充： Object.fromEntries() 方法把键值对列表转换为一个对象。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
console.log(Object.keys(obj))// ['foo', 'bar']
console.log(Object. values(obj))//  ['baz', 42]

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
const obj = Object.fromEntries(entries);
console.log(obj);// expected output: Object { foo: "bar", baz: 42 }

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

//将Object转化为Map
var obj = { foo: "bar", baz: 42 };
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

Object.entries("foo");//[["0", "f"],["1", "o"],["2", "o"]]

//在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015(ES6)中，非对象的参数将被强制转换为一个对象
Object.keys("foo");// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");// ["0", "1", "2"]                   (ES2015 code)

console.log(Object.values('foo')); // ['f', 'o', 'o']

其他

for..of..和for...in...

for in ：遍历方法，可遍历对象和数组
for of ：遍历方法，只能遍历数组，不能遍历非iterable包括 Array，Map，Set，String，TypedArray，arguments 对象等等）

const obj = {name: 'amy', age: 18, gender: 'man'}
const arr = [1,2,3,4,5]

for (let key in obj){
    console.log(key)//name age gender
}

for (let index in arr){
    console.log(index)//0 1 2 3 4
}

for (let item of arr){
    console.log(item)//1 2 3 4 5
}