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 相关文章推荐
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
javascript 常见功能汇总
Jun 11 Javascript
js预加载图片方法汇总
Jun 15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python3如何解决字符编码问题详解
2017/04/23 Python
python距离测量的方法
2018/03/06 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
python实现翻译word表格小程序
2020/02/27 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
民主评议党员工作总结
2014/10/20 职场文书