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 运算符可以返回被检测的数据类型。它支持两种语法形式：
- 作为运算符(常用的写法): typeofx
- 函数形式: 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分支语句
-
if语句
- if语句有三种使用:单分支、双分支、多分支
- 单分支使用语法：
if (条件) {满足条件要执行的代码}- 括号内的条件为true时，进入大括号里执行代码
- 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
- 如果大括号只有一个语句，大括号可以省略，但是，不提倡这么做
-
双分支if语法：
if (条件) { 满足条件要执行的代码 } else { 不满足条件要执行的代码 } -
多分支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
- switch case语句一般用于等值判断，不适合于区间判断
- switch case一般需要配合break关键字使用 没有break会造成case穿透
- 释义：
循环语句
断点调试
- 断点：在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来
- 作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
- 浏览器打开调试界面
- 按F12打开开发者工具
- 点到sources一栏
- 选择代码文件
while循环
循环:重复执行一些操作, while:在…期间,所以while循环就是在满足条件期间,重复执行某些代码。
路径：
-
while 循环基本语法
while (循环条件) { 要重复执行的代码(循环体) }释义：
- 跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码
- while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
-
while 循环三要素
- 变量起始值
- 终止条件（没有终止条件，循环会一直执行，造成死循环）
- 变量变化量(用自增或者自减)
循环退出
循环结束：
- 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.push(新增的内容)
- 删：删除数组中数据
- 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：
- 表示要移除的数组元素的个数
- 可选的。 如果省略则默认从指定的起始位置删除到最后
- start 起始位置：
- 例：
let arr = ['red', 'green', 'blue'] arr.splice(1, 1) // 从索引号1的位置开始删，删除一个 //arr.splice(1) // 从索引号1的位置开始删，删除到最后
- arr.pop()
- 改：重新赋值
- 数组[下标]= 新值
- 查：查询数组数据
- 数组[下标]
- 或者我们称为访问数组数据
冒泡排序
- 冒泡排序是一种简单的排序算法。
- 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组[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，无论 || 后面是true还是 false，结果都返回 || 前面的值。
- 只要 && 前面是 false，无论 && 后面是true还是 false，结果都将返 && 前面的值;
- 只要 && 前面是 true，无论 && 后面是true还是false，结果都将返 && 后面的值;
转换为Boolean型
- 显示转换：
- Boolean(内容)
- 记忆: "、0、undefined、null、false、NaN 转换为布尔值后都是false,其余则为true
- Boolean(内容)
- 隐式转换：
- 有字符串的加法 “” + 1 ，结果是 “1”
- 减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 “” 转换为 0
- null经过数字转换之后会变为0
- 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()- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文，分隔
- 方法是依附在对象中的函数
- 方法名可以使用"“或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
-
声明对象，并添加了若干方法后，可以使用.调用对象中函数，我称之为方法调用。
-
也可以添加形参和实参
-
注意：千万别忘了给方法名后面加小括号
遍历对象
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教学视频
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
