凯的个人博客

js基础

4/24/2024 js

# 1.JS代码写在哪里

  • 写在页面的body 结束标签的前面
  • 写在页面的head 标签中
  • 写在一个独立的js文件 <script src="/xxx.js"> 引入到html中进行使用
  • 写在标签的属性上
   <div onclick="console.log(111)">点我啊</div>
1

# 2.变量

可变的量 （装数据的）

常量： 不可变的量，具体数据（不严谨）

# 3.变量的定义 和使用

变量定义的关键字

  • var

  • let

  • const [用的最多]


var  变量名 = '初始值';
let 变量名 = '初始值';
const 变量名 = '初始值';
1
2
3
4
5
6
7

变量名命名规范：

​ 由字母，数字，下划线，$ 组成 , 字母 下划线 $ 开头

# 4. 数据类型

5基1引 ：5种基本数据类型 1种引用数据类型

7基1引（引用可扩展）：

数字 number

布尔 boolean

空 null

未定义 undefined

字符串 string

唯一值 Symbol

长数字 long

引用类型： Object

数组 Array

对象 Object

函数 function

正则 RegExp

日期 Date


  // 字符串
    let str = '你好啊，我是一个字符串';
    // 数字
    let num = 1000;
    // 空
    let nu = null;
    // 未定义
    let un = undefined;
    // 布尔值
    let bool = true;
    // 唯一值
    let sy = Symbol(1);
    // 长数字
    let lnum = 100n;
    // 数组-引用
    let arr = [100, 100];
    // 对象-引用
    let obj = { key: 111, key1: '222' }
    // 函数-引用
    let fn = function () { }
    // 日期-引用
    let date = new Date()  //当前系统的格林威治标准时间格式的时间
    // 正则-引用
    let reg = /$1/;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • NAN 不是一种数据类型

表示的是 结果 ： not a number

判断一个结果变量 是否是数字的方法：

isNAN(变量)  ===true;   // 不是数字
isNAN（变量）==false;   //是一个数字
1
2

# 5.变量类型转换

# 1.强制类型转换 显式类型转换（基础分）

  • 强制转数字
let num = '2.333'
//强制转换为整数  : 字符串和数字本身转换
parseInt(num)  //2  
//强制转换为 小数   ： 字符串和数字本身转换
parseFloat(num) //2.333

//强制转换为 数字    ： 不限制数据类型，任何数据类型都可以转为数字
Number(num )  //2.333
1
2
3
4
5
6
7
8
  • 如果是基本数据类型的相互转换 ，都有一个共同的方法
数据类型名(要转换的变量)   //数据类型名 大驼峰语法

Number()  //强制转为数字
Boolean()  //强制换转为布尔类型
String()  //强制转换为字符串
1
2
3
4
5

# 2.自动类型转换 隐式类型转换（高分）

  • 数字 和字符串 参与算数运算时 （ - % / * ）

将 字符串自动转换为数字 再进行运算

  • 数字和字符串 参与 字符串的拼接 +

将数字转换为字符串

let a =100;
let b = '100';

console.log(a+b)// 100100  

100+'200'*2   //  500  

true+'100' // ?  true100   

true+'100'*2  //  201    


'90'>80 // true false 

true && '100'  //'100'

true+'100'==101 && null || undefined || true===1  // false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 6.运算符

单目运算 只需要一个数据

双目运算 运算时至少需要两个数据

三目运算 表示if else

注意

0 1 和true false 转换过程中

true===>1

false ===>0

在if 条件中 if（条件） 运行表单式1：满足条件 的前提：非0值 不是一个null 不是一个false

# 6.1 算术运算符

+ - * / %

++ --

注意：

  • + 如果表达式中存在字符串又不存在其他的运算符 就表示 字符拼接 不再表示 加法运算

  • ++ -- 单目运算 自增自减

前缀:如果变量在前 ，

后缀：如果变量在后

无论是前缀还是后缀，变量的值 都会发生改变

前缀 表达式的值时变量改变之前的值，后缀表达式的值变量改变之后的值

let a = 100;
let b = a++;
console.log(a);  //变量的值：101
console.log(b);  //表达式的值：100


let a1 = 200;
let b1 = --a1; 
//a1 ==199 
//b1 ==199
1
2
3
4
5
6
7
8
9
10
let a =1 ;
let b =0 ;
let c = -1;


console.log(a+++--a+b+--c+c++); 
//1+1+0+-2+-2  =-2
//a:1     b:0   c:-1
console.log(a,b,c)   // 1  0  -1
1
2
3
4
5
6
7
8
9
10

# 6.2 逻辑运算符

&& || !

&& 同时为真 结果为真

|| 只要有一个为真 结果为真

！ 结果相反 结果必然为 true或false

注意：

  • 如果是&& 前面的表达式为假， 整个表达式的结果就为假， 后面的表达式不会运行

  • 如果是 ||前面的表达式 为真，真个表达式的结果为真，后面表达式不会运行

    let a = 1;
console.log(3>2  && a++);   // 1 
console.log(a);  //2

console.log(100 ||200)  // ?true 100 200
    1
    2
    3
    4
    5

  • && || 的输出结果，不一定是 true或false ，结果是 整个表达式运算结束之后的值

let a =1 ;
let b =0;
let c = -1 ;

a--+b && --b+++c     //表达式  a b c   -1   0  -1  0
1+0 && -1+0   


let a =1 ;
let b =0;
let c = -1 ;
a&&b--||c+++b--;    //表达式  abc  -2  1  -2 0
1&& 0 || -1+-1
1
2
3
4
5
6
7
8
9
10
11
12
13

# 6.3 条件运算

> < >= <= != !== == ===

注意：

== 相等： a==b 值相等 （隐式转换）

=== 全等：a===b 值相等 类型相等


null ==undefined  // true   
null ===undefined  //false

'1' ==1  //true
'0' ==0   //true 
1==true  //true 
0==false  //true 
2==true  //true 
1==2  //true
1
2
3
4
5
6
7
8
9
10
11

# 6.4 赋值运算符

= += *= /= %=

将右边的值 赋给左边的变量

a+=100;  ====>  a=a+100;
a/=2;   ====>a=a/2;
1
2

# 6.5 三目运算符 if

条件1?表达似乎1：表达式2

# 6.6 运算符的优先级

# 作业
1
2
3
4
5
6
7
8

# 面试题：

# 1.js代码写在body的结束标签前面和 写在 head标签中 有什么区别？

将js代码写在body结束标的前面 更好

好处：如果在js代码 获取页面的dom节点 写在head标签中的js是不能够获取的（代码的执行顺序问题）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let box = document.querySelector('.box');
        console.log(box);  //null 
    </script>
</head>

<body>
    <div class="box"></div>
    <script>
        let box1 = document.querySelector('.box');
        console.log(box1);  //<div class="box" > </div> 
    </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

js语法