JavaScript基础

187 阅读9分钟

JavaScript基础:

JavaScript的介绍:

    作者: 布兰登
    原名: liveScript 后改名 JavaScript
    JavaScript是世界上最流行的语言,是建立在客户端上的脚本语言、编程语言。

HTML、CSS与JS的关系:

    HTML 相当于网页的结构
    CSS  修饰网页
    JS   使网页具有逻辑、动态、交互功能

JavaScript组成:

    ECMAScript  JavaScript的语法
    DOM         操作文档(html元素)
    BOM         操作浏览器
    

JS的三种写法:

    行内JS 使用次数 非常少
       <button onclick="alert('请先充值')">点我</button> 
    内部JS
        在body标签中 添加 script标签 里面就是js代码
        <script>
            // 里面都是JS代码
            alert('你好啊!!!')
        </script>
    外部JS
        新建 .js 文件  通过script 标签引入 文件
        示例: <script src="文件路径"></script>

JS的输入与输出:

    alert(提示内容)  浏览器弹框  用来提示用户
        数字直接写
        alert(123456)
        字符需要使用单引号包裹  ''
        alert('年轻人不讲武德,耗子尾汁')
    prompt(提示内容) 浏览器输入框 用来输入内容给程序使用
        prompt('请输入你的性别')
        alert(prompt('请输入你的性别'))
    console.log(打印内容) 控制台打印  用来调试代码
        console.log(prompt('请输入姓名'))
        console.log(prompt('请输入性别'))
        console.log(prompt('请输入年龄'))
        

变量:

变量就是用来存放数据的容器
例如: 手机盒  => 变量    手机 => 数据
可以通过变量获取数据 也可以修改变量里面的数据
代码运行时都是运行在内存之中,变量都是在内存中

1. JS中怎么去表示变量:

语法: var 变量 = 数据 
注意点: 所有变量都需要使用 var 关键字去 声明
例如: var one = 100000 var two = 'AVG123123'

2. 在JS中怎么去使用变量:

语法: 直接使用变量名
例如: alert(one) alert(two) alert(three)

3. 变量的使用

1. 声明变量 (造盒子)
var box
2. 赋值变量 (放手机)
box = 'iPhone X'

一边声明一边赋值
var box = 'iPhone X'

一次性声明多个变量
var box,
    box1,
    box2
一次性赋值多个变量
box = 'iPhone 12',
    box1 = 'iPhone 12Pro',
    box2 = 'iPhone 12ProMax'

一边声明多个变量一边赋值多个变量
var box = 'iPhone 12',
    box1 = 'iPhone 12Pro',
    box2 = 'iPhone 12ProMax'

4. 变量使用的注意点:

1. 变量只声明不赋值  那么该变量默认为 undefined(未定义)
2. 没有声明的变量 使用时会报错( 变量 is not defined )变量未定义
3. 变量名可以重复 只是后面的会覆盖前面的 (影响性能)
4. 变量名尽量取有意义的名字

5. 变量命名规则:

- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如:varforwhile
    关键字: JS已经使用过的 var if else
    保留字: JS现在没有使用 但未来可能使用  class boolean string
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName

JS有多少种数据类型?

    6种  
简单数据类型
    数值    number
        1 2 3 -1 1.1 NaN 不是一个数字(not a number) ※※
        NaN 当计算失败时会显示
        isNaN() 判断是否不是一个数字   
            不是一个数字 对 true 
            是一个数字 错 false
        数值的科学计数法:
            将0省略 用e表示科学计数
            例如: 1e10
            代表后面100
        Infinity  代表无穷大,大于任何数值
        -Infinity 代表无穷小,小于任何数值

    字符串  string
        字符串长度: 字符串.length  ※※
        字符串拼接: 字符串与字符串相加将会进行拼接
                var a = '123' + '10' // '12310'
        字符串与变量拼接: 由于变量不需要加单引号 所以直接 + 号连接就好
        在字符串中间拼接变量:  引引加加 变量在其中
    布尔值  boolean
    未定义  undefinednull 

复杂数据类型
    对象 object

获取变量的数据类型

语法: typeof 变量  => 返回数据类型
typeof 1 => number
typeof '1' => string
typeof undefined => undefined
typeof true => boolean
typeof null => object

什么叫数据类型的转换?

一种数据类型 转为 另一种数据类型 

共有3种常用的数据类型转换

一、 转为数值类型(重点)

    1. parseInt() 转为整数 parseFloat() 转为小数
        一个一个字符进行转换 遇到转换不了时就会停止 并把转换过得数字返回
        如果一开始就转换不了 直接返回 NaN
    2. 使用 - * / 进行隐式转换   
        - 0  
        * 1   
        / 1
        一个字符转换不了 直接NaN
    3. Number() 转为数值类型
        一个字符转换不了 直接NaN

二、 转为字符串类型

    1. 变量.toString()
    2. String(变量)
    3. 加号拼接字符串 + ''

三、 转为布尔类型

    1. Boolean()
        null''0NaNundefined 转为 false
        其他的都为 true
    

运算符(操作符)

