JavaScript 入门指南(二)JavaScript 的数据类型

这篇具有很好参考价值的文章主要介绍了JavaScript 入门指南(二)JavaScript 的数据类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 的数据类型

基本数据类型

  • undefined 类型:只有一个值 undefined(未定义),它是一个保留字。表示变量虽然已经声明,但却没有赋值

  • number 类型:所有的整数和小数

    注:NaN 是一个特殊的数字值(typeof NaN的结果为number),是not a number的缩写,表示不是一个合法的数字。不是数字的字符串通过函数进行数据类型转换为数字,结果就是 NaN

  • string 类型:所有被单引号双引号包裹的字符串

  • boolean 类型:布尔值,只有两个值 true 和 false

  • object 类型:所有对象的数据类型

注:

  • 可以使用关键字 typeof 可以查看变量的数据类型

  • null 类型:只有一个值 null(空),它是一个保留字。表示没有值,用于定义空的或不存在的引用。

    注意:

    • 空值不等同于空字符串 “” 或 0
    • undefined 类型就是使用 null 演化而来,所以 undefined == null 为 true
    • undefined 的数据类型是 undefined,null 的数据类型是 object,所以 undefined === null 为 false

引用数据类型(对象)

  • js 语言是基于对象的编程语言。在 js 中没有类,里边使用的对象都是使用函数模拟出来的,包含了一些内置对象
  • 传址:在赋值过程中,引用数据类型的变量实际上存储的是数据的地址(对数据的引用),而不是原始数据或者数据的拷贝。
  • 注意:所有的对象都是 object 对象,包括 NaN、null

JavaScript 创建对象的 3 种方式

  • 方式1:通过对象字面量构造,其 prototype(原型、蓝本)指向 Object.prototype

    var 对象变量名={
    	属性名:属性值,
    	方法名:function([参数列表]){
    		方法体
    	}
    }
    
    var person = {
        name: "Tom",
        age: 18
    }
    console.log(person)		//{name: 'Tom', age: 18}
    
  • 方式2:通过构造函数构造,其 prototype(原型、蓝本)指向其构造函数的 prototype 属性指向的对象

    var 对象变量名 = new Object();
    对象变量名.属性名 = 属性值;
    对象变量名.方法名 = function([参数列表]){
    	方法体
    }
    
    var person = new Object();
    person.name = "张三";
    person.age = 18;
    console.log(person)		//{name: 'Tom', age: 18}
    

    自定义构造函数构造

    // 方式1:
    function 构造函数([参数列表]){
    	this.属性名=属性值(或参数列表中参数);
    	this.方法名=function([参数列表]){
    		方法体
    	};
    }
    var 对象名 = new 构造函数([参数列表]);
    
    // 方式2:原型法
    function 对象创建器(){};
    对象创建器.prototype.属性=属性值;
    对象创建器.prototype.方法=function([参数列表]){
    	方法体
    };
    var 对象名 = new 对象创建器([参数列表]);
    
    // 方式1与方式2混合
    function 构造函数([参数列表]){
    	this.属性1=属性值;
    	...;
    	this.属性N=属性值;
    	};
    }
    对象创建器.prototype.方法=function([参数列表]){
    	方法体
    };
    var 对象名 = new 构造函数([参数列表]);
    
  • 方式3:通过 Object.create 构造,其 prototype(原型、蓝本)指向 Object.create 的参数

    var person = {
        name: "Tom",
        age: 18
    }
    var person = Object.create(person)
    console.log(person)				//{}
    console.log(person.__proto__)	//{name: 'Tom', age: 18}
    

总结:第 1 种创建方式其实就是第 2 种的语法糖,过程一致。第 3 种方式通过 Object.create 来创建的对象并不会继承其父对象的属性和方法,只能通过原型链来访问


常用内置对象

String:字符串

String 对象用于处理文本(字符串)

String 对象中定义了一些处理字符串的函数

  • 创建 String 对象的方式(4 种方式):

    var str = new String("字符串");
    var str = "字符串";
    var str = '字符串';
    var str = `字符串`;
    

    注:

    • 使用反向单引号创建字符串,可以使用 ${} 引用其他字符串对象

      var str1 = 'a-b-c';
      var str2 = `hello${str1}`;	// helloa-b-c
      
  • String 对象常用属性:

    • length :字符串的长度

      'aaa'.length	// 3
      
  • String 对象常用函数:

    • charAt() :返回在指定索引的字符

      // 使用length属性和charAt方法遍历字符串
      for(let i=0; i<str2.length; i++){
          alert(str2.charAt(i));
      }
      
    • concat() :连接字符串

    • indexOf() :在字符串中从前往后查找另一个字符串的索引,若找到了,返回对应的索引,若找不到,返回 -1

    • lastIndexOf() :在字符串中从后往前查找另一个字符串的索引,若找到了,返回对应的索引,若找不到,返回 -1

    • toLowerCase() :把字符串转换为小写

    • toUpperCase() :把字符串转换为大写

    • substring(开始索引, 结束索引) :截取两个索引之间的字符,包含头,不包含尾

    • substr(开始索引) :从开始索引截取到字符串末尾

    • substr(开始索引, 字符个数) :截取从开始索引到指定字符个数内容


