JavaScript基础知识点
JS的简介与基础应用
简介
- 概念：JavaScript 是一种运行在客户端（浏览器）的编程语言
- 作用：
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据, 渲染到前端)
- 服务端编程 (node.js)
- 组成：
- ECMAscript： ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，可以理解为是JavaScript的一个标准。
- DOM： 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API) 。
- BOM
文件引入方式 /内容注释/结束符
- 引入方式
- 内联 （不推荐）
<body>
<!-- 不常用 编写代码的体验不好，很容易写错， 了解一下即可 -->
<button onclick="alert('过万啦')">点击我 我就月薪过万</button>
<button onclick='alert("也过万啦")'>点击我 我就月薪过万</button>
<div onclick='alert("也过万啦")'>我来啦</div>
</body>
-
内部
<body> <script> // 可以在这个 script 标签 里面写js代码 alert('你好 js 我呸'); </script> </body> -
外部，引入写好的 .js 的文件
<body> //用 script 标签 引入 <script src="./js/弹出窗口.js"> </script> </body>
- 内容注释
- 单行注释 ctrl+/ （只对单行内容生效）
- 多行注释 shift+alt+a （单/多行内容都生效）
- 结束符
- ； （分号） 代表一行代码的结束
- 直接按下enter键也表示一行代码的结束
JS的知识点与应用
输入/输出
-
输出
-
输出到页面的文本
<body> <script> //输出到页面的文本 document.write( ' 万少这天下课被整个班级的同学欺负 ' ） </script> </body> -
页面的弹窗
<body> <script> //页面弹窗 alert( ' 弹出一个窗口 ' ) </script> </body> -
在控制台的内容
<body> <script> //输出到控制台的内容 console.log('在控制台中输出的内容') </script> </body>
-
-
输入
-
描述： 弹出一个对话框，获取用户的输入
-
语法
<body> <script> //弹出对话框获取用户输入 prompt("请输入你的姓名") </script> </body>
-
-
小案例
-
需求： 将用户的输入值输出到网页控制台中
-
代码
<body> <script> //1，获取用户输入 username=prompt("请输入你的姓名") //2，将用户的输入值输出到控制台 console.log("username") </script> </body>
-
变量
-
概念：用来装数据的容器
-
使用方法
- 创建变量
- let userName；
- 变量赋值
- userName= '章北海'
- 使用变量
- console.log(userName)
注：可以在创建变量的同时赋值 let userName= '章北海'
- 创建变量
-
规则和规范
- 不能 使用某些关键字 充当变量名称，例如 ： let let=123 / let for=123
- 不能以数字开头
- 可以使用英文开头 _ $
- 最好见名知意
- 小驼峰命名风格 userName
数据类型
基本数据类型：
- Number 数字型
- String 字符型
- Boolean 布尔型 取值（ ture / false ）
- undefined 未定义
- null 空值
数据类型检测：typeof
<body>
<script>
// 返回的什么类型 String Number Boolean null
console.log(typeof 123) //Number 数字型
console.log(typeof '123') //String字符型
console.log(typeof true) //Boolean布尔型
console.log(typeof undefined) //object
console.log(typeof null) //object
let num = 10
console.log(typeof num + '11') //String字符型
</script>
</body>
数据类型转换
- 隐式转换 用的多 简单
- 转数字
- let num='123' ; let num2=+num1; （给num1前面加上"+"）
- let num='123' ; let num2='123'-0 ; （让num1的值 - 0）
- 转字符
- let str='123'; （直接加上 ‘ ’ ）
- let str1=str+''; （变量 + ‘ ’）
- 转数字
- 显式转换
- 转数字
- let num=Number('123')
- 转字符
- let str=String(123)
- 转数字
小案例（订单信息打印）
-
需求:让用户输入订单信息后，将内容按表格的特定格式输出到页面
-
效果图
-
代码
- 重要提醒 document.write（``）,括号里的标签结构要用反引号包裹，变量的连接必须要用 ${ } 包裹
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { text-align: center; margin: 100px auto; } caption { font-style: 30px; font-weight: 700; } </style> </head> <body> <script> //重要的部分 let goods=prompt('商品名称') let price=prompt('商品价格') let count=prompt('商品数量') let sum=price*count let address=prompt('收货地址') document.write(` <table border="1" cellspacing="0"> <caption>订单付款确认页面</caption> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收货地址</th> </tr> <tr> //重要的部分 <td>${goods}</td> <td>${price}</td> <td>${count}</td> <td>${sum}</td> <td>${address}</td> </tr> </table>`) </script> </body> </html>
运算符
算术运算符
- + - * / （加减乘除）
- % 取余数/取模 例： 10 % 3 = 1
赋值运算符
-
num += 10 等价于 → num=num+10
-
num - = 10 等价于 → num=num **-**10
-
num *= 10 等价于 → num=num X 10
-
num /= 10 等价于 → num=num/10
<SCript> let num =10 num+=5; // num = num + 5 =15 num-=2; // num = num - 2= 8 num *=2; // num = num * 2 =20 num/=2； //num=num/2=5 </SCript>
一元运算符
-
自增：使变量的值在原来的基础上 + 1
- ++i： 先 +1 ，再使用
- i++：先使用，再 +1
<SCript> let i =8 先 +1 然后用 +1后的值与2相加 ++i + 2 // = 11 console.log (i) // 9 let a =8 先用初始值与 2 相加 然后a变量自身值才 + a++ + 2 // =10 console.log (a) // 9 </SCript> -
自减：使变量的值在原来的基础上 -1
- - - i : 先 -1 ，再使用
- i - - : 先使用，再 -1
<SCript> let i =8 //先 -1 再与 2 相加 --i + 2 // = 9 console.log (i) // 9 let a =8 //先使用初始值与 2相加，后-1 a-- + 2 // =10 console.log (a) // 9 </SCript>
比较运算符
- 比较后返回的值为布尔型（true / false）
- 基本分类
- '>' 大于
- '<' 小于
- == 等于（只比较结果，不比较数据类型） 例： 1=='1' //true
- >= 大于或者等于
- <= 小于或者等于
- != 不等于 不会判断类型
- === 判断相等 值与数据类型都相同才 true
- !== 不相等 值或数据类型有一个不相同就 true
逻辑运算符
- 与 / 且： && （ 一假即假 ，全真才真 ）
- 或： || （ 一真则真，全假才假 ）
- 非 取反： ! （取相反 ） 例： !(true) // false
短路运算
概念：由于|| && 两个逻辑运算符的特性延伸的运算规则**（ || && 才有短路运算）**
- || 执行到第一个 判定为 true 的条件就不继续往后执行
- && 一直执行，直到遇到第一个判定为 false 的条件就不会往下执行了
<SCript>
// || 的短路运算举例
10 < 3 || console.log("我在沉思") // 我在沉思
// &&的短路运算举例
10 > 3 && console.log("出去吃饭") //出去吃饭
</SCript>
条件语句
if条件语句
-
单分支
表达式： if (条件) {执行的代码}
<script> /* 1 获取用户输入的分数 2 分数做判断 如果大于 700 恭喜他 */ let score = +prompt('请输入您的分数'); // if 单分支 if (score > 700) { alert('恭喜你 来啦'); } </script> -
双分支
表达式： if(条件)｛执行的代码1｝else{ 执行代码2} 其中else 表示否则。。。
<script> /* 需求 填写 考试的分数 如果 分数 > 700 蓝翔 否则 去能去北大 */ // 我忘记了 最好要转一下 let score = +prompt('考试的分数'); if (score > 700) { alert('蓝翔欢迎你'); } else { alert('怀恨去北大'); } </script> -
多分支
表达式：if(条件1){执行的代码1} else if (条件2){执行的代码2} else {以上都不满足了才执行的最后的逻辑}
<script> // let day = 1; let day = +prompt('请输入今天是星期几'); if (day === 1) { console.log('煲仔饭'); } else if (day === 2) { console.log('生猛海鲜'); } else if (day === 3) { console.log('烤全羊'); } else if (day === 4) { console.log('吃牢饭'); } else if (day === 5) { console.log('软饭'); } else { // 6 7 ........ console.log('白饭'); } </script>
三元表达式语句
表达式： 条件 ? 满足条件了执行代码1 : 不满足条件就执行代码2
<script>
/*
条件 ? 满足条件执行的代码 : 不满足条件 执行的代码
*/
let num1 = 10;
let num2 = 99;
let num3; // 就要等于 num1 和 num2 中 大的值
num3 = ( (num1 > num2) ? num1 : num2);
console.log(num3);
</script>
循环语句
while循环
适用场景：循环次数未知的条件循环语句
代码关键：
- 变量初始值 let str
- 循环的条件 while(str!=="爱" )
- 变量发生改变 str = prompt("请输入你爱不爱我")
举例：
<script>
// 1 变量初始值
let i = 1;
// 2 终止条件
while (i <= 10) {
document.write(`这个是第${i}循环`);
// 3 变量需要改变
i++;
}
</script>
for循环
-
代码结构
表达式： for(变量初始值;循环的条件判断;变量发生){循环体}
举例：
<script> //let index = 1 变量初始值 // index <=100 条件判断 // index++变量的改变式 for (let index = 1; index <=100; index++) { //每次循环执行的代码 console.log(index); } </script> -
continue / break
continue： 跳过本次循环 开启下一轮循环
break： 直接终止循环 （ 能使用break就使用break ，避免后续的不必要的循环）
举例：
<script>
/*
for
控制循环结束
1 continue 跳过本次循环 继续开启下次循环 （不是必须）
continue 想要跳过这个循环 不一定通过它
我们自己 if else 也能实现类似的功能
2 break 直接 循环结束 不玩了
也不是必须 ， 我们也是可以通过 if-else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 （性能更加好） 因为break会终止剩下的循环
*/
//continue： 跳过本次循环
for (let i = 1; i <= 10; i++) {
if (i % 2 !== 0) {
// 是奇数的话 就跳过这次循环
continue
}
console.log(i);
}
//break： 直接终止循环
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ，就不再往下 循环了，就终止循环
if (index === 5) {
break;
}
// // index===5&&break // 不能简写 报错！！
console.log(index);
}
</script>
关于循环的补充（了解）
-
Switch-case
- 类似 if- else if -else
<script> let day = 1; switch (day) { // 你要判断谁 case 1: // if (day === 1) // 执行 1 的业务逻辑 console.log('白饭'); case 2: console.log("喝粥"); break case 3: console.log("海鲜"); break default: // 以上都不满足 就执行代码 console.log("不吃啦"); } </script> -
do-while
- 类似while循环
- 不管条件是否成立，都会先执行一次 do 中的代码
<script> /* 1 循环 3种写法 1 for 循环 2 while 循环 3 do while 循环 很少 1 先执行一次 do里面的代码，然后再去执行while里面的程序 2 哪怕 while里面的条件不成立 也会先执行一次do中的代码 */ let index = 0; do { console.log('执行了do 里面的代码',index); index++ } while (false); //即使while里的条件是false 也会先执行一次do里面的条件 </script>
循环综合案例（⭐⭐）
需求：第一行⭐，第二行⭐⭐，第三行⭐⭐⭐，第四行⭐⭐⭐⭐，第五行⭐⭐⭐⭐⭐。。。
分析：
- 第一个循环，控制行数
- 在每个行数循环中，列数发生了变化
- 第一次循环 列数 ：1
- 第二次循环 列数 : 2
- 第三次循环 列数 : 3
- 发现 列数不能写死
- 列数也需要写一个循环，且得和行数产生联系
- 发现每一行的列数与该行的行数一致
- 所以每一行的子循环的次数刚好等于该行的行数
<script>
for (let index = 1; index <= 5; index++) {
// 第二个循环中 判断条件 5 => index(第一层循环的变量值)
for (let index1 = 1; index1 <= index; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
</script>
数组
概念： 存放一组相关数据 ，方便我们去使用
常见使用场景 ：
- 一般都会和循环一起出现
- for(let index=0;index<数组的长度;index++){ 数组[index] 做一些业务}
属性 （结合 等于号 = ）
- .length 数组长度属性 （数组里面元素的个数）
- arr.length = 10
数组的基本使用
-
声明数组
let arr1=['苹果','香蕉','哈密瓜','芒果'] -
数据编号/索引/下标
数组中的索引以 0 开始，在上述数组的数据中，'苹果'的索引为arr[0]
-
获取数组里面的数据（数组里面的每一个数据都称为数组元素）
<script> let arr1=['苹果','香蕉','哈密瓜','芒果'] //获取第一个数据 arr[0] //'苹果' //第二个数据 arr[1] //'香蕉' </script>
数组的增/删/改
-
数据增加
- .push ： 把新的元素 设置到 数组的**末位 ** arr.push(新的元素)
- .unshift ：是把新的元素 设置到数组的开头 arr.unshift(新的元素)
- 在开发中 push 用得最多 ，unshift 了解即可
<script> let arr = ['black', 'red']; //添加新元素到末尾 // arr.push('yellow'); arr.unshift("yellow"); console.log(arr); </script> -
数据删除
- pop：删除末位的一个元素 arr.pop()
- shift：删除开头的一个元素 arr.shift()
<script> // 数组 删除最后一个元素 pop let arr = ['西瓜', '香蕉', '麻瓜']; // 希望删除掉最后的一个元素 麻瓜 不要 // arr.pop(); // console.log(arr); // ['西瓜', '香蕉'] // 希望删除掉第一个元素 arr.shift(); console.log(arr);// </script> -
splice 的妙用
- 指定删除多个： arr.splice(1, 2); 表示从arr数组中索引为 1 的元素开始，删除2个元素
- 指定位置新增：arr.splice(1, 0, '红薯') ，表示从arr数组中索引为 1 的元素开始，删除 0 个元素，并在索引为 1 的位置增加一个 '红薯' 的元素
- 指定位置替换：arr.splice(1, 1, '红薯')，表示从arr数组中索引为 1 的元素开始，删除 1 个元素，并在索引为 1 的位置增加一个 '红薯' 的元素（可视为替换索引为 1 的元素）
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 现在想要删除 香蕉
// splice("想要删除的元素的下标","想要删除几个");
// 删除数组中的下标为1的元素，
// 从 1 的位置开始 想要删除几个
// arr.splice(1, 2);
//
// console.log(arr);
// 指定位置来插入元素
// splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");
// 在 1的位置，删除0个元素，增加一个红薯
// let arr = ['西瓜', '香蕉', '麻瓜'];
//arr.splice(1, 0, '红薯');
// ['西瓜', '红薯', '香蕉', '麻瓜'];
arr.splice(1, 1, '红薯');
console.log(arr);
</script>
关于数组的补充
- 获取数组最后一个元素 ： arr[arr.length-1]
- 新增或者修改元素 ： arr[10] = "元素" 直接指定下标位修改或增加元素即可
- 数组可以存放任意类型的数据 ： let arr =[1,"abc",null,true]
- 数组快速删除元素的方式 ：
- arr.length = 0
- arr=[]
- 数组的长度是可以动态变化
数组案例拓展
-
遍历数组：用循环把数组中每个元素都访问到,一般会用for循环遍历
<script> let arr = ['苹果', '西瓜', '香蕉', '葡萄']; // 输出数组中的每一个元素 for (let index = 0; index < arr.length; index++) { // index = 0 开始做变化 1 2 3 4 console.log(arr[index]); } </script> -
数组筛选: 把数组中 大于等于10元素 存放到新的数组
<script> // 把数组中 大于等于10元素 存放到新的数组 let arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; // 定义一个新数组，存放过滤好元素 let arr2 = []; // 对 第一个数组 循环 for (let index = 0; index < arr1.length; index++) { // 判断当前的循环的元素 和 10 直接的关系 if (arr1[index] >= 10) { // 需要把当前的这个元素 添加到新数组中 arr2.push(arr1[index]); } } console.log(arr2); </script>
函数
概念与作用
- 概念： 专门执行特定任务的代码片段
- 作用：
- 简化代码
- 可重复调用
- 封装程序功能
函数的使用
-
定义函数 function getMax (参数1，参数2) {要执行的代码片段 }
-
调用函数： getMax()
<script> let arr1 = [1, 3, 2, 66, 33, 22]; let arr2 = [1, 3, 2, 663, 33, 22]; let arr3 = [1, 3, 2, 665, 33, 22]; //定义函数 function getMax(arr) { let max = arr[0]; for (let index = 0; index < arr.length; index++) { if (arr[index] > max) { max = arr[index]; } } //设置函数的返回值 return max; } //调用函数 let max1 = getMax(arr1); let max2 = getMax(arr2); let max3 = getMax(arr3); console.log(max1, max2, max3); </script>
关于参数和返回值
-
参数
- 形参：function getMax (n1，n2) {要执行的代码片段 } 此时 n1 和 n2 表示形参
- 实参：getMax(100,200) （100 实参1 200 实参2 ）
- 形参和实参的位置是一一对应的
-
函数的返回值（return）
概念： return 表示执行完函数反馈回来的值，需开发者设置
- 定义函数的时候 可以决定函数拥有返回值
- function getMax(){return 123}
- return 123 （123就是返回的值 ）
- 如果函数内部 没有写return 的话 默认就是返回了 undefined
匿名函数与自执行函数
- 匿名函数
- function(){}
- let func2 = function(){}
- 自执行函数
- 代码： (匿名函数代码块)()
- 作用：防止变量污染，执行一次性任务
- 特点：在定义函数的同时也在执行函数
作用域与作用域链
作用域
-
全局作用域
- 直接写在script 标签内的代码
- 全局变量 任意的地方都可以访问
<script> // 直接写在全局作用域下的变量 = 全局变量 在任意的地方来访问 let num = 100; // 全局变量 在任何地方都可以访问 function getMax() { console.log('函数 访问全局变量', num); } getMax(); for (let index = 0; index < 2; index++) { console.log('for循环内 块级作用域 访问全局变量', num); } if(true){ console.log("if语句 也 可以访问全局变量",num); } </script> -
函数作用域-局部作用域
- 写在函数内部中的变量
- 只能在自己的大括号中使用
<script> // 局部变量 // 如果是在函数内部定义的变量 就叫做局部变量 // 局部变量 不能在 它的大括号之外使用的，否则就会报错！！ let msg = 10000; // 全局变量 // 局部变量 函数内部 声明的变量 function getMax() { // 声明一个数字 let num = 200; // 局部变量 } // 局部变量 不能在 超出它的大括号来使用 console.log(num); // 会报错 </script> -
块级作用域
- for if while大括号里面定义的变量
<script>
// 块级变量 就是我们在块级作用域内 定义的变量
// 块级变量 类似局部变量，也是超出了自身的大括号 不能使用
for (let index = 0; index < 2; index++) {
// num 块级变量
let num = 100;
}
// console.log(num);// 大括号外使用块级变量 出错！！
/*
小结
1 分类 分成两类即可
1 全局变量
直接放在 script标签内的变量
2 局部变量 用大括号包起来的变量
1 函数内部变量
2 块级变量
*/
</script>
作用域链
- 只是一种代码寻找变量来执行的 机制 规则
- 就近原则
- 就近的参照物是 函数的声明、函数的定义来寻找最近的变量
<script>
// 判断当前变量 输出是什么
// 就近原则 判断是要根据 函数的定义 来判断 而不是函数的调用
// 函数的定义 代码位置来判断 100 这个！！
let num = 100;
function func1() {
let num = 200;
// 函数的调用
fun2();
}
// 函数的定义-声明
function fun2() {
console.log(num);
}
func1(); //log输出的num=100，因为fun2在定义时能访问到的变量值为全局变量num=100
</script>
对象
基本概念
-
概念
- 存放一堆无序的数据的集合
- 可描述具体复杂的实物
- 数据类型为引用类型（堆）
-
代码/组成
<script> // 描述一个复杂的事物 可以使用对象 // 对象 有两个特点 1 属性 2 方法（函数） let person = { //声明一个对象 // 姓名 uname: 'andy', //多个属性之间要以 , 隔开 age: 18, sex: '男', sayHi：function(){ //定义一个方法 document.write('你好，世界') } }; // 打印一下 这个数据的类型 object/对象 console.log(typeof person); // 打印一下 这个数据 返回的值为对象本身的内容 console.log(person); </script>
增删改查
-
访问属性/方法
- 对象名 . 属性名
- 对象名 [ '属性名' ]
- 对象 . 方法()
<script> let username = 'color'; let person = { username: '海贼王', color: 'yellow', }; // 访问它 console.log(person.username); // 固定用户 console.log(person['username']); // // // person['color']; console.log(person[username]); // 中括号里 代码没有加字符串 表示一个变量 // console.log(person['color']); // 中括号里 代码没有加字符串 表示一个变量 // console.log(person[color]); // color是一个变量 没有这个变量 报错 // console.log(person.sdfdfdfd); // undefined </script> -
增加/修改 （属性 方法）
- 对象名.新属性名 = 新值
<script> let person = { }; //直接写新增的属性名及属性值即可 person.username="普通人"; // 直接访问到要修改的属性重新赋值即可 person.username="哈士奇"; console.log(person) // 哈士奇 </script> -
删除属性/方法
- delete 对象名 . 属性名
<script> // 声明一个对象 let person={ username:"海贼王" }; // 不想看了 给删除掉 delete person.username; // 删除对象中的 username属性 console.log(person.username); // undefined </script>
遍历对象（for in）
-
利用for in 访问到对象里的每一个属性
<script> // 数组和对象 都可以遍历 // 数组的遍历 使用 for循环 // 对象的遍历 使用 forin // 对对象遍历的时候 可以直接获取到 对象的属性名 // 根据对象的属性名获取对象的熟悉值 person[k] // 创建一个对象 let person = { age: 18, username: '普通人', height: 180, }; // 遍历对象 forin for (let k in person) { // k 表示变量 k = "username" 不能写 引号 'k' //加引号表示属性名为 k 的属性 遍历会出错 console.log(`属性名:${k} 属性值${person[k]} `); } </script>
内置数学对象
定义：浏览器已设定好的关于部分数学运算的，方便开发者使用的数据集
-
随机数 Math.random( ) 返回 0~1 包含0但是不包含1
-
向上取整 Math.ceil() 天花板函数 即使是1.01也会取整为2
-
向下取整 Math.floor() 地板函数 即使是1.99也会取整为1
-
四舍五入 Math.round()
-
幂运算 Math.pow(数值，指数) 例：Math.pow(2,3) 2的立方
-
绝对值 Math.abs()
-
固定区间内取随机整数小技巧
<script> //在min ~ max 这个区间内取随机整数 function getRandom(max,min) { //(max-min)是为了计算出数值的区间宽度 Math.round(Math.random()*(max-min)+min) } </script>
数据类型分类的补充
数据类型分类
- 基本数据类型，也叫值类型（ string,number,bool , null,undefined ） 栈
- 引用数据类型，复杂类型
- object，array , function 等
- let abc={};let bcd = abc;两个变量是完全等价修改了 第二个变量，第二个变量也会发生影响
详情见下图
