JS杂学笔记 - 码农教程

1.数组扁平化

let arr=[1,[2,3,[4,5]],6]
let str=JSON.stringify(arr)

　　调用ES6中的flat方法

arr=arr.flat(Infinity)

　　replace + split

ary = str.replace(/(\[|\])/g, '').split(',')

　　replace + JSON.parse

str = str.replace(/(\[|\]))/g, '');
str = '[' + str + ']';
ary = JSON.parse(str);

　　普通递归

let result = [];
let fn = function(ary) {
  for(let i = 0; i < ary.length; i++) {
    let item = ary[i];
    if (Array.isArray(ary[i])){
      fn(item);
    } else {
      result.push(item);
    }
  }
}

　　利用reduce函数迭代

function flatten(ary) {
    return ary.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, []);
}
let ary = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(ary))

　　扩展运算符

while (ary.some(Array.isArray)) {
  ary = [].concat(...ary);
}

2.高阶函数

　　map

　　　　参数：接受两个参数，一个是回调函数，一个是回调函数的this值。回调函数默认被传入三个值，依次为当前元素，当前索引，整个数组。

　　　　原理：创建一个新数组，其结果是该数组的每个元素都调用一个提供的函数后返回的结果。

　　　　影响：对原来的数组没有影响。

let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
  return item + index + array[index] + this.val; 
  //对第一个元素，1 + 0 + 1 + 5 = 7
  //对第二个元素，2 + 1 + 2 + 5 = 10
  //对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

　　reduce

　　　　参数：接受两个参数，一个是回调函数，另一个为初始值，回调函数中三个默认参数，依次为积累值，当前值，整个数组。

let nums = [1, 2, 3];
// 多个数的加和
let newNums = nums.reduce(function(preSum,curVal,array) {
  return preSum + curVal; 
}, 0);
console.log(newNums);//6

　　filter

　　　　参数：一个函数参数，这个函数接受一个默认参数，就是当前元素，这作为参数的函数返回值为一个布尔类型，决定元素是否保留。

　　　　原理：filter方法返回值为一个新的数组，这个数组里面包含参数里面所有被保留的项。

let nums = [1, 2, 3];
// 保留奇数项
let oddNums = nums.filter(item => item % 2);
console.log(oddNums);

　　sort

　　　　参数：一个用于比较的函数，他又两个默认参数，分别是代表比较的两个元素。

let nums = [2, 3, 1];
//两个比较的元素分别为a, b
nums.sort(function(a, b) {
  if(a > b) return 1;
  else if(a < b) return -1;
  else if(a == b) return 0;
})

3.JS中的this

　　全局上下文场景下

　　　　全局上下文默认this指向window，严格模式下指向undefined。

　　直接调用函数场景下

let obj = {
  a: function() {
    console.log(this);
  }
}
let func = obj.a;
func();

　　　　该场景下是直接调用，this相当于全局上下文的情况

　　对象.方法的调用

obj.a();

　　　　该场景下this指向这个对象

　　DOM时间绑定

　　　　onclick和addeventlistener中的this默认指向绑定事件的元素。（IE浏览器下attachevent的this指向window）、

　　new+构造函数

　　　　此时构造函数中的this指向实例对象

　　箭头函数

　　　　箭头函数没有this，因此也不能绑定。里面的this会指向当前最近的非箭头函数的this。找不到就是window（严格模式下为undefined）

优先级: new > call、apply、bind > 对象.方法 > 直接调用　

原文地址：https://www.cnblogs.com/longflag/p/11792747.html