Array:数组

Array 对象用于在单个的变量中存储多个值

在 js 中是没有集合的,,可以使用数组作为集合使用,Array 数组长度是可以变化的,可以存储任意数据类型的数据

  • 创建 Array 对象的语法(4 种方式):

    // 创建一个长度为 0 的数组
    var arr = new Array(); 
    // 创建指定长度的数组,数组中的元素有默认值 undefined
    var arr = new Array(size); 
    // 创建包含指定元素的数组
    var arr = new Array(element0, element0, ..., elementn); 
    // 创建包含指定元素的数组
    var arr = [element0, element0, ..., elementn]; 
    
  • 二维数组:数组中的元素仍是一个数组

    // 示例
    var arrArr = [
        [1,2,3],
        ["a","b","c"],
        [true,false]
    ];
    
  • Array 对象常用函数:

    • concat(数组) :数组合并

    • unshift(元素) :数组头添加元素

    • push(元素) :数组尾添加元素

    • shift() :数组头删除一个元素

    • pop() :数组尾删除一个元素

    • join(分隔符) :数组元素拼接为字符串,参数为指定分隔符

      var arr1 = ['a', 'b', 'c']
      console.log(arr1.join("-"));	// a-b-c
      
    • sort() :对数组的元素进行排序,默认是升序排序

      可以传参一个自定义排序规则的匿名函数

      var arr3 = [1,5,4,3,2];
      // 排序数组元素 sort() 对数组的元素进行排序,默认是升序排序
      console.log("排序后: " + arr3.sort());		//排序后:1,2,3,4,5
      
      // sort(函数()) 根据函数中写的规则排序
      console.log("排序后: " + arr3.sort(function (a, b) {
          // 升序
          return a-b;
      }));	// 排序后:1,2,3,4,5
      
      console.log("排序后: " + arr3.sort(function (a, b) {
          // 降序
          return b-a;
      }));	//排序后:5,4,3,2,1
      

Date:日期

Date 对象用于处理日期和时间。

  • 创建 Date 对象的语法:var myDate=new Date();
  • 常用的方法:
    • getFullYear() :从 Date 对象以四位数字返回年份
    • getMonth() :从 Date 对象返回月份(0 ~ 11)
    • getDate() :从 Date 对象返回一个月中的某一天(1 ~ 31)
    • getHours() :返回 Date 对象的小时(0 ~ 23)
    • getMinutes() :返回 Date 对象的分钟(0 ~ 59)
    • getSeconds() :返回 Date 对象的秒数(0 ~ 59)
    • getMilliseconds() :返回 Date 对象的毫秒(0 ~ 999)
    • getTime() :返回 1970 年 1 月 1 日至今的毫秒数
    • toLocaleString() :根据本地时间格式,把 Date 对象转换为字符串

Math:数学运算

Math 对象用于执行数学任务。

Math 类中的属性和方法可以直接通过 Math.属性Math.方法名(参数) 直接使用,类似于 java 中静态的成员

  • 常用属性:
    • PI 返回圆周率(约等于3.14159)。
  • 常用方法:
    • ceil(x) :向上取整
    • floor(x) :向下取整
    • round(x) :四舍五入
    • pow(x, y) :返回 x 的 y 次幂
    • random() :返回 0 ~ 1 之间的随机数

RegExp:正则表达式

RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具

正则表达式本质就是一个包含了某些规则的字符串,用于对其他的字符串进行校验

  • 创建 RegExp 对象的语法:

    var reg = new RegExp("^正则表达式的规则$");
    var reg = /^正则表达式的规则$/;
    
  • RegExp 对象常用方法:

    • test(“要校验的字符串”) :判断字符串是否满足正则表达式的规则。满足:返回 true;不满足:返回 false

      var reg = /^1[345789][0-9]{9}$/;
      //调用正则表达式中的方法test,对手机号进行校验
      console.log(reg.test("13888888888"));//true
      console.log(reg.test("138888888881"));//false
      
    • match(正则表达式) :判断字符串是否匹配正则表达式的规则。匹配成功:返回字符串本身;匹配失败:返回 null

      var reg = /^1[345789][0-9]{9}$/;
      console.log("13888888888".match(reg));//Array [ "13888888888" ]
      console.log("138888888a8".match(reg));//null
      

全局函数

