求助一个es6的语法

Question

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

这个写法很懵逼啊 原理呢??

findIndex之中
menu => menu.id === id 这是得到什么?? 是一个下标吗?
对于这个写法的原理很懵啊

里面这个menu => 指的是原始数据对象吗?
menu.id 是每一列的id吗?

Answer 1

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

这个行代码很简单的，看命名应该知道，根据子菜单的id来切换菜单选项。遇到这种嵌套的代码，只要一层一层看就可以了。首先从最里层开始（正常这里应该有上下文，不过从调用的方法来看，能确定this.menu是数组），

this.menu.findIndex(menu=> menu.id === id)

这句如果不知道什么意思，就直接搜下findIndex，能知道这个方法的作用是返回符合条件的元素的下标index，之后就简单了。

this.menu[this.menu.findIndex(menu=> menu.id === id)]
//相当于以下代码
this.menu[index]

清楚明白，获取数组内指定下标的元素

this.menu[this.menu.findIndex(menu=> menu.id === id)].data
//相当于
this.menu[index].data

然后再赋值给子菜单对象this.childMenu，ok了。下面看下完整的模拟

//js file
this.menu = [{id:0, data:"文件"}，{id:1, data:"编辑"}, {id:2, data:"视图"}, {id:3, data:"退出"}];
this.childMenu = "";

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

//html file，这里应该用框架的循环渲染菜单比较合适,点击菜单对应项，传递所选项目的id
<ul>
    <li click="change(0)">文件</li>
    <li click="change(1)">编辑</li>
    <li click="change(2)">视图</li>
    <li click="change(3)">退出</li>
</ul>
// 模拟点击 编辑项
change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
    // id 等于 1
    // this.menu.findIndex(menu=> menu.id === id) 找到id为1的菜单的下表， 也是 1
    // this.menu[1].data 找到菜单数组下表为1的元素,去字段data， 是编辑
    // this.childMenu = "编辑"; 赋值给子菜单
}

到这里其实可以结束了。不过也看出来了，这段代码中的数据设计得有些冗余，可以优化一下

//js file
// this.menu中的菜单字段可能是对象，不仅仅只有一个文字标识,这里我加一个url字段
this.menu = [
    {text:"思否", url:"https://segmentfault.com"},
    {text:"CSDN", url:"https://www.csdn.net"},
    {text:"慕课", url:"https://www.imooc.com"},
    {text:"Stack Overflow" url:"https://stackoverflow.com"}
];
this.childMenu = "";

change(id) {
    this.childMenu = this.menu[this.menu.findIndex(menu=> menu.id === id)].data
}

//html file，这里应该用框架的循环渲染菜单比较合适,点击菜单对应项，传递所选项目的id
<ul>
    <li click="change(0)">思否</li>
    <li click="change(1)">CSDN</li>
    <li click="change(2)">慕课</li>
    <li click="change(3)">Stack Overflow</li>
</ul>
// 模拟点击 思否
change(index) {// 这里直接用index来确定要选择的菜单项
    this.childMenu = this.menu[index];
    // index 等于 0
    // this.childMenu = {text:"思否", url:"https://segmentfault.com"}; 赋值给子菜单
    // 一些后续的逻辑，跳转链接
}

Answer 2

这个写法是ES6新增的 "arrow-function" 语法
规范中的定义见 ECMA-262

可以使用babel将ES6语法转换为ES5的形式，看看它的功能。

学习ES6的新语法可以上
阮一峰老师的ES6入门指南教程
或者
Dr. Axel Rauschmayer关于ES各个阶段的教程级书http://exploringjs.com/

Answer 3

你可以这样理解

      //根据传入id获取点击的数据的下标
      let index = this.menu.findIndex(function(menu){
        //根据 menu 中的id属性来判断这个 menu 是否是上面id中
        //对应的数据，如果是返回true ,否返回false,继续下面的一条数据的遍历，以此类推
        //如果返回true，那么findIndex方法会将这个item对应的 index 返回到外面接受
        return menu.id === id 
      })

        //这里就简单了 给childMenu 赋值menu[index].data 这个容易理解吧
      this.childMenu = this.menu[index].data

文档地址: http://www.runoob.com/jsref/j...

findIndex可以传递3个参数
第一个是 当前元素
第二个是 当前元素的索引
第三个是 当前元素所属的数组对象

Answer 4

这是过滤函数，满足添加的返回true，否则会被过滤掉