JavaScript基础学习

零.零

已于 2024-05-10 09:51:19 修改

阅读量296

点赞数 1

分类专栏：前端学习学习笔记文章标签： javascript 学习开发语言

于 2023-07-05 16:21:03 首次发布

本文链接：https://blog.csdn.net/Peng_jj/article/details/131548549

版权

学习笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端学习

10 篇文章 0 订阅

订阅专栏

Lodash中文文档
 swiper官网

黑马学习视频链接

JavaScript 介绍
- JavaScript的组成
- JavaScript的书写位置
- JavaScript 注释
- JavaScript 输入输出语法
- 字面量（literal）
变量
- 变量的基本使用
- 变量的本质
- 变量的命名规范
- let和var的区别
- 数组
- 常量
数据类型
- 数字类型（number）
- 字符串类型（string）
- - 字符串拼接
  - 模板字符串
- 布尔类型(boolean)
- 未定义类型（undefined）
- 空类型(null)
- 检测数据类型
类型转换
- 隐式转换
- 显示转换
运算符
- 赋值运算符
- 一元运算符
- 比较运算符
- 逻辑运算符
- 运算符优先级
语句
- 程序执行的三大控制语句
for 语句
- for 语句的基本使用
- 循环嵌套
数组
- 声明语法：
- 取值语法：
- 一些术语：
- 遍历数组
- 操作数组
- 冒泡排序
- 数组排序
函数
- 函数使用
- - 函数的调用语法
  - 函数体
- 函数参数
- 作用域
- 匿名函数
- 逻辑中断
对象
- 什么是对象
- 遍历对象
- 内置对象
- - 内置对象 - Math
拓展
- 术语解释
- 基本数据类型和引用数据类型

JavaScript 介绍

JavaScript 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果.

可以用来实现:

网页特效(监听用户的一些行为让网页做出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)

JavaScript的组成

ECMAScript(JavaScript语言基础)

规定了js基础语法核心知识
比如：变量、分支语句、循环语句、对象等等

Web APIs

DOM(页面文档对象模型)
- 操作文档，比如对页面元素进行移动，大小，添加删除等操作
BOM(浏览器对象模型)
- 操作浏览器，比如对页面弹窗，检测窗口宽度，存储数据到浏览器等等

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

JavaScript的书写位置

CSS位置:

行内样式表
内部样式表
外部样式表

JavaScript:

内部 JavaScript
- 直接写在html文件里,用script标签包住
- 规范：script标签写在</body>上面
- 拓展：alert(‘你好,js’) 页面弹出警告对话框

注意事项：

我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此,将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

<body>   
    
    <script>
        alert('你好,js')
    </script>
</body>

外部 JavaScript
- 代码写在以.js结尾的文件里
- 语法：通过script标签，引入到html页面中。

<body>  

    <!-- 通过src引入外部js文件 -->
    <script src="./js/my.js">
        // 中间不要写内容
    </script>
</body>

js文件内容：

alert('你好,js')

注意事项:

script标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序,更易于复用,且没有了脚本的混合, HTML也会更加易读,因此这是个好的习惯。

内联 JavaScript
- 代码写在标签内部
- 语法:
  
  注意:此处作为了解,后面vue框架会使用这种模式

<body>
    <button onclick="alert('想🐍皮~~~')">点击我年薪百万</button>
</body>

JavaScript 注释

单行注释
- 符号：//
- 作用：//右边这一行的代码会被忽略
- 快捷键：ctrl + /
块注释
- 符号：/* */
- 作用：在/* 和 */之间的所有内容都会被忽略
- 快捷键：shift + alt + a
结束符
- 作用：使用英文的;代表语句结束
- 实际情况：实际开发中,可写可不写,浏览器(JavaScript引擎)可以自动推断语句的结束位置
- 现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
- 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）

JavaScript 输入输出语法

语法：任何计算机的规则约定

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语法：
- 语法1：document.write(‘要输出的内容’)
  - 作用：向body输出内容
  - 注意：如果输出的内容写的是标签，也会被解析成网页元素
