web前端(3)：了解JavaScript(数据类型及其互相转换+运算符+条件和循环)

张烫麻辣亮。

已于 2023-02-15 22:20:49 修改

阅读量333

点赞数 1

分类专栏： # -- [WEB前端基础教程] 文章标签： JavaScript

于 2019-08-15 22:04:49 首次发布

侵权必究

本文链接：https://blog.csdn.net/qq_40558166/article/details/99656989

版权

-- [WEB前端基础教程] 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

请添加图片描述

文章目录

一、什么是JavaScript
二、js的引入方式
三、js常见的3种输出方式
四、js的数据类型和数据类型转换
五、js中的数组
六、js的运算符
七、条件语句
八、循环语句

一、什么是JavaScript

1.JavaScript简介

javascript简称js;
javascript是一个客户端脚本语言;
是运行在客户端，由浏览器内核来解析;
js代码是从上往下执行

2.JS特点

弱类型语言
解释型语言
基于对象（有别人给封装好了的方法）
安全性高
兼容性问题

二、js的引入方式

JS的3中引用方式使用：

行间事件：卸载标签内部的
外链式：引用外部js文件
嵌入式：通过script标签将js代码嵌入到html文档

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js引入方式</title>
</head>
<body>
	 <!-- ----------------行间事件------------------- -->
	 <a href="JavaScript:alert('欢迎来到王者荣耀')">点我</a>

	 <!-- ----------------嵌入式------------------------>
	     <!--   -->
	     <script>
	     	alert('我是嵌入式')
	     </script>


    <!-- -------------------外链式-------------- -->
     	 <script src="./js/1.js">
     	 	alert('我不会被执行，因为引入了外链式')
     	 </script>
</body>
</html>

1.js

alert('我是外链式')

三、js常见的3种输出方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常见的输出方式</title>
</head>
<body>
	<script type="text/javascript">
		alert('将信息输出的弹出框')
		console.log('将信息输出到浏览器的控制台')
		document.write('在页面中显示信息')
	</script>
</body>
</html>

四、js的数据类型和数据类型转换

1.js的数据类型

数据类型	举例或定义方法
数值类型	数字
字符串	用引号引起的
布尔	boolean包括true和false，全部小写
对象类型	类似字典
函数类型	function fun（）{}
未定义	undefined

2.查看数据类型

查看方法	作用或使用
typeof（）	直接查看数据类型即可typeof（数据）
instanceo（）	① 对于基本数据类型，只有通过new方式创建出来的对象，才能被正确检测② instanceof检测是否是指定的构造函数的实例

3.代码举例

// ------------------六种数据类型---------------------
//数值类型Number
var num1=1;
var num2=2;

// 检测数值类型
var res=typeof(num1);
console.log(res);

// 字符串类型String
var str1='123';
var str2="123";

// boolean
var bool=true; //false

//对象类型Object 
var obj={
name:'小乖乖',
age:'12',
say:function(){
	alert('我是小乖乖');
	}
}

var arr=['1','2','3']
console.log(typeof(arr));
console.log(obj);//类似列表但属于对象类型

console.log(null,typeof(null));

// 函数类型function
var func=function(){
console.log('哈哈哈哈');
}
console.log(func);

// 未定义类型
var v=undefined;
console.log(v,typeof(v));

var x;//初始时候不给值，默认是此类型
alert(x,typeof(x));
console.log(x,typeof(x));


// ------------------instanceof--------------------------
// 对于基本数据类型，只有通过new方式创建出来的对象，才能被正确检测
// instanceof检测是否是指定的构造函数的实例
var a=new Number(1);
alert(a instanceof Number);//true
var b=5;
alert(b instanceof Number);//false

4.数据的类型转换

//-------------------Number()将字符串强制转换成数值------------
//纯数字
var str1='1234';
var res=Number(str1);
console.log(res,'类型为',typeof(res));

// 数字+字母（只有字符串中有一个非数字字符，则返回nan-no a number）
var str2='123abc';
var res2=Number(str2);
console.log(res2,'类型为',typeof(res2));

// 小数（只能有一个小数点）
var str3='1.23';
var res3=Number(str3);
console.log(res3,'类型为',typeof(res3));

// -------------------parseInt(),parseFloat()------------
/* 非强制转换，从左到右，若第一个数字不是数字则返回nan，否则返回数字部分，遇到非数字不再查找*/
console.log(parseInt(str1),typeof(parseInt(str1)));
console.log(parseInt(str2),typeof(parseInt(str2)));
// parseFloat会比parseInt多检测一个小数点
console.log(parseFloat(str3),typeof(parseFloat(str3)));


// ------------------转换成Boolean()------------------------
var num1=0;//false
var num1=NaN;//false,虽然为数字类型，但是不是一个数字
var num1='';//false	
var num1=null;//false
// var num1=undefined;//false
// var num={};//true,因为继承了object
console.log(Boolean(num1));

