网站导航
> 文章列表 > 1. JS基础语法

1. JS基础语法

网友: 文章列表 2024-03-21 20:33:26

1. JS基础语法

1. JS基础语法

1-1. js内嵌式基本使用

  1. 必须写在script标签内部

  2. 每一个行js代码结束之后要有; 结尾

  3. script标签可以有type属性，也可以没有

    type=“text/javascript”

  4. script标签要尽量卸载body标签中，紧挨着body的结束标签(因为js一般要操作dom，确保dom结构加载完成)

1-2. js外部引入文件基本使用

目的：将js代码和html代码进行分离

  1. 通过src 属性指定外部引入文件路径 <script src="路径"></script>
  2. 外部引入script标签中写的代码不执行
  3. script 标签可以通过 defer 进行延迟加载

1-3. js中的注释

  1. 单行注释： // 注释的内容 快捷键：ctrl + /
  2. 多行注释： /* 注释内容 */ 快捷键：shift + alt + a
/***                快捷键*  1. 多行注释 : shift + alt + a*  2. 单行注释 : ctrl + /* *///alert(333) dsfjasdklfjasdklfjsdklajfklasdjf  a sjkdlfjasdlkfjkasldj f
alert(444)

1-4. js的三种常见输出方式

  1. alert() : 弹框输出
  2. console.log() ：输出到控制台
  3. document.write(): 输出到页面进行显示[body标签中]

1-5. js语句和js表达式

js语句和js表达式有什么差别？

  1. js表达式是有值的，可以用变量接收，可以用console打印

  2. js语句没有值：没法用变量接收和console打印

  • js语句：

    1. 赋值语句： 语法： var 变量名 = 字面量

      1. 变量：变量使用来存储值和代表值的
      2. 字面量：字面上的量就是字面量
        1. 值可以直接使用
        2. 字面量不可以修改

    2. 变量命名—标识符：

      2-1. 什么是标识符：js中可以自定义名字的 【变量、常量、函数名、类名、方法名】

      2-2. 标识符命名规则：

      • 字母、数字、_、$ 符只能有这四种
      • 只能以字母、_、$开头
      • 严格区分大小写
      • 多个单词
        • camelCase：大驼峰、小驼峰
        • kebab-case：
      • 不能使用js中的关键字和保留字

1-6. 预解析

js解析器不是一上来就从上到下执行js代码，而是先进性预解析。

  • js代码执行过程

  1. 全盘扫描 var function 做预解析，规则如下：

    1. var ： 只声明不赋值

    2. function：声明且赋值

  2. 代码从上到下执行

1-7. typeof

一元操作符：

语法： typeof 变量名/字面量

typeof 1 “number”

typeof ‘abc’ “string”

值：

  1. 首先本身值是一个字符串
  2. 字符串的内容，是检测出变量的类型

1-8. js数据类型[字面量]

usonb:

u:undefined

s: string、symbol

o: object

n: null、number

b:boolean

数据类型分类：

  1. 基本数据类型:

    number、string、boolean、undefined、null

  2. 引用数据类型：

    object [对象、数组、函数、正则…]

1-8-1. number

包括：正整数、负整数、0、浮点数、NaN、Infinity

1-8-2. string

定义方式： 单引号 、双引号【成对出现】

  • 引号的嵌套：
    1. 转义符
    2. 不同的引号
  • 转义：
    1. \\ 是转义符
    2. \\’ ==> ’
    3. \\" ==> "
    4. \\\\ ===> \\
    5. \\n
    6. \\r
    7. \\t
    8. \\普通字符===> 普通字符

1-8-3. boolean

true 、false

作用：用来做逻辑判断，控制程序执行的分支

1-8-4. null - undefined

null: typeof null ===> ‘object’

null 表示控制，一般用来做对象的初始值

undefined：只声明但未赋值的，默认值就是undefined

undefined是null的一种特殊表示

undefined == null ===> true

undefined === null ===> false

  • =
    1. = : 赋值
    2. == ： 比较运算，只比较值不比较类型
    3. ===: 即比较值也比较类型

1-9. 强制类型转化

其他类型向 => string | number | boolean 转化

1-9-1. string

  1. String
  2. toString

都可以将其他类型转化为string，但是 toString 对null 和undefined 会报错

cannot read properties of null | undefined (reading toString)

1-9-2. boolean

转化语法： Boolean(要转的数据)

‘’ 0 NaN null undefined ==> false

其他都是true

