JS基础总结

Icarrot
333 阅读7分钟

JS基础总结

  • JavaScript是什么？
    • 是一种运行在客户端（浏览器）的编程语言
  • 浏览器中的JavaScript组成是什么？
    • ECMAScript（基础语法）、web APIs（DOM、BOM）

书写位置

内部JavaScript

  1. 直接写在html文件里，script标签包住
  2. 规范：script标签写在上面
  3. 原因：浏览器会按照代码的顺序加载HTML，如果先加载的JavaScript期望修改其下方的HTML，可能会由于HTML尚未加载而失效。

外部JavaScript

  1. 外部编写***.js**文件，

  2. 规范：script:src标签写在上面，引入外部js文件

  3. <body>
    
    <script src="./index.js"></script>
</body>

  4. 注意：不要在外部里面包裹js代码，会冲突

    <body>
    
    <script src="./index.js">
    	alert('你好js，我呸')
    </script>
</body>

内联式JavaScript

  1. 直接在元素内写

    <button onclick="alert('你好')">123</button>

JavaScript结束符

为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求）

常见输出语法

  • 向body内输出内容

    document.write('输出内容')

  • 如果输出的内容写的是标签，就会输出对应的标签元素

    • 换行写标签，要用反引号
    • 不换行，用哪种标签都可以
    • 建议只要写的是标签都使用反引号
    document.write(`<input type="text">`)

  • 页面弹出警告对话框

    alert('输出内容')

  • 控制台输出语法，程序员调试使用

    console.log('控制台打印')

变量

变量是存储数据的容器，先定义后使用，函数不需要先定义后调用，除了匿名函数

声明变量

let 变量名

如果声明没有加let关键字，这个变量就是全局变量，不论在哪里都可以被访问（重点）

变量赋值

  • 定义了一个变量，就能够初始化它（赋值）
let age
age = 18
  • 重复声明同样的变量赋值会报错

本质

  • 内存：计算机中存储数据的地方，相当于一个空间
  • 变量：是程序在内存中申请的一块用来存放数据的小空间

声明规则

  • 不能使用关键字
  • 只能用下划线、字母、数字、$组成，且数字不能开头
  • 字母严格区分大小写，Age和age是不同的变量
  • 起名有意义，见命知意
  • 遵守小驼峰命名法（第一个单词首字母小写，后面每个单词首字母大写。例：userName

数据类型

JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，我们才能确认

java是强数据类型，例如int a = 3，必须是整数

基本数据类型

  1. number——数字型

    1. 分为小数，整数
    2. 使用加号“+”，表示数字相加

  2. string——字符串型

    1. 单引号或者双引号包裹

    2. 单双引号要成对出现

    3. 单引号和双引号不可以自己嵌套自己，要互相嵌套使用

    4. 使用加号“+”，表示字符串拼接

      1. 普通拼接
      2. 特殊拼接——模板字符串（反引号包裹，${变量名}，用于复杂的字符串拼接）
      document.write(`大家好，我叫${name}，今年${age}岁`)

  3. boolean——布尔型

    1. undefined null 0 "" false NaN 这些值转成布尔类型都是false

  4. undefined——未定义型

    1. 控制台提示undefined时，说明可能忘记给某个变量赋值，矫正代码
    2. undefined+数字=NaN

  5. null——空类型

    1. 表示赋值了，但是内容为空
    2. 实际上是一个对象类object

引用数据类型

复杂数据类型，在存储时变量中存储的仅仅是地址（引用）

栈存放有具体大小的数据，堆存放没有具体大小的数据，变化比较大

  1. Object——对象型
  2. []——数组型

检测数据类型

typeof关键字

let num = 12
console.log(typeof num)

数据类型转换

隐式转换

  • 字符转数字

    • +两边只要有一个字符串，都会把另外一个转换成字符串

    • 除了**+以外**的算术运算符，- * /等都会把数据转换成数字类型

    • 工作中简洁的常用转换写法：

      let num1 = '1'
let num2 = +num1

  • 转字符

    • 加上空字符串""
    let num1 = 1
let num2 = num1+""

显式转换

  • 转数字

    • Number

      • 把一个真正的字符串转成数字会失败，输出NaN（Not a Number）
      let num1 = 'aba'
let num2 = Number(num1)
// 以上输出NaN,因为字符串内容不是纯数字，输出NaN
let num1 = '123'
let num2 = Number(num1)
// 以上会成功转换，输出数字

    • parseInt（常用）

      • 只保留整数
      • 把一个真正的字符串转成数字会失败，输出NaN（Not a Number）
      let num1 = '9.9'
