js中中括号，⼤括号使⽤详解js中中括号,⼤括号使⽤详解
(2012-07-20 13:50:21)
标签：分类：
⼀、{ } ⼤括号，表⽰定义⼀个对象，⼤部分情况下要有成对的属性和值，或是函数。
如：var LangShen = {"Name":"Langshen","AGE":"28"};
上⾯声明了⼀个名为“LangShen”的对象，多个属性或函数⽤,（逗号）隔开，因为是对象的属性，
rotate属性
所以访问时，应该⽤.（点）来层层访问：LangShen.Name、LangShen.AGE，当然我们也可以⽤
数组的⽅式来访问，如：LangShen["Name"]、LangShen["AGE"]，结果是⼀样的。
该写法，在JSON数据结构中经常⽤，除此之外，我们平时写函数组的时候，也经常⽤到，如：
var LangShen = {
Name = function(){
return "LangShen";
},
Age = function(){
return "28";
}
}
调⽤⽅式差不多，因为是函数组，所以要加上()，如：alert( LangShen.Name() );
⼆、[ ]中括号，表⽰⼀个数组，也可以理解为⼀个数组对象。
如：var LangShen = [ "Name","LangShen","AGE","28" ];
很明显，每个值或函数，都是独⽴的，多个值之间只⽤,（逗号）隔开，因为是数组对象，所以它
等于：
var LangShen = Array( "Name","LangShen","AGE","28" );
访问时，也是和数组⼀样，alert( LangShen[0] );
三、{ } 和[ ] ⼀起使⽤，我们前⾯说到，{ } 是⼀个对象，[ ] 是⼀个数组，我们可以组成⼀个对象数
组，如：
var LangShen = { "Name":"Langshen",
"MyWife":[ "LuLu","26" ],
"MySon":[{"Name":"Son1"},{"Name":"Son2"},{"Name":"Son3"}]
}
从上⾯的结构来看，是⼀个对象⾥⾯的第⼀项是个属性，第⼆项是⼀个数组，第三个是包含有多个
对象的数组。调⽤起来，也是⼀层⼀层访问，对象的属性⽤.（点）叠加，数组⽤ [下标] 来访问。
如：alert( LangShen.MySon[1].Name ) ;
============下⾯是另外⼀篇介绍
==================================================
⼀、⼤括号｛｝表⽰对象：
javascript供了另外⼀种简单的⽅式来创建对象，即⼤括号（{}）语法：
arr = {
a:5, //对象属性，a是变量名
b:8,
c:function(){return this.a + this.b;}, //对象⽅法
d:['a':1,'b':2] //对象属性，数组
}
通过⼤括号括住多个属性或⽅法及其定义（这些属性或⽅法⽤逗号隔开），来实现对象的定义，这
段代码就直接定义个了具有n个属性或⽅法的对象，其中属性名和其定义之间⽤冒号（:）隔开。document.write(arr.c());
注意，各属性间⽤逗号（,）隔开。使⽤这种⽅式来定义对象，还可以使⽤字符串作为属性（⽅
法）名，例如：
var obj={“001”:”abc”}
var obj={“001”:”abc”}
因为这种简单对象没有通过构造函数创造所以也就没能在对象外添加⽅法。
对⽐构造函数创造的对象：
function Test(a,b){
this.a = a;
this.b = b;
this.c = function(){return this.a + this.b;}
}
Test.prototype.d = function another(){
return this.a * this.b * Math.PI;
};
arr = new Test(5,8);
document.write(arr.c());
输出：13
document.write(arr.d());
输出：125.66370614359172
⼆、中括号 [ ] 表⽰数组：
arr = [
[1,2], //数组
['a','b'],
[{c:'a1',d:'b1'},{e:'a2',f:'b2'}] //对象
];
for(key in arr){
for(chikey in arr[key]){
document.write(chikey + "=>" + arr[key][chikey] + "<br />");
}
}
输出：
0=>1
1=>2
0=>a
1=>b
0=>[object Object]
1=>[object Object]
document.write(arr[2][1].e);
输出：a2
这⾥，数组的第三组是未命名的对象，可以⽤arr[2][1].e的⽅式指定访问属性。当然也可以遍历：for(key in arr[2]){
for(val in arr[2][key]){
document.write(val + "=>" + arr[2][key][val] + "<br />");
}
}
输出：
c=>a1
d=>b1
e=>a2
f=>b2
三、数组与对象
在js中，上述的对象与数组的创建很相似，有⼈称第⼀种⽅式为js的关联数组，姑且吧；但在中括号中就不能使⽤['a':'b']的形式，只能以索引数组的形式，即下标只能是数字，如[1,2]或['a','b']，这点须注意。
//双⾊球的⽅法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body
{
background-color: white;        }
.case
{
margin: 100px auto;
width: 500px;
height: 500px;
background-color:black;        }
.clock
{
width: 500px;
}
.hour{
position: relative;
top: -554px;
left: 235px;
}
.minute
{
position: relative;
position: relative;
top: -552px;
left: 201px;
}
.second
{
position: relative;
top: -554px;
left: 166px;
}
.case1{
width: 1200px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
.
red{
width: 150px;
height: 150px;
border-radius: 50%;
background: red;
font-size: 65px;
color: white;
display: flex;
justify-content: space-around;
align-items: center;
}
.
blue{
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 65px;
color: white;
background: blue;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
</head>
<body>
<div class="case">
<img class="clock" src="images/clock.jpg">
<img class="hour" src="images/hour.png">
<img class="minute" src="images/minute.png">    <img class="second" src="images/second.png"> </div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
</div>
<div class="case1">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue"></div>
</div>
</body>
<script>
// var date=new Date()
// var Hours()
// var Minutes()
// var Seconds()
// var ElementsByClassName("hour")[0]
// var ElementsByClassName("minute")[0]
/
/ var ElementsByClassName("second")[0]
// if(hours>=12) {
//    hours = 0
// }
// ansform="rotate("+(hours*30+minutes*0.5)+"deg)"
// ansform="rotate("+(minutes*6+seconds*0.1)+"deg)"
// ansform="rotate("+seconds*6+"deg)"
// function time() {
//    var date=new Date()
//    var Hours()
//    var Minutes()
/
/    var Seconds()
//    var Milliseconds()
//    var ElementsByClassName("hour")[0]
//    var ElementsByClassName("minute")[0]
//    var ElementsByClassName("second")[0]
//        if(hours>=12) {
//            hours = hours-12;
//    }
//    ansform="rotate("+((hours-12)*30+minutes*0.5)+"deg)";    //    ansform="rotate("+(minutes*6+seconds*0.1)+"deg)";    //    ansform="rotate("+(seconds*6+(mil/100)*0.6)+"deg)";    // }
//    setInterval(time,100)
function time(){
var date=new Date()
var Hours();
var Minutes();
var Seconds();
var Milliseconds();
var ElementsByClassName("hour")[0];
var ElementsByClassName("second")[0];
var ElementsByClassName("minute")[0];
ansform="rotate("+(hours*30+minutes*0.5)+"deg)";
ansform="rotate("+(minutes*6+seconds*0.1)+"deg)";
ansform="rotate("+(seconds*6+(mil/1000)*6)+"deg)";    }
setInterval(time,100)