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)()