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 > 对象.方法 > 直接调用