JavaScript知识点回顾

DeDeDeFeng

已于 2024-02-22 23:01:35 修改

阅读量307

点赞数 8

文章标签： javascript 开发语言 ecmascript

于 2024-01-25 22:45:49 首次发布

本文链接：https://blog.csdn.net/DeDeDeFeng/article/details/135854862

版权

声明变量 var int let

let 和 var 区别 :

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。var现在开发中一般不再使用它，只是我们可能再老版程序中看到它let 为了解决 var 的一些问题。
var 声明:

可以先使用在声明(不合理）
var 声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等

常量 PI 不需要重新赋值/更改的数据使用const

PI （念“pai”）常量值不允许更改

const PI = 3.14

console.log(PI)

声明的时候必须赋值

const PI 不可以

数据类型

JS 数据类型整体分为两大类:

基本数据类型
引用数据类型

模板字符串

使用场景

拼接字符串和变量
在没有它之前，要拼接变量比较麻烦

语法

``(反引号)
在英文输入模式下按键盘的tab键上方那个键
内容拼接变量时，用${}包住变量

let age = 20

document.write(`我今年${age}岁了`)

null 和 undefined 区别:

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景:

官方解释:把 null作为尚未创建的对象
大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则:

+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如-*/等都会把数据转成数字类型

缺点:

转换类型不明确，靠经验才能总结

小技巧:

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换

概念:

自己写代码告诉系统该转成什么类型

转换为数字型

Number(数据)

parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数

// 案例
// 方法一
let num1 = prompt('请输入第一个数')
let num2 = prompt('请输入第二个数')
alert(`结果为${Number(num1) + Number(num2)}`)
// 方法二
let num3 = +prompt('请输入第一个数')
let num4 = +prompt('请输入第二个数')
alert(`结果为${num3 + num4}`)

案例
<style>
  h2 {
    text-align: center;
  }
  table {
    /* 合并相邻边框 */
    border-collapse: collapse;  
    height: 80px;
    margin: 0 auto;
    text-align: center;
  }
  th {
    padding: 5px 30px;
  }
  table,
  th,
  td {
    border: 2px solid #000;
  }
</style>



<body>
  <h2>订单确认</h2>
  
  <script>
    let uname = prompt('请输入商品名称：')
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收货地址：')
    let total = price * num
    document.write(`
    <table>
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>${uname}</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
    </table>
    `)
  </script>
</body>

常见错误

运算符

赋值运算符

那么如果我们要num加3怎么写

let num = 1

num += 3

cosole.log(num) // 结果为 4

一元运算符

自增:

符号:++

作用:让变量的值 +1

前置自增:

每执行1次，当前变量数值加1
其作用相当于 num += 1

后置自增:

每执行1次，当前变量数值加1
其作用相当于 num +=1

前置自增和后置自增如果参与运算就有区别:(难点,但是了解即可)

自减:

符号:--

作用:让变量的值 -1

程序三大流程控制语句

分支结构

if语句

适用于有多个结果的时候，比如学习成绩可以分为：优良中差

三元表达式

switch语句

<script>
  let num1 = +prompt('请输入第一个数字：')
  let num2 = +prompt('请输入第二个数字：')
  let sp = prompt('请输入 + - * / 其中的一个：')
  switch (sp) {
    case '+':
      alert(`两个数的加法操作是${num1 + num2}`)
      break
    case '-':
      alert(`两个数的减法操作是${num1 - num2}`)
      break
    case '*':
      alert(`两个数的乘法操作是${num1 * num2}`)
      break
    case '/':
      alert(`两个数的除法操作是${num1 / num2}`)
      break
    default:
      alert(`输错了，请输入 + - * / 其中的一个`)
  }
</script>

循环

while循环

// 打印5句话
let i = 1 
while (i <= 5) {
  if (i === 6) {
    break // 退出整个循环
  }
  console.log(`我要吃第${i}个包子`)
  i++
}

let i = 1 
while (i <= 5) {
  if (i === 3) {
    i++
    continue // 结束本次循环
  }
  console.log(`我要吃第${i}个包子`)
  i++
}

for循环

for循环嵌套（双重for循环）

数组

操作数组

数组本质是数据集合,操作数据无非就是增删改查语法:

操作数组-新增

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度