HTML5权威指南读书笔记02（第5,6章）--函数,对象,遍历,对象属性,数组等

最新推荐文章于 2024-04-16 09:39:43 发布

心湖中的石子

最新推荐文章于 2024-04-16 09:39:43 发布

阅读量100

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_43745804/article/details/109778141

版权

html5 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、使用带参，带返回值函数

<head>
    <style type="text/css">    
    </style>
    <script type="text/javascript">
    function introduce (name,age) { 
        document.write("my name is "+name+" and my age is "+age);
        return "my name is "+name+" and my age is "+age;
     }

     introduce("zhangsan",34);
    </script>
</head>
<body>
    <div class="mycla1"  >this is first <span>style</span></div>
    <div class="mycla2"  ><script>introduce('li',42)</script>style</span></div>
    <button onclick="introduce('wanger',45)">tell name</button>

</body>

2、创建对象

<head>
    <script type="text/javascript">
    var obj1=new Object();
    obj1.name="zhangsan";
    obj1.age=13;

    </script>
</head>
<body>
    <div class="mycla1"  ><script>document.write(obj1.name)</script> </div>

3、对象字面量json语法

<head>

    <script type="text/javascript">
    var obj1={
        name:"zhaoliu",
        age:43
    }

    </script>
</head>
<body>
    <div class="mycla1"  ><script>document.write(obj1.name)</script> </div>

</body>

4、将函数用作方法

实际是对象属性是一个函数
键值对形式

<head>
    <script type="text/javascript">
    var obj1={
        name:"wangwu",
        age:43,
        sayhi:function(){console.log(this.name+" "+this.age);}
    }
    obj1.name="mahan";//使用.句法
    obj1["age"]=34;//使用数组方法
    obj1.sayhi();
    </script>
</head>
<body>
    <div class="mycla1"  ><script>document.write(obj1.name)</script> </div>
</body>

5、for…in 枚举对象属性

<script type="text/javascript">
    var obj1={
        name:"wangwu",
        age:43,
        sayhi:function(){console.log(this.name+" "+this.age);}
    }
    for(var mypro in obj1){
        console.log(obj1[mypro]);
    }
    </script>

6、添加或减少象属性

可增加或删除属性和方法
直接点出新属性名并赋值
delete 对象名.属性名或方法名

<script type="text/javascript">
    var obj1={
        name:"wangwu",
        age:43,
        sayhi:function(){console.log(this.name+" "+this.age);}
    }
    obj1.nickname="xiaojiejie";
    obj1.address="beijing";

    for(var mypro in obj1){
        console.log(obj1[mypro]);
    }
    delete obj1.address;
    delete obj1.sayhi;
    for(var mypro in obj1){
        console.log(obj1[mypro]);
    }
    

    </script>

7、判断是否拥有某个属性

直接用属性(键名) in 对象名

<script type="text/javascript">
    var obj1={
        name:"wangwu",
        age:43,
        sayhi:function(){console.log(this.name+" "+this.age);}
    }

    var mybool= "name" in obj1;
    console.log(mybool);
    
    </script>

8、number.toString数值转字符串

<script type="text/javascript">
    var a=5;
    var b=6;
    console.log(a+b);

    var aa=a.toString();
    var bb=b.toString();
    var cc=aa+bb;
    console.log(cc);
    </script>

9、定义和使用数组

<script type="text/javascript">
    var array1=new Array(3);
    array1[0]=11;
    array1[1]=22;
    array1[3]=33;

    for(var i in array1){
        console.log(array1[i]);
    }

    var array2=new Array(1,2,3);
    for(var i =0;i<array2.length;i++){
        console.log(array2[i]);
    }

    var array3=["beijing","shanghai","nanjing"];
    array3.forEach(element => {
        console.log(element);
    });
    </script>

10、内置数组方法

1、concat（数组列表）：讲多个数组合并为一个新数组

<script type="text/javascript">
    var array1=new Array(3);
    array1[0]=11;
    array1[1]=22;
    array1[3]=33;

    var array2=new Array(1,2,3);
  
    var array3=["beijing","shanghai","nanjing"];
   
    var array4=array1.concat(array2,array3);
    console.log(array4.length);
    </script>

2、join（“分隔符”）：将多个数组合并为一个新数组
用分隔符将数组个元素连成一个字符串

<script type="text/javascript">
   
    var array2=new Array(1,2,3);
    var str=array2.join("--");
    console.log(str);
    </script>

3、pop（）：将数组当作栈使用，删除并返回数组最后一个元素

<script type="text/javascript">  
    var array2=new Array(1,2,3,4,5);
    var str1 =array2.pop();
    console.log(str1);

    var str2 =array2.pop();
    console.log(str2);

    array2.forEach(element => {
        console.log(element);

    });
    </script>

4、push（item）：将数组当作栈使用，添加1个元素到数组中

<script type="text/javascript">  
    var array2=new Array(1,2,3,4,5);
    array2.push("beijing");
    array2.forEach(element => {
        console.log(element);
    });

    </script>

5、reverse（）：将数组元素反转顺序

<script type="text/javascript">  
    var array2=new Array(1,2,3,4,5);
    array2.forEach(element => {
        console.log(element);
    });
    array2.reverse();
    array2.forEach(element => {
        console.log(element);
    });

    </script>

5、shift（）：同pop但操作的是第一个元素

var array2=new Array(1,2,3,4,5);
    var str=array2.shift();
    console.log(str);

6、slice（start,end）：从start开始到end(索引值)止截取一个子数组

<script type="text/javascript">  
    var array2=new Array(1,2,3,4,5);
    var array3=array2.slice(1,5)
    console.log(array3);
    </script>

打印
(4) [2, 3, 4, 5]

7、sort（）：就地对数组排序

<script type="text/javascript">  
    var array2=new Array(1,5,8,4,2);
    array2.sort();
    console.log(array2);
    </script>

8、unshift（）：类似于push,但是操作第一个元素

<script type="text/javascript">  
    var array2=new Array(1,5,8,4,2);
    array2.unshift(99);
    console.log(array2);
    </script>

11、try…cath

<script type="text/javascript">  
    try {
        var myarr;
        for(var i =0;i<myarr.length;i++){
            console.log(myarr[i]);
        }
    } catch (e) {
        console.log(e);
    }finally{
        console.log("this is finally sentence");
    }
    </script>