HTML 前端学习（6）——JS 学习（1）
JS 简单介绍
JS 是一种编程语言，也可以写后端代码
JS 是一种轻量级的脚本语言，是可插入HTML页面的编程代码，可由浏览器执行
JS 注释
单行注释
// 单行注释
多行注释
/*
多行注释
多行注释
多行注释
多行注释
*/
JS 引入方式
1. <script> 标签内直接书写 JS 代码
2. <script> 标签内 src 属性引入 JS 文件
JS 代码结构
JS 以分号作为语句的结束
但不写分号不会报错，但相当于没有结束符
JS 变量
定义变量
在 JS 中首次定义变量，需要使用关键词声明
1. 关键词
var name = 123;
2. es6 推出的新语法
let name = 456;
变量命名规范
命名规范
JS 命名规范
1. JS中变量命名可以是数字、字母或$
2. JS中变量的命名方式采用驼峰命名，如：
userName
passWord
而在python中采用下划线的命名，如：
user_name
pass_word
JS 中常量
python 默认没有真正意义上的常量，默认用全大写的变量表示常量
JS 中有真正意义上的常量
const pi = 3.14
JS 书写位置
JS 代码的书写位置
1. 单独写在 JS 文件中
2. 使用浏览器提供的 console 页面书写
在浏览器中书写 js 的时候 左上方的清空按钮只是清空当前页面 代码其实还在
如果你想要重新来 最好重新开设一个 页面
（在使用浏览器书写时 你自己书写的js代码推荐你在 自己的HTML页面打开）
JS 数值类型
数值类型（number）
// 整型
var num1 = 11;
// 浮点型
var num2 = 11.11;
// 查看变量数据类型
typeof num1;
typeof num2;
// 注意：NaN 虽然表示 “不是一个数字” 的意思，但是也是数值类型
typeof NaN;
类型转换
// 转换为浮点型
var test1 = "123.12";
parseFloat(test1);
// 转换为整型
parseInt(test1);
// 只要字符串开头是数字就可以转化为 数值类型
var test2 = "123abc456";
parseInt(test2); // 结果是 123
var test3 = "abc123456";
parseInt(test3); // 结果是 NaN
注意
注意：name 属性在 JS 语法中比较特殊，不论 var name = 任何数据类型，最后的数据类型都是字符串
字符串类型
var str1 = "奥特曼";
typeof str1;
// 多行文本，模板字符
var str2 = `
asd
asd
asd`
// 格式化字符串
var name = "奥特曼";
var age = 18;
var ss = `My name is ${name} and my age is ${age} !`;
console.log(ss); // 打印 ss。结果是 My name is 奥特曼 and my age is 18 !
字符串拼接
// python 中一般使用 join 拼接字符串，不推荐使用 +号
// JS 推荐使用 +号
var nameAge = name + age;
console.log(nameAge);
/* 注意：这里 name 是字符串类型，age 是 数值类型，却可以拼接
这是因为 JS 是弱相关的编程语言
在拼接时，不同的数据类型会自动转换成相同的数据类型操作
*/
字符串中常用方法
------------------------------------------------------------------
字符串长度 .length()
消除字符串的空格 .trim() .trimleft() .trimeright()
返回第 N 个字符,索引从0开始 .chartAt(n)
拼接字符串 .concat()
子序列在字符串的索引 .indexOf()
根据索引取字符串子序列 .substring()
切片 .slice()
字符串全小写 .toLowerCase()
字符串全大写 .toUpperCase()
切割 .split()
-------------------------------------------------------------------
// 计算字符串长度 .length
var test4 = "aoteman";
test4.length;
// 移除字符串的空白 .trim，只移除空白，不能移除指定的符号
var test5 = " aoteman ";
test5.trim();
// 移除字符串左边空白 .trimleft()
var test6 = " aoteman ";
test6.trimLeft();
// 移除字符串右边空白 .trimright()
// 只移除空白，不能传入参数
var test7 = "ao|te|man|";
test7.trim("|"); // 'ao|te|man|'
// 返回第 N 个字符 .charAt(n)
test7.charAt(7);
// 拼接，.concat()
test7.concat("a"); // 'ao|te|man|a'
// 子序列的位置，.indexOf()
test7.indexOf("|"); // 2
test7.indexOf("|te|m"); // 返回第一个字母的位置
// 根据索引获取子序列，.substring(from, to)
test7.substring(2, 7); // '|te|m'
// 切片, .slice(start, end)
test7.slice(2,7); // '|te|m'
// 字符串小写, .toLowerCase()
var test8 = "abcABC";
test8.toLowerCase();
// 字符串大写，.toUperCase();
test8.toUpperCase();
// 分割，.split()
test7.split("|"); // (4)?['ao', 'te', 'man', '']
// 取切割后的前两个元素
test7.split("|", 2); // (2)?['ao', 'te']
布尔值
// 跟 python 不同，在 JS 中布尔值都是小写的值，如：false, true
// 在 JS 中表示 布尔值的值
/*
0、null、undefined、NaN
*/
null 和 undefined 的区别
null 表示 值为空 一般指定或者情况一个变量时使用
name = 'json'
name= null
undefined
表示声明了一个变量但是没有做初始化操作（没有赋值）
函数没有指定返回值的时候 返回的也是 undefined
对象
数组
var lst = [1, "123", "abc", true];
typeof lst; // object
数组常见方法
---------------------------------------------
数组长度 .length
尾部插入 .push
尾部移除元素 .pop
头部添加元素 .unshift
头部移除元素 .shift
切片 .slice
反转 .reverse
拼接成字符串 .join
连接成数组 .concat
排序 .sort
数组所有元素 .forEach
从索引 N 往后删除 M 个元素 .splice(N, M)
----------------------------------------------
// 数组长度 .length
lst.length; // 4
// 尾部追加元素 .push
lst.push(false);
lst; // (5) [1, '123', 'abc', true, false]
// 弹出尾部元素
lst.pop(); // false
lst; // (4) [1, '123', 'abc', true]
// 头部插入元素
lst.unshift("asd"); // 5
lst; // (5) ['asd', 1, '123', 'abc', true]
// 头部移除元素
lst.shift(); // "asd"
lst; // (4)?[1, '123', 'abc', true]
// 切片
lst.slice(3); // [true]
// 反转
lst.reverse(); // (4)?[true, 'abc', '123', 1]
// 连接成字符串
lst.join(); // 'true,abc,123,1';
// 连接成数组
lst.concat([111,222]); // (6)?[true, 'abc', '123', 1, 111, 222]
// 排序
var lst1 = [1,3,2,9,5];
lst1.sort(); // (5)?[1, 2, 3, 5, 9]
// 数组内部所有参数
lst1.forEach( function (value) {
console.log(value)}, lst1);
// 一个参数就是数组里面每一个元素对象
l.forEach(function (value) {
console.log(value)}, l);
// 第二个参数是 索引
l.forEach(function (value,index) {
console.log(value,index)}, l);
// 第三个参数表示 参数来自于哪个数组
l.forEach(function (value,index,arr) {
console.log(value, index, arr)}, l);
// 从索引 0 往后删除 3 个元素
l.splice(0,3);
// 先删除从索引 0 往后的 3 个元素，再增加一个元素 777
l.splice(0,3,777);
自定义对象
字典形式
var obj1 = {"name": "aoteman", "age":18};
typeof obj1; // 'object'
obj1.name; // 'aoteman'
obj1.age; // 18
关键词声明
var obj2 = new Object();
obj2.name = "123";
obj2.age = 18;
obj2; // {name: '123', age: 18}
其他 JS 内部对象
Date 对象
var d1 = new Date();
d1.toLocaleString();
d6.getDate(); // 日
d6.getDay(); // 星期
d6.getMonth(); // 月，0~11月
d6.getFullYear(); //完整年份
d6.getHours(); // 小时
d6.getMinutes(); // 分钟
d6.getSeconds(); // 秒
d6.getMilliseconds(); // 毫秒
d6.getTime(); // 时间戳
JSON 对象
// 在 python 中 序列化和反序列化
/*
----------------------------------
dumps 序列化
loads 反序列化
----------------------------------
*/
// 在js中也有序列化、反序列化
JSON.stringify(); // dumps
JSON.parse(); // loads
let obj3 = {"name": 123, "age":456};
res = JSON.stringify(obj3);
JSON.parse(obj3);
比较运算符
/*
判断
==，弱等于，内部自动转化为相同的数据类型并进行比较
===，强等于，内部数据类型不会自动转换
*/
1 == "1"; // true
1 === "1"; // false
逻辑运算符
// python 中 and, or, not
// 在 JS 中
/*
----------------------
和 &&
或 ||
非 ！
----------------------
*/
5 && "5"; // "5"
0 || 1; // 1
!5 && "5"; // false
赋值运算符
// + -= += *=
运算符
var x = 10;
// 加号在后面，先赋值再自增 +1
var res1 = x++;
res1; // 10
var res2 = ++x; // 加号在前面，先自增再赋值
res2; // 12
流程控制
if 判断
/*
if (条件) {代码块}
*/
if (age>18) {
console.log("来啊 来啊")
};
if (age>18){
console.log("123")
}else{
console.log("456")
}
//if else if else
if (age<18){
console.log("123")
}else if(age<24){
console.log("456")
}else {
console.log("789")
};
for 循环
/*
for (开始条件；循环条件；每次循坏之后的操作) {代码块}
*/
for (let i=0;i<10;i++) {
conlose.log(i);
}
while 循环
/*
while (循环条件) {代码块}
*/
var i = 0;
while (i<100) {
conlose.log(i);
i++;
}
switch 语句
// 提前列举好可能出现的条件和解决方式，之后来匹配
// 不加 break，匹配到一个之后 就一直往下执行
// default —- 条件没有匹配上，默认走的流程
var num = 2;
switch (num) {
case 0:
console.log("喝酒");
break;
case 1:
console.log("唱歌");
break;
case 2:
console.log("再见");
break;
default:
console.log("条件没有匹配上，默认走的流程")
}
三元运算符
// 在 python 中 三元运算符
// res = 1 if 1>2 else 3
// 在 JS 中 三元运算符
// 条件成立取 ?后的值 ，否则取 :后的值
var res = 1>2?1:3; // res 的值为 3
函数
在python中定义函数需要 def
在 js 中定义函数需要 function
格式
function (形参1，形参2......) {函数体代码}
无参函数
function func1() {
console.log("hello world")
}
func1() //调用 加括号调用，跟 python 一样
有参函数
function func2(a,b) {
console.log(arguments) // argumes 能够获取函数接收到的所有参数
if (arguments.length < 2){
console.log("传少了")
}else if (arguments.length>2) {
console.log("传多了")
}else{
console.log(a,b)
}
}
func2(1,2) // 传多了没关系，只要对应的数据；少了也没关系
函数返回
function index() {
return 666 // 如果返回多个，只能拿到最后一个，所以应该返回一个元组或数组
}
匿名函数
// 匿名函数 就是没有名字
function () {
console.log("hello world")
}
箭头函数
// 箭头函数（要了解一下）,主要用于处理简单的业务逻辑
// 箭头左边是形参，右边是返回值
var func3 = v => v;
// 等价于
var func3 = function (v) {
return v
}
var func4 = (arg1,arg2) => arg1+arg2
// 等价于
var fun4 = function (arg1,arg2) {
return arg1+arg2
}
