JavaScript基础(python全栈必看)

JavaScript基础

ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ECMAScript的历史

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6(ES6)	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）增加Array.prototype.includes

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

• 核心（ECMAScript）
• 文档对象模型（DOM） Document object model (整合js，css，html)
• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript引入方式

1. Script 标签内写代码

<script>
  // 在这里写JS代码
</script>

2. 引入外部JS文件

<script src="myscript.js"></script>

JavaScript语言规范

注释（注释是代码之母）

// 这是单行注释

/*
这是多行注释
*/

结束符

• JavaScript中的语句要以分号（;）为结束符。

JavaScript语言基础

变量与常量

1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2. 声明变量使用 var 变量名; 的格式来进行声明 从ES6开始支持let 变量名;格式
3. 声明常量使用 const 变量名; 的格式进行声明

var name = 'tony';
var age = 18;
let name1 = 'tom';
const pi = 3.14;

注意:

• 变量名是区分大小写的。
• 推荐使用驼峰式命名规则。
• 保留字不能用做变量名。

基本数据类型

• js特性: 拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "tom"  // 此时x是字符串 

数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.3;
var b = 20;
var c = 123e5;   // 12300000
var d = 123e-5   // 0.00123

特殊数值类型: NaN （Not a Number) 表示不是一个数字

parseInt("123.123")  // 123
parseInt("ABC")  // NaN  表示这个值不是数值类型
parseFloat("123.456")  // 123.456

字符串(String)

定义字符串的三种方式:

1. 单引号 ‘ ’
2. 双引号 “ ”
3. 飘号 `` （多行字符串用飘号（1左边的那个键英文状态下））

var s1 = 'tony';
var s2 = "tom";
var s3 = `jason
		 kevin
		`

注: 在js中字符串的拼接推荐使用+号

常用方法:

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

补充:

飘号(``)定义的字符串也叫模板字符串，可以被当成是普通字符串和多行字符串，也可以在字符串中嵌入变量。

var name = 'tom',age = 18;
res = `My name is ${name}, my age is ${age}`
console.log(res) // 'My name is tom, my age is 18'

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
	`hello\`tom\``

布尔值(Boolean)

区别于Python，true和false都是小写。

var a = true;
var b = false;

null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
var name; // 此时name的值就为undefined

对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法:

方法	说明
.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)

var arr1 = [11, 22, 33, 44];
arr1.forEach(function(value, index, arr){
    console.log(value,index,arr)
})
// common.7a42f110.js:1 11 0 (4) [11, 22, 33, 44]
// common.7a42f110.js:1 22 1 (4) [11, 22, 33, 44]
// common.7a42f110.js:1 33 2 (4) [11, 22, 33, 44]
// common.7a42f110.js:1 44 3 (4) [11, 22, 33, 44]

splice()

语法：