- 语法2：alert(‘要输出的内容’)
  - 作用：页面弹出警告对话框
- 语法3：console.log(‘控制台打印’)
  - 作用：控制台输出语法，程序员调试使用

<script>
  // 1. 文档输出内容
  document.write('div标签')
  document.write('<h1>标题</h1>')
  // 2. 弹出警告对话框
  alert('警告')
  // 3. 控制台打印输出 给 程序员
  console.log('log日志')

  // 4. 输入语句
  prompt('请输入姓名：')
</script>

输入语法
- 语法：prompt(‘请输入姓名：’)
- 作用：显示一个对话框，对话框包含一条文字性息，用来提示用户输入的文字
JavaScript代码执行顺序
- 按HTML文档流顺序执行JavaScript代码
- alert()和prompt()它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)

字面量（literal）

在计算机科学中，字面量（literal）是在计算机中描述事/物

比如：

我们工资是: 1000 此时 1000 就是数字字面量
'黑马程序员’字符串字面量
还有[]数组字面量对象字面量等等

变量

变量是计算机存储数据的容器

白话：变量就是一个装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

变量的基本使用

变量的声明

想要使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：
- let 变量名
- 声明变量有两部分构成：声明关键字、变量名（标识）
- let即关键字（let:允许、许可、让、要）,所谓关键字是系统提供的专门用来声明（定义）变量的词语
变量的赋值

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”,然后是数值。

注意：变量里面的数据是通过变量名来获得的
更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
- 语法：多个变量中间用逗号隔开。

<script>
  // 1. 声明一个年龄变量
  let age

  // 2. 赋值   变量 = 值
  age = 18

  //  声明的同时直接赋值  变量的初始化
  let name = 'Navy'

  // 3. 更新变量
  age = 19

  // 4. 声明多个变量
  let age2 = 18, name2 = 'pink'

  // 5. 控制台打印 age变量的数据
  console.log(age)
  console.log(age2, name2)

  // 6. let name = 'JI'    //重定义 
</script>

<script>
  //将用户输入 保存到数据
  let uname = prompt('请输入姓名')
  //打印输出
  document.write(uname)
</script>

变量的本质

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

变量的命名规范

规则：必须遵守,不遵守报错(法律层面)

不能用关键字
- 关键字:有特殊含义的字符，JavaScript 内置的一些英语词汇。例如: let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

规范：建议，不遵守不会报错，但不符合业内通识（道德层面）

起名要有意义
遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName

let和var的区别

let 和 var 区别：

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

var 声明：

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

数组

数组(Array) ——一种将一组数据存储在单个变量名下的优雅方式

声明语法

let 数组名 = [数据1，数据2， …，数据n]
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
- 在数组中，数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
取值语法
- 通过下标取数据
- 取出什么类型的数据，就可以根据这种类型特点来访问

<script>
    // 声明数组  有序
    let arr = [123, 321, 1234567]
    let arr2 = ['我是谁', '谁是我', '我是谁还要你说']
    //使用数组  数组名[索引号]
    // console.log(arr)
    console.log(arr2[0]) //我是谁
</script>

常量

概念:使用const声明的变量称为“常量”。
使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。
命名规范：和变量一致
常量使用：

// 声明一个常量
const G = 9.8
//输出这个常量console.log(G)
COUZOIG Tов(e)

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

let: 现在实际开发变量声明方式。

var: 以前的声明变量的方式，会有很多问题。

const: 类似于 let，但是变量的值无法被修改。

数据类型

计算机世界中的万事万物都是数据。

计算机程序可以处理大量的数据，为什么要给数据分类？

更加充分和高效的利用内存
也更加方便程序员的使用数据

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

基本数据类型
- number 数字型
- string 字符串型
- boolean 布尔型
- undefined 未定义型
- null 空类型
引用数据类型
- object 对象

数字类型（number）

即我们数学中学习到的数字,可以是整数、小数、正数、负数。

let age = 18 //整数
let price = 88.99 //小数

JavaScript中的正数、负数、小数等统一称为数字类型。

