【前端基础--5】
初识JavaScript（js）
网页上的脚本语言，运行执行逻辑代码，可以使网页实现一个动态的效果。
组成
核心语法-ECMAScript ：规范js的基本语法
文档对象模型-DOM(Document Object Model)：提供一系列操作文档的方法。
浏览器对象模型-BOM(Browser Object Model)：提供一系列操作浏览器的方法。
特点：动态的（可以重新赋值）、弱语言（变量的类型，可能运算时间会发生改变）、基于原型、解释型（脚本语言 js/python等）。
js书写
内部js写法：
推荐写在body结束标签之前，内容写在script标签内。
外部js写法：
新建一个.js格式的文件，书写js代码。但不通过link引入，通过script标签的src属性引入。
js输出内容的方法
注意：文本都需要加引号
弹出框 alter
alter('你好’）（进入浏览器页面后就可以看到）
控制台 console.log
console.log('你好！')（点击检查在控制台可以看到）
书写规范：
- 严格区分大小写
- 半角输入（标点符号）
- 严格缩进（增加代码的可读性，维护性）
- 语句结束后加分号
声明变量
声明变量 let
变量的命名规范：
- 不能以数字开头，符号只能是$或者_
- 不能用关键字
- 变量名严格区分大小写
- 见名知意
1.可以进行变量运算
// 运算
let a = 1;
let b = 2;
let sum = a + b;
console.log(sum);2.不可重复声明
3.一次性声明多个变量用逗号隔开
// 一次性声明多个变量
let text1 = '可行', text2 = 22;
console.log(text1, text2)4.省略let 解析器会帮我们隐式声明，但不利于表达意图
5.声明变量，重复给这个变量赋值，后者会覆盖前面的
6.可以利用const来声明常量（不可以修改的，且声明时必须要赋值）
数据类型
1.数值类型 number
整数和小数都包括在内
正无穷大：console.log(Infinity);
负无穷大：console.log(-Infinity);
特殊值：NaN(not a number)非数字
2.字符串类型 string
用单引号/双引号包裹起来的文本
console.log('有一点难受');
如果内部文本已经使用单引号了，可以用双引号进行包裹
如果想内部和外部使用同样的引号，可以在前面加上转义字符\
\n：在内部使用换行
定义转换为字符串：let str = String();
字符串拼接：console.log(str1+str2);
但凡+两侧有一侧是字符串，就会认为是字符串拼接。
str.length：获取字符串长度
${}：模板字符串
let age = 20;
console.log('我今年${age}岁了')；
3.布尔值类型 boolen
console.log(1>2);
通过typeof判断数据类型
console.log(typeof true);
Undefined类型
打印值是未定义的
空类型 unll
可以手动设置
let num = null;
bigint --> 超大整数
js能表示的最大整数
console.log(Number.MAX_SAFE_INTEGER);
js能表示的最小整数
console.log(Number.MIN_SAFE_INTEGER);
类型判断
console.log(typeof 2); //number
let a; console.log(typeof a); //undefind
console.log(llun); //null
console.log(null); //object
undefind的实用性比object强
isNaN方法判断是否为非数字
console.log(isNaN(123)); // False
isFinite判断是否为正常的值
console.log(isFinite(123)); // True
console.log(isFinite(Infinity)); // False
console.log(isFinite(null)); // True （默认转化为0）
类型转换
显式类型转换
let a = 123；
let str1 = Boolen(a); //将a的123转换为布尔值
constle.log(str1); // True
let num = Number(false); // 将布尔值转换为数字
console.log(num); // 0
隐式类型转换
+是特殊的。任何值，只要一边是字符串，结果都是字符串
let num1 = 2+'123'; // 2123
除了+以外的算术运算符 - *等都会把数据转成数字类型
let num2 = '222'-1; // 221
数组
概念：将多个元素（通常是一个类型）放到一个集合里面的集合称为数组。
含义：数组是一个有序的列表，可以存放任意的数据并且它的长度也可以任意调整。
数组的创建
// 创建空数组
let arr=[];
// 在数据[]里存放多条数据，每条逗号隔开
let arr1=[1,2,'一花','二乃'];
console.log(arr);
// 用Array方法创建数组
let arr2=Array('三玖',20);
console.log(arr2)；
// 数组是一个有序列表
let num=[1,2,3,4,5];
num.length=3; // 将数组长度赋值为3，多出来的数组会被切掉
console.log(num)；获取数组的列表项
// 获取数组中的粉色，并取出来
let arr3=['红色','粉色','蓝色'];
// 获取数组项 数组名[下标]
console.log(arr3[1]);push 新增数组值
// 新增数组值
let Arr = ['我','和','你'];
// 给下标为0的值赋值
Arr[0] = '她';
// 给下标为2的值赋值，有就进行修改
Arr[2] = '他';
// 给下标为3的值赋值，没有就新增
Arr[3] = '一起';
console.log(Arr);
let array = [11,22,33];
// push可以在原数组后面添加新的数组项
array.push(444,555);
console.log(array);删除数组值 pop / shift / splice / slice
let per=['一花','二乃','三玖'];
// 可以这样删除
per[2]='';
console.log(per);
// 也可以使用pop返回要删除最后一个项
console.log(per.pop());
// 使用shift返回要删除的第一个值
console.log(per.shift());
// unshift()将新数组项添加在数组最前面
per.unshift('四叶');
console.log(per);
// splice() 万能方法，增删改
let newArr = [12,23,34,45];
newArr.splice(1,2,'五月');
// 第一个值(1)：从数组的第几项开始裁剪
// 第二个值(2): 裁剪的数量几个
// 第三个值(3): 修改进数组内的值
console.log(newArr);
// slice()
let arr = ['你在','做什么','呢？'];
console.log(arr.slice(1)); // 做什么呢？ 从下标为1的值开始裁剪
console.log(arr.slice(0,2)); // 你在做什么 左闭右开区间一些数组的方法：
toString / join / reverse / sort
let num1 = [1,2,3];
// toString():将数组类型转换为字符串，返回字符串结果
console.log(num1.toString());
// join 将数组转换为字符串
let num2 = [1,2,3];
// 将逗号改为空格隔开
console.log(num2.join(' '));
// 将数组的位置进行颠倒
console.log(num2.reverse());
// sort排序
num3 = [2,1,3];
// 放入函数
num3.sort(function(a,b){return a-b;});
// 箭头函数写法 从小到大（升序）
num3.sort((a,b) => a-b);
// 箭头函数写法 从大到小（降序）
num3.sort((a,b) => b-a);
console.log(num3);