JS基本语法-CSDN博客

本文链接：https://blog.csdn.net/qq_61243585/article/details/130415293

本文介绍了JavaScript中的变量声明，包括var、let和const的区别，强调了let和const在块级作用域中的重要性。此外，还讲解了对象、函数、数组的基本用法以及数据类型的使用，如对象的键值对、函数的定义和调用，以及数组的操作。最后提到了输出方法和条件语句等基本语法。

摘要由CSDN通过智能技术生成

基本语法

声明

JavaScript是弱语言类型，声明的变量并没有实质属性。通俗的讲就是声明出的变量，可以是(int,string,char,double)中的任何一种，而且还可以相互转化。

var a = 1
a = "123"
a = 1.5
a = '1'

除了可以使用var定义外，还可以通过let，const声明

区别：

var不存在块级作用域，可以跨块访问，不能跨函数访问，可以理解为全局变量。let和const具有块级作用域,可以理解为局部变量

if(true){
    var a = 0
    let b = 0
    const c = 0
}
console.log(a)
console.log(b)
console.log(c)
//只有a可以输出，其他的都被报错

var可以重复定义，而let,const不可以

重复声明的var以最后一个最准

var a = 1
var a = 3
//输出为3

var不存在暂时性死区,即不声明可用

console.log(a)
var a = 1

console.log(b)
let b = 2

console.log(c)
const c = 3
//只有a可以输出

var,let可以改变指针指向，const不可以。通俗的讲就是var,let声明变量，const声明常量

//合法
var a = 1
a = 2
let b = 1
b = 2
const c = 3
//非法
c = 4

总之，let,const在工程上用的较多，尽可能不使用var

语句以分号结尾，一个分号就表示一个语句结束。同时也可以换行不写分号也表示结束

var a = 1; var b = 2
var c = a + b

数据类型

对象

对象实质是一组“键值对”的集合，是一种无序的复合数据集合,每一组只用逗号隔开。而且，对象内可以定义多种不同类型的变量

var obj = {
    a:"hello",
    b:1,
    c:true,
    d:[1,2,3,5],
    e:{
        f:1
    },
    g:function(){
        console.log("yes")
    },
    123:8
}

//a,b,c,d,e,f,g均为键名，实质为字符串

/*
访问元素的两种方法:
1.console.log(obj['a'])
2.console.log(obj.a)

第二种方法不推荐使用，因为容易报错
例如：console.log(obj.123)

*/

//对象内元素访问：
console.log(obj['a'])
console.log(obj['b'])
console.log(obj['c'])
//对象内数组访问时，i表示数组内的位置
console.log(obj['d'][i])
//对象内对象访问时，第二个空表示内存对象内的键名
console.log(obj['e']['f'])
//对象内函数的调用时，后面加一个括号即可
obj['g']()

//对于赋值而言，就是调用后加上等于号

//如果想要查看对象内的所有键名
console.log(Object.keys(obj))

//如果删除某一个元素
delete obj.a

//判断一个属性是否在对象中
console.log(obj.hasOwnProperty('a'))

//遍历对象
for(var i in obj){
    console.log('键名:',i)
    console.log('键值:',obj[i])
}

函数

//函数的定义
function print(){
    ...
}

var print=function(){
    ...
}

//函数封包
function print(){
    var a = 1
    return{
        a:a
    }
}

//若在函数外想要访问到a，就必须要加入return
print().a

数组

数组和对象类似，也是任何类型都可以放入数组

操作和对象类似

输出

JavaScript使用console.log()函数输出，如果在浏览器的环境下运行，会在控制台找到输出的部分

var a = 1
console.log(a)

必须在浏览器环境的输出：

使用alert()函数输出警告框

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹出框</title>
    </head>
    <script>
        alert("通过弹出框输出内容");
    </script>
    <body>

    </body>
</html>

innerHTML写入到HTML元素中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<script>
    function changeContent() {
        document.getElementById("demo").innerHTML = "通过innerHTML方法向页面输出了内容";
    }
</script>

<body>
    <h1 id="demo">我是一个标题</h1>
    <button type="button" onclick="changeContent()">更改内容</button>
</body>

</html>

document.write()方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>write</title>
</head>
<script>
    document.write("hello");
    document.write("<h1>通过document.write输出内容</h1>");
</script>

<body>
</body>

</html>

条件语句

if 语句

if判断表达式布尔值，然后根据布尔值的真伪，执行不同的语句。

布尔值：true(真)，false(假)

if(true){
    语句1
}
    
if(false){
    语句2
}
    
//执行语句1，不执行语句2

else 语句

else表示上一个if不满足条件时，要执行的语句

if(false){
    语句1
}
else if(true){
    语句2
}
//不执行语句1，执行语句2

switch 语句

switch表示对一个对象进行选择执行

switch(fruit){
    case "banana":
        语句1
        break
    case "apple":
        语句2
        break
    default:
        语句3
}
/*
如果fruit为banana执行语句1
如果fruit为apple执行语句2
如果都不符合，执行语句3
需要注意的是，break不能少
如果一旦缺少，会接着执行下一个case代码块
*/

三元运算符

格式：

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

if(m === 2)
    console.log(m)
else   
    console.log(m+1)

//等价与

(m === 2) ? console.log(m) : console.log(m+1)

循环

while循环

格式

while(条件)
    语句

//只要条件一直为true，语句就会一直执行

for循环

for循环可以指定循环的起点和终点

格式:

for(初始化表达式;条件;变化表达式){
    语句
}

for(var i = 1 ; i <= 5 ; i++){
    语句
}
/*
i初始化1
每次执行完语句之后，i增加1
直到判断出i大于5时终止
*/

do…while循环

这种循环，会先执行一次语句

然后判断第二次是否满足条件在考虑是否执行

也就是说至少执行一次

do{
    语句
}while(条件)

终止循环

终止循环的两种方式:break,continue

break作用：跳出循环

continue作用:跳出本次循环，直接进入下次循环

var i
for(i = 1 ; i < 5 ; i++){
    if(i === 1)
        continue;
    break;
}
console.log(i)
//输出值为2

运算符

加法运算符：x + y
减法运算符： x - y
乘法运算符： x * y
除法运算符：x / y
指数运算符：x ** y
余数运算符：x % y
自增运算符：++x 或者 x++
自减运算符：–x 或者 x–
数值运算符： +x
负数值运算符：-x
$>$ 大于运算符
< 小于运算符
<= 小于或等于运算符
$>=$ 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符
取反运算符：!
且运算符：&&
或运算符：||
三元运算符：?:
二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。
二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。
二进制否运算符（not）：符号为~，表示对一个二进制位取反。
异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。
左移运算符（left shift）：符号为<<
右移运算符（right shift）：符号为>>
头部补零的右移运算符（zero filled right shift）：符号为>>>