JavaScript (ES6新语法)

110 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第N天,点击查看活动详情

结构赋值

对象解构赋值

取出对象的属性值 赋值给 变量

image.png

取出变量的值 赋值给 对象

image.png

数组解构赋值

取出数组的属性值 赋值给 变量

image.png

取出变量的值 赋值给 数组

函数参数解构赋值

函数参数是: 对象

image.png

箭头函数

箭头函数:相当于function函数的简写

  • 基本用法 let fn = (a,b) => {} (1)把function改成箭头=> (2)把形参小括号()移到箭头的左边
  • 其他用法 let fn1 = a=>{} 如果箭头函数形参中有一个 则可以省略形参()
    let fn2 = a=>a*2 如果箭头函数的函数体 只有一行 则可以省略大括号 (此时也必须省略return)
  • 箭头函数的this指向 箭头函数this:箭头函数没有this
    本质是通过作用域链 访问上级this
  • 以下几种函数不能是箭头函数 构造函数
    cal1()无法修改箭头函数this
    事件处理函数

剩余与展开

  • 剩余:解构中使用,函数参数使用
  • 展开:数组展开,对象展开 语法: ...对象名

image.png

数据类型

  • 数据类型Set: 集合
  • 类似于 数组 与数组最大的区别是: 集合不能存储重复元素
  • 应用场景: 数组去重

image.png

数组迭代方法

map遍历
作用:根据某种规则映射数组,得到映射之后的新数组
回调函数内部return:
return 新元素
如果没有return,新元素是undefined image.png

filter遍历
作用:根据条件 筛选数组
回调函数内部return:
return true: 满足筛选条件 放入新数组中
return false: 不满足筛选条件 不放入新数组中

image.png

forEach遍历
作用:相当于 for循环另一种写法
回调函数内部return: 无

image.png

some遍历
作用:判断 数组中是否有满足条件的元素 (逻辑或 || 有任意一个满足即可)
回调函数内部return:
return true
循环结束 找到满足条件的元素 some自身返回true
return false
循环继续 没有找到满足条件的 如果所有的元素都是返回false 最终some默认返回false

image.png

every遍历
作用: 判断 数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)
回调函数内部return:
return true
循环继续。满足条件,如果所有元素都满足,最终every默认返回值true
return false
循环结束。不满足条件,此时every返回值false

image.png

findIndex遍历
作用:找元素下标
回调函数内部return:
return true: 循环结束 找到元素 返回当前元素下标
return false: 循环继续 没找到 如果全部都是false 最终返回固定值-1

image.png

reduce遍历
作用:为每一个元素执行一次回调,返回最后一次回调的结果
回调函数内部return: 无 image.png