JavaScript 基础篇一

最新推荐文章于 2023-02-03 16:23:34 发布

瞎玩瞎写瞎学的橘子君

最新推荐文章于 2023-02-03 16:23:34 发布

阅读量247

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44152977/article/details/126757593

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

历史

布兰登。艾奇（1961~）
1995年，十天完成设计
网景公司最初为LiveScript ，后来与Sun合作，将其改名为Javascript

javascript是什么？

运行在客户端的脚本语言。
脚本语言：不需要编译器，运行过程中由js解释器，逐行执行。
可以基于node.js平台，进行服务器端编程。

祂能做什么？

最早作为表单验证，减少服务器压力。
网页特效
服务端开发 Node.js
桌面程序 Electron
App Cordova
控制硬件-物联网 Ruff
游戏开发 cocos2d-js

解释性语言与编译型语言

概述：计算机不能直接理解任何除了机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序，程序语言翻译成机器语言的工具，被称为翻译器。
js ===> 翻译器 ===> 机器语言
翻译器翻译方式有两种，一个是编译，另外一个是解释。区别是翻译的时间点不同。
解释：翻译一行执行一行。类似吃火锅。
编译：翻译完全部再执行。类似吃餐馆。

标识符，关键字，保留字

标识符：就是开放人员为变量，属性，函数，参数取得名字。不能为关键字与保留字。
关键字：指的是Js本身就已经使用了的名字，不能再用它们充当变量名，方法名。不用去记。
保留字：被预留的名字。

浏览器执行js

浏览器两个部分：
- 1.渲染引擎 blink 老版本webkit
- 2.js引擎 v8
浏览器本身不会执行js代码，而是内置的js引擎（v8解释器）来执行js代码，引擎执行代码时，是逐行解释每一句源码，然后转换为机器语言，再由计算机去执行，所以js语言归为脚本语言，会逐行解释执行。

js组成

1.Ecmascript 语法
2.Dom 页面文档对象
3.Bom 浏览器对象

js代码写法

1.行内方式
2.内嵌方式
3.外部引用方式

js注释

单行注释 ctrl + /
多行注释 ctrl + shift + / (需要修改vscode默认 shift + alt + a)

js常用输出语句

alert() 浏览器弹框
console.log() 浏览器控制台打印
prompt() 浏览器弹出赋值操作，取过来的值是字符串

变量赋值

变量就是存储一个数据的容器，存在内存里面。
1.声明一个变量，var age;
2.变量赋值 age = 18
3.变量会被重新赋值，原有值就会被覆盖
4.同时申请多个变量： var age,name,address;
5.变量注意事项：
- 1.如何只声明变量不赋值，打印结果为undefined
- 2.不声明不赋值，直接使用，报错
- 3.不声明直接使用，可以使用，由于预编译，将会成为全局变量。不建议这么写。
6.变量的命名规范
- 有字母开头，或者_ 下划线，美元符号： _name $
- 严格区分大小写
- 不能以数字开头
- 不能是关键字
- 变量名要有意义
- 遵循驼峰命名法
7.案例练习，两个变量交换。

数据的类型

javascript是一种弱类型或者说是动态语言，这意味着不用提前声明变量的类型，在程序运行过程汇总，类型会被自动确定。

简单数据类型

Number
- 八进制，十六进制
- 最大值，最小值
- 三个特殊值
  - Infinity 表示无穷大
  - -Infinity 表示负无穷
  - NaN 非数
    - isNaN() 方法判断是否为数字
Boolean
- true 1
- false 0
- 可以参与±运算
String
- 双引号与单引号
- 转义符号：
  - \n 换行
  - \t tab键，退格符
  - ’ 单引号
- length获取字符串的长度
- 字符串拼接 str + str1 + str2
Undefined
- 是false
- undefined + str = undefinedstr
- undefined + 1 = NaN
Null
- 是false
- null + 1 = 1
- null + str = nullstr
控制台的颜色也可以看见不同类型，有不同颜色。

简单数据间的数据类型转换

转换为字符串

