js中 a[b] 的在具体案例中的使用

在JS对象中，a.b与a[b]并没有什么区别，都是获得该对象的某个属性，不同之处在于a[b]中的b必须是个字符串；

注：但在数组里，那就不能写成arr.a了，只能是arr[a]。

扩展： A[i] 是数组 的第 i 个 ；A[i].key 是数组 的第 i 个 的 key 属性。

var person= { 
	name: '张三',
}
console.log(person.name) ------>张三
console.log(person['name'])------>张三

下面是在vue中的简单使用，具体为何使用a[b]，你细品。。

data() {
	return {
		a:{},
		b:{},
		c:{},
		arr:[{
			name:'cs1',
			age:'10'
		},{
			name:'cs2',
			age:'18'
		},]
	}
},

created() {
	this.cs('a')
	this.cs('b')
	this.cs('c')
},

methods: {
	cs (key)  {
		var csData = {}
		csData[key] = this.arr
//		csData['a'] = {
//			movie:this.arr
//		}
		this.transferData(csData)
	},
	transferData (data) {
		console.log('csData == ',data)
	}
}

结果如上图,相当于csData.a = this.arr

methods: {
	cs (key)  {
		var csData = {}
		switch (key) {
			case "a" :
				this.$set(csData,'a',this.arr)
				break;
			case "b" :
				this.$set(csData,'b',this.arr)
				break;
			case "c" :
				this.$set(csData,'c',this.arr)
				break;	
		}
		this.transferData(csData)
	},
	transferData (data) {
		console.log('csData == ',data)
	}
}

效果一样，但是方法一明显更简洁,具体的使用可以看下面的需求案例
下面的内容是微信小程序案例，只是为了说明问题，代码只是部分内容

需求：该页面有3个list,分别是正在热映，即将上映，top50电影，需要3个接口分别请求不同的数据
布局：

movies.wxml:页面分为3个list-template

<import src="movie-list/movie-list-template.wxml" />
<view class="container">
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...top250}}"/>
  </view>
</view>

movie-list-template.wxml:页面有movie-template

<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
  <view class="movie-list-container">
    <view class="inner-container">
      <view class="movie-head">
        <text class="slogan">{{categoryTitle}}</text>
        <view catchtap="onMoreTap" class="more" data-category="{{categoryTitle}}">
          <text class="more-text">更多</text>
          <image class="more-img" src="/images/icon/arrow-right.png"></image>
        </view>
      </view>
      <view class="movies-container">
      <block wx:for="{{movies}}" wx:for-item="movie">
        <template is="movieTemplate" data="{{...movie}}"/>
      </block>
        <!--<template is="movieTemplate" />
        <template is="movieTemplate" />-->
      </view>
    </view>
  </view>
</template>

movie-template.wxml：里面有star-template(不是重点就不做介绍了)

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
    <view class="movie-container" catchtap="onMovieTap" data-movieId="{{movieId}}">
        <image class="movie-img" src="{{coverageUrl}}"></image>
        <text class="movie-title">{{title}}</text>
        <template is="starsTemplate" data="{{stars:stars, score: average}}" />
    </view>
</template>

var util = require('../../utils/util.js')
var app = getApp();
Page({
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {},

  },


  onLoad: function (event) {
    var inTheatersUrl = app.globalData.doubanBase +
      "/v2/movie/in_theaters" + "?start=0&count=3";
    var comingSoonUrl = app.globalData.doubanBase +
      "/v2/movie/coming_soon" + "?start=0&count=3";
    var top250Url = app.globalData.doubanBase +
      "/v2/movie/top250" + "?start=0&count=3";

    this.getMovieListData(inTheatersUrl, "inTheaters", "正在热映");
    this.getMovieListData(comingSoonUrl, "comingSoon", "即将上映");
    this.getMovieListData(top250Url, "top250", "豆瓣Top250");
  },

  getMovieListData: function (url, settedKey, categoryTitle) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        that.processDoubanData(res.data, settedKey, categoryTitle)
      },
      fail: function (error) {
        // fail
        console.log(error)
      }
    })
  },
  processDoubanData: function (moviesDouban, settedKey, categoryTitle) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "...";
      }
      var temp = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    var readyData = {};
    readyData[settedKey] = {
      categoryTitle: categoryTitle,
      movies: movies
    }
    this.setData(readyData);
  }
})

主要是下面的代码

 var readyData = {};
    readyData[settedKey] = {
      categoryTitle: categoryTitle,
      movies: movies
    }
    this.setData(readyData);