注意事项:

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认Java是强数据类型例如 int a=3 必须是整数

数字可以有很多操作，比如，乘法*、除法 /、加法 +、减法 - 等等，所以经常和算术运算符一起。

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）
- 开发中经常作为某个数字是否被整除

运算符优先级

同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结:先乘除后加减,有括号先算括号里面的

NaN

NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN是粘性的。任何对NaN的操作都会返回NaN

字符串类型（string）

通过单引号(“)、双引号(”")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

let uname = '小明' // 使用单引号
let gender = "男"   // 使用双引号
let goods = `小米` // 使用反引号
let tel = '13681113456' // 看上去是数字，但是引号包裹了就是字符串
let str = '' // 这种情况叫空字符串

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不可以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符\，输出单引号或双引号

字符串拼接

场景：+运算符可以实现字符串的拼接。
口诀：数字相加，字符相连

模板字符串

使用场景拼接字符串和变量
在没有它之前，要拼接变量比较麻烦
- document.write('我叫'+ name + '，今年' + age +'岁')
语法
- `` (反引号)
- 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
- 内容拼接变量时,用${}包住变量

document.write(`我叫${name}，今年${age}岁`)

布尔类型(boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

// true false 是布尔型字面量
let isCool = true
console.log(isCool)
console.log(3 > 4)

未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

// 未定义类型    弱数据类型
// 声明一个变量未赋值就是 undefined
let num
console.log(num)

空类型(null)

JavaScript 中的 null仅仅是一个代表“无”、“空”或“值未知”的特殊值

let obj = nullconsole.log(obj)// null

null 和 undefined 区别：

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

检测数据类型

控制台输出语句：

let age = 18
let uname = '刘德华'
let flag = false
let buy
console.log(age)
console.log(uname)
console.log(flag)
console.log(buy)

- 控制台语句经常用于测试结果来使用。
- 可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

通过typeof关键字检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
1. 作为运算符(常用的写法): typeofx
2. 函数形式: typeof(x)
换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。

console.log(typeof num)
console.log(typeof (num))

类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。

坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

console.log('10000' + '2000') // 输出结果 100002000

此时需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

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

规则：

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

缺点：

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

小技巧：

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

console.log(1 + 1)  // 2
console.log('pink' + 1) // pink1
console.log(2 + 2)  // 4
console.log(2 + '2') // 22
console.log(2 - 2)  // 0
console.log(2 - '2') // 0
console.log(+12)  //12
console.log(+'123') // 转换为数字型

显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。

为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。

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

转换为数字型

Number(数据)
- 转成数字类型如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
parselnt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数

运算符

赋值运算符

对变量进行赋值的运算符

已经学过的赋值运算符：将等号右边的值赋予给左边,要求左边必须是一个容器

其他赋值运算符：

使用这些运算符可以在对变量赋值时进行快速操作

一元运算符

众多的JavaScript的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符

一元运算符

例：正负号
二元运算符

例：let num = 10 +20

自增：

符号：++
作用：让变量的值 +1
自增运算符的用法：
- 前置自增：每执行1次，当前变量数值加1 ，其作用相当于 num += 1
- 后置自增：每执行1次，当前变量数值加1 ，其作用相当于 num += 1
前置自增和后置自增如果参与运算就有区别
- 前置自增: 先自加再使用(记忆口诀: ++在前先加)
- 后置自增: 先使用再自加(记忆口诀: ++在后后加)
- 前置自增和后置自增独立使用时二者并没有差别！
- 一般开发中我们都是独立使用
- 经常用于计数来使用。用来计算多少次
- 后面i++后置自增会使用相对较多,并且都是单独使用

自减：

符号：–
作用：让变量的值 -1
使用场景：经常用于计数来使用。
- 比如进行10次操作，用它来计算进行了多少次了
用法同自增

比较运算符

使用场景：比较两个数据大小、是否相等

比较运算符：

>: 左边是否大于右边
<: 左边是否小于右边
>=: 左边是否大于或等于右边
<=: 左边是否小于或等于右边
==: 左右两边值是否相等
!==: 左右两边值是否不相等
===: 左右两边是否类型和值都相等
!==: 左右两边是否不全等
比较结果为boolean类型，即只会得到 true 或false

对比：

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===

console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
// 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值
console.log(2 == '2')
// === 全等 判断 值 和 数据类型都一样才行
// 以后判断是否相等 请用 ======
console.log(2 === '2')
// NaN 不等于任何人，包括他自己
console.log(NaN === NaN)

字符串比较

字符串比较，是比较的字符对应的ASCII码
- 从左往右依次比较
- 如果第一位一样再比较第二位，以此类推
- 比较的少，了解即可
NaN不等于任何值，包括它本身
- 涉及到"NaN "都是false
尽量不要比较小数，因为小数有精度问题
不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
- 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

逻辑运算符

使用场景:逻辑运算符用来解决多重条件判断

错误写法：5<num<10
正确写法：num>5 && num<10

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true 结果才为true	一假则假
\|\|	逻辑或	或者	符号两边有一个 true就为true	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

语句

表达式：表达式是可以被求值的代码。

JavaScript 引擎会将其计算出一个结果。
它可以写在赋值语句的右侧。
num = 3 + 4

语句：语句是一段可以执行的代码。

比如: prompt()可以弹出一个输入框，还有if语句 for 循环语句等等
语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
alert() 弹出对话框 console.log() 控制台打印输出

某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分(例如continue语句)

表达式和语句的区别：

因为表达式可被求值,所以它可以写在赋值语句的右侧。
而语句不一定有值,所以比如 alert() for和break等语句就不能被用于赋值。

程序执行的三大控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

分支语句

分支语句可以让我们有选择性的执行想要的代码

分支语句包含：

if分支语句
三元运算符
switch 语句

if分支语句
1. if语句
  - if语句有三种使用:单分支、双分支、多分支
  - 单分支使用语法：
  - if (条件) {满足条件要执行的代码}
    - 括号内的条件为true时，进入大括号里执行代码
    - 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
    - 如果大括号只有一个语句，大括号可以省略，但是，不提倡这么做
2. 双分支if语法：
```
if (条件) {
  满足条件要执行的代码
} else {
  不满足条件要执行的代码
}
```
3. 多分支if语法
  - 使用场景：适合于有多个结果的时候
```
if (条件1) {
  代码1
} else if(条件2) {
  代码2
} else if(条件3) {
  代码3
} else {
  代码n
}
```
  释义：
  - 先判断条件1，若满足条件1就执行代码1，其他不执行
  - 若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
  - 若依然不满足继续往下判断，依次类推若
  - 以上条件都不满足，执行else里的代码n
  - 注：可以写N个条件，但这里演示只写2个
三元运算符

使用场景：其实是比 if 双分支更简单的写法，可以使用三元表达式
符号：? 与 : 配合使用
语法：条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值

swithc语句
```
switch (数据) {
  case 值1:
    代码1
    break
  case 值2:
    代码2
    break
  default:
    代码n
    break
}
```
- 释义：
  - 找到跟小括号里数据全等的case值，并执行里面对应的代码
  - 若没有全等 === 的则执行default里的代码
  - 例：数据若跟值2全等，则执行代码2
1. switch case语句一般用于等值判断，不适合于区间判断
2. switch case一般需要配合break关键字使用没有break会造成case穿透

循环语句

断点调试

断点：在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来
作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面

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

while循环

循环:重复执行一些操作, while:在…期间,所以while循环就是在满足条件期间,重复执行某些代码。

路径：

while 循环基本语法
```
while (循环条件) {
  要重复执行的代码(循环体)
}
```
释义：
- 跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码
- while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
while 循环三要素
1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量(用自增或者自减)

循环退出

循环结束：

break：退出循环
continue：结束本次循环，继续下次循环

区别:

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

if多分支语句和 switch的区别：

共同点:
- 都能实现多分支选择，多选1
- 大部分情况下可以互换
区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断（大于，等于某个范围）。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
- switch 一定要注意必须是 === 全等，一定注意数据类型，同时注意break否则会有穿透效果
- 结论：
  - 当分支比较少时，if…else语句执行效率高。
  - 当分支比较多时，switch语句执行效率高，而且结构更清晰。

for 语句

for 语句的基本使用

for循环语法

作用：重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

for (变量起始值; 终止条件; 变量变化量) { 循环体 }

退出循环

continue：退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break：退出整个for循环,一般用于结果已经得到,后续的循环不需要的时候可以使用

了解：

while(true) 来构造“无限”循环，需要使用break退出循环。
for(;;)也可以来构造“无限”循环，同样需要使用break退出循环。

for循环和while循环有什么区别呢：

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

循环嵌套

一个循环里再套一个循环，一般用在for循环里

for循环嵌套

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

数组

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

如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

声明语法：

let 数组名 = [数据1, 数据2, ..., 数据n]
let 数组名 = new Array(数据1, 数据2, ..., 数据n)
例：let names = [‘小明’，‘小刚’，‘小红’，‘小丽’，‘小米’]
数组是按顺序保存,所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

取值语法：

数组名[下标]

例：

let names = ['小明'，'小刚'，'小红'，'小丽'，'小米']
names [0]  //小明
names [1]  //小刚

通过下标取数据
取出来是什么类型的,就根据这种类型特点来访问

一些术语：

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

遍历数组

用循环把数组中每个元素都访问到,一般会用for循环遍历

语法:

for(let i = 0; i < 数组名.length; i++){
  数组名[i]
}

操作数组

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

增：数组添加新的数据
- arr.push(新增的内容)
  - 将一个或多个元素添加到数组的末尾,并返回该数组的新长度(重点)
  - 语法：arr.push(元素1，…，元素n)
  - 例：
```
let arr = ['red', 'green']
arr.push('skyblue')
console.log(arr)  //['red', 'green', 'skyblue']
```
- arr.unshift(新增的内容)
  - 将一个或多个元素添加到数组的开头，并返回该数组的新长度
  - 语法：arr.unshift(元素1，…，元素n)
  - 例：
```
let arr = ['red', 'green']
arr.unshift('skyblue')
console.log(arr)  //['skyblue', 'red', 'green']
```
删：删除数组中数据
- arr.pop()
  - 从数组中删除最后一个元素，并返回该元素的值
  - 语法：arr.pop()
  - 例：
```
let arr = ['red', 'green', 'blue']
console.log(arr.pop()) //['blue']
console.log(arr)  //['red', 'green']
```
- arr.shift()
  - 从数组中删除第一个元素，并返回该元素的值
  - 语法：arr.shift()
  - 例：
```
let arr = ['red', 'green', 'blue']
console.log(arr.shift()) //['red']
console.log(arr)  //['green', 'blue']
```
- arr.splice(起始位置,删除的个数)
  - 删除指定元素
  - 语法：arr.splice(start,deleteCount)
    - start 起始位置：
      - 指定修改的开始位置（从0计数）
    - deleteCount：
      - 表示要移除的数组元素的个数
      - 可选的。如果省略则默认从指定的起始位置删除到最后
  - 例：
```
let arr = ['red', 'green', 'blue']
arr.splice(1, 1)  // 从索引号1的位置开始删，删除一个
//arr.splice(1)   // 从索引号1的位置开始删，删除到最后
```
改：重新赋值
- 数组[下标]= 新值
查：查询数组数据
- 数组[下标]
- 或者我们称为访问数组数据

冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5] 或者[5,4,3,2,1]

数组排序

数组.sort() 方法可以排序

语法：

let arr = [4, 2, 5, 1, 3]
// 1.升序排列写法
arr.sort(function (a, b) {
  return a - b
  })
  console.log(arr) // [1, 2, 3, 4, 5]
  // 降序排列写法
  arr.sort(function (a, b) {
    return b - a
    }
    console.log(arr) // [5, 4, 3, 2, 1]

函数

函数使用

函数的调用语法

//函数调用，这些函数体内的代码逻辑会被执行
函数名()

注意：定义（声明）的函数必须调用才会真正被执行，使用()调用

// 函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
sayHi()
sayHi()

我们曾经使用的 alert()， parseint() 这种名字后面跟小括号的本质都是函数的调用

函数体

函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

函数参数

函数传参

声明语法：

function 函数名(参数列表) {
  函数体
}

参数列表：

传入数据列
表声明这个函数需要传入几个数据
多个数据用逗号隔开

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1=10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

我们曾经使用过的 alert(‘打印’), parselnt(‘11’), Number(‘11’) 本质上都是函数调用的传参

参数默认值

形参：可以看做变量，但是如果一个变量不给值，默认是什么？
- undefined
但是如果做用户不输入实参,刚才的案例,则出现undefined + undefined结果是什么?
- NaN

我们可以改进下，用户不输入实参，可以给 形参默认值，可以默认为 0，这样程序更严谨，可以如下操作：

function getSum(x = 0, y = 0) {
  document.write(x + y)
}
getSum() // 结果是0，而不是 N
getSum(1, 2) // 结果是 3

函数返回值

其实我们前面已经接触了很多的函数具备返回值：

let result = prompt('请输入你的年龄？')
let result2 = parseInt('111')

只是这些函数是JS底层内置的.我们直接就可以使用

当然有些函数，则没有返回值

alert('我是弹框，不需要返回值')

所以要根据需求，来设定需不需要返回值

当函数需要返回数据出去时，用return关键字语法

return 数据

有返回值的函数
细节：

在函数体中使用return关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
return函数可以没有 return，这种情况函数默认返回值为 undefined
两个相同的函数后面的会覆盖前面的函数
在Javascript中实参的个数和形参的个数可以不一致
- 如果形参过多会自动填上undefined (了解即可)
- 如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)
函数一旦碰到return就不会在往下执行了函数的结束用return

作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

全局作用域
- 全局有效
- 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域
- 局部有效
- 作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

在JavaScript中，根据作用域的不同，变量可以分为：

全局变量
- 函数外部let 的变量
- 全局变量在任何区域都可以访问和修改
局部变量
- 函数内部let的变量
- 局部变量只能在当前函数内部访问和修改

变量有一个坑，特殊情况：

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

变量的访问原则

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下先局部，局部没有在找全局

匿名函数

具名函数：

声明：function fn() {}
调用：fn()

匿名函数：

function() {}

匿名函数：没有名字的函数，无法直接使用。

使用方式：函数表达式立即执行函数

函数表达式

将匿名函数赋值给一个变量,并且通过变量名称进行调用我们将这个称为函数表达式
- 语法：
  - let fn = function () {函数体}
- 调用：
  - fn() //函数名()
  - 其中函数的形参和实参使用跟具名函数一致。
立即执行函数

场景介绍：避免全局变量之间的污染
- 语法：
```
// 方式1
(function () { console.log(11) })();
// 方式2
(function () { console.log(11) }());
// 不需要调用，立即执行
```
- 注意：多个立即执行函数要用；隔开，要不然会报错

逻辑中断

开发中，还会见到以下的写法：

function getSum(x, y) {
  x = x || 0
  y = y || 0
  console.log(x, y)
}
getSum(1, 2)

其实类似参数的默认值写法

逻辑运算符里的短路

短路：只存在于&& 和 || 中，当满足一定条件会让右边代码不执行

符号短路条件
&& 左边为false就短路
|| 左边为true就短路
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

符号	短路条件
&&	左边为false就短路
\|\|	左边为true就短路

只要 || 前面为 false，无论 || 后面是true还是 false，结果都返回 || 后面的值。
只要 || 前面为 true，无论 || 后面是true还是 false，结果都返回 || 前面的值。
只要 && 前面是 false，无论 && 后面是true还是 false，结果都将返 && 前面的值;
只要 && 前面是 true，无论 && 后面是true还是false，结果都将返 && 后面的值;

转换为Boolean型

显示转换：
- Boolean(内容)
  - 记忆: "、0、undefined、null、false、NaN 转换为布尔值后都是false,其余则为true
隐式转换：
1. 有字符串的加法 “” + 1 ，结果是 “1”
2. 减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 “” 转换为 0
3. null经过数字转换之后会变为0
4. undefined 经过数字转换之后会变为 NaN

对象

什么是对象

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合,注意数组是有序的数据集合
用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
- 如果用多个变量保存则比较散，用对象比较统一
比如描述班主任信息：
- 静态特征(姓名,年龄,身高,性别,爱好)=>可以使用数字,字符串,数组,布尔类型等表示
- 动态行为(点名,唱,跳, rap)=>使用函数表示

let obj = {
  uname: 'Zero'
  age: 18
  gender: 'double'
}

##对象使用

对象声明语法：

let 对象名 = {}
let 对象名 = new Object {}
//例如：声明一个person的对象
let person = {}

实际开发中，我们多用花括号。{}是对象字面量

对象由属性和方法组成
- 属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…
- 方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…
```
let 对象名 = {
  属性名: 属性值,
  方法名: 函数
}
```
属性
- 数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
- 属性都是成对出现的,包括属性名和值,它们之间使用英文：分隔
- 多个属性之间使用英文，分隔
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用"“或”,一般情况下省略,除非名称遇到特殊符号如空格、中横线等

对象本质是无序的数据集合，操作数据无非就是增删改查语法：

增：添加新的数据 对象名.新属新名 = 新值
删：删除对象中属性 delete 对象名.属性名
改：重新赋值 对象.属性 = 值
查：查询对象 对象.属性
- 声明对象，并添加了若干属性后，可以使用.获得对象中属性对应的值，我称之为属性访问。
- 简单理解就是获得对象里面的属性值。
```
// 查总结：
// （1）对象名.属性名 obj.age
console.log(obj.num)
// (2） 对象名['属性名'] obj['age']
console.log(obj['num'])
```

对象中的方法

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。
```
let person = { 
  name: 'andy',
  sayHi: function() {
    document.write('hi~~')
  } 
}
// 对象名.方法名()
person.sayHi()
```
1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文，分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用"“或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
声明对象，并添加了若干方法后，可以使用.调用对象中函数，我称之为方法调用。
也可以添加形参和实参
注意：千万别忘了给方法名后面加小括号

遍历对象

for 遍历对象的问题：

对象没有像数组一样的length属性，所以无法确定长度
对象里面是无序的键值对,没有规律.不像数组里面有规律的下标

// for in 不推荐遍历数组
let arr = ['pink', 'red', 'blue']
for (let k in obj) {
  console.log(k) // 数组的下标 索引号 但是是字符串 '0'
  console.log(arr[k]) // arr[k]
}

let obj = {
  uname: 'andy',
  age: 18,
  sex: '男'
}
for (let k in obj) {
  console.log(k) // 打印属性名 'uname' 'age'
  //  console.log(obj.'uname') ×
  //  console.log(obj['uname']) √
  console.log(obj[k]) // 打印属性值
}

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用，例：

document.write()
console.log()

内置对象 - Math

介绍: Math对象是JavaScript提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
Math对象包含的方法有：
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor:向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
- Math对象在线文档

拓展

术语解释

目标:知道一些术语，让自己更专业

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、 var、 function、 if、 else、 switch、 case、 break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、 short、 long、char
标识(标识符)	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10+3、 age>= 18
语句	一段可执行的代码	If () for()

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

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
- string, number, boolean, undefined, null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
- 通过new关键字创建的对象(系统对象、自定义对象) ,如Object、Array、 Date等

堆栈空间分配区别：

栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;

简单数据类型存放到栈里面

堆(操作系统) :存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。

引用数据类型存放到堆里面

HTML学习
 Web移动端学习
 JS基础学习
 Web API学习
 JS进阶学习
 ajax学习
 Node.js与Webpack学习
 Git学习
 vue学习—更新中
 小程序学习—学习中
 XML教学视频