let num2 = parseInt(num1)

    • parseFloat（少用）

      • 保留小数
      • 把一个真正的字符串转成数字会失败，输出NaN（Not a Number）
      let num1 = '9.9'
let num2 = parseFloat(num1)

  • 转字符

    • String
    let num1 = 9
let num2 = String(num1)
    • *.toString()
    let num1 = 9
let num2 = num1.toString

运算符

算术运算符

运行顺序：先乘除，后加减，有括号先括号

<script>
        console.log(10 + 2)
        console.log(10 - 2)
        console.log(10 * 2)
        console.log(10 / 2)
    </script>

圆周率

Math.PI

<script>
        let r = prompt('请输入半径')
        console.log(`圆面积：${r*r*Math.PI}`)
    </script>

赋值运算符

在算术运算符的基础上，加上=号，简化算式

<script>
        let num = 32
        console.log(num+=2)
        console.log(num-=2)
        console.log(num*=2)
        console.log(num/=2)
    </script>

一元运算符（面试题）

理解自增自减前置和后置的区别

  • 前置
let i = 1
console.log(++i + 2)

等价于

let i = 1
i+=1
console.log(i + 2)
  • 后置
let i = 1
console.log(i++ + 2)

等价于

let i = 1
console.log(i + 2)
i+=1

面试题

let i = 1
console.log(i++ + ++i + i)

输出 i = 7

  1. 工作中基本都用 i++ 或者 ++i 独立使用
  2. 不会人为制造抽象代码场景
  3. 技术出现是解决实际问题，是工具，不会把工具搞复杂

比较运算符

  • ">"
  • <
    • 不同类型之间比较会发生隐式转换
  • ">="
  • <=
  • ==：比较值
    • 尽量不要比较小数，因为小数有精度问题
  • ===：比较值和类型
    • NaN不等于任何值，包括它本身
  • !=
  • !==

逻辑运算符

  • &&：逻辑与
    • 全真为真
    • 一假则假（左边为假则短路）
    • 返回最后执行的结果
  • ||：逻辑或
    • 一真则真（左边为真则短路）
    • 全假为假
    • 返回最后执行的结果
  • !：取反

运算符优先级

1648367207957.png

分支语句

  • 单分支

    • <script>
        let score = +prompt('输入分数')
        if(score>700){
            document.write('恭喜你，来辣')
        }
</script>

  • 双分支

    • <script>
        let score = +prompt('输入分数')
        if (score>90) {
            document.write('你是我的宝贝')
        }else{
            document.write('gun')
        }
</script>

  • 多分支

    • <script>
        let day = +prompt('星期几')
        if (day===1) {
            document.write('大茶饭')
        } else if(day===2) {
            document.write('沙煲粉')
        }else if(day===3) {
            document.write('酸菜鱼')
        }else if(day===4) {
            document.write('海底捞')
        }else if(day===5) {
            document.write('螺蛳粉')
        }else{
            document.write('辣鸡')
        }
</script>

三元表达式

<script>
        let num1 = +prompt('输入第一个数')
        let num2 = +prompt('输入第二个数')
        num1 > num2 ? document.write(num1) : document.write(num2)
</script>

断点调试

检查代码，点击source，刷新页面

循环体

while循环

循环具备三要素

  1. 变量起始值
  2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
  3. 变量变化量（用自增或者自减）
  4. 不清楚循环次数的时候用while循环
  5. 练习简易ATM案例

for循环

优点：声明起始值，循环条件，变化值写到一起，让人一目了然

清楚循环次数的时候用for循环

for(声明记录循环次数的变量; 循环条件; 变化值){
	循环体
}

for循环嵌套

<script>
        // 几天背几个单词
        let day = +prompt('背几天单词')
        let count = +prompt('背几个单词')
        for (let index = 1; index <= day; index++) {
            document.write(`第${index}天<br>`)
            for (let index = 1; index <= count; index++) {
                document.write(`第${index}个单词<br>`)
            }
            
        }
</script>

控制循环

  • continue
    • 结束本次循环，继续下一次循环
  • break
    • 跳出整个循环
    • 用if else分支也可以控制，但是break性能更加好（代码调用更少）

数组

声明语法

let arr = [数据，数据，...]

索引（下标）

相当于数组中某个数据的编号

取值语法

arr[0]
arr[1]

例子

// 声明语法
let arr = ['apple','watermelon','banana']
// apple 下标
arr[0]
// 数组长度
console.log(arr.length)
// 超出数组长度部分为 undefined
console.log(arr[100])