1-9-3. number

  1. Number()

    Number(null) => 0

    Number(‘’) ==> 0

    Number(’ ') ==> 0

    Number(true) ==> 1

    Number(false)==> 0

    Number(undefined)==> NaN

    Number(‘123adf’) ==> NaN

    Number只能处理纯数字的字符串，左右两边有空格没问题，中间有就是NaN

  2. parseInt： 只能转整数

  3. parseFloat：认识小数点

    parseInt：

    1. 首先拿出第一个字符串的字符，判断是不是数字，如果不是，直接返回NaN
    2. 如果是 保留该数字，继续向后看，如果是保留，直到不是为止，返回之前保留的数字

    parseInt(null) undefined true false ‘’ ’ ’ ===> NaN

    parseInt(‘123abc’) ==> 123

    parseFloat(‘12.05px’) ==> 12.05

1-10. 算数运算 + - * / %

+:

  1. 如果两侧有一侧是字符串，那么就是字符串拼接操作，不是字符串的使用String或toString转化为字符串再进行拼接
  2. 如果两侧没有字符串，那么 + 就是算数运算，需要将两侧非数子的，Number一下，转成数字，在进行运算

-、* 、/、%

  • 都是算数运算，都会Number一下在处理
  • NaN 跟任何数进行算数运算，结果都是NaN

1-11. 赋值运算

+=

-=

*=

/=

%=

1-12. 自增

a++ 和 ++a

  1. a++ 和 ++a 都是使a自增1

  2. 差别：

    ​ * ++a 表达式的值,取a自增后的值

    ​ * a++ 表达式的值,取a自增前的值

1-13. 比较运算

==: 只比较值不比较类型

===: 即比较值也比较类型

!= :

!==

>=

<=

  1. 不等号两边有数字： 将另一侧也转化为数字在比较 Number
  2. 字符串之间的比较：按位置比较字符串的 ASCII码，如果第一位一样，那就比第二个ASCII码，直到比较出结果为止

特殊值：

  1. NaN： NaN跟任何值包括自己比较都是false

  2. undefined：undefined跟任何其他值比较规则同NaN一致,都是false，只有在==的比较上不同

    ​ undefined===undefined =》true

    ​ undefined==null =》 true

  3. null：

    跟数字进行比较的时候，转化成Number(null) ==> 0 在进行比较

    == 比较 null ===null ==> true

    ​ null == undefined ==>true

1-14. 三元表达式

let a = 表达式1 ? 表达式2 ：表达式3

如果表达式1 的布尔值为真，那么执行表达式2

如果表达式1的布尔值为假，那么执行表达式3

if(表达式1){

}else{

}

1-15. 逻辑运算

1-15-1. &&运算

let 整体表达式的值 = 表达式1 && 表达式2

(1)如果表达式1 的布尔值为真，那么整体表达式的值就是表达式2的值

(2) 如果表达式1 的布尔值为假，那么整体表达式的值就是表达式1的值

与运算又叫断路运算：当表达式1的布尔值为假时，表达式2不执行

1-15-2. || 运算

let 整体表达式的值 = 表达式1 || 表达式2

（1）如果表达式1的布尔值为真，那么整体表达式的值就是表达式1的值
（2）如果表达式1的布尔值为假，那么整体表达式的值就是表达式2的值

或运算：两边只要有一边为真，即为真，两边都为假时，才为假

或运算叫短路运算：如果表达式1的布尔值为真，那么表达式2不执行

1-15-3. 非运算

作用：将表达式取布尔值，然后取反

快速获取一个值的布尔值： !!xxx <===> Boolean(xxx)

1-16.逗号运算符

var a = 1,b = 2,c = 3;
// 相当于以下代码，有预解析机制
var a = 1;
var b = 2;
var c = 3;// 逗号运算符 整体的值取最右侧的值
var d = (e=1,f=2);
// d 2
// e 1
// f 2

1-17. isNaN(变量)

is : 是

NaN：not a number

isNaN: 如果这个值不是数字[NaN]，返回true，是数字返回false

作用：判断是一个值不是一个数字，如果不是，返回true，如果是返回false

（1）当值是字符串的时候，会进行强制类型Number转化后判断，其他情况不做转化

（2）isNaN(NaN): true ===> isNaN认为 NaN不是数字。

console.log(isNaN('10')); // 遇到字符串的时候，先将值 Number一下，在用isNaN判断
console.log(isNaN(10));
console.log(isNaN('10px'));
console.log(isNaN(null));
console.log(isNaN(NaN));//true

1-18. 小结

  1. 变量、字面量

    1. 变量：存储值和代表值

      标识符：

      1. 字母、数字、下划线、$
1. 以上四种不能以数字开头
1. 严格区分大小写：
4. 多个单词：1. camelCase： 大小驼峰2. kebab-case

    2. 字面量：字面上的量

      1. 直接使用
      2. 不可修改

    3. 数据类型【字面量类型】

      1. 基本数据类型：number、string、boolean、null、undefined
      2. 引用数据类型：object

    4. 运算符：

      1. 算数运算：+
      2. ++ --：
      3. 比较运算：
      4. 逻辑运算：&& || ！
      5. 强制类型转化：
        1. 字符串：String toString
        2. 数字：Number
          1. Number(‘’) ==> 0
          2. Number(’ ')==> 0
          3. Number(true) => 1
          4. Number(false)=>0
          5. Number(null) => 0
          6. Number(undefined) NaN
        3. boolean: Boolean !!
          1. false: ‘’ 、0 、NaN、null、undefined
      6. 三元表达式
      7. isNaN
      8. typeof：

Free Fonts Download

网络标签：

相关问题