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中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive 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("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][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 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test(‘egondsb‘);
reg2.test(‘egondsb‘);
reg2.lastIndex;
/第二个注意事项，全局匹配时有一个lastIndex属性/

// 校验时不传参数
var reg2 = /^[a-zA-Z][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

JavaScript 基础

原文：https://www.cnblogs.com/allenchen168/p/11870307.html