当前位置: 首页 > 编程笔记 >

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

辛可人
2023-03-14
本文向大家介绍JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】,包括了JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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中的数据类型有:

  1. Nunber:数字类型。
  2. String:字符串类型。
  3. Boolean:布尔类型。
  4. Array:数组。
  5. Object:对象。
  6. Null:空值。
  7. 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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍详解JavaScript的变量和数据类型,包括了详解JavaScript的变量和数据类型的使用技巧和注意事项,需要的朋友参考一下 对于一门编程语言,肯定包含变量和数据类型。今天我们就来看看JavaScript脚本语言的变量和数据类型。相对 于其他的Java,C++等高级程序语言,JavaScript显得很简单。 一、变量        JavaScript的变量是松散类型的,所谓松散

  • 本文向大家介绍Python变量和数据类型详解,包括了Python变量和数据类型详解的使用技巧和注意事项,需要的朋友参考一下 Python 变量类型       变量存储在内存中的值。这就意味着在创建变量时会在内存中开辟一个空间。    基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中。    因此,变量可以指定不同的数据类型,这些变量可以存储整数,小数或字符。 变量赋值

  • 最近要开始新的项目,工作又开始忙起来了,不过还是每天要抽时间来写博客,但不可能做到日更,因为一篇博客,写的时间还是挺长的。 注:看到以前矫情的话语,一下子就想把它给删掉。可以刚刚按了删除键才发现,删了之后,不知道写什么了。就瞬间撤销了。这一章节中改动了挺多东西的,也新增了很多例子。 目录

  • 变量基础 变量作用域 变量提升 变量变化监听 常用命名规则

  • 问题内容: 我有一个带有变量StudentID的班级Student: 我希望变量StudentID继续分配给每个Student创建的新ID号。每个ID号都应比上一个创建的ID号大一个,并且应等于已创建的对象总数。现在,每个对象的ID号为1。 问题答案: 将studentID设为静态成员 静态成员将在整个类的每个实例中保留,无论有多少个clas实例。

  • 什么是数据? 存储在内存中代表特定信息的,本质上是0100101..... 数据的特点:可传递、可运算 一切皆数据 内存中所有操作的目标:数据 算术运算 逻辑运算 赋值运算 运行函数 什么是内存? 内存条通电后产生的可储存数据的空间(临时的) 内存的产生和死亡:内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失 一块小内存的2个数据: 内部