目录
JavaScript
Javascript简称JS，是脚本语言，JS语言开发的文件以.js为后缀，通过在HTML文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的语法，属于编程语言。
ECMAScript目前普遍使用的存在ES5与ES6两个版本
JS的引入方式
- 行间式：JS代码书写在标签的事件全局属性中
- 内联式：写在scrip标签中，一般放在body标签的最下面，因为代码自上而下运行，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了
- 外联式：写在外部js文件中，在html页面中用script标签引入js文件，建议放在body最下方
引入
# js/外联.jsbox.style.background = 'blue'
JS的基础语法
变量
JS变量不同于python变量，但是变量结构相差不大，也有变量名，赋值符号，变量值，但是需要特定的关键字来定义，现在JS有两种语法共同存在，ES5/ES6这两个版本，但浏览器会自动识别版本，无需担心语法问题
四种定义变量的关键字
- 不写：全局变量
- var：局部变量
- let：块级变量
- const：常量
n1 = 10; // 全局变量// console.log(n1); //打印var n2 = 20; // 局部变量// alert(n2);let n3 = 30; // 块级变量// document.write(n3);const N4 = 40; // 常量// console.log(N4);// N4 = 50; // 报错，常量值不能修改
变量名命名规范
- 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
- 区分大小写
- 不能出现关键字及保留字
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
四种变量的分析
function fn() { n1 = 10; // 只有全局变量外界才能访问 var n2 = 20; let n3 = 30; const n4 = 40;}fn();console.log(n1);if (true) { // 块级作用域 n1 = 10; var n2 = 20; let n3 = 30; // let与const声明的变量有块级作用域 const n4 = 40; // 常量}console.log(n1);console.log(n2);{ let aaa = 10 } 基本数据类型
值类型
// 数字类型：numbervar num = 10;const PI = 3.14;console.log(typeof(num), num); // 结果：number 10// 字符串类型：stringvar s1 = "双引号可以表示字符串";var s2 = '单引号可以表示字符串';var s3 = `多行字符串：再来一行`;console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串// 布尔类型：booleanvar b1 = true;var b2 = false;console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串// 未定义类型：undefinedvar u1;var u2 = undefined;console.log(typeof(u1), u1); // 结果：undefined undefined
引用类型
// 函数类型：functionfunction fn1() {}var fn2 = function() {};console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {}// 对象类型：objectvar obj1 = {}console.log(typeof(obj1), obj1); // 结果：function {} 其它
// 空类型var jerry = null;console.log(typeof jerry, jerry);// Array对象类型：var arr1 = [1, 2, 3, 4, 5]console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]// 时间var date = new Date();console.log(typeof date, date);// 功能性随机数: Math.random() - (0, 1)console.log(Math.random());// 需求：在正整数区间[m, n]随机一个数// (0, 1) * 10 => (0, 10) 取值parseInt() => [0, 9] + 5 => [5, 14]// parseInt(Math.random() * 11) + 5 => [5, 15]// [m, n] => +的值就是m，*的值 n - m + 1// ① parseInt(Math.random() * (n - m + 1)) + m => [m, n]var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;console.log(r_num);// ② (0, 1) * 超大的数 取整// 一个正整数 % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1// 一个正整数 % (n-m+1) + m => [m, n]var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;console.log(random_num)
数据类型的使用
- 字符串
// string => str// 1）声明// 单引号 | 双引号 | 反引号// 2）字符串拼接res = 'you are' + ' ' + 'good man!';console.log(res);// 3）字符串的切片s = 'you are good man!';n_s = s.slice(8, 12);console.log(n_s); // good// 4）字符串替换s = 'you are good man!';n_s = s.replace('man', 'woman');console.log(n_s);// 5）字符串拆分s = 'you are good man!';res = s.split(' ');console.log(res);// 6）字符串迭代s = 'abcdef';for (num of s) { console.log(num)} - 数组
// array => list// 1）声明arr = [1, 4, 2, 3, 5];console.log(arr);// 2）反转arr.reverse();console.log(arr);// 3）组合str = arr.join('@');console.log(str);// 4）切片new_arr = arr.slice(1, 4);console.log(new_arr);// 5）排序arr.sort();console.log(arr);// 6）增删改查// 查:只有正向索引console.log(arr[2]);// 增arr.push(888); // 尾增console.log(arr);arr.unshift(666); // 首增console.log(arr);// 删res = arr.pop(); // 尾删console.log(arr, res);res = arr.shift(); // 首删console.log(arr, res);// 增删改 综合方法：splice// 三个参数：开始操作的索引 操作的位数 操作的结果(可变长)arr = [1, 2, 3, 4, 5];// 数组长度：arr.lengtharr.splice(arr.length, 0, 666, 888);console.log(arr); - 字典（对象）
// object => dict// 1）定义height = 180;dic = { 'name': 'Owen', // 本质是对象 age: 18, // 所有的key(属性名)都是字符串类型，所以可以省略引号 height, // 当value为变量，且变量名与key同名，可以省略value};console.log(dic);// 2）访问console.log(dic.name);console.log(dic['age']);// 3）增删改// 增dic.sex = '男';console.log(dic);// 删delete dic.sex;console.log(dic);// 改dic.name = 'Nick';console.log(dic); 基本运算符
算数运算符
假设：n = 5
| 运算符 | 描述 | 例子 | x结果 | n结果 |
|---|---|---|---|---|
| + | 加法 | x=n+2 | 7 | 5 |
| - | 减法 | x=n-2 | 3 | 5 |
| * | 乘法 | x=n*2 | 10 | 5 |
| / | 除法 | x=n/2 | 2.5 | 5 |
| % | 取模(余数) | x=n/2 | 1 | 5 |
| ++ | 自增 | x=++n | 6 | 6 |
| x=n++ | 5 | 6 | ||
| -- | 自减 | x=--n | 4 | 4 |
| x=n-- | 5 | 4 |
赋值运算符
假设：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
比较运算符
假设：x = 5
| 运算符 | 描述 | 比较 | 结果 |
|---|---|---|---|
| == | 等于 | x=="5" | true |
| === | 绝对等于 | x==="5" | false |
| != | 不等于 | x!="5" | fales |
| !== | 不绝对等于 | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
逻辑运算符
假设：n = 5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
三目运算符
语句：结果 = 条件表达式 ? 结果1 : 结果2;
假如条件表达式成立，则把结果1赋值给结果，否则就把结果2赋值给结果
案例
// 1）算术运算符console.log(5 / 2); // 2.5console.log(parseInt(5 / 2));console.log(parseFloat(5 / 2));// parseInt | parseFloat 可以完成 string => numberres = parseInt('3.14.15abc');console.log(res); // 从头往后找整数部分res = parseFloat('3.14.15abc');console.log(res); // 从头往后找小数部分(最多只识别一个小数点)res = parseInt('a3.14.15abc'); // NaNconsole.log(typeof res, res);// 2) 弱语言类型的jsres = 10 + '5';console.log(res); // 字符串：105res = 10 - '5';console.log(res); // 数字：5// 数字 => 字符串res = '' + 5;console.log(typeof res, res);// 字符串 => 数字res = +'5';console.log(typeof res, res);// 3) 自增自减num = 10;num += 1;console.log(num);num++;console.log(num);num--;console.log(num);// 了解：符号 在前优先级高于一切运算符，在后优先级比赋值符还低// ++在前先自增再运算；++在后先运算再自增num = 10;res = num++;console.log(num, res);num = 10;res = ++num;console.log(num, res);// 4) 比较运算符的比较console.log(5 == '5'); // true，只做值比较console.log(5 === '5'); // false，做值与类型比较console.log(5 != '5'); // false，只做值比较console.log(5 !== '5'); // true，做值与类型比较// 5）逻辑运算符console.log(true && true);console.log(false || false);console.log(!true);// 短路现象// &&: 有假则假，前为假，后不用判断num = 10;console.log(false && ++num); // num++ | ++num 都被短路不会被执行console.log(num);console.log(true || ++num); // num++ | ++num 都被短路不会被执行console.log(num);// 6）三元运算符（三目运算符）res = 5 == '5' ? '值相等':'值不等';console.log(res); 流程控制
分支结构
- if分支结构
/* * if (条件) { * 代码块1 * } * else if (条件) { * 代码块2 * } * else { * 代码块3 * } */var num = parseInt(Math.random() * 16);console.log(num);if (num > 10) { console.log("产生的数超过10")} else if (5 <= num && num <= 10) { console.log("产生的数间于5~10")} else { console.log("产生的数不超过5")} - switch分支结构
/* * switch(值) { * case 条件1: * 代码块1; * break; // 没有break会自动执行下一个case里面的代码块，直到遇到break或程序结束 * case 条件2: * 代码块2; * break; * ... * default: // 没有走任何case，会进入default分支 * 代码块3; */month = parseInt(Math.random() * (12 - 1 + 1)) + 1;console.log(month);switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log('%s月31天', month); break; // 用来结束case，跳出switch分支结构，多个分支可以共享一个break case 2: console.log('2月28天'); break; case 4: case 6: case 9: case 11: console.log('%s月30天', month); break; default: console.log('月份参数有误');} 循环结构
- for循环
for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④;}// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程// 案例：for (var i = 0; i < 5; i++) { console.log(i);}// 结果：01234 // for…in迭代器var arr = [1, 2, 3, 4, 5]for (num in arr) { console.log(num);}// 结果：01234 - while循环
while (条件表达式) { 代码块;}// 条件满足执行代码块，条件不满足跳出循环// 案例：var i = 0;while (i < 5) { console.log(i); i++;}// 结果：01234 - do...while 循环：先执行一次循环体，再判断条件
var num = 90;do { console.log(num); num++;} while (num <= 10);//结果：90 """1) for：解决知道循环次数的循环2) while： 解决一切for与do...while能解决的问题(结合函数的思想) 解决不知道循环次数的循环(循环用break结合)3) do...while：完成循环体必须要提前执行一次的循环"""
函数
函数的组成
函数名 ：函数名存放的就是函数的地址
通过 函数名() 调用函数的参数列表：将外界资源传给内部的桥梁
你传你的，我收我的，用...接收可变长函数体 ： 解决需求的代码块
功能代码块返回值 ： 将内部数据反馈给外部
只能返回一个值，不写或空return返回undefined
定义函数的三种方式
""" 第一种：关键字 函数名(参数列表) { 函数体; 返回值 } 第二种：var 函数名 = 关键字(参数列表) { 函数体; 返回值 } 第三种：var 函数名 = (参数列表) => { 函数体; 返回值 }""" 有名函数
// 定义function add(n1, n2) { return n1 + n2}// 使用res = add(10, 20);console.log(res);// 函数名的运用my_add = add;console.log(my_add(100, 200));// 少传未接收到的形参赋值为undefined，多传的实参自动被丢弃function fn(n1, n2) { console.log('传输的n1：%s | n2：%s', n1, n2)}fn(10, 20);fn();fn(100);fn(1000, 2000, 3000);// 可变长参数function func(...num) { console.log(num)}func(1, 2, 5, 3, 4);// 用变量接收 - 函数的第二种声明方式var fun = function () { console.log('函数的第二种声明方式')};fun();// 函数的第三种声明方式var fun2 = (n1, n2) => { // 有函数体标明{} console.log('n1:%s | n2:%s', n1, n2); return n1 + n2};console.log(fun2(222, 444));var fun3 = (n1, n2) => n1 + n2; // 只有返回值可以省略{}console.log(fun3(222, 444)); 匿名函数
// 匿名函数// 匿名函数的自调用 - 调用一次后就会被回收资源(function () { console.log('匿名函数')})();// 匿名函数自调用，可以产生局部作用域与外界隔离(function () { let number = 888})()// console.log(number) // 外界不可以直接访问