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

2024-10-08 18:40:44

本文实例讲述了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程序设计有所帮助。

JS对象与JSON格式数据相互转换

目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递
关于JavaScript的变量的数据类型的判断方法

虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型,Object 由无序的键值对组成.其余几种都属于简单数据类型.注意:变量类型首字母大写,而变量值首字母是小写的. JavaScript不支持自定义类型,所以JavaScript中的所有值都属于这六种类型之一. 要搞清楚一个变量是何种数据类型,就要使用typeof操作符了,注意,尤其要注意
JS 创建对象(常见的几种方法)

贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return this; } function O2(user,pwd){ //use factory var obj=new Object(); obj.user=user; obj.pwd=pwd; obj.get=get; return obj; } function O3(){ //use prototype
JavaScript知识点总结(六)之JavaScript判断变量数据类型

最近做了一个项目,其中有关于js判断数据类型的处理,在网上搜了相关资料,并且亲自测试了各种数据类型的判断,绝对安全.下面小编把具体内容总结分享给大家,大家参考下! 一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) 7.未定义(Undefined) 二.判断一个变量的数据类型 1.数值型(number) 比较常用的判断方法是: function i
JavaScript语言核心数据类型和变量使用介绍

任何的编程语言都有自己的语言核心,和众多编程语言一样,JavaScript也有自己语言的核心.语言的核心部分一般被称之为JavaScript最为基础的部分.正所谓万事开头难,学习JavaScript也是一个道理,也有句古话说得好,好的开始是成功的一半.了解并学好JavaScript的语言核心部分是JavaScript学习道路上非常良好的开始. 下面是一段代码,主要介绍了JavaScript的数据类型和变量: 复制代码代码如下: //在script标签中,所有//后面的内容都称之为注释 //注释
javascript的数据类型、字面量、变量介绍

数据类型: 1.数值型(整型int 浮点型floating) 2.字符串类型(string) 3.布尔型(只有两个值:ture fasle) 字符串字面量 1.转义系列: 在javascript中一些符号是辨别不出来的,只有转义之后正确显示出来.如: \' 单引号 \" 双引号 \n 换行符 \r 回车符 \\ 反斜杠转义实例: 复制代码代码如下: <script type="text/javascript"> document.write("hel
详解JavaScript的变量和数据类型

对于一门编程语言,肯定包含变量和数据类型.今天我们就来看看JavaScript脚本语言的变量和数据类型.相对于其他的Java,C++等高级程序语言,JavaScript显得很简单. 一.变量 JavaScript的变量是松散类型的,所谓松散就是用来保存任何类型的数据.变量是存储信息的容器.定义变量时要使用var操作符(var是关键字),后面跟一个变量名(变量名是标识符).变量也就是初始化后可以再次改变的量. 那么我们来看看实例: <span style="font-size
JS 对象(Object)和字符串(String)互转方法

利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = '8 May, 2011'; var str = JSON.stringify(jsObj); alert(str); 从JSON字符串转为对象 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.da
JavaScript数据类型和变量_动力节点Java学院整理

数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数据类型.在JavaScript中定义了以下几种数据类型: Number JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型: 123; // 整数123 0.456; // 浮点数0.456 1.2345e3; // 科学计数法表示1.2345x
简单介绍JavaScript的变量和数据类型

JavaScript数据类型: 编程语言的最根本的特征之一是一组它支持的数据类型.这些是可被表示和操纵的编程语言的值的类型. JavaScript允许有三个基本数据类型: 数字如. 123, 120.50 等. 字符串如 "This text string" 等. 布尔类型,如 true 或 false. 的JavaScript还定义了两种数据类型:null和undefined,其每一个仅限定一个单一的值. 除了这些基本的数据类型,JavaScript支持被称为对象的复合数据类型.我们
Json对象与Json字符串互转(4种转换方式)

1>jQuery插件支持的转换方式: 复制代码代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器: 复制代码代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换
javascript学习笔记整理（概述、变量、数据类型简介）

A.概述 1.输出工具: document.write()---可以是html alert()---字符串 prompt(text,defaultText) text---可选.要在对话框中显示的纯文本(而不是 HTML 格式的文本). defaultText---可选.默认的输入文本. 2.js的放置 a.可以再HTML的任何位置放置 b.但他是一个整体,相互影响 c.在超链接和重定向的位置 <a href="javascript:alert();"></a>