var num = 123
// 数字转换为字符串
// 1 toString
var str = num.toString()
// 2 String
console.log(String(num));
// 3 + '' 隐式转换
console.log(num + '');```

转换为数字

// 1.parseInt() 重点 取整
console.log(parseInt(stringNum));
console.log(parseInt('123px'));
console.log(parseInt('123px123'));
console.log(parseInt('px123')); // NaN
// 2.parseFloat() 重点
console.log(parseFloat(stringNum))
// 3.Number()
console.log(Number(stringNum));
// 4. - * / 隐式转换 重点
console.log(stringNum - 0) ```

转换为布尔值

// 代表空，否定的值会转换为false，如 0 NaN null undefined
// 其余之都会转换为True
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(Infinity)); // true
console.log(Boolean(-Infinity)); // true

复杂数据类型

表达式与返回值

表达式是运算的过程
返回值是运算的结果
var num = 1 + 1 , 1+1计算的过程称为表达式，1+1 =2 ;2的这个结果为返回值; 最后再把2赋值给num

运算

运算符
- ‘+’ ‘-’ * / %(取余) ++ – += -= *= /= %=
- 注意，浮点数运算里面会有问题 console.log(0.1 + 0.2) // 0.30000000000004
- 注意，浮点数运算里面会有问题 console.log(0.07 * 100) // 7.00000000000001
- 未来，不要用浮点数判断是否相等。
算数运算符加减乘除…

递增和递减运算符

后置递增num++ 口诀：先返回原值，后自加

前置递增++num 相当于 num = num + 1 口诀：先自加，后返回值

var num = 10
var age = 10
console.log(++num + 10); // 21
// age++ 先返回原值 再+1，所以age++ 当前还是10
console.log(age++ + 10) // 20
console.log(age) // 11

// 练习1
var a = 10
++a; // ++a 11
var b = ++a + 2 // 11+1 12 12+2 
console.log(b) // 14
// 练习2
var c = 10
c++ // 10 10+1 11
var d = c++ + 2 // 11  11+2 
console.log(d) // 13 此时的c 12
// 练习3
var e = 10
var f = e++ + ++e // 22
// 可以如下理解
// var f = e++ + 0 + ++e // 10 + 12 = 22
console.log(f)

num-- --num

比较运算
- < => <= == != === !==
逻辑运算
- || 或 &&并且 !非
- 逻辑与短路运行
- 逻辑与的运算级别高于逻辑或，先算逻辑与
赋值运算
运算优先等级

流程控制

if(){}else{}
if(){}else if {} else if{} else{}
三元表达式 age=18?“是”:“否”
switch分支控制流程语句
范围判断用if else 固定值用switch

  <script>
  numStr = prompt('请输入你的年龄')
  if (numStr + 0 < 18) {
    alert('你的年龄未满18，不能上网')
  } else {
    alert('欢迎光临')
  }
  var key = 1
  // key 与 case value 的值 是全等才会执行。
  // 如果没有break打断，将会一直执行下去。
  switch (key) {
    case 1:
      console.log(1)
      break;
    case 2:
      console.log(2)
      break;
    default:
      console.log('没有数字')
  }
</script>```

循环

1.计数器
2.判断条件（表达式）true 继续? false 暂停
3.执行内容

<script>
  // for循环
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
  /* 执行过程：
      var i = 0
      i < 10 判断 成立
      console.log(0)
      i++ 1
      1 < 10 判断 成立
      console.log(1)
      i++
   */
  for (var i = 0; i < 10; ++i) {
    console.log(i);
  }
  // 双循环
  var str = ''
  for (var i = 1; i <= 9; i++) {
    // 第二次循环的最大值是第一次i
    for (var j = 1; j <= i; j++) {
      str = str + i + 'x' + j + '=' + i * j + ' '
    }
    // 循环完结束，进行一个换行
    str = str + '\n'
  }
  console.log(str);
  // 九九乘法表
  /* 1x1=1
  2x1=2 2x2=4 
  3x1=3 3x2=6 3x3=9 
  4x1=4 4x2=8 4x3=12 4x4=16 
  5x1=5 5x2=10 5x3=15 5x4=20 5x5=25 
  6x1=6 6x2=12 6x3=18 6x4=24 6x5=30 6x6=36 
  7x1=7 7x2=14 7x3=21 7x4=28 7x5=35 7x6=42 7x7=49 
  8x1=8 8x2=16 8x3=24 8x4=32 8x5=40 8x6=48 8x7=56 8x8=64 
  9x1=9 9x2=18 9x3=27 9x4=36 9x5=45 9x6=54 9x7=63 9x8=72 9x9=81  */
</script>
<script>
  // while循环
  var numStart = 0
  while (numStart <= 5) {
    numStart++
    console.log('我是while循环')
  }
</script>
<script>
  // do while 循环
  // do while 无论如何 都会执行一次代码，因为循环条件被后置了。
  var i = 1
  do {
    // 循环体
    console.log('我是do while循环')
    // 计数器
    i++
  } while (i < 5); // 循环条件
</script>```

数组

一组数据的集合叫做数组
创建数组的方式
- new
- 字面量定义 []
遍历数组

<script>
  // 通过new的方式
  var arry = new Array()
  console.log(typeof arry);
  // console.dir()可以打印出对象的所有对象及方法。
  console.dir(arry);
  console.log(JSON.stringify(arry)) // 利用json打印对象数据的内容
  // 字面量的方式
  var list = []
</script>
<script>
  // 遍历数组
  // 1.计数平均数
  var list = [3, 2, 4, 5, 1, 6]
  var len = list.length
  var num = 0
  for (var i = 0; i < len; i++) {
    num = num + list[i]
    console.log(list[i])
  }
  var averageNum = num / len
  // 2.求数组中的最大值
  var maxNum = list[0]
  for (var i = 1; i < len; i++) {
    if (maxNum < list[i]) {
      maxNum = list[i]
    }
  }
  console.log('maxNum:' + maxNum)
  // 3.数组转换为字符串
  var str = ''
  for (var i = 0; i < len; i++) {
    str = str + list[i] + '|'
  }
  console.log(str)
  // 4.数组中新增元素
  // 4.1直接修改length长度，会增加undefined空元素
  // 4.2用下标的方式添加
  var newList = []
  for (var i = 0; i < 10; i++) {
    newList[i] = i
  }
  console.log('数组添加数据:', newList)
</script>
<script>
  // 筛选数组
  var arry = [1, 2, 3, 4, 5]
  var newArry = []
  // 外面加一个定时器
  var j = 0
  for (var i = 0; i <= arry.length; i++) {
    if (arry[i] > 3) {
      newArry[j] = arry[i]
      j++
    }
  }
  // 这种写法更秒
  // for (var i = 0; i <= arry.length; i++) {
  //   if (arry[i] > 3) {
  //     newArry[newArry.length] = arry[i]
  //   }
  // }
  console.log(newArry)
</script>
<script>
  console.log('数组去重');
  // 数组去重
  // 方法一利用字符串索引
  var list = [1, 2, 3, 4, 5, 4, 3, 4, 1, 2, 3]
  var str = ''
  for (var i = 0; i < list.length; i++) {
    console.log(str.indexOf(list[i]))
    if (str.indexOf(list[i]) < 0) {
      str = str + list[i]
    }
  }
  console.log(str)
  var newList = str.split('')
  console.log('数据去重', newList)
  // 方法二，利用对象
</script>
<script>
  // 数组反转
  var list = [1, 2, 3, 4, 5]
  var newArry1 = []
  for (var i = list.length - 1; i >= 0; i--) {
    newArry1[newArry1.length] = list[i]
  }
  console.log('数据反转', newArry1)
</script>
<script>
  // 冒泡排序  
  var list = [8, 2, 5, 4, 6, 7, 3, 9]
  // 外层循环时躺数
  for (var i = 0; i <= list.length - 1; i++) {
    // 内层循环时是交换的次数
    for (var j = 0; j < list.length - 1 - i; j++) {
      if (list[j] > list[j + 1]) {
        // temp = 8
        var temp = list[j]
        // list = [8, 2......]
        list[j] = list[j + 1]
        // list = [2.....]
        list[j + 1] = temp
        // list = [2, 8.......]
      }
    }
  }
  console.log('冒泡排序正序', list);
</script>```