JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符

简介: JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符

一、JS开发环境的搭建

       JavaScript 开发环境分为浏览器端和服务器端。所谓浏览器端就是 JS 代码通过浏览器自带的 JS 解释器来执行,典型代表就是五大浏览器:谷歌、火狐、edge、safari、欧朋。浏览器端执行需要创建一个 .js 文件和一个 .html 文件,然后将 .js 文件嵌入到 .html 文件中。


<script src="01.js"></script>

嵌入之后用浏览器打开.html文件即可。


       服务器端则需要用到 Node.js,它是运行在服务器端的开发环境。需要使用时下载安装,下载地址 www.nodejs.org,执行方式也较为简单快捷,只需在命令提示符 cmd 下输入:node 空格  然后拖拽要运行的文件。如下:

1.png



那么,如何检测自己是否安装Node了呢?


在cmd命令提示符下输入node -v;

2.png



如果显示出版本号,则表示Node已成功安装。


二、变量和常量

       变量是存储数据的容器;常量同变量一样用于存储数据,但常量声明以后不允许重新赋值。


       声明变量使用关键字var,声明常量使用关键字const。示例:


//变量声明
var x = 1;//表示在内容中开辟一块空间并命名为x,把1保存至这个空间中
var y = 2;
var ename = '张三';//使用字符串时需要加引号
//常量声明
const pi = 3.14;

三、数据类型

       五大原始类型:数值型、字符串型、布尔型、未定义型、空


数值型 number,包括二进制、八进制和十进制。


var n1 = 10;//10进制
var n2 = 012;//8进制
var n3 = 0xa;//16进制
var n5 = 3.1415E+2;//浮点型

字符串型 string,被引号包含的数据即为字符串。

var str1 = 'abc';
var str2 = '8';

布尔型 Boolean,只有两个值:true、false,通常用于保存只有两个状态的数据,例如是否在线、是否登录、一些运算符的结果等。


未定义型 undefined,只有一个值 undefined,代表一个空值,例如声明了变量未赋值。


空 null,只有一个值 null,类型为 object,通常结合对象一起使用


检测数据类型需要用到 typeof,使用方法如下:


var p = null;//定义一个变量为空
console.log(p,typeof p);//打印并用typeof检测数据类型,显示为null

四、数据类型的转换

首先是隐式转换,它是运算过程中自动产生的数据转换,其实是自动调用了Number函数


(1)数字+字符串   数字转换为字符串后拼接


(2)数字+布尔型   布尔型转换为数字,true--1,false--0


(3)布尔型+字符串   布尔型转换为字符串后拼接


(4)undefined+数字  undefined转为NaN


(5)减乘除时,数据自动转为数值


var n1 = 2 + '3';//23
var n2 = 2 + true;//3
var n3 = 'zxc' + false;//zxcfalse
var n2 = '3' - 1;//2
var n3 = '2' * true;//2

第二个是强制转换,需要用到函数


(1)强制转换为数值型 Number( )


var n1 = Number("1"); //1
var n1 = Number(true); //1
var n2 = Number(false); //0
var n3 = Number(undefined); //NaN
var n4 = Number(null); //0
var n5 = Number("1a"); //NaN

(2)强制转换为整型 parseInt( ) ,强制将字符串和小数转为整型


var p1 = parseInt("3.14"); //3
var p2 = parseInt("6.18a"); //6
var p3 = parseInt("a6.18"); //NaN
var p4 = parseInt(5.9); //5

(3)强制转换为浮点型 parseFloat( ) ,强制将字符串转换为浮点型


var f1 = parseFloat("3.14"); //3.14
var f2 = parseFloat("6.18a"); //6.18
var f3 = parseFloat("6a"); //6
var f4 = parseFloat("a6.18"); //NaN

(4)数值和布尔型强制转为字符串 toString( )


var f1 = parseFloat("3.14"); //3.14
var f2 = parseFloat("6.18a"); //6.18
var f3 = parseFloat("6a"); //6
var f4 = parseFloat("a6.18"); //NaN

