JavaScript知识点

JavaScript是什么

1、运行在客户端的脚本语言

2、脚本语言：不需要翻译，运行过程中由js解释器逐行进行解释并执行

3、目前也可基于Node.js技术进行服务端编程

JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

浏览器执行JS简介

渲染引擎：用来解析HTML与CSS，俗称内核，比如：chrome浏览器的blink，老版本的webkit
JS 引擎：也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行，比如： chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。

JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行,所以JavaScript 语言归为脚本语言,会逐行解释执行。

JS的组成

JavaScript语法—-ECMAScript: 是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用厂泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。(ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。)
Web APIs：
- 页面文档对象模型—-DOM：文档对象模型(DocumentObjectModel,简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口阔过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
- 浏览器对象模型—-BOM：(Browser ObjectModel,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
ECMAScript

JavaScript（网景公司） JScript（微软公司）

ECMAScript
JavaScript（网景公司）	JScript（微软公司）

标识符

标识符由：字母、美元符号$、下划线和数字组成，其中数字不能开头。

温馨提示：

中文也是合法标识符，但是不推荐使用。

JS数据类型

JS数据类型常见有：

原始数据类型：
- 数值：变量可存放数值，比如 100
- 字符串：字符串被包围在双引号或单引号中（文本），模板字符串：
  1
  2
  //用反斜号（英文输入下tab键上方键）包含字符串，内容拼接时变量用${}包裹
  document.write(`大家好，我叫${name}，今年${age}岁了`)
- 布尔值：false、true（只此两个值）
- 特殊值：代表没有或空
  - null：一般代表对象为“没有”
  - undefined：一般代表数值为“没有”
合成类型：由原始数据类型组合而成，（object（对象））
- 对象：JavaScript 对象用花括号来书写。对象属性是多组 name:value ，由逗号分隔。

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

显式转换

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

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到源代码一栏（ sources ）
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

循环语句使用习惯

当明确了循环次数的时候推荐使用for循环
当不明确循环次数的时候推荐使用while循环

操作数组

数组的增、删、改、查：

数组元素修改：

选择数组元素进行重新赋值操作

<script>
   // 2. 通过索引值还可以为数组单重新赋值
  document.write(classes[3]) // 结果为：小丽
  // 重新为索引值为 3 的单元赋值
  classes[3] = '小小丽'
  document.wirte(classes[3]); // 结果为： 小小丽
</script>

数组元素增加：

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。**unshit()**向数组头部添加一个单元

<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)
</script>

数组元素删除：

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容

<script>
    // 定义一个数组
    let arr = ['html', 'css', 'javascript']
	
	//pop() 删除最后一个单元
  	arr.pop()
 	console.log(arr)

    // shift() 删除第一个单元
    arr.shift()
    console.log(arr)

	// splice(start, deleteCount),splice(起始位置-索引号，删除几个)动态删除任意单元
	// 第二个值若不写就会从起始位置删除到最后
  	arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  	console.log(arr)
</script>

数组元素查找：数组名 + 数组下标访问数组数据，可采用for循环进行数组遍历。(常见应用：数据筛选)

<script>
  // 重点案例
  let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
  // 1. 声明新的空的数组
  let newArr = []
  // 2. 遍历旧数组
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
      // 3. 满足条件 追加给新的数组
      newArr.push(arr[i])
    }
  }
  // 4. 输出新的数组
  console.log(newArr)
</script>

具名函数和匿名函数

具名函数： function fn() { } function 函数名(形参列表) {函数体}

匿名函数：let fn = function(){} //没有函数名，匿名函数的调用可使用变量名加（）

具名函数和匿名函数的区别：

具名函数的调用可以写到任何位置
匿名函数的调用必须先声明函数表达式，后调用

立即执行函数（匿名函数的一种）：定义后立即调用，不用再写函数调用语句。有两种写法：

// 1. 第一种写法
    (function (x, y) {
      console.log(x + y)
      let num = 10
      let arr = []
    })(1, 2);
    // (function(){})();
	// (匿名函数)()；（）相当于调用

// 2.第二种写法
    // (function () { }());
	//(匿名函数（）)；  中间的（）相当于调用
    (function (x, y) {
      let arr = []
      console.log(x + y)
    }(1, 3));

注意：多个立即执行函数间必须要有逗号隔开！

对象使用（增、删、改、查）

//使用属性 查 对象名.属性名
let obj = {
    name: 'xiaomi',
    num: '165153461531',
    address: '中国大陆'
}

console.log(obj.address)  //打印结果：'中国大陆'

//使用属性 改 对象名.属性名赋值
obj.name = '华为'
console.log(obj.name)  //结果：'华为'

//使用属性 增 对象名.属性名赋值 若对象中没有此属性即为增，若有则为改
obj.weight = '0.55kg'
console.log(obj)  //结果为：{name: 'xiaomi',num: '165153461531',address: '中国大陆'，obj.weight：'0.55kg'}

//使用属性 删 （新语法不允许）delete 对象名.属性名
delete obj.weight

遍历对象

let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组因为 k 是字符串