在这里插入图片描述

五、js中的数组

函数	作用
var arr=new Array();	通过系统自带的方法创建数组
var arr=[‘a’,‘b’];	创建数组，推荐使用此方法
arr.push(‘c’,‘d’);	在原数组进行尾部添加，无返回值
b=arr.pop();	尾部弹出，返回弹出元素
arr.shift();	从前边插入元素,在原数组进行改变
数组.splice(开始位置,删除数量,删除位置插入的参数1,删除位置插入的参数2…)	若只传入一个参数，是从此位置删到最后。会改变原数组，而且会返回删除的参数

//数组的定义
//1.使用系统内置的Array()创建一个数组
var arr=new Array();
//2.直接定义
var arr=['a','b'];

//通过索引操作数组
// arr[0]='A';
// arr[10]='c';//不会报错，但是前边没定义的都是空
// console.log(arr[9]);//undefined
// console.log(arr);

//内置方法
//1.从尾部添加push(),在原数组进行改变，无返回值
arr.push('c','d');	
console.log(arr);

//2.尾部弹出，返回弹出元素
b=arr.pop();
console.log(b);

//3.从前边插入元素,在原数组进行改变
arr.unshift('A','B');
console.log(arr);

//4.只删除最前边第一个元素,有返回值(删除的数),在原数组进行改变
arr.shift();
console.log(arr);

//5.通过索引操作的内置方法
// 数组.splice(开始位置,删除数量,删除位置插入的参数1,删除位置插入的参数2...)
//若只传入一个参数，是从此位置删到最后。会改变原数组，而且会返回删除的参数
c=arr.splice(1,2,3,4);
console.log(c);//["a", "b"]
console.log(arr);//["B", 3, 4, "c"]

六、js的运算符

运算符名	运算符
算数运算符	+， -， * ，/ ，++， –
赋值运算符	=， +=， -=， *=， /=， %=
比较运算符	== ， != ， >=， >， <= ，<， = = =(全等) ，！==
逻辑运算符	&&（和），两条数线（或），！（非）

//1.算数运算符 + - * / ++ --
var a=1;
a++;//自增1	   算完表达式再+1            类似于a+=1
++a;//自增1   	先+1再运算
--a;//自减1                  类似于a-=1
console.log(a);

//2.字符串运算，拼接(注意优先级)
var res=1+'啦啦啦';
console.log(res);//字符串拼接

//练习
var res=1+1+'a';
console.log(res);//2a
var res=1+'a'+1;
console.log(res);//1a1

//3.赋值运算符 = += -= *= /= %=

//4.比较运算符 ==，!=， >=， >， <= ，<， ===(全等) ，！==
console.log(1=='1');true，因为会自动隐私转换将'1'转为1
console.log(1==='1');false，判断的是值和类型
console.log(NaN==NaN);永不相等false

//5.逻辑运算符 &&和，||或，！非

七、条件语句

<body>
	<script>
	//单分支
		var a=5;
		if(a>6){
			console.log('a>6');
		}
		else{
			console.log('a<6');
		}

	//多分支
		/*
			if(条件1){
				满足条件1代码；
			}else if(条件2){
				满足条件2代码；
			}
			...
			else{
				此条件可加不可加，不满足其他会执行;
			}
		 */
		

	//switch case----当判断成功后，后边的条件不在判断执行,使用的是===比较
		var num=5;
		switch(num){
			case 1:console.log('1');break;
			case 2:console.log('2');break;
			case 3:console.log('3');break;
			case 4:console.log('4');break;
			default:console.log('都不满足');
		}
	</script>
</body>

在这里插入图片描述

八、循环语句

<body>
	<script type="text/javascript">
	//------------1.while循环---------------------
		var num=0;
		while(num<10){
			console.log(++num);
		}

	//----------2.for in循环(一般遍历对象)------------
		var obj={name:'1',age:12,gender:'男'}
		for(i in obj){
			console.log(i);//输出键
			console.log(obj[i]);//输出值
		}

		var arr=['a','b'];
		for(i in arr){
			console.log(i);//输出索引
			console.log(arr[i]);//输出值
		}

	//-----------3.for循环-------------------------
		var arr=['a','b'];
		console.log(arr.length);//求长度

		for(var i=0;i<3;i++){
			console.log(arr[i]);
		}


	//-------------4.do while循环-----------
		//先执行一次再判断
		var a=0;
		do{
			console.log(a);
			a++;
		}while{a<10}
	</script>
</body>

张烫麻辣亮。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
web前端(3)：了解JavaScript(数据类型及其互相转换+运算符+条件和循环)

1.JavaScript简介javascript简称js;javascript是一个客户端脚本语言;是运行在客户端，由浏览器内核来解析;js代码是从上往下执行2.JS特点弱类型语言解释型语言基于对象（有别人给封装好了的方法）安全性高兼容性问题。
复制链接

扫一扫