JavaScript 基础
ECMASript 和 JavaScript的关系：
ECMAScript是JavaScript的规格，后者是前者的实现。
完整的JavaScript是由以下3部分组成的：
1、ECMAScript 是核心
2、DOM 文档对象模型 Document Object model （整合js，css，html）
3、BOM 浏览器对象模型 Broswer object model（整合js和浏览器）
JavaScript特点：
脚本语言，轻量级编程语言，可插入HTML页面
JavaScript引入方式：
引入额外的JS文件：
JavaScript语言规范：
注释：//单行注释。 /多行注释/
结束符号：JavaScript中的语句要以分号（；）为结束符。
JavaScript语言基础
常量声明：“const 常量名”
变量声明：
1、变量名可以使用数字、字母、下划线、$组成，不能以数字开头。
2、声明变量名使用这种格式：
“var 变量名；”定义全局变量
“let 变量名；”定义局部变量，for循环的计数器就很适合let命令
注意：
1、变量名是区分大小写的
2、推荐使用驼峰体命名规则
3、保留字和关键字不能用作变量名
JavaScript数据类型：
JavaScript拥有动态类型
var x； // 此时x未赋值，是动态的，给他赋值数字，他就是数字，给他赋值字符串，他就是字符串
数值（number）
JavaScript不分整型和浮点型，只有一种数字类型。
还有一种NaN，表示不是一个数字（Not a Number）
常用方法：
parseInt("123") // 返回 123
parseInt("ABC") // 返回 NaN，表示该值不是数字
parseFloat("123.456") // 返回123.456
字符串（string）：
var a = "hello，"
var b = "beauty!"
var c = a+b;
console.log(c); //得到hello，beauty！
字符串的常用方法：
.length-->返回长度
.trim()-->移除空白
.trimLight()-->移除左边空白
.trimRight()-->移除右边空白
.charAt(n)--> 返回第n个字符
.concat（value, ...）-->拼接
indexOf(substring, start)-->子序列位置
.substring(from, to)-->根据索引获取子序列
.slice(start, end)-->切片
.toLowerCase()-->小写
.toUpperCase()-->大写
.split(delimiter, limit)-->分割
模板字符串（template string）：
这是ES6中特有的，是增强型字符串，用反引号标识，可以当作普通字符串使用，可以定义多行字符串，可以在字符串中签如变量；
这是普通字符串
多行 字符串
var name='allen', age='20';
My name is ${name}, I am {age}
Boolean 布尔值：
空、0、null、undefined、NaN
对象（Object）
JavaScript中的所有事物都是对象。JavaScript允许自定义对象。
对象是带有属性和方法的特殊数据类型。
数组：
数组对象的作用是：使用单独的变量名来存储多个值。类似于Python中的列表。
数组的常用方法：
.length 数组的大小
.push(ele) --> 尾部追加元素
.pop() --> 获取尾部的元素
.unshift(ele) --> 头部插入元素
.shift() --> 头部移除元素
.slice(start, end) --> 切片
.reverse() --> 反转
.join(seq) --> 将数组元素连接成字符串
.concat(val, ...) --> 连接数组
.sort() --> 排序
.forEach() --> 将数组的每个元素传递给回调函数
.splice() --> 删除元素，并向数组添加新元素。
.map() --> 返回一个数组元素调用函数处理后的值的新数组
forEach（）函数
forEach（function（currentValue，index，arr），thisValue）
作用是：for循环出每一个值交给function处理
splice（）函数
splice（index，howmany，item 1,...item n）
第一个参数是起始位置，第二个参数是要删除的个数，删了之后把后边的参数添加进去
ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。
typeof是用来查看JS数据类型的，是一个一元运算符号，不是一个函数，也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一：
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
运算符：
算术运算符：+ - * / % ++ --
x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
比较运算符：
= < <= != == === !==
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
逻辑运算符：&& || ！
赋值运算符： = += -= *= /=
流程控制：
if 流程控制
if-else:
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if - else if - else:
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
switch流程控制
switch:
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for循环
for:
for (var i = 0;i<10; i++){
console.log(i)
}
while循环
while:
var i = 0;
while (i<10) {
console.log(i);
i++;
}
三元运算：
var a = 1；
var b = 2；
var c = a > b ? a : b
求c的值，条件判断a>b，成立就取a，不成立就取b。
可以嵌套使用:
var a = 1, b = 2;
var c = a > b ? a : (b=='5') ? a : b;
c的值为2
函数
函数定义：
JavaScript中的函数和python中的非常相似，只是定义方式有点区别
普通函数定义：
function f1（）{console.log（"hello world!"）}
带参数的函数：
function f2(a,b){
console.log(arguments);
console.log(arguments.length);
console.log(a,b);
}
带返回值的函数
function sum（a，b）{
return a + b；
}
sum(1,2);
var sum = function(a,b){
return a + b;
}
sum(1,2);
立即执行函数：
书写立即执行的函数，棋手先写两个括号（）（）防止书写混乱
（function（a,b）{
return a + b;
}）（1,2）;
ES6 还可以使用“=>”箭头定义函数。
var f = v => v;
等同于：
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分：
不需要参数：
var f = () => 5;
等同于：
var f = function(){return 5};
需要多个参数：
var sum = (num1, num2) => num1 + num2;
等同于：
var sum = function（num1, num2){
return num1+num2;
}
函数中的arguments参数
arguments也接收了所有传入的参数，下面例子中arguments接收了3个参数
function add(a,b,c){
consloe.log(b+c);
consloe.log(arguments.length);
consloe.log(arguments[0]);
}
add(1,2,3)
结果显示：
5
3
1
注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。
函数的全局变量和局部变量：
局部变量：
在JavaScript函数内部声明的变量是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部），只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的声明周期从他们被声明开始，
局部变量会在函数运行后被删除。
全局变量会在页面关闭后被删除。
作用域：
首先在函数内部查找变量，找不到则到外层函数查找，追捕找到最外层。与python作用域查找顺序相似。
例一、
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
例二、
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); //输出结果是？
例三、
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); //输出结果是？
词法分析：
JavaScript中在调用函数的那一瞬间，会先进行词法分析。
词法分析的过程：
当函数调用的前一瞬间，会先形成一个激活对象：Active Object（AO），并会分析以下3个方面：
1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子：
例一：
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
}
foo(); // 问：执行foo()之后的结果是？
结果是：
22
例二：
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo(); // 执行后的结果是？
结果是：
ƒ age(){
console.log("呵呵");
}
22
22
例二解析：
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
最终，AO上的属性只有一个age，并且值为一个函数声明
执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
内置对象和方法：
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object
自定义对象：
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
Date对象：
创建Date对象：
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
Json 对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象：
// 定义正则表达式两种方式
var reg1 = new RegExp("[1][a-zA-Z0-9]{5,11}");
var reg2 = /[2][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
/第一个注意事项，正则表达式中不能有空格/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /[3][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/第二个注意事项，全局匹配时有一个lastIndex属性/
// 校验时不传参数
var reg2 = /[4][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
补充：
交互数据的格式
python后端 前端js
json.dumps JSON.stringify
json.loads JSON.parse
python后端常用的内置函数
map 映射
zip 拉链
filter 过滤
reduce 多个进去一个出来
python中往列表中添加数据的方法
1.append 尾部追加
l = [1,2]
l.append([1,2,33,4])
l = [1,2,[1,2,33,4]]
2.insert 按照索引插入
3.extend 扩展列表
内部其实就是for循环+append
l = [1,2]
l.extend([1,2,3,4])
l = [1,2,1,2,3,4]
python中列表删除元素有几种方式
1.remove 移除
2.pop 弹出
3.del
