Javascript基础第三课时【读书笔记】

继续更新，大致类容为：函数返回值，函数传参，数组基础三块内容，欢迎提问一起讨论:)

函数返回值

如果有return，并且有相应的操作，那么就返回相应的操作结果。看下面两种情况：

1 <script>
2     function sum(a,b)
3     {
4         return a+b;
5     };
6     alert(sum(2,3));
7 </script>　　//返回5；
 
1 <script>
2     function sum(a,b)
3     {
4         return;//这里的return没有给他方法，他返回undefined
5     };
6     alert(sum(2,3));
7 </script>

函数传参

不定参arguments

 1 <script>
 2     function total(){
 3         var result=0;
 4         var i=0;
 5         for(i=0;i<arguments.length;i++){
 6             result+=arguments[i];
 7         };
 8         alert(result);
 9     };
10     total(2,3,2,5,8,98);
11 </script>

通过上面这个函数可以给total传很多的参数

 1 <script type="text/javascript">
 2 window.onload=function ()
 3 {
 4     var oDiv=document.getElementById('div1');
 5     
 6     //获取计算后的样式(当前样式、最终样式)
 7     //IE
 8     //alert(oDiv.currentStyle.width);
 9     
10     //FF
11     //alert(getComputedStyle(oDiv, false).width);
12     
13     if(oDiv.currentStyle)
14     {
15         //IE支持的方法
16         alert(oDiv.currentStyle.width);
17     }
18     else
19     {
20         //FF火狐支持的方法
21         alert(getComputedStyle(oDiv, false).width);第二个值可有可无，也就是flase值
22     }
23 }
24 </script>

 

通过上面的函数可以获取IE，FF下的非行间样式；

 1 <style>
 2 #div1 {width:200px; height:200px; background:red;}//简单的设置div的样式；
 3 </style>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 function getStyle(obj, attr)
 8 {
 9     if(obj.currentStyle)
10     {
11         return obj.currentStyle[attr];
12     }
13     else
14     {
15         return getComputedStyle(obj, false)[attr];
16     }
17 } 　　//这个函数也就是与上面的功能类似的一个函数，经过简化后的结果。命名为getStyle
18 
19 function css(obj, attr, value)
20 {
21     if(arguments.length==2)    //获取属性
22     {
23         return getStyle(obj, attr);
24     }
25     else if(arguments.length==3)    //设置属性
26     {
27         obj.style[attr]=value;
28     }
29 }//这个函数类似于Jquery里面的功能
30 
31 window.onload=function ()
32 {
33     var oBtn=document.getElementById('btn1');
34     var oDiv=document.getElementById('div1');
35     
36     oBtn.onclick=function ()
37     {
38         css(oDiv, 'background-color', 'green');//只能是基本样式，不能使background这样的复合样式,这个属性就存在诸如images,color,attchment,position等等属性，浏览器无法辨别
39         //alert(css(oDiv, 'width'));
40     }
41 }
42 </script>
43 </head>
44 
45 <body>
46 <input id="btn1" type="button" value="样式"/>//一个按钮和一个div
47 <div id="div1">
48     
49 </div>
50 </body>

 

 

数组基础

定义数组　　var=arr[1,2,3,4,5];

　　　　　　var=new Array(1,2,3,4,5);通常使用第一种创建方法，简单明了。

 

<script>
    var arr=[1,2,3,4];
    arr.length=10;
    alert(arr[5]);
</script>

 

可以设置数组的长度，如果长度小于你定义的元素个数那么会删除多余的值，如果长于你设置的元素个数，出弹出undefined。

 

从数组尾部添加/删除一个元素　　push和pop

从数组头部添加/删除一个元素　　unshift和shift

 

sort排序

1 <script>
2     var arr=[5,6,8,1,2,6,'love','about'];
3     arr.sort();
4     alert(arr);
5 </script>

由于sort太笨，所以编写一个比较函数来对数值排序。但是运行的时候出错了，帮忙找找error。嗷，找到了，function的大括号不能加分号。

1 var arr=[5,66,18,11,256,6];
2     arr.sort(function(num1,num2){
3         return num1-num2;
4     });
5     alert(arr);

concat--连接两个数组

    var a=[1,2,3];
    var b=[1,2,3,4];
    alert(a.concat(b));

join--添加分隔符（只能是字符串）

var a=[1,2,3];
alert(a.join('-'));

split--把字符串转成数组，但是是字符串，不是数值。(英文意思：分裂，分开)

var a='6-9-8-5';
alert(a.split('-'));

splice--从数组中间删除元素，添加元素，替换元素。（英文意思：黏贴）

1 var a=[1,2,3,4,5,6,7,8,9];
2     //从第二个元素开始删除一个元素a.splice(2,1);
3     //从第二个元素开始删除0个元素，添加两个元 a.splice(2,0,'a','b');
4     //从第二个元素开始，删除两个元素，也就是删除3,4两个数字，添加了a,b,c三个元素 a.splice(2,2,'a','b','c');
5     alert(a);

END~

 


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/08/3066967.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(1202)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae