前端基础之JS

JavaScript引入方式

Script标签内写代码

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

"""
可以编写js代码的地方
	1.pycharm提供的js文件
	2.直接使用浏览器提供的编程环境
"""
ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
需要我们自定义设置 settings>>>l f>>>js

引入额外的JS文件

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

注释（注释是代码之母）

// 这是单行注释

/*
这是多行注释
*/

变量与常量

在JS中声明变量需要使用关键字
	老版本	var(全部都是全局变量)
    新版本 let(可以声明局部变量)
    # 推荐使用let(其实问题不大)

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明

'''
变量名是区分大小写的。

推荐使用驼峰式命名规则。

保留字不能用做变量名。
'''

在JS中声明常量也需要使用关键字
	const  # 声明一个真正意义上的常量
 
如何创建变量
	var name = 'Luz'
    let name = 'Luz'
    
如何创建常量()
	const pi = 3.14
    ES6新增const用来声明常量。一旦声明，其值就不能改变。

JavaScript数据类型

python基本数据类型
	int、float、str、list、dict、bool、tuple、set
js基本数据类型
	number、string、boolean、undefined、object()
 
查看数据类型
	python中使用type()
    js中使用typeof

数值(Number)

# JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

# 数值类型:包含了整型与浮点型: parseInt、parseFloat
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

# NaN:Not A Number
"""NaN属于数值类型 表示的意思是 不是一个数字"""

字符串(String)

# 定义字符类型的方式
	1.单引号
    2.双引号
    3.小波浪号
    	var s1 = `
            he
            ll
            ow
            `
            
# 在js中字符串的拼接推荐使用+号
	var a = "ABC"
	var b = "abc;
	var c = a + b; 
	console.log(c);  // 得到ABCabc
    
# 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
    # 格式化输出
	var name1 = 'Luz'
    var age = 23
	`my name is ${name1} my age is ${age} `

用法补充

常用方法：

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

boolean类型

在python中布尔值类型首字母大写	
	True False
在js中布尔值类型全部小写
	true false
    
""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

# 定义
null: 是所有没有赋值变量的默认值，自动赋值
undefined: 主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址
	
    null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。
    
# 共同点：都是原始类型，保存在栈中变量本地

不同点：

   （1）undefined——表示变量声明过但并未赋过值。

它是所有未赋值变量默认值。

例如：var a;    //a自动被赋值为undefined
   （2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用。

例如：var emps = ['ss','nn'];
              emps = null;     //释放指向数组的引用

对象类型

在 JS 中，除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是，原始类型存储的是值，对象类型存储的是地址（指针）。当你创建了一个对象类型的时候，计算机会在内存中帮我们开辟一个空间来存放值，但是我们需要找到这个空间，这个空间会拥有一个地址（指针）。

const a = []
对于常量a来说，假设内存地址（指针）为#001，那么在地址#001的位置存放了值[]，常量a存放了地址（指针）#001，再看以下代码

const a = []
const b = a
b.push(1)
当我们将变量赋值给另外一个变量时，复制的是原本变量的地址（指针），也就是说当前变量b存放的地址（指针）也是#001，当我们进行数据修改的时候，就会修改存放在地址（指针）#001上的值，也就导致了两个变量的值都发生了改变。

接下来我们来看函数参数是对象的情况

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: 'yck', age: 26}
console.log(p2) // -> {name: 'yyy', age: 30}

'''
首先，函数传参是传递对象指针的副本
到函数内部修改参数的属性这步，我相信大家都知道，当前p1的值也被修改了
所以最后person拥有了一个新的地址（指针），也就和p1没有任何关系了，导致了最终两个变量的值是不相同的。
'''

数组类型

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

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

常用方法：(对应python)

forEach()

语法：

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

参数：

map()

语法：

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

python写法:

运算符

1.比较运算符
	==   弱等于  # 会自动转换数据类型至相同状态
	===  强等于  # 不会自动转换数据类型
    
    1 == “1”  // true  弱等于
	1 === "1"  // false 强等于

//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
    

2.逻辑运算符
	python中
    	and or not
    js中
    	&& || !
  
3.算术运算符
+ - * / % ++ --
# 这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

流程控制

定义

'''if判断'''
python中	
	if 条件:
        条件成立之后执行的代码
    else:
        条件不成立执行的代码
js中
	if(条件){
        条件成立之后执行的代码
    }else{
        条件不成立执行的代码
    }
    
	if(条件1){
        条件1成立之后执行的代码
    }else if(条件2){
        条件2成立之后执行的代码
    }else{
        条件都不成立执行的代码
    }
    
'''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(起始值;循环条件;每次循环后执行的操作){
        for循环体代码
    }
    	for (var i=0;i<10;i++) {
  			console.log(i);
			}
    # 练习:如何使用for循环取出数组内的每个元素
		var l1 = [111,222,333,444,555,666]
         for(let i=0;i<l1.length;i++){
             console.log(l1[i])
         }
            
"""while循环"""
	while(循环条件){
        循环体代码
    }

三元运算符

在python中
	res = '吃饭' if 18 > 10 else '喝水'
在js中
	res = 18 > 10 ? '吃饭':'喝水'

函数

函数的定义

在python中
	def 函数名(参数1,参数2,...):
        '''函数注释'''
        函数体代码
        return 返回值

在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和匿名函数
"""

!!!!补充：
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;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的argument参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

输出:
 3 2 1

注意：

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

js中的对象

自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

# 相当于python中的字典类型
	方式1: var d = {'name':'Luz','age':23}
    方式2: var d = Object({'name':'Luz','age':23})

class MyDict(dict): # 继承父类
    def __getattr__(self, item): 
        return self.get(item)
    def __setattr__(self, key, value):
        self[key] = value

res = MyDict(name='Luz',age=23)
print(res.name)
print(res.age)
res.xxx = 123
print(res.xxx)
print(res)  

内置对象

# 如果需要使用内置对象 需要关键字 new
在python中
	import date
    date()
在js中
	new date()
    
    
##########################################################
序列化
	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对象

regexp对象
	方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
    方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
全局匹配
	正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
    # 全局匹配会有一个lastindex属性
    reg2
    /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
    reg2.test('Luz666')
    true
    reg2.test('Luz666')
    false
    reg2.lastIndex
    0
    reg2.test('Luz666')
    true
    reg2.lastIndex
    6
校验时不传参数默认传的是undefined

自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

var a = {"name": "Luz", "age": 23};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

var a = {"name": "Luz", "age": 23};
for (var i in a){
  console.log(i, a[i]);
}

事情并没有那么简单...

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Luz";  // person对象的name属性
person.age=23;  // person对象的age属性

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

Date对象

补充方法

1.toString() 方法
定义和用法：toString() 方法可把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toString()
返回值：dateObject 的字符串表示，使用本地时间表示。
输出：Tue Apr 28 2015 10:05:35 GMT+0800 (中国标准时间)

2.toUTCString() 方法
定义和用法：toUTCString() 方法可根据世界时 (UTC) 把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toUTCString()
返回值：dateObject 的字符串表示，用世界时表示。
输出：Tue, 28 Apr 2015 02:06:45 GMT

3.toLocaleString() 方法
定义和用法：toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
语法：dateObject.toLocaleString()
返回值：dateObject 的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：2015/4/28 上午10:07:15

4.toDateString() 方法
定义和用法：toDateString() 方法可把 Date 对象的日期部分转换为字符串，并返回结果。
语法：dateObject.toDateString()
返回值：dateObject 的日期部分的字符串表示，由实现决定，使用本地时间表示。
输出：Tue Apr 28 2015

5.toTimeString() 方法
定义和用法：toTimeString() 方法可把 Date 对象的时间部分转换为字符串，并返回结果。
语法：dateObject.toTimeString()
返回值：dateObject 的时间部分的字符串表示，由实现决定，使用本地时间表示。
输出：10:05:58 GMT+0800 (中国标准时间)

6.toLocaleTimeString() 方法
定义和用法：toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。
语法：dateObject.toLocaleTimeString()
返回值：dateObject 的时间部分的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：上午10:07:35

7.toLocaleDateString() 方法
定义和用法：toLocaleDateString() 方法可根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果。
语法：dateObject.toLocaleDateString()
返回值：dateObject 的日期部分的字符串表示，以本地时间区表示，并根据本地规则格式化。
输出：2015/4/28

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
 结果: 2022/2/11 21:15:12
        
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
 结果: 2004/3/20 11:12:00
        
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
 结果: 2020/4/3 11:12:00
                
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
 结果: 1970/1/1 08:00:05
       Thu, 01 Jan 1970 00:00:05 GMT
        
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
 结果: 2004/3/20 11:12:00

Json对象

var str1 = '{"name": "Luz", "age": 23}';
var obj1 = {"name": "Luz", "age": 23};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);