基本使用

遍历数组

let arr = ['苹果','西瓜','草莓','芒果']
for (let index = 0; index < arr.length; index++) {
    console.log(arr[index])

}

操作数组

增加元素

arr.push()（常用）

将一个或多个元素添加到数组的末尾，并返回数组的新长度

arr.unshift()（了解）

将一个或多个元素添加到数组的开头，并返回该数组的新长度

arr.splice（开始下标，0，添加内容）

指定想要添加的下标和内容，内容会挤掉下标位置原来的内容（不能指定添加个数）

删除元素

arr.pop()（常用）

删除最后一个元素,返回被删除的元素

arr.shift()

删除第一个元素,返回被删除的元素

arr.splice（开始下标，删除个数）

指定想要删除的下标和个数

拓展

获取数组最后一个元素

arr[arr.length - 1]

修改元素（下标已有元素时）

let arr['1','2','3']
arr[0]='6'

添加元素（下标是undefined时）

let arr['1','2','3']
arr[3]='6'

清空数组

  • let arr['1','2','3']
arr=[]

  • let arr['1','2','3']
arr.length=0

选择性清空数组

let arr['1','2','3']
arr.length=2

数组可以存放任意类型的数据

动态生成柱状图案例

函数

function，是被设计为执行特定任务的代码块，有利于精简代码方便复用

基本使用

  • function 函数名(){
	函数体
}

  • function sayHi(){
document.write('你好')
}

sayHi()

  • 命名规范

    • 和变量命名基本一致
    • 小驼峰命名法
    • 前缀应该写动词
    • 动词建议
      • can——判断是否可执行
      • has——判断是否含义某个值
      • is——判断是否为某个值
      • get——获取某个值
      • set——设置某个值
      • load——加载某些数据

函数传参

声明和调用

function getSum(num1,num2){
	document.write(num1 + num2)
}
getSum(10, 20)

形参和实参

  • 形参
    • 声明函数时卸载括号里
  • 实参
    • 调用函数时写在括号里
  • 开发中尽量保持形参实参数量一致

函数返回值

  • 函数缺点：把计算后的结果处理方式写死，内部处理了
  • 解决：把处理结果返回给调用者
  • 有返回值函数的概念：
    • 当调用某个函数，这个函数会返回一个结果出来
  • 不能同时执行多个return，只有第一个return会生效
  • return下面的代码不会再执行

作用域

  • 一段代码所用的名字并不总是有效，限定名字可用性的代码范围就是这个名字的作用域
  • 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

全局作用域

作用域所有代码执行环境

局部作用域

作用域函数内的代码环境

块级作用域

由{}包括，if语句和for语句里面的{}等

作用域链

代码寻找变量的一种机制，遵循就近原则，一层一层往上找变量

  • 如何判断当前变量输出的是什么
    • 要根据函数的定义来判断，而不是函数的调用

匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用

let fn = function(){
	//函数体
}
fn()

自执行函数

  • 自执行函数=匿名函数一起出现

  • 函数在定义的同时直接就执行了

  • 适合做一次性的任务，不希望再次复用

  • 函数包装多段代码，简洁程序

  • 防止变量污染

  • (function (){
	document.title="123"
})()

对象

保存多个数据

声明对象

let 对象名={}

访问对象

  1. 对象名.属性名

  2. 对象名["属性名"]

  3. 前者更常用

  4. 注意

    1. let uname='color'
let person={
    uname:'xiaomi',
    color:'yellow'
}
console.log(person[uname])//输出yellow,这里的uname相当于全局变量uname的值
console.log(person[color])//浏览器报错
console.log(person.age)//输出undefined

对象方法

let person={
    uname:'wow',
    pwd:'189189189',
    hobby:'haha',
    sayHi:function (msg){
    console.log(msg)
    return '来自 person 问候'
	}
}

let result=person.sayHi('你好')
console.log(result)

操作对象

  • 增

    • let person={}
person.color='red'

    • let person={}
person.sayHi=function (){
    console.log('hello')
}

  • 删

    • let person={}
person.color='green'
delete person.color

  • 查

    • let person={
    uname:'wow',
    pwd:'189189189',
    hobby:'haha'
}
console.log(person.uname)

  • 改

    • let person={}
person.color='red'
person.color='green'

遍历对象

对象不能确定长度length

内置对象

Math

  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • min：找最大数
  • pow：找最小数
  • abs：绝对值
  • round：四舍五入
avatar
文章
阅读
粉丝