JavaScript基础语法与数据类型介绍

2024-09-29 03:49:54

一、JavaScript语法

1、区分大小写

ECMAScript中的一切，包括变量、函数名和操作符都是区分大小写的。例如：text和Text表示两种不同的变量。

2、标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式组合起来的一个或多个字符：

a、第一个字符必须是一个字母，下划线(_)或一个美元符号($).
b、其他字符可以是字母、下划线、美元符号或数字。
c、不能把关键字、保留字、true、false和null作为标识符。

例如：myName、Book123等。

3、注释

ECMAScript使用C风格的注释，包括单行注释和块级注释。

示例：

//单行注释
/*
*这是一个多行
*注释
*/

4、变量

ECMAScript的变量是松散类型的，所谓松散类型就是用来保存任何类型的数据。定义变量时要使用var操作符（var是关键），后面跟一个变量名（变量名是标识符）
var box 声明变量
var box=100 声明变量并且初始化

二、JavaScript的数据类型

ECMAScript中有5种简单数据类型：Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型-Object。ECMAScript不支持任何创建自定义类型的机制，所有值都是以上6种数据类型之一。

1、Undefined类型

Undefined类型只有一个值，即undefined。
表示未定义或者定义未赋值。

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        alert(a); // 页面会报错：
    </script>
</head>
<body>
</body>
</html>

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        var box;
        alert(box);// 弹出警告框：undefined
    </script>
</head>
<body>
</body>
</html>

效果：

我们没有必要显式的给一个变量赋值为undefined，因为没有赋值的变量会隐式的赋值为undefined；而undefined主要的目的是为了用于比较，ECMAScript第3版之前并没有引入这个值，引入之后为了正式区分空对象与未经初始化的变量。

注：未初始化的变量与根本不存在的变量（未声明的变量）也是不一样的。

var box;
alert(age); // age is not defined

如果typeof box，typeof age都返回的undefined。从逻辑上思考，他们的值，一个是undefined，一个报错；他们的类型，却都是undefined。所以，我们在定义变量的时候，尽可能的不要只声明，不赋值。

var box;
alert(typeof box);//box是Undefined类型，值是undefined，类型返回的字符串是"undefined"。

2、Null类型

Null类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用（指针），而typeof操作符检测null会返回Object。
看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        var box;
        //alert(box);// 弹出警告框：undefined

        // 2、Null
        var box=null;
        alert(typeof box);
    </script>
</head>
<body>
</body>
</html>

效果：

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样。当检查null值就知道该变量是否已经分配了对象。

var box=null;
if(bod!=null){
    alert('box 对象已存在！');
}

3、Boolean类型

Boolean类型有两个值：true和false。而true不一定等于1，false不一定等于0，JavaScript是严格区分大小写的，True和False或者其他都不是Boolean类型的值。
看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        var box;
        //alert(box);// 弹出警告框：undefined

        // 2、Null
       /*  var box=null;
        a lert(typeof box); */

        // 3、Boolean
        var box=true;
        alert(box);
    </script>
</head>
<body>
</body>
</html>

效果：

注意：

虽然Boolean类型的字面量只有true和false两种，但ECMAScript中所有类型的值都有与这两个Boolean值等价的值。要将一个值转换为与其对应的Boolean值，可以使用转型函数Boolean()。

var hello='Hello World';
var hello2=Boolean(hello);
alert(typeof hello);  弹出true

上面是一种显示转换，属于强制性转换。而实际应用中，还有一种隐式转换。比如，在if条件语句里面的条件判断，就存在隐式转换。

var hello ='Hello World!';
if(hello){
    alert('如果条件为true，就执行我这条！');
}
else{
    alert('如果条件为false，就执行我这条！');
}

var box=true;
alert(typeof box);//box是Boolean类型，值是true,类型返回的字符串是boolean

4、Number

Number类型包含两种数值：整型和浮点型。
浮点数值的取值范围：Number.MIN_VALUE和Number.MAX_VALUE之间。
alert(Number.MIN_VALUE); //最小值
alert(Number.MAX_VALUE); //最大值

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        //var box;
        //alert(box);// 弹出警告框：undefined

        // 2、Null
       /*  var box=null;
        a lert(typeof box); */

        // 3、Boolean
      /*   var box=true;
        alert(box); */

        // 4、Number
        var box=45; // 整型
        var box1=45.6;// 浮点型
        alert("box的值是:"+box+","+"box1的值是:"+box1);
    </script>
</head>
<body>
</body>
</html>

效果：

注意：

Number类型除了整型和浮点型，还有另外一种类型：NaN，即非数值（Not a Number）是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数而未返回数值的情况（这样就不会抛出错误了）。比如，在其他语言中，任何数值除以0都会导致错误而终止程序执行。但在ECMAScript中，会返回特殊的值，因此不会影响程序执行。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        //var box;
        //alert(box);// 弹出警告框：undefined

        // 2、Null
       /*  var box=null;
        a lert(typeof box); */

        // 3、Boolean
      /*   var box=true;
        alert(box); */

        // 4、Number
       /*  var box=45; // 整型
        var box1=45.6;// 浮点型
        alert("box的值是:"+box+","+"box1的值是:"+box1); */
        // 特殊的Number类型:NaN
        var box=0/0; //NaN
        var box1=12/0; //Infinity 无穷大
        var box2=12/0*0; //NaN
        alert("box的值是:"+box+","+"box1的值是:"+box1+","+"box2的值是:"+box2);
    </script>
</head>
<body>
</body>
</html>

结果：

可以通过Number.NaN得到NaN值，任何与NaN进行运算的结果均为NaN，NaN与自身不相等（NaN不与任何值相等）。

alert(Number.NaN); //NaN
alert(NaN+1); //NaN
alert(NaN==NaN); //false

ECMAScript提供了isNaN()函数，用来判断这个值到底是不是NaN。isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值。

alert(isNaN(NaN)); //true
alert(isNaN(25)); //false 25是一个数值

isNaN()函数也适用于对象。在调用isNaN()函数过程中，首先会调用valueOf()方法，然后确定返回值是否能够转换成数值。如果不能，则基于这个返回值在调用toString()方法，在测试返回值。

var box={
      toString:function(){
            return '123';
         }
};

有3个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。Number()函数是转型函数，可以用于任何数据类型，而另外两个则专门用于把字符串转换成数值。

alert(Number(true));    //1，Boolean类型的true和false分别转换成1和0
alert(Number(25));      //25，数值型直接返回

var box=250;
alert(typeof box);//box是Number类型，值是250，类型返回的字符串是number。

5、String类型

String类型用于表示由零个或多个16为Unicode字符组成的字符序列，即字符串。字符串可以由双引号("")或单引号('')表示。
例如：

var box="我是字符串类型，我用双引号";
var box1='我也是字符串类型，我用单引号';

注：在某些其他语言中，单引号和双引号表示的字符串解析方式不同，而ECMAScript中，这两种表示方法没有任何区别。但要记住的是，必须成对出现，不能穿插使用，否则会出错。
例如：

// 会报错，单引号和双引号不能交叉使用
var box='我是字符串类型，我用双引号";

如果值有toString()方法，则调用该方法并返回相应的结果；如果是null或者undefined，则返回"null"或者"undefined"。

var box='字符串';
alert(typeof box);//box是String类型，值是字符串，类型返回的字符串是string。

6、Object类型

ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。

var box=new Object();

三、typeof操作符

typeof操作符是用来检测变量的返回值，为字符串类型。对于值或者变量使用typeof操作符会返回如下字符串：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript数据类型</title>
    <script>
        // 1、Undefined
        // 未定义
        //alert(a); // 页面会报错：
        // 定义未赋值
        //var box;
        //alert(box);// 弹出警告框：undefined

        // 2、Null
       /*  var box=null;
        a lert(typeof box); */

        // 3、Boolean
      /*   var box=true;
        alert(box); */

        // 4、Number
       /*  var box=45; // 整型
        var box1=45.6;// 浮点型
        alert("box的值是:"+box+","+"box1的值是:"+box1); */
        // 特殊的Number类型:NaN
 /*        var box=0/0; //NaN
        var box1=12/0; //Infinity 无穷大
        var box2=12/0*0; //NaN
        alert("box的值是:"+box+","+"box1的值是:"+box1+","+"box2的值是:"+box2); */

        // 5、String
      /*   var box="我是字符串类型，我用双引号";
        var box1='我也是字符串类型，我用单引号'; */
        // 会报错，单引号和双引号不能交叉使用
        //var box='我是字符串类型，我用双引号";

       /*  var box="我是字符串";
        box="我也是字符串";
        alert(box); */

        // typeof 操作符
        var box;
        var box1=23;
        var box2=true;
        var box3=null;
        var box4="box";
        document.write("box:"+typeof box +"<br />");
        document.write("box1:"+typeof box1 +"<br />");
        document.write("box2:"+typeof box2 +"<br />");
        document.write("box3:"+typeof box3 +"<br />");
        document.write("box4:"+typeof box4 +"<br />");
    </script>
</head>
<body>
</body>
</html>

结果：

注意：

typeof操作符返回的都是字符串。

typeof操作符可以操作变量，也可以操作字面量。虽然也可以这样使用：typeof（box），但是，typeof是操作符而非内置函数。

PS：函数在ECMAScript中是对象，不是一种数据类型，所以，使用typeof来区分function和Object是非常有必要的。

到此这篇关于JavaScript基础语法与数据类型的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript七大数据类型详解

目录前言: 详细介绍: 练习: 总结前言: 各大语言都会有基本类型如python,java,c系列等,基本类型的存在是不可或缺的,它就好似我们生活中算数中的整数,汉字中的中文,它就是来表示这些的,想想还是蛮重要的,那么js有常见的五大基本数据类型有:String,Number,Boolean,Undefined,Null,还有两个常见复杂类型Object,Symbol. 详细介绍: 序号类型昵称范围常见方法介绍 1 String 字符串 .toString() 将对象转换为Stri
js中基础的数据类型详解

目录六种数据类 1.String 2.Number 3.Boolean 4.Null和undefined 5.强制类型转换 6.将其他的数据类型转换为Number 7.将其他的数据类型转换为Boolean 总结六种数据类数据类型指的是字面类型在JS中有六种数据类型 String 字符串 Number 数值 Boolean 布尔值 Null 空值 Undefined 未定义 Object 对象其中String.Number.Boolean.Null.Undefined 属于基本数据类型
JavaScript的引用数据类型你了解多少

目录三种传递 1.Object 1.创建对象语法 2.普通对象在内存中的存储方式 2.Array 1.创建数组语法 2.数组的在内存中的存储方式 3.数组常用方法 1. concat:用于拼接为新数组 2. join():用于连接数组的每个元素成为字符串 3. reverse:翻转数组顺序 4. indexOf:查找某个元素在数组中首次出现的索引位置,找不到就是返回-1 5. lastIndexOf:查找某个元素在数组中尾次出现的索引位置,找不到就返回-1 6. sort正序排列 7. sor
JS入门必备之八种数据类型

目录一.开门见山二.动态数据类型 (1)字符串string (2)数值number (3)布尔boolean (4)null和undefined (5)symbol (6)对象object 三.基本数据类型与引用数据类型区别 3.1 声明变量时不同的内存分配 3.2 正是因为内存分配不同,在复制变量时结果也不一样 3.3 参数传递不同总结一.开门见山在ES5的时候,我们认知的数据类型确实是 6种:Number.String.Boolean.undefined.object.Null E
JavaScript的八种数据类型

目录一.前言二.动态数据类型 2.1 字符串string 2.2 数值number 2.3 布尔boolean 2.4 null和undefined 2.5 symbol 2.6 对象object 三.基本数据类型与引用数据类型区别 3.1 声明变量时不同的内存分配 3.2 正是因为内存分配不同,在复制变量时结果也不一样 3.3 参数传递不同一.前言在ES5的时候,我们认知的数据类型确实是 6种:Number.String.Boolean.undefined.object.Null ES
JavaScript的基础语法和数据类型详解

目录引入JavaScript 1.内部标签 2.外部引入基础语法数据类型 number 字符串布尔值逻辑运算比较运算符数组对象流程控制 Map和Set iterator 总结引入JavaScript 1.内部标签 <script> alert("hello world"); </script> 2.外部引入 <script src="js/abc.js"></script> 基础语法定义变量 &l
一起来看看JavaScript数据类型最详解

目录 01-变量的数据类型 02-简单数据类型之数字型Number 03-isNaN 04-简单数据类型之字符串型 05-转义符案例-弹出网页警示框 06-字符串拼接 07-字符串拼接加强 08-显示年龄案例 09-简单数据类型之布尔型Boolean 10-获取变量数据类型 11-字面量 12-转换为字符串型 13-转换为数字型 14-计算年龄案例 15-简单加法器案例 16-转换为布尔型 17-扩展阅读之编译语言和解释语言的区别 18-拓展阅读之标识符.关键字.保留字 19-课后作业总结 0
javascript基础之数据类型详解

目录 1.数据类型 1.1 为什么需要数据类型 1.2 变量的数据类型 1.3 数据类型分类 2. 简单数据类型(基本数据类型) 2.1 数字型Number 1. 数字型进制 2.数字型范围 2.2 字符串型 String 1.字符串转义符 2.字符串长度 2.3 布尔型 Boolean 3.数据类型转换 3.1转换为字符串 3.2 转换为数字型隐式转换 3.3 转换为布尔型总结 1.数据类型 1.1 为什么需要数据类型在计算机,不同的数据所占的存储空间是不同的,为了便于把数据分成所需内存
JavaScript基础语法与数据类型介绍

目录一.JavaScript语法 1.区分大小写 2.标识符 3.注释 4.变量二.JavaScript的数据类型 1.Undefined类型 2.Null类型 3.Boolean类型 4.Number 5.String类型 6.Object类型三.typeof操作符一.JavaScript语法 1.区分大小写 ECMAScript中的一切,包括变量.函数名和操作符都是区分大小写的.例如:text和Text表示两种不同的变量. 2.标识符所谓标识符,就是指变量.函数.属性的名字,或者函
javascript基础语法——全面理解变量和标识符

关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符定义标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie
JavaScript基础语法之js表达式

本文将详细介绍javascript表达式,表达式分为原始表达式和复杂表达式.一般,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression). 原始表达式(primary exression) 原始表达式是表达式的最小单位--它不再包含其他表达式.javascript中的原始表达式包括this关键字.标识符引用.字面量引用.数组初始化.对象初始化和分组表达式 PrimaryExpres
温习Javascript基础语法之词法结构

前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫:而说它复杂,是因为要真正掌握它则需要数年时间.实际上,前端工程师很大程度上就是指javascript工程师.前端入门容易精通难,说的是前端,更指的是javascript.本文是javascript基础语法的第一篇--词法结构与java关系关于javascript有这样一个说法,java和javascript的关系是雷锋和雷锋塔的关系.那到底有没有关系呢 javascript最开始的名字
整理Javascript基础语法学习笔记

1.什么是变量字面意思:变量是可变的量: 编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 2.表达出你的想法(表达式) 表达式与数学中的定义相似,表达式是指具有一定的值.用操作符把常数和变量连接起来的代数式.一个表达式可以包含常数或变量. 字符串表达式:"I" + "love" + "you" + mychar //编写串表达式,值为字符串. 数值表达式:nu
ES6基础语法之模块化介绍

ES6 引入了模块化, ES6 的模块化分为导出(export) @与导入(import)两个模块. ES6模块化特点: (1)ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;. (2) 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等. (3) 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域. (4) 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取. 一.export
ES6基础语法之函数介绍

一.函数参数的扩展 ES6支持参数的默认值: function fn(name,age,sex="男") { console.log(`大家好,我是${name},性别${sex},今年${age}岁!`); } fn("刘德华",45); //大家好,我是刘德华,性别男,今年45岁! 传递undefined,取默认值: function fn(name,sex="男",age) { console.log(`大家好,我是${name},性别${
JavaScript基础语法让人疑惑的地方小结

复制代码代码如下: /* JS基础语法中,几个比较容易让人疑惑的地方. */ /* == === */ function de() { var ab = 25; //数值 var ba = "25"; //字符串 if (ab == ba) { //==,会先转换,后比对. //alert("b"); } if (!(ab === ba)) { //===不会转换,而进行直接比对,ab是数值类型数据,而ba是字符串类型数据 //alert("a"
javaScript基础语法介绍

简介 JavaScript是一种脚本语言. (脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.常见的脚本:批处理脚本.T-SQL脚本.VBScript等.) HTML只是描述网页长相的标记语言,没有计算.判断能力,如果所有计算.判断(比如判断文本框是否为空.判断两次密码是否输入一致)都放到服务器端执行的话网页的话页面会非常慢.用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算.判断.JavaScript就是一种在浏览器端执