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


Posted in Javascript onJanuary 04, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 #Javascript
Angular8 实现table表格表头固定效果
Jan 03 #Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 #Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
You might like
PHP 之Section与Cookie使用总结
2012/09/14 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
为什么需要版本控制
2016/10/28 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
研发工程师的岗位职责
2013/11/18 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
个人租房协议书范本
2014/09/30 职场文书
中小学生学籍证明
2014/10/25 职场文书
被委托人身份证明
2015/08/07 职场文书
创业计划书之酒厂
2019/10/14 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers