步步为营-53-JavaScript
说明 :JS比较常用
1.1 常见的两种使用方式:
1.1.1 直接使用 <script>alert('Hello,World')</script>
1.1.2 引用js文件 <script src="JS/JSHelloWorld.js"></script>
1.2 一个简单实例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //01-定义方法 function showTime() { var date = new Date(); alert(date.toLocaleTimeString()); //可以让超连接跳转不执行 return false; } </script> </head> <body> <input type="button" value="显示当前时间" onclick="showTime();"/> <a href="#" onclick="showTime();">显示当前时间</a> <a href="javascript:showTime();">显示当前时间</a> <a href="http://www.baidu.com" onclick="return showTime();">显示当前时间</a> </body> </html>
1.3 数据类型
1.3.1 boolean 布尔
1.3.2 number 数字
1.3.3 string 字符串
1.3.4 Undefined 未定义 对应的值为undefined
1.3.5 Null 空对象 对应的值为null
1.3.6 object 对象类型

<script> //当变量被声明,没有初始化,则值为undefined var a; alert(a);//undefined a = null; alert(a);//null </script>
1.3.7 查看变量类型typeof(变量)
typeof 变量名 或 typeof(变量名)

<script> //当变量被声明,没有初始化,则值为undefined var a; alert(typeof(a));//undefined a = null; alert(typeof (a));//object </script>
1.3.8 类型转换
parse***(变量名);
var a2 = '100';
alert(parseInt(s2)+1)
1.4 判断是否相等
=== 严格相等(先判断类型,在判断值)
1.4.1 判断是否不是一个数字
isNaN(变量名);
1.4.2 将一段字符串当作js代码执行
eval('alert("abc")');
1.5 方法
1.5.1 语法: function 方法名 (参数列表){}
function add(a, b) {
alert(a + b);
return a + b;
}
1.5.2 不存在方法的重载,方法名相同时,后面的方法会把前面的方法覆盖掉.
1.5.3 可用可变参数替代方法重载
//可变参数
function add() {
//使用 arguments 获取所有参数,是一个数组
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
alert(sum);
}
add(1,22,3,5,7);
1.5.4 匿名方法

<input id="btnShow" type="button" value="显示" /> <script> //语法1: function (参数列表){...return...} var f1 = function(a, b) { return a + b; }; //使用场景 document.getElementById('btnShow').onclick = function() { alert("匿名函数"); }; //语法2 (function(n1,n2){...})(1,2); //语法3 new Function("n1","n2","return n1+n2"); </script>
1.6 闭包
1.6.1 作用域链
理解闭包之前先理解作用域链:变量的作用域在当前函数中,以及当前函数的内部定义的函数中形成了一条链条.叫做作用域链/
1.6.2 闭包:支持函数内部调用函数之前声明过的变量.

<script> //闭包 //01_定义函数 function show(name) { //02-函数内部定义函数 return function () { alert(name); } } //调用函数 var fun1 = show('张三'); fun1(); </script>
1.7 类


<script> //类 function Person() { } var p1 = new Person(); p1.Nmae = '张三'; p1.say= function() { alert(p1.Nmae); }; p1.say(); </script>
1.8 原型:对象类型

<script> //原型 function Person() { this.Name = '姓名'; } var p1 = new Person(); //访问原型---为原型注册数据成员 p1.__proto__.Title = '标题'; Person.prototype.Size = '1K'; var p2 = new Person(); alert(p2.Title); alert(p2.Size); </script>
1.9 集合(数组和键值对)

<script> //数组 var arry1 = [123, "abc"]; //键值对--json对象 var arry2= { name:'张三', age : 18 }; //使用 alert(arry1[1]); alert(arry2.name); alert(arry2['age']); //定义Json数组 var people = [{ name: '李四', age: 20 }, { name: '王五', age: 30 }]; //使用 //people是数组,所以index是索引 for (var index in people) { alert(people[index].name); } </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步