3. 现代 javascript 数组专题 和 对象专题
数组专题
展开运算符
使用...符号, 可以将数组"展开".
数组展开的妙用 ...
eg:
// 代替apply
const foo = [1, 2, 3]
const bar = [4, 5, 6]
foo.push(...bar) // 相当于foo.push(4, 5, 6)
// 假数组转真数组
var nodeList = document.querySelectorAll('div')
var earlArray = [...nodeList]
// 代替concat等复杂操作, 构造数组
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
find和findIndex
建议: 不要再使用for循环或者forEach或者filter去寻找数组中的某个元素!
要点：
findIndex和indexOf的区别
indexOf 只能传入数值
eg: 查找 数组内元素等于 2 的 索引
const arr = [1,2,3,4,5];
const ret = arr.indexOf(2);
findIndex 可以传入 表达式
eg: 查找第一个值大于 2 的元素的索引
const arr = [1,2,3,4,5];
const ret = arr.findIndex(el=>{el>2});
拓展:
map用来将一个数组映射为另一个数组
eg: 将数组内的 所有数值乘以 2
const arr = [1,2,3,4,5];
const arr2 = arr.map(el=>{return el * 2})
reduce用来通过某种运算归并数组元素
eg: 将数组内的 所有元素 相乘
const arr = [1,2,3,4,5];
const ret = arr.reduce((prev, el)=>{return el * prev}, 1)
filter用来过滤满足条件的数组元素
eg: 将数组内的 大于 2 的 元素 筛选出来
const arr = [1,2,3,4,5];
const arr2 = arr.filter(el=>{return el > 2})
some用来判断数组中有没有元素满足某种条件 (至少又一个 满足返回 true 不满足 返回 false)
eg: 判断 数组内 是否有一个元素 大于2
const arr = [1,2,3,4,5];
const ret = arr.some(el=>{return el > 2})
every用来判断数组中的元素是不是都满足某种条件 (全部都要满足 满足返回 true 不满足 返回 false)
eg: 判断 数组内 所有元素都 大于2
const arr = [1,2,3,4,5];
const ret = arr.every(el=>{return el > 2})
forEach用来做遍历(除非你用forEach写出的代码更短, 否则不要用)
find和findIndex用来寻找符合条件的元素
eg: 查找大于5的 元素 的 值 和索引
const arr = [2,4,6,8,10];
const value = arr.find(el=>{ return el > 5 }); // 查找第一个大于五的值
const index = arr.findIndex(el=>{ return el > 5 }); // 查找第一个大于五的索引
includes
includes用来判断数组中是不是包含某个值
要点
includes和indexOf的区别
includes 返回 true or false
indexOf 返回 找到 则返回索引 找不到则返回 -1
eg: 判断是否不包含 2
const arr = [1,2,3,4,5];
const ret1 = !arr.includes(2);
const ret2 = (arr.indexOf(2) === -1);
函数专题
展开运算符 ...
参数展开
// 代替 argument
function fn(...params){ console.log(...params) }
// 代替剩余参数
function fn (a, b, ...otherParams){ console.log( otherParams ) }
参数默认值
function fn(p1 = 'something'){
// ...
}
箭头函数
匿名函数
const fn = function(n){ return n * 2 }
箭头函数 用箭头函数代替了关键字 function 并自动添加关键字return
const fn2 = (n) => n * 2
const fn2 = (n) => { return n * 2 }
要点
箭头函数对于 this 指针的规定
eg:
function fn( n ){ return n * this.m }
const obj = { m:3 }
fn.call( obj, 3 ); //使用 call 指定函数中的 this 指向( 现在 this 为 obj )
eg:
const obj = { m:3, multiple(n){ return this.m * n } }
obj.m = 4
console.log( obj.multiple(2) ) // 可以将变化的东西存储在对象内
匿名函数尽量使用箭头函数性质定义
匿名函数内的 this 直接指向 外部 this 如果定义在 类 里 就指向这个类
没有定义在 类里面 将会 指向 window
bind(学名:柯里化 curry)
bind 是 给函数绑定 this 指针 和 参数的方法
eg:
function fn(){ console.log(this.text) }
fn(); //会报错 因为 this 指向的是 undefined
// es5 内
fn.call({ text : 1 }); // 传入 this 对象 为 { text : 1 } call 传递参数 使用 fn.call(obj,p1,p2,p3)
fn.apply({ text : 1 }); // 传入 this 对象 为 { text : 1 } apply 传递参数 使用 fn.apply(obj, [p1,p2,p3])
// es6
// 绑定 方法的 this 对象 绑定函数内部的对象 (作用域访问不到)
function main(){
const obj = { text:1 }
function fn( n ){ console.log( this.text * n ) }
return fn.bind(obj, 10) // fn 绑定 内部 fn 对象 并 传入 n 的值为 10
}
const f = main();
f(); // 参数也可以从这里传入 但是 bind 的第二个参数不能 传入
扩展
javascript 中的 this 指针
使用 apply / call / bind 进行绑定
apply / call / bind 的 作用分别是什么
都是绑定对象
call 传递参数 使用 fn.call(obj,p1,p2,p3) //call 之后直接调用方法 fn.call(obj,p1,p2,p3)
apply 传递参数 使用 fn.apply(obj, [p1,p2,p3]) //apply 之后直接调用方法 fn.apply(obj, [p1,p2,p3])
bind 传递参数 和 call 一样 fn.bind(obj,p1,p2,p3) // bind 之后 需要手动调用方法 fn.bind(obj,p1,p2,p3)()