全局函数:在 script 标签中可以直接使用的函数

  • 字符串转为数字

    • parseInt(字符串) :将字符串转为整数数字,从左到右遇到非数字停止

    • parseFloat(字符串) :将字符串字符转为小数数字,从左到右遇到非数字停止

    • Number(字符串) :将字符串转换为数字

      • 正常的数字字符串转换为相应的数字(类型从 string 转换为 number)

      • 空字符串(包括含空格的空字符串)转换为 0

      • 非空且不是数字的字符串会转换为 NaN(不是各数字)

        注意:NaN是唯一一个和自身不相等的值。NaN 的数据类型是 number

    var a = parseInt("11a11");
    console.log(a + 1);		// 12
    
    var b= parseFloat("1.1afdsaf22");
    console.log(b + 100);	// 101.1
    
    var b = Number("111")
    console.log(b)			// 111
    console.log(typeof b)	// number
    
  • isNaN(字符串) :判断非数字。非数字返回 true,是数字返回 false

  • encodeURI(字符串) :使用 ASCII 码对字符串编码为 URI 字符串

  • decodeURI(字符串) :使用 ASCII 码对 URI 字符串解码为 UTF-8 编码的字符串

  • eval(字符串) :计算 JavaScript 字符串,即把字符串当做 js 表达式来执行

    var aaa = "1+5*10-20";
    var bbb = eval(aaa);	// 31
    

数据类型转换

JavaScript 变量可以进行数据类型转换:

  • 方式1:通过使用 JavaScript 函数
  • 方式2:通过 JavaScript 自身自动转换

常见类型转换:

  • 其他类型转换为字符串

    • 方法1:全局方法 String()

      new String(任意数字)
      new String(false)
      new String(Date())
      
    • 方式2:自动隐形转换

      "" + 任意数字
      "" + false
      
    • 方式3:各自数据包装对象的 toString() 方法

      var num = 任意数字
      num.toString()
      false.toString()
      Date().toString()
      
  • 将字符串转换为数字

    全局函数 parseInt()、parseFloat()、Number() 都可以将字符串转换为数字。详见全局函数文章来源地址https://www.toymoban.com/news/detail-843686.html

到了这里,关于JavaScript 入门指南(二)JavaScript 的数据类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/footless_bird/article/details/137002414

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TypeScript入门指南:特性、安装配置、类型声明、编译选项、面向对象等详解

    了解TypeScript的特性、安装配置步骤、类型声明方式、编译选项及面向对象编程方法。适合初学者学习和实践。

    2024年02月12日
    浏览(13)
  • 前端学习路线指南:从入门到精通【①】

    作为一个前端开发者,学习前端技术是必不可少的。然而,由于前端领域的广阔和不断演进的技术栈,对于初学者来说可能会感到困惑。本篇文章将为你提供一个清晰的前端学习路线,帮助你系统地掌握前端开发技能,并成为一名优秀的前端工程师。 HTML和CSS基础 在开始前端

    2024年02月08日
    浏览(8)
  • 前端桌面应用开发实践:Electron入门指南

    随着互联网的快速发展,前端开发不再局限于网页应用,而是逐渐涉及到桌面应用的开发。Electron作为一种流行的前端桌面应用开发框架,为开发者提供了一种快速构建跨平台桌面应用的方式。本文将介绍Electron的基本概念和使用方法,并通过一个简单的示例来说明其开发实践

    2024年02月11日
    浏览(15)
  • 如何为前端编写单元测试?从这篇入门指南开始学习!

    前言 对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章让你对单元测试有一个初步认识

    2024年02月01日
    浏览(12)
  • 【前端Vue】Element UI:一站式前端组件库的简单入门指南

    在现代的前端开发中,UI组件库扮演着至关重要的角色。它们为开发者提供了一套可重用的UI组件和工具,使得构建复杂的用户界面变得更加高效和便捷。在这篇文章中,我将向大家介绍Element UI,这是一个功能强大且易于使用的前端组件库。我将简单探讨Element UI的组件用法和

    2024年02月11日
    浏览(8)
  • 【前端知识】JavaScript——Symbol类型

    什么是Symbol(符号)类型? ​ Symbol是原始值,且Symbol实例是唯一、不可变的。Symbol的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险。Symbol创建唯一记号,进而用作非字符串形式的对象属性。 如何使用Symbol? 全局符号注册表 使用符号作为属性 常用内置符号

    2024年02月16日
    浏览(6)
  • 2023年的深度学习入门指南(2) - 给openai API写前端

    上一篇我们说了,目前的大规模预训练模型技术还避免不了回答问题时出现低级错误。 但是其实,人类犯的逻辑错误也是层出不穷。 比如,有人就认为要想学好chatgpt,就要先学好Python。 其隐含的推理过程可能是这样的: TensorFlow需要使用Python PyTorch需要使用Python Scikit-Learn需

    2023年04月08日
    浏览(11)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(9)
  • 大数据基础技能入门指南

    本文介绍了数据工作中数据基础和复杂数据查询两个基础技能。 背景 当下,不管是业务升级迭代项目,还是体验优化项目,对于数据的需求都越来越大。数据需求主要集中在以下几个方面: 项目数据看板搭建:特别是一些AB实验的看板,能直观呈现项目的核心数据变化 数据

    2024年02月05日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包