JavaScript
javascript
定义：
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
一.数据类型：
分为两大类：原始类型和引用类型。
原始类型分为：数值型，字符串型，布尔型，未定义型，空；
1.数据类型转换
分为强制转换和隐式转换
（1）强制转换
- 强制转换成数值型
Number()中 字符串中包含数字、布尔类型、null 都会强制转换成数值型
Number('3') //3
Number(true) //1
Number(false) //0
Number(null) //0
Number(undefined) //NaN
Number('3a') //NaN
- 强制转换成整型
parseInt()
通常用于小数和字符串为整型，其他的数据类型转换成NaN
parseInt(3.94) //3
parseInt('6.18') //6
parseInt('8a') //8
parseInt('a8') //NaN
- 强制转换成浮点型
parseFloat()
用于将字符串型转为浮点型
parseFloat('3.14') //3.14
parseFloat('6.18a') //6.18
parseFloat('a6.18') //NaN
- 强制j将数值和布尔型转换成字符串型
toString()
var num=2;
var num1=true;
var str=num.toString()//'2'
var all=num1.toString()//'true'
(2)隐式类型转换（在运算过程中进行转换）
1.数值加字符串
2+‘1’ // ‘21’
- 数值加布尔型
1+true //2
1+false //1
- 布尔型加字符串
true+'1'// '2'
2.运算符
运算符分为： 算数运算符、比较运算符、位运算符(了解就行，所以就不展示了)、赋值运算符、三目运算符
- .算数运算符
+ - * / % ++ --
注释： % 取余 9%2=1
++自增 让变量在原来的基础上进行加一
-- 自减 让变量在原来的基础上减一；
var b1=1;
//先执行赋值，再执行自增
var b2=b1++; //b1=2 , b2=1
var c1=4;
//先执行自增，再执行赋值
var c2=++c1; //c1=5, c2=5
- 比较运算符
> < >= <= ==等于 ！= ===（全等于）
== 等于 比较两个值是否相等 只是比较值
=== 全等于 比较值和类型 两个都相同结果才是true
数字与字符串比较 将字符串隐式转换为数字进行比较
字符串之间比较 比较 首字母的Unicode码大小
3>'10'// false '3'>'10'//true 3>'10a' //false 3<'10a' //false 3=='10a' //falsez
注释 ：NaN和任何值比较 ( > < >= <= == === ) 结果都是false
- 逻辑运算符
&& || ！
&& ：逻辑与 两者皆为true ，结果为true;
|| :逻辑或 两者有一为true ,结果为true;
! : 取反；
- 短路逻辑
&&：两者有一为false,不再执行第二个；
||:如果有一为true,不再执行第二个；
短路逻辑主要是看第二行是否执行，无需关注整体是true or false；
- 位运算符
链接：https://www.cnblogs.com/Steeland/p/7142158.html
- 三目运算符
有两个运算符连接的三个操作数据或者表达式
条件表达式 ？ 表达式1 ： 表达式2
如果条件为true ，执行表达式一
如果条件为false，执行表达式二
二、浏览器端函数
alert（）弹出警示框
prompt （）弹出输入框 需要使用保存用户输入的值。类型是字符串类型，如果点击取消浏览器页面显示空白，控制台显示null
三、控制端
程序=数据+算法
程序的执行：顺序执行、选择执行、循环执行
- 流程控制
（1）if 语句
注释：以下数据作为条件会发生隐式转换（数据类型中查看）为false（0，NaN, ' ' , undefined null ；
（2）if-else 语句
//属于多项判断语句
if(条件表达式1){
语句块1
}else if(条件表达式n){
语句块n
}else{
语句块n+1 //以上所有的条件都是false
}
（3）switch case语句
//属于特殊的多项分支语句，只能进行全等于的比较
switch(表达式){
case 值1: //用表达式和值1比较 表达式===值1
语句块1
break; //结束，跳出switch-case
case 值n:
语句块n
break;
default:
语句块n+1 //以上表达式和每一个值比较都是false
}
- 循环：
循环的两个要素
循环条件：控制循环是否往后执行
循环体：要重复执行的代码
（1）while循环
（2）break
在循环中使用，用于强制结束循环，不再执行任何循环的代码
（3）do-while 循环
do{
循环体
}while(循环条件);
（4）for循环
for(初始值;循环条件;增量){
循环体
}
(5)continue和break
break:结束循环，不再执行任何循环代码
continue：跳过某一次循环，不再执行本次条件下的循环
- 循环嵌套（第一次接触可能很难理解，注意多练习，多思考）
在一个循环体内的内部有出现其他的循环
任意两个循环直接相互嵌套
注释：我会在最后添加相关的练习题 。
- 函数
Number()/parseInt()/parseFloat()...
四、函数分为系统函数和自定义函数
函数：是一个功能体，需要提供若干个数据，返回处理的结果，为了封装重复执行的代码
（1）创建函数
function 函数名称(){
函数体 —— 封装的重复执行的代码
}
（1）函数调用
函数名称（）//执行函数体中的代码
（2）创建带有参数的函数
function 函数名称(参数列表){ //用于接收外部传递的数据
函数体
}
调用
函数名称(参数列表) //实际传递的数据
创建函数时的参数称为形参，调用函数时的参数称为实参，实参会赋值给形参，实参的数量和形参的数量可以不匹配，如果形参未赋值则值为undefined
（3）创建带有返回值的函数
return用于返回函数调用后的结果；如果函数中没有return或者return后不加任何值，则结果为undefined,
1-等待付款 2-等待发货 3-运输中 4-已签收 5-已取消 其它-无法追踪
var person={
play: function(){
this //指代调用方法play的对象
}
};
person.play();
3.原始类型和引用类型数据的存储
原始类型 ：直接将数据存储在栈内存中
引用类型：将数据存在堆内存中 。同时会生成一个地址，把地址存储在栈内存中
- 数组
循环 —— 推荐方法
for(var i=0;i<数组.length;i++){
i 代表下标
数组[i] 下标对应的元素
}
六 、API
## 数组和对象混合使用 数据结构 [{...},{...},{...}]
一个对象包含一种事物的相关属性,而一个数组包含多个对象
## 数组遍历
1. for..in key 索引数组: 表示数字下标 关联数组: key是字符串变量
2. for循环 只限制于索引数组
## 数组API(数组中定义好的一些方法,我们可以直接使用)
1. .length 获取数组的长度 数组最大的下标是数组长度-1
2. .concat() 数组的拼接,返回一个新数组
3. .join() 数组转为字符串,还可以按照指定的分隔符转化
4. .toString() 数组转为字串
5. .sort() 排序(顺序,降序),默认Unicode码
括号中只能接受函数(比较,应该具有2个参数),规定排序顺序
sort(function(a,b){
return a-b 顺序
return b-a 降序
})
5. .reverse() 反序
6. 添加/删除元素
- 头部/尾部的添加
头部: unshift() 返回数组的新长度(改变原来的数组)
尾部: push() 返回数组的新长度
- 头部/尾部的删除
头部: shift() 返回删除的元素
尾部: pop() 返回删除的元素
7. .slice 数组元素的截取
1个参数情况: 代表开始点位置,从指定位置开始截取,一直截止到结尾,包含开始点位置内容
正数: 从左往右找位置, 从左往右截取,一直到结尾
负数: 从右往左找位置, 从左往右截取,一直到结尾
当超出范围是,如果是正数,返回空数组,如果是负数,返回全部内容
2个参数情况: 代表开始点 结束点,从指定位置开始截取,一直到指定位置结束,包含开始点位置内容,但不包含结束点位置内容
全为正数: 从左往右找位置, 从左往右截取,一直到结束点,不包含结束点位置内容
一正一负: 从右往左找位置, 从左往右截取,一直到结束点,不包含结束点位置内容
# 数组API
1. .splice()
删除/添加数组元素,会改变原数组
一个参数:相当于开始点
正数: 从左往右寻找位置,从当前下标删除,从左往右删,一直删到结尾
负数: 从右往左寻找位置,从当前下标删除,从左往右删,一直删到结尾
两个参数: 相当于开始点和个数
正数: 第一参数表示开始位置,第二参数表示长度,而不是下标,从左往右寻找位置,从当前下标删除,从左往右删
一正一负: 第一参数可以是正/负数,但是第二参数应当是正数,从右往左寻找位置,从当前下标删除,从左往右删
多个参数:例子(arr.splice(1,3,'小艺','小宇')) 会改变原来元素索引的位置,删除和添加同时存在
2. .includes()
检测数组中的值,如果存在返回true,不存在返回false,大小写敏感,不涉及数据类型转化
当.includes() 存在第二参数时,表示从该位置进行搜索,
如果是正数,从左往右找位置,然后在从左往右找存不存在内容,
如果是负数,从右往左找位置,然后在从左往右找存不存在内容,
- .indexOf()第一次出现的位置
- .lastIndexOf() 最后一次出现的位置
如果找不到返回-1, 存在第二参数,代表开始检索的索引位置
4. .reduce 高阶函数
对数组中的所有元素调用指定的回调函数,该回调函数的返回值为累积结果, 在下一次调用回调函数时,上一个回调函数的返回值会做为参数提供
简单理解: 此方法可以接受一个函数作为累加器,对数组中的所有元素调用这个累加器,最终得出结果
高阶函数是一个函数,它可以接受函数作为参数或者把函数作为返回值
语法: arr.reduce(callback(previousValue[累加器],currentValue[正在处理的元素],[currentIndex[当前索引],array[数组]...]))
5. 后续~ 在第三阶段中还会学习到关于数组更多的骚操作
盘点学过的数组API:concat sort includes slice splice join pop push shift unshift reverse toString indexOf() lastIndexOf()
# 数组API
flat() 所有数组中的元素以递归方式连接到指定深度(把数组展平)
如果参数填写 infinity表示不管有多少层嵌套(不管是多少维数组)都变成一维数组
# 字符串对象及API
字符串是一个原始类型,对象是引用类型,将原始类型包装成对象后就可以像引用类型一样,拥有属性和方法
1. 创建
字面量 var str = '小艺';
构造函数 这2个内容用起来没什么区别
var str = new String(2); 对象
var str = String(2); 字符串
2. 访问 字符串名[下标]
3. 转义符 \ 一种引用单个字符的方法 是字符的一种间接表达形式,在特殊语境中,无法直接使用字符自身,可以使用转义符
退格符 \b
换页符 \f
垂直制表符 \v
换行符 \n \u000A unicode值
转义\ \\
...
单双引号的包裹关系 不能包裹其自身,但是可以互相包裹
## 字符串API
1. .length属性 求字符串长度 转义符,空格都会被计算
2. toUpperCase() 字符串大写
3. toLowerCase() 字符串小写
4. trim()
去除2边的空格,内容空格去不掉
5. indexOf()
返回指定字符串第一次出现的的位置,找不到返回-1,默认从0开始,也可以从指定位置出查询
6. lastIndexOf()
返回指定字符串最后一次出现的的位置
7.charAt()
获取下标对应的字符串, 如果下标不存在返回空字符串,如果填写不存在的字符串类型下标,会返回第一个字符串内容
8. search()
字符串查找,元素第一次出现的位置,找不到返回-1,且大小写敏感,可以通过/i来忽略大小写,支持正则表达式
9. repeat()
# 字符串API
1. charCodeAt()
返回指定位置的字符串unicode码,括号内需要一个大于等于0,小于字符串长度的整数,如果不是数值默认为0
2. slice()
按照下标截取,不同参数个数,情况不同,参数的正负也会影响结果
一个参数的情况下: 代表开始点位置,从指定的位置开始截取,一直到结尾,包括开始点内容
正数: 从左往右找,从左往右截
负数: 从右往左找,从左往右截
超出范围,如果是正数不报错,返回空字符串,如果是负数返回全部内容
二个参数的情况下: 开始点,结束点,从指定的位置开始截取,包括开始点,不包括结束点
3. substr尽管没有被严格废弃,但是不建议在生产中使用,应该用substring()代替
4. substring
按照长度截取,不同参数个数,情况不同,参数的正负也会影响结果
一个参数的情况下: 代表开始点位置,从指定的位置开始截取,一直到结尾,包括开始点内容
正数: 从左往右找,从左往右截
负数: 返回全部内容
超出范围,如果是正数不报错,返回空字符串,如果是负数返回全部内容
二个参数的情况下:
1,如果2个参数的值一样,返回空字符串
2,任意一个参数小于0或者为NaN都会被当做0
3,如果开始点大于结束点,执行效果类似于2个参数位置互换
4,如果任意参数大于字符串长度,仍然会默认最大字符串长度
5. split
将字符串按照一定的格式分割,分割后变成数组
1,分割后分隔符消失,不会出现在数组元素中
2,如果不写参数或者如果指定的分隔符不存在, 直接把整个字符串作为数组的1个元素返回
3,字符串中的具有一定意义的字符也可以作为符号来分割
4,可以指定分割次数,如果超出次数或者为负数,默认返回最大分割数量的数组元素,
5,默认大小写敏感,可以通过 /i 来取消
6. replace
字符串替换,不会改变原来的字符串,括号可以使用正则表达式
默认执行1次(/g,全局搜索)且大小写敏感(/i)
七、ES6
ECMA
ECMAScript ES6 是JS的第六套标准规范
JQuery
ES2021 ES2020
(1)块级作用域
let声明的变量不存在变量声明提升，不允许重复声明。
大括号{}之间的语句块就是块级作用域，例如：for，if，else...
块级作用域下,let和const声明的属于局部，不能被外部访问。
对比var、let、const var声明的变量存在变量声明提升，允许重复声明 let和const声明的变量不存在提升，(2)参数增强 可以给参数设置默认值，如果没有提供实参会自动使用默认值
function add(a,b,c=0){
b=b||0; //ES6之前的写法
}
add(8000)
(3)箭头函数 简化了匿名函数的写法，不等价于匿名函数 ()=>{ } arr.sort( (a,b)=>{ return a-b; } )
如果箭头函数的函数体中只有一行代码，并且是return形式的可以进一步简化为 arr.sort( (a,b)=>a-b )
(4)模板字符串 解决了字符串的拼接 ` 反引号之间的内容就是模板字符串 ${JS表达式} `
浙公网安备 33010602011771号