javaScript(二):javaScript基础语法

简介: JavaScript 是一种用于 Web 开发的强大编程语言,用于实现动态交互、动画效果和复杂业务逻辑等功能。它可以在客户端及服务器端运行,支持面向对象、事件驱动、函数式等多种编程范式。JavaScript 通过与文档对象模型(DOM)和浏览器对象模型(BOM)交互,能够实现对网页中所有元素的操作和控制,是实现丰富的 Web 体验的必备技术之一。常见的 JavaScript 库和框架有 jQuery、React、Vue.js 等。

1、javaScript变量定义

定义变量

  • ES5定义变量
var 变量名 = 变量值;
  • ES6定义变量
let 变量名 = 变量值;
const 常量名 = 常量值;

区别:

  1. ES5方式语法不严谨,使用范围不受代码块限制
  2. ES6新增了let关键字来定义变量,它的用法类似var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明
  3. ES6新增了const关键字,用来声明一个只读常量,一旦声明,常用的值就不能改变

代码演示

// ES5定义变量
<!--会发现,它可以定义两次a变量,在ES6就不能这样做-->
var a = 10;
var a = 20;
document.write(a+"<br/>")

// ES6定义变量
let b = 10;
document.write(b+"<br/>");

// JS是弱类型语言
<!--可以任意赋值任意类型的变量-->
b = "我被赋值为字符串了"
document.write(b+"<br/>");

// 常量 (常量不能修改)
const c = 20;
document.write(c+"<br/>");
// c = 30; 不能进行重新赋值

2、JavaScript五种数据类型

五种类型

类型 说明
number 数值型:包含整数、小数
boolean 布尔型:包含true/false
string 字符串:包含字符和字符串
object 对象类型:包含系统内置对象和用户自定义的对象,NULL也是对象
undefined 未定义的类型,未知的类型 没有使用=赋值

查询变量名所属类型函数

方法1typeof 变量名
方法2typeof(变量名)

代码演示

// number: 数值型, 整数和小数都行
let a = 10;
document.write(typeof a+"<br/>");

// boolean: true/false
let flag = true;
document.write(typeof(flag)+"<br/>");

// string: 字符串 在js中""包裹的内容和''包裹的内容都是字符串.
let str01 = "字符串01";
let str02 = '字符串02';
document.write(typeof(str01)+"<br/>");
document.write(typeof(str02)+"<br/>");

// object: 对象类型
// 自定义JS对象: {键1:值1, 键2:值2}
let person = {
   
    name:"小林",
    age:18,
    sex:"男",
    //调用对象,这段看不懂可以先跳过
    eat:function (){
   
        document.write(this.name+"在吃饭"+"<br/>");
    }
}
//调用对象的属性
document.write(person.name + "在吃饭" + person.age+"<br/>");
//调用对象的方法
person.eat()

document.write(typeof person + "<br/>")

// null表示对象类型, null是对象类型的默认值.
let e = null;
document.write(typeof e +"<br/>");

// undefined: 未定义 没有给变量赋值
let f;
document.write(typeof f)

3、JavaScript常用运算符

3.1、算术运算符

算术运算符用于执行两个变量或值的算术运算

例如:

let a = 5,b = 10;
运算符 说明 表达式
+ 加法 a + b 15
- 减法 a - b -5
* 乘法 a * b 50
/ 除法 a / b 0.5
% 余数(取模) a % b 5
++ 自增 a++ 6
-- 自减 a-- 4

注意事项:

  • JavaScript中除法是可以除的尽,如果除不尽会保留16位小数

3.2、赋值运算符

赋值运算符用于给JavaScript 变量赋值

例如:

let a=5, b=10;
运算符 说明 表达式
= 等于 a = b 10
+= 加等于 a += b 15
-= 减等于 a -= b -5
*= 乘等于 a *= b 50
/= 除等于 a /= b 0.5
%= 余等于 a %= b 5

3.3、比较运算符

比较运算符用于逻辑语句的判断,从而确定给定的两个值或变量是否相等

例如:

let a=5,b=10;
运算符 说明 表达式
== 等于(比较值,不比较类型) a=5,b="5",则:a == b true
=== 恒等于(比较值和类型) a=5,b="5",则:a === b false
> 大于 a > b false
< 小于 a < b true
>= 大于或等于 a >= b false
<= 小于或等于 a <= b true
!= 不等于 a != b true
!== 恒不等于 a!==b true

==注意事项:==

  • 字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

3.4、逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系,支持短路运算

例如:

let a=true, b=false;
运算符 说明 表达式
&& a && b false
\ \ a \ \ b true
! !a false

注意事项:

  • 逻辑运算符不建议单与&、单或|, 会变成数字。
相关文章
|
4月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
149 1
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
4月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
167 4
|
6月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
39 5
|
5月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
63 3
|
5月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
692 0