五、运算符

       在学习运算符之前,先来了解以下“表达式”的定义:由数据本身或者由运算符连接的操作数据组成的形式称为表达式,也就是说,运算符所连接的数据均称为表达式。


1. 算数运算符

       即我们平常所用的加(+)、减(-)、乘(*)、除(/),还有取余(%)、自增(++)、自减(--)。加减乘除以及取余较为简单,不做探讨。通过一组代码来理解自增和自减:


var a2 = 5;
var a3 = a2++;//先将a2的值赋给a3,再自增
console.log(a2,a3);//6 5
var a4 = 7;
var a5 = ++a4;//a4先自增,再赋值给a5
console.log(a4,a5);//8 8

       可以看出,如果自增用在变量后面,则是先使用变量的值参与计算,随后再进行变量加1;而如果自增用在变量前面,则是先将变量进行自增以后再参与计算,自减同理。


2. 比较运算符

等于“==”只比较两者的值是否相同,全等于“===”同时比较类型和值;

不等于“!=”只比较值是否不同,不全等于“!==”同时比较类型和值,有一个不等即为 true;

数字与字符串比较时,字符串转为数值;

字符串之间比较时,比较首个字符的 Unicode 码;

NaN 和任何值比较均返回 false,NaN == NaN 也为 false;

console.log(2 == '2');//== 只比较值的大小,都为2,所以显示true

console.log(2 === '2');//=== 比较值和类型,值虽然都为2,但前者为数值型,后者为字符串,所以显示false


3. 逻辑运算符

&& 逻辑与,关联的两个条件都为true,结果为true

|| 逻辑或,关联的两个条件有一个为true结果即为true  ,

! 逻辑非,取反 eg:!true = false

逻辑运算符中比较重要的为短路逻辑:


var a = 2;
a > 3 && console.log(num);

  如上代码,a 的值为 2,逻辑与判断中,第一个表达式为 a>3,而 2 不大于 3,说明此处为false,由于这里使用的运算符为逻辑与 &&,只有前后两个条件都为 true 时整体才为 true,所以第二个表达式就没有 必要再运行了,此时就是发生了短路逻辑。换句话说,短路逻辑的看重点就是在于是否执行第二个表达式。


4. 位运算符

       模拟计算机底层的运算,先将数据转为2进制进行运算,运算结束后再将结果转回10进制


& 按位与,上下两位都是1,结果为1,否则为0;

| 按位或,上下两位有一个1则结果为1;

^ 按位异或,上下两位不同为1,相同为0;

>> 按位右移,删除末尾的位数(原基础上除以2再取整);

<< 按位左移,在末尾补0(原基础上乘以2)。

//按位与
console.log(3 & 5);//011 & 101 == 001 == 1
console.log(5 & 8);//0101 & 1000 == 0000 == 0
//按位或
console.log(4 | 7);//100 | 111 == 111 == 7
//按位异或 
console.log(6 ^ 9);//0110 ^ 1001 == 1111 == 15
//按位右移
console.log(9 >> 1);//1001 >> 1 == 0100 == 4
//按位左移
console.log(5 << 1);//101 << 1 == 1010 == 10

5. 赋值运算符

       所谓赋值运算,就是先进行运算,再进行赋值

var a = 1;
a += 3;//4
a = a + 3;//4

6. 三目运算符

一目运算符:由一个运算符连接的一个操作数据或者表达式  !  ++  --

二目运算符:由一个运算符连接的两个操作数据或者表达式

三目运算符:由两个运算符连接的三个操作数据或者表达式

       格式:条件表达式 ? 表达式1 : 表达式2;如果条件表达式为 true,执行表达式1,如果条件表达式为false,执行表达式2。


var a = 1,b = 2;
a > b ? console.log('对') : console.log('错');

       在以上函数中,a为1,b为2,首先判断a是否大于b,如果大于,则执行 console.log('对'),如果小于,则执行 console.log('错')。所


相关文章
|
17天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
63 32
|
2月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
63 3
|
3月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
3月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
52 1
|
3月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
JavaScript 前端开发 Web App开发
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57