splice(index,howmany,item1,…,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

map()

语法：

map(function(currentValue,index,arr), thisValue)

补充:

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符（就像++，–，！，- 等一元运算符），不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一种引用类型或 Null 类型的

运算符

1. 算数运算符
    + - * / % ++ --
    var x=10;
    var res1=x++;
    var res2=++x;
    res1;   // 10
    res2;  // 12
    // 这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

2. 比较运算符
	> >= < <= != == === !==

    1 == “1”  // true  弱等于 ==
    1 === "1"  // false 强等于 ==
    //上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
    //数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

3.  逻辑运算符
	&&   ||   !  等同于(and or not)

4.  赋值运算符
	= += -= *= /=

流程控制

if-else 格式:
	if (条件){条件成立运行代码块
        }else{条件不成立运行代码块
             }

if-else if-else 格式:
	if (条件1){条件1成立运行代码块
        }else if(条件2){条件2成立运行代码块
             }else{都不成立运行代码块}
 	// 可以多重else if

switch 格式:
    switch（值）{
    case 值1：
        匹配值1
         break
    case 值2:
    	匹配值2
        break
    ...        
    }
// 注意每一个case下面都需要添加一个break用来结束代码，如果不加就一直走下去，一直等到下一个break后跳出，如果一直没有break，就要等到switch结束后退出。

if 判断语句 和 switch 优缺点比较

switch case的优点：当分支较多时，用switch的效率是很高的。因为switch是确定了选择值之后直接跳转到那个特定的分支.

switch case的缺点：switch…case占用较多的代码空间，因为它要生成跳表，特别是当case常量分布范围很大但实际有效值又比较少的情况，switch…case的空间利用率将变得很低。

if else的优点：if else能应用于更多的场所以if else比较灵活。

if else的缺点：if else必须遍历所以得可能值，分支较多时效率较低。

for 循环格式
    for(起始值;循环条件;每次循环后执行的操作){
        for循环体代码
    }
ps:
    for (var i=0;i<10;i++) {
        console.log(i);
    }

while 循环格式
	while(循环条件){
        循环体代码
    }
ps:
	var i = 0;
	while (i < 10){
        console.log(i);
        i++
    }

三元运算符

Python中:
	res = '吃饭' if 2 > 1 else '喝水'
js中:
	res = 2>1 ? '吃饭': '喝水'

函数

• JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

js中函数定义格式
	function 函数名(参数1,参数2,...){
		// 函数注释
		函数体代码
		return 返回值
	}
	// 普通函数定义
    function f1() {
      console.log("Hello world!");
    }

    // 带参数的函数
    function f2(a, b) {
      console.log(arguments);  // 内置的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);

`arguments参数 可以获取传入的所有数据
	也支持return和匿名函数`
ps:
	function f1(){
    console.log(arguments)
	}

	f1() // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
	f1(1) // Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
	f1(1,2) // Arguments(2) [1, 2, callee: ƒ,Symbol(Symbol.iterator): ƒ]

ES6中允许使用“箭头”（=>）定义函数。称为箭头函数 和 python中匿名函数类似
    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;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
    }

函数的全局变量和局部变量

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

几个例子：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  // ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // BeiJing

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  // ShangHai

内置对象和方法

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

注意：var s1 = "abc"和var s2 = new String(“abc”)的区别：typeof s1 --> string而 typeof s2 --> Object

自定义对象

# 相当于python中的字典类型
	方式1: var d = {'name':'Alex','age':18}
    方式2: var d = Object({'name':'jason','age':18})	
遍历对象中的内容:
    var a = {"name": "Alex", "age": 18};
	for (var i in a){
 	 	console.log(i, a[i]);
	}
js种取值方式
	d.name  // Alex
	d['name']  // Alex

补充:
	js中创建对象采用 new 关键字
	// 构造一个函数
	function Person(){}
	// 实例化对象
	var a = new Person() 
    
    // 使用匿名函数形式创建构造函数
    var c = new function(){}
    
注意: 1. function创建构造函数和普通函数没什么两样，但如果不使用new操作符，使用的就是普通函数。而使用new 操作符调用构造函数，就会创建对象。
	 2. 使用匿名函数形式创建构造函数，注意：这里的是new function(){}  ，而使用new Function(){} 是使用Function对象，两者不相同。

额外扩展:

# 通过反射方法使python也能通过d.name 方式存取值
    class MyDict(dict):
        def __getattr__(self, item):
            return self.get(item)
        def __setattr__(self, key, value):
            self[key] = value
            
    res = MyDict(name='Alex',age=18)
    print(res.name)  # Alex
    print(res.age)   # 18
    res.xxx = 123
    print(res.xxx)	# 123
    print(res)  {'name':'Alex','age':18,'xxx',123}

内置对象

# 如果需要使用内置对象 需要关键字 new
在python中
	import date
    date()
在js中
	new date()


序列化对象JSON
	python中
    	import json
        json.dumps()  # 序列化
        json.loads()  # 反序列化
    js中
    	JSON.stringify()  # 序列化
        JSON.parse()  # 反序列化
 
如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
	1.在js中使用JSON.stringify()序列化成json格式字符串
	2.基于网络发送给python程序(自动编码)
	3.python接收 解码并反序列化

regexp对象(类似re模块)
	方式1: var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5-9}");
	方式2: var reg1 = /^[a-zA-Z][a-zA-Z0-9]{5-9}/;
全局匹配
	正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
    注:  全局匹配会有一个lastindex属性需要注意
    var reg1 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
    
    reg1.test('tomis666')  // true
    reg1.test('tomis666')  // false
    reg1.test('tomis666')  // true

	// 不写参数会默认传入undefined
    reg1.test()  // true

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());  //毫秒并不直接显示

方法:

var d = new Date(); 
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)