JS运算符的分类:
    算术运算符、递增递减运算符(一元运算符)、比较运算符、逻辑运算符、增强(赋值)运算符
    
    算术运算符
        +  加
        -  减
        *  乘
        /  除
        %  取余数(除完之后剩余的数)
        ** 次幂 (乘多少个自己)

    一元运算符(递增、递减) 加11
        前置 ++    ++a
        后置 ++    a++
        前置 --    --a
        后置 --    a--
        前置++:  先++ 后 运算
        后置++:  先运算 后 ++
                
    比较运算符

    赋值运算符(增强运算符)
        +=  自己加 值
        -=  自己减 值
        *=  自己乘 值
        /=  自己除 值
        %=  自己取余 值

    表达式: 变量 与 运算符 结合  返回运算后的结果
    
    逻辑运算符
        逻辑运算符是用来进行布尔值运算的运算符, 其返回值也是布尔值。 后面开发中经常用于多个条件的判断,用来判断两边 truefalse 关系的 同时返回 truefalse
    与( 并且) &&
        判断依据 两边都为true 则返回true 否则返回false
    或( 或者) ||
        判断依据 两边都为false 则返回false 否则返回true
    非(反转) !
        将结果反转 true 改为 false false 改为 true
赋值运算符
    += -= *= /= %= =

运算符优先级
    () !算术运算符( * /)  比较运算符  逻辑运算符  赋值运算符

流程控制

在程序中默认由三种流程语句: 1. 顺序语句(默认执行) 从上到下 从左到右 按照顺序依次执行 2. 分支语句 由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果 3. 循环语句

分支语句:

if语句:
在JS中使用 if语句 来完成 分支结构的实现
    语法: 
         if (条件) {
             // 代码块1 
         }
         // 代码块2
    解释: 
        根据 条件(表达式) 来 决定是否执行 代码块1  
        如果条件为 true 则执行 为false不执行

if else 语句
语法:  
    if (条件) {
        // 代码块 A
    } else {
        // 代码块 B
    } 
        
    解释:
        根据条件执行 A 或者 B  
        如果 条件为 true 执行 A  否则 执行 B

if else if语句 适合用于多重条件
语法: 
    if (条件1) {
        // 代码A
    } else if (条件2) {
        // 代码B
    } else if (条件3) {
        // 代码C
    } else {
        // 代码D
    }
解释:
    如果条件1true 执行 A  否则 执行下一个条件
    如果条件2true 执行 B 否则 执行下一个条件
    如果所有条件都不满足 执行 代码D
    满足一个条件其他的代码都不执行

三元表达式

            语法:  条件 ? 值1 : 值2
                根据条件truefalse 决定是否返回 代码块1或者代码块2
                      true返回代码块1  false返回代码块2

switch case语句

            语法:
                switch (判断对象) {
                    case 条件1: {
                        代码块1
                        break
                    }
                    case 条件2: {
                        代码块2
                        break
                    }
                    default: {
                        代码块3
                    }
                }
            如果判断对象满足条件1 执行代码块1
            如果判断对象满足条件2 执行代码块2
            如果判断对象都不满足条件 执行代码块3
            注意点: 每个代码块后都需要添加break结束判断 否则将会继续判断

循环结构

        根据条件 执行重复的代码

for循环:

            语法:
                for(表达式1; 表达式2; 表达式3) {
                    代码块1
                }
            表达式1(初始化循环变量) => 表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
                                    表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
                                    表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
                                    直到表达式2条件判断为false

while循环

            语法:
                while(条件) {
                    代码块1
                }
                根据条件truefalse 决定循环是否执行 true执行 false不执行

        do while循环
            语法:
                do {
                    代码块1
                } while (条件)
                根据条件truefalse 决定循环是否执行 true执行 false不执行
            
        break语句
            终止循环的进行

        continue语句
            跳过本次循环

数组

1. 为什么需要数组 ?

    我们需要一次性保存很多数据  例如: 保存全班同学的成绩
    100 99 70 60 10 
    必须得使用一个大容器 将所有成绩装进去

2. 什么是数组?

        数组就是存放一系列数据的集合(大容器)
            

3. 在JS中怎么去定义数组?

        字面量: 直接使用字符表示
        使用字面量:
            var a = [1,2,3,4,5,6]
            多条数据使用逗号隔开
        使用数组的构造函数:
            var arr = new Array(1, 2, 3, 4, 5)
            多条数据使用逗号隔开
        数组可以存放任意类型的数据
        数组的特性:
            1. 数组是有长度的 有多少个数据 数组就有多长
                数组.length  得到数组的长度
            2. 数组中的数据是有顺序的 从0开始 我们把这个顺序称为下标(序号 索引)
            3. 可以通过数组的下标 获取当前下标对应的值

4. 获取数组的值

        通过数组下标取数组对应的值
        语法: 数组[下标]
        例子:
            console.log(a[1])
        // 快速取数组的最后一个
        console.log(a[a.length - 1])
        // 快速取数组的第一个
        console.log(a[0])
        // 下标超过数组的最大下标  undefined
        console.log(a[100])

5. 修改数组的值:

        语法: 数组[修改值的下标] = 修改的值
        var a = [1, 2, 3, 4, 5, 6]
        a[2] = 100
        // 快速修改最后一个
        a[a.length - 1] = 99
    

6. 新增数组的值:

        语法: 数组[数组的长度] = 新增
        原理: 修改超过数组索引以外的值 就变成了新增
        千万不要超过数组长度去新增
        例子:
            var a = [1, 2, 3, 4, 5]
            // a[10] = 6
            a[a.length] = 6        
    

7. 使用for循环遍历数组

        语法:
            for(var i = 0 ; i < arr.length; i++) {
                    arr[i]     
            }
        var i = 0 是因为数组下标从0开始
        i < arr.length 是因为数组下标比数组长度小1
        i++ 是因为下标 每次加1

        for(var i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }