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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
JS实现音量控制拖动
Jan 15 Javascript
js实现简单五子棋游戏
May 28 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Python 内存管理机制全面分析
2021/01/16 Python
医学院毕业生自荐信
2013/11/08 职场文书
高中军训广播稿
2014/01/14 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
实施意见格式范本
2015/06/05 职场文书
于丹论语心得观后感
2015/06/15 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL