[JavaScript知识库] JavaScript基本语法，数据类型

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript基本语法，数据类型 -> 正文阅读

[JavaScript知识库]JavaScript基本语法，数据类型

Java学习打卡：第86天

javaWeb — Javascript

Java养成计划（打卡第85天)

JavaScript基本语法

昨天分享了CSS和JavaScript的引入到HTML的方式，有异曲同工之妙

标识符和关键字

标识符的命名规则和命名规范和Java是相同的

标识符：就是名字，JavaScript中的标识符包括变量名、函数名、参数名等；合法的标识符第一个字符必须是字母、下划线或者美元符号；但是不能域JavaScript的关键字和保留字重名；可以使用Unicode转义序列，比如a用\u0061表示

var str = "hello,cfeng"

关键字：JavaScript内部使用的一组名字或命令，有特定的用途；包括基本的控制命令for if while
- 也包括特殊的：debugger，function，var，typeof
保留字： JavaScript的预备使用的命令，包括java中的volatile，interface，import等

区分大小写和调试

JavaScript严格区分大小写，hello和Hello是完全不同的；这和mysql是不相同的

JS的调试要麻烦一点，主要的调试手段是

使用alert()，再某个位置弹出变量的值，看是否符合预期【这和其他语言输出变量是一样的调试手段】
采用浏览器自带的插件F12，主要的面板就是查看器，控制台和网络

JS变量弱类型值决定var

在Java中变量的声明直接数据类型 + 标识符即可；赋值采用=，一行可以声明多个变量；java语言是一种强类型语言，属于编译性语言，Java在变量类型在编译阶段确定类型，也就是程序还没有运行的时候，变量的数据类型就已经确定，并且在变量的整个生命周期，数据类型不可变 variable

JavaScript是一种弱类型语言，没有编译阶段，声明变量的方式就是var，比如var a = 100；这里就是赋值，一行也可以声明多个变量，比如var a,b,c; 这里的a，b，c会系统默认赋值undefined；undefined是一个具体的值-----需要注意，如果var a = "undefined"和上面的效果可能不一样，但是这里是字符串，上面的undefined没有数据的类型

注意： JavaScript中声明变量不需要指定数据类型，直接var；程序运行的过程当中，赋值类型决定变量的类型，并且变量的类型是可变的

var k = 100;
alert(k);
k = true;
alert(k);
k = "hello cfeng";
alert(k)

局部变量和全局变量

浏览器的运行也需要内存，分配的变量就在内存当中

js中的全局变量是指在函数体之外声明的变量，全局变量会在浏览器打开的时候分配空间，直到浏览器关闭的时候才会销毁

局部变量是指在函数体内部声明的变量，局部变量在函数调用的时候分配空间，函数执行结束的时候就销毁，内存释放内存

<body>
    <script type="text/javascript">
        sayhello();                 //这里可以执行，因为js中声明的优先级高
    	var username = "zhangsan";
        function sayhello() {
            var username = "lisi";
            alert("welcome,"+username);  //alert中是一个string，使用的还是和java中一样的字符串拼接
        }
        alert("hello,"username)
    </script>
    <input type="button" value="欢迎",οnclick="sayhello()"
</body>

这里执行的时候输出的是lisi，因为局部变量在局部中要高于全局变量；但是下面的alert输出的就是zhangsan了，因为这个局部变量不可见，没有调用就不会执行

不加var默认全局

之前说过，在方法体内部声明的变量是局部变量，在方法体外部声明的变量是全局变量。但是在JS中有一点特殊的是，可以不用var修饰变量

直接i = 1之类的；但是不加修饰的变量，就算定义在方法体中，也是全局变量

但是不能直接写一个方法名【也即是必须要手动赋值，不能默认赋值】

function sum(a,b) {
    k = 100;
    alert(a + "," + b + "," + k);  //这里的k就是一个全局变量
}

js函数

c语言中有函数的概念，java中有方法的概念

java中方法定义的格式为：【修饰符列表】返回值类型方法名(形式参数列表){方法体}

在JS中的函数的定义的语法格式为：

function 函数名(形参列表){方法体}

其实这里和上面的弱类型语言有关，因为语句不会具体指明变量的数据类型，那么函数也只好模糊返回值类型了

并且这里的形参列表只需要写变量名就可以了，因为没有指定数据类型

function sum(a,b) {
    alert(a +"," + b);
}

//第二种构造函数的方式为
sum = function(a,b) {
}

方法名 = function(参数列表){方法体}

JavaScript很松散，很强大，所以想传入就传入，就不需要重载了

函数必须调用才会执行，alert内置，也是要使用的时候才会执行

函数的调用就更松散了，不需要遵循形参列表

sum();   //这样就算调用函数了
sum(1);
sum(1,2);
sum(1,2,3);

//执行的效果是不一样的，因为js可以灵活使用列表
第一个的执行结果就是 undefined，undefined
第二个的执行结果是    1，undefined
第三个执行结果是      1，2
第四个的执行结果是    1，2

这里想形参列表随意，只要方法名指明就可以

执行的时候如果传入的变量少，系统赋值undefined，变量多了，就取前n个变量，多的直接舍去

调用函数可以通过行间事件，事件句柄赋值的时候写入函数

onclick = “sum(“张三”,“李四”)”

js中函数声明优先级高

在C中，如果在之前没有函数的声明，那是不能调用函数的；但是js不同，js的声明的优先级更高，在script标签中会先执行声明，才会执行调用语句，所以调用语句是可以放在声明之前的

JS不需要重载

因为js中没有指明数据类型，所以一个函数本身就可以多次执行； js中不需要重载的概念，声明类似于同一个地方给放入，后来者直接覆盖，前面的就没有了

当同名的函数出现的时候，以最后出现的函数为准，之前的同名函数消失

所以在写函数名的时候要小心一点，不要把之前的函数给干掉了。

数据类型

js中声明变量不需要指定数据类型。要了解JS中的各种数据的存储类型

ES6之后引入了两种数据类型：symbol和Bigint

undefined ：系统默认的赋值
Number ：所有的数字类型都是，java中的整形和浮点型都是
String : 字符串类型的数据都是String类型的
Null ： null代表的是空，比如 var a = null；但是 typeof a 为Object
Boolean ：就是java中的布尔类型
Object 【对象类型】这也是对象类型比如 var a = new Object() 这里的a就是对象类型

前面几种为js的数据类型；ES6之前有6种类型，ES6之后有8种类型

获取变量的数据类型 typeof 方法的名也可，function

typeof可以在JS代码的运行过程种，动态获取变量的数据类型。typeof的语法格式： typeof 变量名

运算结果为6种字符串结果： “number” “undefined” “boolean” “object” “function”

注意JS种判断相同使用的是双等号，没有equals方法 == ；而在mysql中使用的是单等号，Java种使用equals，双等号会判断地址

比如给一个例子：

要求计算两个数字的和，要求输入的是数字才计算，也就是number类型

function sum(a,b) {
    if(type a == "number" && type b == "number") {
        alert(a+b);
    }
    //提示输入的不是数字
    alert("sorry,弹出的都是数字才可以!")
}

当没有手动赋值，系统自动赋值用var声明的变量

console.log(……) 输出信息到控制台

console控制台，在js中，可以使用console.log输出信息到控制台，就可以不用太多弹窗来调试了

var o;
console.log(o);             //undefined
var a = 3.14;
console.log(type a);
var b = 100;
console.log(type b);
var c = "cfeng";
console.log(type c);
var d = null;                  ------结果为Object
console.log(type d);
var e = new Object();
console.log(type e);
var f = false;
console.log(type f);

console.log(type sum);    //function

Undefined 原始类型

该类型只有一个指undefined，当一个变量没有手动赋值的时候，系统默认赋值Undefined。

之前提到过，手动赋值undefined是字符串类型，而默认的才是undefined类型

Null 原始类型

该类型也是原始类型，并且只有一个值null,并且类型的type的结果是Object

Number 原始类型

和java不同，不是看运算符两边是否为Double；比如10/3在Java中为3；但是JS中没有指定数据类型，就是原来的数据，不会自动给转换，这里就还是3.33333333;

Number类型包括所有精度的数字，Number类型的值包括所有的数，比如

在JS中，+ 可以可以是字符串拼接，也可以是算术符号+

NaN---- not a Number 表示不是数字，但是它是一个数字类型的值；当一个数学表达式的结果本来应该输出一个数字却无法返回数字的时候，返回的是NaN

这里举一个例子方便理解

var result = 100/"中";
console.log(result);  //这里输出的结果就是NAN，认为是一个数字类型的不是数字
//JS检测到了算术符号/，所以认为应该是数字、
但是字符串的话，就会识别链接的是否为字符串，如果是，那么输出的就是字符串,不是，那就是Number

Infinity（无穷）代表的是无穷大，比如100/0 在Java中这种是会报错的，但是JS中是支持的

var result = "100/0";
console.log(result);      //Infinity

在JS中，有一个函数为isNaN()，值为true代表为不是数字，为NaN；值为false代表是数字；判断数据是否是一个数字【不仅仅是Number类型】

该函数会先尝试将数据做类型转换，如果转换成功，那就是false

isNaN(true);   //得到的结果也是false  代表true也是数字，其实就是1

所以用isNaN比上面的type就要更符合实际

function sum(a,b) {
	if(isNaN(a) || isNaN(b)) {
	alert("sorry,please input number");
    }
    else{
		alert(Number(a) +Number(b));  //要加Number，不然就可能为字符串拼接
    }
}

注意，这里有点绕，但是是数字就返回false

Number中还有一个重要的函数就是Number() ;这个函数和NaN差不多，这个可以将不是数字的数据转化为数字；当数据实在无法转化为一个数字，那么就会转化为NaN

Number('123') = 123;

另外一个函数就是parseInt() 这个函数可以将字符串类型的数字转化为数字并且只取整数位，不会四舍五入

console.log(parseInt('123.897'));
//这里的转化结果为123
该函数的神奇之处是它是识别的小数点，小数部分是自动忽略的，所以可以写本不能转换成数字的数据
比如123.34呵呵  == 123

但是因为要识别整数部分，所以前面不能有不能转的数据
呵呵123.34 == NaN

还有Math类提供了很多函数，比如向上取整ceil Math.ceil

console.log(Math.ceil(123.001));    输出结果为124

NaN，null ，undefined区别 == 和=== 的区别

在讨论这个点之前，先来讨论一下 == 和 === 的区别？

JS中支持===， == 是比较两个变量的值是否相等；等同运算符

===是不仅比较两个变量的值是否相等，还会比较两个变量的数据类型是否相等，全等运算符

var v1 = true;
var v2 = 1;
console.log(v1 == v2);   //输出位true，因为隐式转换后二者的值相等 类似java的equals
console.log(v1 === v2);   //输出位false，因为二者的数据类型不同

NaN是Number类型，原始类型
null是原始类型，但是typeof的结果是Object
undefined 原始类型

console.log(null == NaN);        //false
console.log(null == undefined);  //true
console.log(undefined == NaN);  //false

undefined和null的值是等同的

这里的结果表明，null和NaN的值不等，但是null和undefined的值等同；NaN不代表没有，它代表有，但是不是一个数字；而另外两个都代表没有，所以值是等同的；但是用全等===那就是false，因为三者的类型都不同

Boolean类型

boolean类型属于原始类型，只有两个值true和false，该类型有一个函数为Boolean(),可以将不是boolean类型的数据转化为布尔类型的数据

Boolean(NaN);  flase
Boolean("abc")   true   //只有空串为false
Boolean(Infinity)        true  //无穷，不是0
Boolean("")        false
Boolean(0)       false
Boolean(undefined) false
Boolean(null)  false

//只要有，结果就是true

Boolean函数在JS中会隐式调用，不需要专门调用

比如if和while中就可以隐式调用

String

String类型也是原始类型，这和java是不同的。在JS中定义字符串的两种方式

var s = "zifuchaun " ; 该方式是创建要给字符串的值，是原始的数据类型
var s = new String(“zifuchuan”); 该方式使用了new，创建的是一个对象类型；可以用typeof判断

但是不管是原始类型的，或者对象类型的字符串，函数都是通用的。String类是Object的子类，这两种类型的定义方式在java中很容易见到，但是需要注意JS也是一门面向对象的语言，其中也是有class的概念的【在java中这两种都是对象，只是上面的是字面量赋值，地址指向pool，pool也在堆中，第二种以字面量的值在堆中新创建一个对象】

常用的属性和方法

lenth属性 ---- 可以获取长度

split() 拆分按照指定的字符拆分字符串
charAt() 获取指定位置的字符
indexOf() 后去某个字符串在当前字符串第一次出现的位置
concat() 字符串拼接
toUpperCase() 转化为大写
Substr() 获取子串
replace() 将字符串的指定的内容转化为指定内容，只能转换第一个，转换所有要使用正则表达式
substr(startIndex,length) 从某位开始截取后几位的字符串
substring(startIndex,endIndex) 不包括结束的下标，截取[start,end)的字符串

上面的很多方法和属性在java和mysql中都出现过，很好理解

var arr = "12-34-45-67"split("-");  //按照-拆分成了几个部分
得到的是一个数组，但是var可以接收任何类型的变量，包括数组变量
for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]); //访问数组中的元素，和java差不多 
}

可以直接在hbuilder中看到执行

20:47:04.459 123 at script.js:11
20:47:04.461 89 at script.js:11
20:47:04.476 89 at script.js:11
20:47:04.478 78 at script.js:11

执行是有时间先后顺序的，尽管这里很短

Object 对象类型 prototype动态扩展属性和方法

在JS中内置了一个类型Object，是所有类型的基类；在JS中定义的类型，没有特殊的说明，那就说明该类继承Object

Object中有很多通用的属性和方法

prototype 原型这个属性可以给对象动态扩展属性和方法,这个要结合JS的第二种函数的声明方法

Object.prototype.doSome = function() {
	alert("test");
} //后期给Object类扩展一个方法doSome

Object.prototype.username = "zh";   		//后期给Object类扩展一个username属性

调用的时候要使用对象调用  o.doSome();

doSome = function() {
	alert("test");
}

之前写函数是function name(){} 但是还有第二种方式 name = function(){}；这种声明方式结合prototype扩展类的方法/函数

在JS中也有this关键字，指代调用的当前对象，和java中的意义相同

JS中类的定义和函数完全相同

在JS中，定义的类的方式有两种：和函数的定义类似，也是使用了function关键字，注意，不是class，那是标签的属性

可以看到类的定义和函数的定义，如果不是属性，就感觉是外面一个函数套里面的函数，它们的区分就是类是要new之后才能够使用的；而函数就直接调用就可以了。

这里的形参列表就是为了便于给类的属性赋值；不然就乱套了。就类似于java的类的构造方法。

和函数的第一种类似 this指代的是调用类的当前对象，和java的构造器中的this用法相同

function calssName(形参列表){
    this.attributeName = ……;
    this.attributeName = ……;
    ……
    this.methodName = function(形参列表) {   //在类中一般使用的都是函数的第二种创建方法，统一
		//方法体
    }
    ……
}

第二中方式和函数的第二种方式类似

className = function(形参列表){
	this.attributeName = ……;
    this.attributeName = ……;
    ……
    this.methodName = function(形参列表) {   //在类中一般使用的都是函数的第二种创建方法，统一
		//方法体
    }
    ……
}

普通的函数可以直接不需要调用，类中的函数需要对象才能调用

这里可以举一个例子；在JS中创建一个员工类 //其实就是将构造方法给当成了一个外部

Employee = function(no,name,sal) {
	this.empno = no;
    this.ename = name;
    this.sal = sal;
    //方法
    this.addSal = function(increment) {
        this.sal += increment;
    }
}

var e = new Emp(12,"zhangsan",300);       //这里和之前一样，随意书写，不需要调用专门重载了。但是一定要注意不要方法名相同

//扩展Emp类的方法
Emp.prototype.getSal = function() {
	return this.sal;
}
//扩展Emp类的属性
Emp.prototype.job;

访问对象的属性，除了使用.引用之外，还可以使用中括号[]加上""的方式 e.[“属性名”]

var e = new Emp(12,"zhangsan",300);

console.log(e["sal"]);  //访问了e的sal属性
console.log(e.sal);

JS事件引入

上面基本介绍了js的所有的变量，数据类型和类的定义方法，接下来就是介绍事件，事件的运用才能让网页更加动态，事件有事件源，监听器，事件

常用的事件有如下基类

光标类型的

blur 失去焦点
focus 获得焦点

键盘类型的

keydown 键盘按下
keyp 键盘弹起

鼠标击打类型的

click 鼠标单击
dbclick 鼠标双击

鼠标类型的

mousedown 鼠标放下
mouseover 鼠标经过
mouseout 鼠标离开
mouseup 鼠标弹起

表单类型的

submit 表单提交
reset 表单重置

其他类型

select 文本被选中
change 下拉列表选中项改变，或者文本域中的内容改变
load 网页加载完毕

接下来会解析各种事件的用法~🌳

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-04 13:21:37 更:2021-12-04 13:21:40

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 7:43:36-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码