JS基础复习

JS基础复习总结

JavaScript是一种运行在**客户端(互联网)**的一种编程语言,实现人机交互。它可以动态地改变网页内容、添加动画效果,甚至与服务器进行通信。它由ECMAScript(基础语法)和web APIS(BOM、DOM)组成。

基础语法

JS简介

引入方式
  • 通过 script 标签包裹 JavaScript 代码
<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好,js~')
  </script>
</body>
  • 将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入
<body>
  <script src="./js/my.js">
    // 中间不要写内容
    // 如果 script 标签使用 src 属性引入了某 .js 文件,那么此处标签的代码会被忽略!!
  	alert(666);
  </script>
</body>
注释
  • 单行注释:ctrl + /

  • 多行注释:shift + alt + a

输入输出
  • 输出:alert()document.wirte()console.log('')

  • 输入:prompt()

 <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')
    // 3. 输入语句
    prompt('请输入您的年龄:')
  </script>

变量

变量就是一个装东西的盒子,是计算机用来存储数据的容器

注意:变量不是数据本身,它只是存储数据的容器

letvar 来声明(定义)变量

<script>
    // 1. 声明一个年龄变量
    // let age
    // // 2. 赋值   =  赋值
    // age = 18
    // console.log(age)
    // 3. 声明的同时直接赋值  变量的初始化
    // let age = 18
    // 小案例
    let num = 20
    let uname = '橙子'
    console.log(num)
    console.log(uname)
     // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>

常量

当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let

<script>
    // 1.常量 不允许更改值
    // const PI = 3.14
    // console.log(PI)
    // PI = 3.15
    // console.log(PI)
    // 2. 常量声明的时候必须赋值
    // const PI 
  </script>

数据类型

JS数据类型主要分为两大类:基本数据类型和引用数据类型

基本数据类型
  • 数字类型:分为小数、正数、负数等
 <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
  • 字符串类型:通过单引号( '') 、双引号( "")或反引号包裹的数据都叫字符串,一般使用单引号
<script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字,但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
  • 布尔类型:它有两个固定的值 truefalse,表示肯定的数据用 true,表示否定的数据用 false
let isCool = false
console.log(isCool)
  • 未定义类型(undefined):只声明,未定义
 <script> 
    // 只声明了变量,并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
  • null:通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object
引用数据类型

对象(object),是一种无序的数据集合。它由属性和方法两部分构成

语法:
<script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象,它包含了一个属性 name
    // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    };
    
    // 访问人的名字
    console.log(person.name) // 结果为 小明
    // 访问人性别
    console.log(person.gender) // 结果为 男
    // 访问人的身高
    console.log(person['stature']) // 结果为 185
   // 或者
    console.log(person.stature) // 结果同为 185
  </script>
方法和调用
<script>
    let obj = {
      uname: '刘德华',
      // 方法
      song: function (x, y) {
        // console.log('冰雨')
        console.log(x + y)
      },
      dance: function () { }
    }
    // 方法调用 对象名.方法名
    // console.log(obj.song(1, 2))
    obj.song(1, 2)

    // document.write('123')
  </script>
遍历对象
let obj = {
    uname: 'orange'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}
内置对象

1.Math是 JavaScript 中内置的对象,称为数学对象,这个对象既包含了属性,也包含了许多方法

2.各种方法

  • Math.random,生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
  • Math.ceil,数字向上取整
// 舍弃小数部分,整数部分加1
Math.ceil(3.4)
  • Math.floor,数字向下取整
// 舍弃小数部分,整数部分不变
Math.floor(4.68)
  • Math.round,四舍五入取整
// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)
  • Math.max,在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
  • Math.min,在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)
  • Math.pow,幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
  • Math.sqrt,平方根
// 求某数的平方根
Math.sqrt(16)

数据类型的转换

隐式转换:
  • 两侧主要有一个字符串,都会把另一个转换成字符串
  • 除了+以外的算术运算符,如- * / 等都会把数据转为数字类型
  • +作为正号解析可以转换为数字型
<script>
    console.log(1 + 1)
    console.log('pink' + 1)
    console.log(2 + 2)
    console.log(2 + '2') // 22
    console.log(2 - 2)
    console.log(2 - '2')  // 0  
    console.log(+12)
    console.log(+'123')  // 转换为数字型
  </script>
显示转换
  • 自己写代码告诉系统转换为什么类型
<script>
    let str = '123'
    console.log(Number(str))

    console.log(parseInt('12px'))//12
    console.log(parseInt('12.34px'))//
    console.log(parseInt('abc12.94px'))//NaN

    // -------------------
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // NaN
  </script>

流程控制

运算符

算数运算符
  • 主要包括加、减、乘、除、取余(%)等
// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景:  用来判断某个数是否能够被整除
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败,则返回的结果是 NaN (not a number)
console.log('橙子' - 2)
console.log('橙子' * 2)
console.log('橙子' + 2)   // 橙子2
赋值运算符
  • 对变量进行赋值的运算符
<script>
    let num = 1
    // num = num + 1
    // 采取赋值运算符
    // num += 1
    num += 3
    console.log(num)
  </script>
一元运算符

在这里插入图片描述
***只有变量能够使用自增和自减运算符

<script>
    // let num = 10
    // num = num + 1
    // num += 1
    // // 1. 前置自增
    // let i = 1
    // ++i
    // console.log(i)

    // let i = 1
    // console.log(++i + 1)
    // 2. 后置自增
    // let i = 1
    // i++
    // console.log(i)
    // let i = 1
    // console.log(i++ + 1)

    // 了解 
    let i = 1
    console.log(i++ + ++i + i)
  </script>
比较运算符

比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)

<script>
    console.log(3 > 5)
    console.log(3 >= 3)
    console.log(2 == 2)
    // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
    console.log(2 == '2')  // true
    // console.log(undefined === null)
    // === 全等 判断 值 和 数据类型都一样才行
    // 以后判断是否相等 请用 ===  
    console.log(2 === '2')
    console.log(NaN === NaN) // NaN 不等于任何人,包括他自己
    console.log(2 !== '2')  // true  
    console.log(2 != '2') // false 
    console.log('-------------------------')
    console.log('a' < 'b') // true
    console.log('aa' < 'ab') // true
    console.log('aa' < 'aac') // true
    console.log('-------------------------')
  </script>
逻辑运算符
  • 可以把多个布尔值放到一起运算,最终返回一个布尔值
    在这里插入图片描述
 <script>
    // 逻辑与 一假则假
    console.log(true && true)
    console.log(false && true)
    console.log(3 < 5 && 3 > 2)
    console.log(3 < 5 && 3 < 2)
    console.log('-----------------')
    // 逻辑或 一真则真
    console.log(true || true)
    console.log(false || true)
    console.log(false || false)
    console.log('-----------------')
    // 逻辑非  取反
    console.log(!true)
    console.log(!false)

    console.log('-----------------')

    let num = 6
    console.log(num > 5 && num < 10)
    console.log('-----------------')
  </script>
运算符优先级

在这里插入图片描述

语句

一段可以执行的代码,是一个行为,例如分支语句、循环语句

分支语句
  • 可以根据条件判定真假,来选择性的执行想要的代码

包括:if分支语句、三元运算符

if分支语句
<script>
  //单分支
    // 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>
<script>
    //多分支
    // 1. 用户输入
    let score = +prompt('请输入成绩:')
    // 2. 判断输出
    if (score >= 90) {
      alert('成绩优秀,宝贝,你是我的骄傲')
    } else if (score >= 70) {
      alert('成绩良好,宝贝,你要加油哦~~')
    } else if (score >= 60) {
      alert('成绩及格,宝贝,你很危险~')
    } else {
      alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')
    }
  </script>
三元运算符
  • 写起来比 if else双分支 更简单

  • 符号:? 与 : 配合使用

  • 语法:

条件 ? 表达式1 : 表达式2
  • 举例:
<script>
    // 三元运算符
    // 条件 ? 代码1 : 代码2
    // console.log(3 > 5 ? 3 : 5)
    // if (3 < 5) {
    //   alert('真的')
    // } else {
    //   alert('假的')
    // }
    // 3 < 5 ? alert('真的')  : alert('假的')

    let sum = 3 < 5 ? 3 : 5
    console.log(sum)
  </script>
循环语句
while循环
  <script>
    // // 1. 变量的起始值
    // let i = 1
    // // 2. 终止条件
    // while (i <= 3) {
    //   document.write('我要循环三次 <br>')
    //   // 3. 变量的变化量
    //   i++
    // }
    // 1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }
  </script>
  • 中止循环

break 中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)

continue 中止本次循环,一般用于排除或者跳过某一个选项的时候

<script>
    // let i = 1
    // while (i <= 5) {
    //   console.log(i)
    //   if (i === 3) {
    //     break  // 退出循环
    //   }
    //   i++

    // }

    let i = 1
    while (i <= 5) {
      if (i === 3) {
        i++
        continue
      }
      console.log(i)
      i++
    }
  </script>
  • 无限循环
<script>
    while (true) {
      let str = prompt('你喜欢晴天吗')
      // 退出条件 喜欢
      if (str === '喜欢') {
        break
      }
    }
  </script>
for循环

1.实现循环的三要素

<script>
    // 利用for循环输出三句话 爱吃水果
    for (let i = 1; i <= 3; i++) {
      document.write('爱吃水果<br>')
    }
  </script>

