JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】

时间：2021-05-28

本文实例讲述了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测试上述代码运行效果。

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

    希望本文所述对大家JavaScript程序设计有所帮助。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章