JavaScript入门基础之概述变量数据类型运算符

Posted YuLong~W

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript入门基础之概述变量数据类型运算符相关的知识,希望对你有一定的参考价值。

javascript 概述

JS 简介

JavaScript:Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页,其大多数的交互逻辑几乎都是由JavaScript实现的。

JavaScript内嵌于html网页中,通过浏览器内置的JavaScript引擎进行解释执行,把一个原本只用来显示的页面转变成支持用户交互的页面程序。

常见浏览器

浏览器是访问互联网中各种网站所必备的工具,JavaScript主要就是运行在浏览器中的。

常见浏览器及特点:
在这里插入图片描述
浏览器内核的分类:

  • 渲染引擎(也称为排版引擎):负责解析HTML与CSS,如Chrome浏览器的Blink。
  • JavaScript引擎:是JavaScript语言的解释器,用于读取网页中的JavaScript代码,对其处理后执行,如Chrome浏览器的V8引擎

JS 特点和组成

特点:

  • 脚本语言,特点是简单、易学、易用,语法规则松散
  • 可以跨平台,不依赖操作系统
  • 支持面向对象,开发快捷和高效,降低开发成本

组成:
在这里插入图片描述

  • ECMAScript:是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套JavaScript语法工业标准
  • DOM文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供的接口,可以对页面上的各种元素进行操作
  • BOM浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM,可以对浏览器窗口进行操作

JS 使用方法及语法规则

  • 行内嵌入式: 事件名=“JavaScript代码”
 <input type="button" value="确定" onclick="alert('我是行内嵌入的')">
  • 页内嵌入式
<script>
    alert('我是页面内部嵌入的')
</script>
  • 外部链接式
    先创建.js文件
    通过<script src="js文件名"> </script>标签将外部js文件链接到页面中

语法规则:

  • 严格区分大小写
  • 对空格、换行、缩进不敏感,一条语句可分多行写
  • 一条语句结束写下一条语句,中间分号可省略
  • 单行注释:’// ’                   ctrl+/
    多行注释:’ /* ’ ’ */ ’           shift+alt+/
    多行注释中可以嵌套单行注释,反之不行

输入和输出

  • 消息框:alert(字符串)
  • 确认消息框:confirm(字符串)
  • 控制台输出:console.log(字符串)
  • 输入消息框:prompt(字符串)

变量

什么是变量

变量是用于存放数据的容器。 我们通过变量名 获取数据,甚至数据可以修改

本质: 程序在内存中的一块用来存放数据的空间

变量的使用

  • 声明变量:var 变量名 ( 在内存中分配一个存储区 )
  • 变量赋值:变量名=数据
  • 变量初始化:var 变量名=数据 (声明变量同时赋值)

注意:

  • 可同时声明多个变量
  • 只声明变量,未对变量赋值会输出undefined
  • 直接赋值一个未声明的变量,也可正确输出变量的值

命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字、保留字
  • 变量名必须有意义。
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写

数据类型

JavaScript是一种弱类型语言。在声明变量时不用指定数据类型,在程序运行过程中通过赋值来确定变量的数据类型

强类型语言:如:Java、C等
弱类型语言:如:JavaScript、Python等

数据类型的分类

JavaScript中的数据类型分为两大类,基本数据类型复杂数据类型(也称为引用数据类型)。
在这里插入图片描述

数据类型的转换

转换为字符串型:

  • 利用“+”拼接字符串(最常用的一种方式)
  • 利用toString()转换成字符串
  • 利用String()转换成字符串

注意: null和undefined无法使用toSting()方式进行转换;对于数字型的变量,可以在toString()的小括号中传入参数,来进行进制转换。

转换为数字型:

  • 使用parseInt()将字符串转为整数
  • 使用parseFloat()将字符串转为浮点数
  • 使用Number()将字符串转为数字型
  • 利用算术运算符(-、*、/)隐式转换

转换为布尔型:

使用Boolean(),在转换时,代表空、否定的值会被转换为false,如空字符串、0、NaN、null和undefined,其余的值转换为true。

注意:

  • 非数字:NaN —> Not a Number
  • isNan(参数):判断参数是否为数字
  • 单引号和双引号嵌套时,不能同时出现一个语句中
  • 字符串转换为整数:parseInt(字符串)
  • 字符串转换为浮点数:parseFloat(字符串)

运算符

常用运算符

JavaScript中常用的运算符有:

算数运算符
在这里插入图片描述
递增和递减运算符

递增(++)、递减(–) 运算符可以快速地对变量的值进行递增和递减操作,它属于一元运算符,只对一个表达式进行操作。

  • 前置递增(递减)运算符:递增和递减运算符写在变量前面,返回的是计算后的结果
  • 后置递增(递减)运算符:递增和递减运算符写在变量后面,返回的是计算前的结果
  • 递增和递减运算符的优先级高于“+”“-”等运算符

比较运算符
在这里插入图片描述
注意:

  • == :等于             判断值是否相等
  • ===:全等于        先判断类型再判断值

逻辑运算符
在这里插入图片描述
短路运算(逻辑中断)

原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

  • &&的短路:当第一个表达式为false时,不运算第二个表达式
  • ||的短路:当第一个表达式为true时,不运算第二个表达式

赋值运算符
在这里插入图片描述
三元运算符

条件表达式 ? 表达式1 : 表达式2

语法说明: 先求条件表达式的值,如果为true,则返回表达式1的执行结果;如果条件表达式的值为false,则返回表达式2的执行结果。

例子:求三个数最大的那个数
a>b? (a>c ? a : c) : (b>c ? b : c)

运算符优先级

在这里插入图片描述

以上是关于JavaScript入门基础之概述变量数据类型运算符的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript入门基础之变量数据类型及转换运算符

javascript 概述及基础知识点(变量,常量,运算符,数据类型)

JavaScript基础之数据类型部分总结

JavaScript基础入门总结目录

JavaScript 基础入门丨第一天学习规划

小白入门之前端网页技术JavaScript