JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
程序员文章站
2024-01-02 12:16:58
本文实例讲述了javascript 变量,数据类型基础。分享给大家供大家参考,具体如下:
这篇笔记呢,咱记录下变量和数据类型的基础知识,因为两者有联系 所以放在一起记录
1 如何声...
本文实例讲述了javascript 变量,数据类型基础。分享给大家供大家参考,具体如下:
这篇笔记呢,咱记录下变量和数据类型的基础知识,因为两者有联系 所以放在一起记录
1 如何声明变量
变量声明使用var关键字,下面举一些变量声明的例子:
<!doctype html> <html> <head> <title>learn javascript</title> </head> <body> </body> {{--js--}} <script> var name = "larger"; var age = 24, desire = "become web developers"; document.write(name + "<br />" + "age" + ":" + age + "<br />" + "desire" + ":" + desire); </script> </html>
2 数据类型
js中的数据类型有:
- nunber:数字类型。
- string:字符串类型。
- boolean:布尔类型。
- array:数组。
- object:对象。
- null:空值。
- undefined:未定义值。
下面咱一个一个的声明这些类型的变量。
2.1 数字类型
2.1.1 声明方式
<script> var number1 = 5; var number2 = (5 - 9) * 3; var numbersum = number1 + number2; document.write(number1 + "<br />" + number2 + "<br />" + numbersum + "<br />"); </script> <script> var num = 3.88; document.write(num); </script> <script> var num = new number(3000); // 这样声明的话 它会是一个对象 document.write(typeof(num)); // object </script>
2.1.2 常用方法
nan是一个非数字类型,用 isnan 判断是否是非数字类型:
<script> var num1 = new number(3000); var num2 = 123; var nonum = nan; document.write(isnan(num1) + "<br />" + isnan(num2) + "<br />" + isnan(nonum)) </script>
当数字长度达到边界时 就会变成一个特殊的类型:无穷大(infinity)/负无穷大(-infinity):
<script> var num1 = 2/0; if (num1 == infinity){ document.write("数字已溢出"+num1); } </script>
用tostring方法来转换成字符串类型:
<script> var num1 = 122; var str1 = num1.tostring(); // 没有传递参数默认是10进制。 var str2 = num1.tostring(8); // 8进制 document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1)); </script>
2.2 字符串类型
2.2.1 声明方法
<script> var str1 = "something"; // 用双引号 var str2 = 'something'; // 用单引号 var str3 = "my name is 'k'";// 双引号中展示单引号 var str4 = 'my name is "k"';// 单引号中展示双引号 var str5 = 'my name is \'k\''; // 转义单引号中的单引号 </script>
2.2.2 常用方法
通过索引获取字符:
<script> var str1 = "something"; // 用双引号 var char = str1[11]; // char也是string类型,如果越界的话char的类型为undefined document.write(char); </script>
通过length方法获取字符串长度:
<script> var str = "something"; // 用双引号 var strlen = str.length; // 返回的strlen是数字类型。 document.write(strlen); </script>
通过indexof来查找字符串:
<script> var str = "something"; // 用双引号 var index1 = str.indexof("thing"); // 返回4 从零计算 var index2 = str.indexof("same"); // 返回-1 代表没找到 var str2 = "my name is k my age is 24"; var index3 = str2.indexof("is"); // 返回8 var index4 = str2.lastindexof('is');// lastindexof是从后面开始找的 所以返回20 </script>
通过macth来匹配字符串:
<script> var str = "something"; // 用双引号 var substr = str.match("sa"); // 如果能找到 返回查找的字符串 如果没有找到 返回null document.write(substr); </script>
替换一段字符串:
<script> var str = "this is laravel"; str = str.replace("laravel", "javascript"); // 如果没有替换成功 返回原来的字符串。 document.write(str); </script>
大小写的转换:
<script> var str = "this is laravel"; str = str.tolocaleuppercase(); // 转换为大写。 str = str.tolocalelowercase(); // 转换为小写。 </script>
转为数组:
<script> var str = "this is laravel"; var array = str.split(" "); // 通过空格分隔。 </script>
2.3 数组
2.3.1 声明方法
<script> var array1 = new array(); array1[0] = "string type"; array1[1] = 55; array1[2] = true; var array2 = new array("alex", "k", 24); var array3 = ["alex", "k", 24]; </script>
2.3.2 访问数组中的元素
<script> var array3 = ["alex", "k", 24]; // 可以通过索引获取 for (i = 0; i < array3.length; i++){ document.write(array3[i] + "<br />"); } // 也可以通过索引来修改值 for (i = 0; i < array3.length; i++){ array3[i] = "value" + i; } document.write(array3); </script>
2.4 对象
对象中可以包含属性和方法,其实在js中 所有事物都是对象这其中包括上面的数字、字符串、数组。
2.4.1 创建方法
<script> var object1 = new object(); object1.name = "alex"; object1.skincolor = "white"; object1.sayhello = function() { return "yo bro what's up"; }; document.write(object1.name + "<br >" + object1.skincolor + "<br >"); document.write(object1.sayhello()); </script>
↑ 这是第一种声明方法 在其中 我们使用objectname.valuename访问了对象中的元素,还有objectname.methodname访问了对象中的方法。
<script> var object1 = { name : "alex", skincolor : "white", sayhello : function() { return "yo bro what's up"; } }; document.write(object1.name + "<br >" + object1.skincolor + "<br >"); document.write(object1.sayhello()); </script>
↑ 这是第二种写法,比较常用 比第一种方法简单。
<script> // 对象构造器 function person(firstname, lastname, age){ this.firstname = firstname; this.lastname = lastname; this.age = age; this.changename = changename; function changename(name){ this.firstname = name; } this.fullname = fullname; function fullname(){ return this.firstname + this.lastname; } } // 使用对象构造器创建对象 var mywife = new person("*","haoyan",18); mywife.changename("yang"); document.write(mywife.fullname()); </script>
↑ 这是第三种写法,对象构造器。
2.4.2 遍历对象
使用for in来遍历对象:
<script> // 对象构造器 function person(firstname, lastname, age){ this.firstname = firstname; this.lastname = lastname; this.age = age; this.changename = changename; function changename(name){ this.firstname = name; } this.fullname = fullname; function fullname(){ return this.firstname + this.lastname; } } // 使用对象构造器创建对象 var mywife = new person("*","haoyan",18); for(variable in mywife){ document.write(variable + "<br />"); } </script>
感兴趣的朋友可以使用在线html/css/javascript代码运行工具:http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。