js中中括号,大括号使用详解

js中中括号,大括号使用详解

  (2012-07-20 13:50:21)
标签: 

js大括号

 

js小数点

 

杂谈

分类: web前端

一、{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数。
如:var LangShen = {"Name":"Langshen","AGE":"28"};
上面声明了一个名为“LangShen”的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,
所以访问时,应该用.(点)来层层访问: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”}
因为这种简单对象没有通过构造函数创造所以也就没能在对象外添加方法。
对比构造函数创造的对象
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;
            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="blue"></div>
</div>




</body>
<script>
    // var date=new Date()
    // var hours=date.getHours()
    // var minutes=date.getMinutes()
    // var seconds=date.getSeconds()
    // var hour=document.getElementsByClassName("hour")[0]
    // var minute=document.getElementsByClassName("minute")[0]
    // var second=document.getElementsByClassName("second")[0]
    // if(hours>=12) {
    //     hours = 0
    // }
    // hour.style.transform="rotate("+(hours*30+minutes*0.5)+"deg)"
    // minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)"
    // second.style.transform="rotate("+seconds*6+"deg)"

    // function time() {
    //     var date=new Date()
    //     var hours=date.getHours()
    //     var minutes=date.getMinutes()
    //     var seconds=date.getSeconds()
    //     var mil=date.getMilliseconds()
    //     var hour=document.getElementsByClassName("hour")[0]
    //     var minute=document.getElementsByClassName("minute")[0]
    //     var second=document.getElementsByClassName("second")[0]
    //         if(hours>=12) {
    //             hours = hours-12;
    //     }
    //     hour.style.transform="rotate("+((hours-12)*30+minutes*0.5)+"deg)";
    //     minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)";
    //     second.style.transform="rotate("+(seconds*6+(mil/100)*0.6)+"deg)";
    // }
    //    setInterval(time,100)



    function time(){
        var date=new Date()
        var hours=date.getHours();
        var minutes=date.getMinutes();
        var seconds=date.getSeconds();
        var mil=date.getMilliseconds();
        var hour=document.getElementsByClassName("hour")[0];
        var second=document.getElementsByClassName("second")[0];
        var minute=document.getElementsByClassName("minute")[0];
        hour.style.transform="rotate("+(hours*30+minutes*0.5)+"deg)";
        minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)";
        second.style.transform="rotate("+(seconds*6+(mil/1000)*6)+"deg)";

    }

    setInterval(time,100)




       //qiu

// var a=1;b=2;c=3;
//    d=4;
//    a+"xioashi"+"sdsa"
//     document.write(`"${a}小时${b}分钟${d} "+")//es6写法${b(变量)`}(`遇见$符就但当变量,其他的全当字符串)
//     <div style="width:100px;height:200px;"></div>


    // var per={
    //     key:()=>{
    //         alert(1)
    // }
    // }
    // per.key()//es6写法

    // var regEXP=/[a(A)-z]大小写的a[0-9a-z(简写)](0到9)/gi(不区分大小写);
    // var reg=new regEXP();
    // var str='aaaaaafffdsdsd你好呀';
    // document.write(regEXP.text(str)+"</br>");
    // document.write(regEXP.match(str)+"</br>");
    // document.write(regEXP.replace(str,"1234")+"</br>");
    // document.write(regEXP.search(str)+"</br>");
    // document.write(regEXP.spilt(str)+"</br>");


///11111111111
    // window.οnlοad=function(){
    //     var aDiv=document.getElementsByTagName("div");
    //     var section=document.getElementsByTagName("section");
    //
    //     function distinct(arr){//传入一个随机数组进行去重
    //         //建立一个空数组用来存值
    //         var newArr=[];
    //         //循环遍历数组
    //         for(var i=0;i<arr.length;i++){
    //             //当输入进来的数组不存在该值的时候添加该值,否则不添加
    //             if(newArr.indexOf(arr[i])==-1){
    //                 //像新数组中添加值
    //                 newArr.push(arr[i]);
    //             }
    //         }
    //         //返回新数组
    //         return newArr;
    //     }
    //     //num是输出个数,max是最大值
    //     function random(num,max){
    //         //建数组arr存用户输入的值  0到max
    //         var arr=[];
    //         //建数组newarr存 arr中的随机数
    //         var newarr=[];
    //         //循环添加arr数组中的值,0到max之间所有值
    //         for(var i=1;i<max;i++){
    //             arr.push(i);
    //         }
    //         //循环次数是num,就是取多少次随机数添加到newarr中
    //         for(var i=0;i<num;i++){
    //             newarr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
    //         }
    //         //跟数组排序
    //         var rua=newarr.sort(function(x,y){
    //             return x-y;
    //         });
    //         //返回排序后的数组
    //         return rua;
    //     }
    //     //建变量生成随机数5个最大值33
    //     var num=random(6,33);
    //     console.log(num);
    //     //循环div让他的innerHTML值等于数组中的数
    //     for(var i=0;i<num.length;i++){
    //         aDiv[i].innerHTML=num[i];
    //     }
    //     //生成一个1到16的数
    //     var xxx=random(1,16);
    //     //添加数值到section内
    //     for(var i=0;i<xxx.length;i++){
    //         section[i].innerHTML=xxx[i];
    //     }
    // }
