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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python 的 with 语句详解
2014/06/13 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python3安装crypto出错及解决方法
2019/07/30 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
市级绿色学校申报材料
2014/08/25 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
购房委托书范本
2014/09/18 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
交通安全学习心得体会
2016/01/18 职场文书
股权投资协议书
2016/03/23 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js