2.跳出和终止循环

<script>
    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     continue  // 退出本次循环,本次循环中 continue下面的语句不在执行
    //   }
    //   console.log(i)
    //   document.write(i)
    // }

    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     break  // 退出整个循环 结束循环
    //   }
    //   console.log(i)
    //   document.write(i)
    // }
    // 无限循环
    for (; ;) {
      console.log(11)
    }
  </script>

3.循环嵌套

<script>
    // 外层循环打印 第 n 天
    for (let i = 1; i <= 3; i++) {
      document.write(`${i}天<br>`)
      // 里层循环打印 第几个单词
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第${j}个单词<br>`)
      }
    }
  </script>

数组

数组:(Array)是一种可以按顺序保存数据的数据类型

定义数组

  • 通过[]来定义数组,数组中可以存放真正的数据,用英文逗号间隔开
<script>
    // 1. 字面量声明数组
    // let arr = [1, 2, 'pink', true]
    // 2. 使用new Array 构造函数声明   了解
    // let arr = new Array(1, 2, 3, 4)
    // console.log(arr)
  </script>

访问和数组索引

<script>
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
  
  // 1. 访问数组,语法格式为:变量名[索引值]
  document.write(classes[0]) // 结果为:小明
  document.write(classes[1]) // 结果为:小刚
  document.write(classes[4]) // 结果为:小米
  
  // 2. 通过索引值还可以为数组单重新赋值
  document.write(classes[3]) // 结果为:小丽
  // 重新为索引值为 3 的单元赋值
  classes[3] = '小小丽'
  document.wirte(classes[3]); // 结果为: 小小丽
</script>

操作数组

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

函数

函数就是被设计为执行特定任务的代码块,即把具有相同或相似逻辑的代码包裹起来,通过函数来调用执行这些代码逻辑。

函数声明和调用

声明
  • 一个完整函数包括关键字、函数名、形式参数、函数体、返回值

在这里插入图片描述

函数调用
 <script>
    // 声明(定义)了最简单的函数,既没有形式参数,也没有返回值
    function sayHi() {
      console.log('嗨~')
    }
    // 函数调用,这些函数体内的代码逻辑会被执行
    // 函数名()
        
    sayHi()
    // 可以重复被调用,多少次都可以
    sayHi()
  </script>

函数传参

  • 通过向函数传递参数,使函数更加灵活多变
<script>
    // 2. 求 1~100 累加和
    // function getSum(end) {   // end = 50
    //   // console.log(end)
    //   let sum = 0
    //   for (let i = 1; i <= end; i++) {
    //     sum += i
    //   }
    //   console.log(sum)
    // }
    // getSum(50)  // 1~50
    // getSum(100)  // 1~100

    function getSum(start, end) {   // end = 50
      // 形参  形式上的参数  
      // console.log(end)
      let sum = 0
      for (let i = start; i <= end; i++) {
        sum += i
      }
      console.log(sum)
    }
    getSum(1, 50)  // 调用的小括号里面 实参 - 实际的参数
    getSum(100, 200)  // 实参 - 实际的参数
  </script>

函数返回值

  1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用

  2. 函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行,所以return 后面的数据不要换行写

  3. return会立即结束当前函数

  4. 函数可以没有return,这种情况默认返回值为 undefined

    <script>
        // // 函数的返回值
        // function fn() {
        //   return 20
        // }
        // // fn() 调用者 相当于执行了    fn()   = 20
        // // return 的值返回给调用者
        // // console.log(fn())
        // // let num = prompt('请输入数字')
        // let re = fn()
        // console.log(re)
    
        // 求和函数的写法
        function getTotalPrice(x, y) {
          return x + y
          // return 后面的代码不会被执行
        }
        // console.log(getTotalPrice(1, 2))
        // console.log(getTotalPrice(1, 2))
        let sum = getTotalPrice(1, 2)
        console.log(sum)
        console.log(sum)
    
        function fn() {
    
        }
        let re = fn()
        console.log(re)  // undefined
      </script>
    

作用域

全局作用域

全局有效→作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

局部作用域

局部有效→作用于函数内的代码环境,就是局部作用域

<script>
    let num = 10  // 1. 全局变量
    console.log(num)
    function fn() {
      console.log(num)
    }
    fn()

    // 2. 局部变量
    function fun() {
      let str = 'pink'
    }
    console.log(str)  // 错误
  </script>

匿名函数

  • 没有名字的函数,无法直接使用;

  • 需要将匿名函数赋值给一个变量,并通过变量名进行调用

// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()
  • 立即执行函数:为了防止变量污染;无需调用,立即执行
(function(){ xxx  })();
(function(){xxxx}());
  • 22
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值