/1//111111111111

    // var a=new Array();
    // var red=document.getElementsByClassName("red")
    // var blue=document.getElementsByClassName("blue")[0]
    // var c=0;
    // for(var i=0;i<red.length;i++){
    //     a[i]=parseInt(Math.random()*32+1);
    //     for(var j=0;j<i;j++){//j<i?
    //         if(a[i]==a[j]){
    //             j--;//循环去重
    //         }
    //         a[i]=parseInt(Math.random()*32+1);
    //     }
    // }
    // function compare(a,b){
    //     return a-b;//顺序小的在前面就是从小到大
    // }//冒号排序
    // a.sort(compare)
    // for(var i=0;i<red.length;i++){
    //     red[i].innerText=a[i]
    // }
    // c=parseInt(Math.random()*15+1)
    // blue.innerText=c



    /222222222222
    // var a=new Array();
    // var red=document.getElementsByClassName("red");
    // var blue=document.getElementsByClassName("blue")[0];
    // var c=0;
    // for(i=0;i<red.length;i++){
    //     a[i]=Math.floor(Math.random()*33+1);
    //     for(j=0;j<i;j++){
    //         if(a[j]==a[i]){
    //             j--;
    //         }
    //         a[i]=Math.floor(Math.random()*33+1);
    //     }
    //
    // }
    // //
    // // function compare(a,b){
    // //     return a-b;
    // // }
    // // a.sort(compare);
    //
    // var aa=a.sort(function(a,b){
    //          return a-b;
    //
    // });
    //
    //
    // for(var i=0;i<red.length;i++){
    //     red[i].innerHTML=a[i];
    // }
    //
    // var c=parseInt(Math.random()*16+1);
    //     blue.innerText=c;

///2222222222222
//
//     3333333333333
       var aa=document.getElementsByClassName("case1")[0];
    var cc=aa.getElementsByTagName("div");
    var arr=[];
    for(i=0;i<cc.length-1;i++){
        var  x= parseInt(Math.random()*33)+1;
        arr[i]=x
        for(j=0;j<i;j++){
            if(arr[i]==arr[j]){
                i--
            }
        }
    }
    cc[6].innerText=parseInt(Math.random()*16)+1;
    arr.sort(function (num1, num2){
        return num1-num2
    });
    for (i=0;i<cc.length-1;i++){
        cc[i].innerText=arr[i]
    }
3333333333333333333333333333

    44444444444444444444444444
    // var arr=[];
    // var obj={};
    // var arr2=[];利用对象的自动排序
    // var reds=document.getElementsByClassName('red');
    // var blue=document.getElementsByClassName('blue')[0];
    // for(var i=1;i<=36;i++){
    //     arr.push(i);
    // }
    // function choose(oArr){
    //     num=Math.floor(Math.random()*oArr.length);
    //     obj[oArr[num]]=1;
    //     console.log(oArr[num]);
    //     oArr.splice(num,1);
    // }
    // for(var j=0;j<6;j++){
    //     choose(arr);
    // }
    // for(x in obj){
    //     arr2.push(x);
    // }
    // for(var k=0;k<reds.length;k++){
    //     reds[k].innerHTML=arr2[k];
    // }
    // blue.innerHTML=Math.floor(Math.random()*16+1);
    // }
///4444444444444444444444444444444444444'


    /555555555555555555555555555555555555

    用了li 来做的
    // let oframdsLi=document.getElementById("framds").getElementsByTagName("li");
    // let act=[];
    // act[0]=Math.floor(Math.random()*33+1);
    // for(let i=0;i<oframdsLi.length-2;i++){
    //     let tusa=true;
    //     let tprs=Math.ceil(Math.random()*33+1);
    //     for (let j=0;j<act.length;j++){
    //         if (act[j]==tprs){
    //             tusa=false;
    //         }
    //     }
    //     if (tusa==true){
    //         act.push(tprs);
    //     }else if (tusa==false){
    //         i--;
    //     }
    // }
    // function compare(x,y){
    //     return x-y;
    // }
    // act.sort(compare);
    // act.push(Math.floor(Math.random()*16+1));
    // for (let i=0;i<oframdsLi.length;i++){
    //     oframdsLi[i].innerText=act[i];
    // }
    // }
    //5555555555555555555555555555555555555555

</script>
</html>



</body>
</html>

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值