在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);