js基础

js简介

1. js全称javascript，与java没有关系
2. JavaScript 是 ECMAScript 标准的实现
3. 现在常用为5.1与6.0居多
4. javaScript是一门编程语言(nodejs)
5. html页面两种引入js的方式
        * 1. 通过外部js文件
        * 2. 通过Html内部head里的script
6. 两种注释语法：      // 与/**/
7. 结束符号是;

js变量

我们可以在浏览器或者pycharm内写js代码

在js中声明变量和常量都需要使用关键字

关键字：
   var            全局有效
   let            在局部名称空间中使用只对局部有效
   const          定义常量

js是动态类型,变量名绑定的数据值类型不固定
```
var name ='jason'
name = 123
name = [11,22,33,44]
```
- 结果：

js数据类型

在js中查看数据类型使用 typeof

数值类型

python中的整型，浮点型，在js中统称为数值类型

NaN表示不是一个数字(NOT A Number)

parseint()
parseFloat()
  # 可以转变器数据类型

字符串类型

js中的字符串(string)

var name = 'jason'
var name = "jason"
var name = `jason`  模板字符串
字符串有三种方式('',"",``)

js中涉及字符串拼接的，建议使用+

js数据类型之布尔值

对比于python，js内的布尔值(boolean)是小写的
```
let a = true
let a = false
```

空字符串，0，null，undefined，NaN 的布尔值都是false

null与undefined有什么区别呢？
```
null表示现在是空的
uddefined表示一直没有过
```
- 一张图看懂其区别

js数据类型之对象

在js中一切皆对象:包含字符串、数值、数组、函数等。

js对象之数组(相当于python中的列表)

let l1 = [11, 22, 33, 44]

输出console.log(相当于python中的print)

console.log(l1[1])
   # 也是从0起始索引的

数组常用的一些方法

方法	效果说明	对比python
.length	数值的大小	len()
.pop	获取尾部的元素取出移除	pop()
.push(ele)	尾部追加元素	append()/insert()
.unshift(ele)	头部插入元素	insert(0,插入的数据值)
.shift()	头部移除元素	del 变量[0]
.slice(start, end)	切片	变量名[起始位置:结束位置]
.reverse()	反转	.reverse()
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序	.sort()
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组
.forEach()	将数组的每个元素传递给回调函数

forEach()用法

类似于for循环

语法:         
     forEach(function(currentValue, index, arr), thisValue)
与python对比
     for i in range() 
解释：      
     function()     匿名函数
     thisValue      (可选)传递给函数值 
     currentValue   (必须)当前元素(相当于for循环的i)
     index          (可选)元素的索引从哪开始
     arr            (可选)哪个数组的元素(数据)

splice()用法

语法：
     splice(index,howmany,item1,.....,itemX)
解释: 
     index    (必需)元素的索引从哪开始进行删除增加
     howmany  (必需)规定了索引的元素往后要删除多少数值
     item     (选填)里面填入要修改或添加的新数据

实操：

map()用法

语法：
     map(function(currentValue,index,arr), thisValue) 
currentValue   (必须)当前元素的值
index          (可选)当期元素的索引值
arr            (可选)当前元素属于的数组对象
thisValue      (可选)对象作为该执行回调时传递给函数，当作this的值

js数据类型之自定义对象

自定义对象(相当于python中的字典)

# 两种自定义对象的方式
let a = {'name': 'panan','password': '666'}
   # 也可以使用其他方式定义
let b = new Object()

自定义对象取值
```
   直接使用句点符        a.name  
```
- 在python中我们也可以用句点符，进行取值，不过需要用到魔法方法

js运算符

算数运算符

+  -  *  /  ++  --
 
例： 
let  x=1;
let  res1=x++;             
let  res2=++x;

# x++是先赋值再自增  res1的值是10
# ++x是先自增再赋值  res2的值是12

比较运算符

>   大于 
>=  大于等于
<   小于
<=  小于等于
!=  弱不等于
==  弱等于
=== 强等于
!== 强不等于

强等于弱等于的区别：
    js是一门弱类型语言，弱等于会自动转换数据类型，使其相等。强等于不会转换
    
    对比：

1 == "1"   // true  
1 === "1"  // false

逻辑运算符

&&	等价于python中的and
||      等价于python中的or
!	等价于python中的not

赋值运算符

= += -= *= /=

流程控制

分支结构

单if分支

if(条件){条件成立之后执行的代码}
对比python：
if 条件：条件成立之后执行的代码

if...else分支

if(条件){
    条件成立之后执行的代码
}
else{
    条件不成立之后执行的代码
}

if...else if...else分支

if(条件1){
    条件1成立之后执行的代码
}
else if(条件2){
    条件1不成立条件2成立执行的代码
}
else{
    条件不成立之后执行的代码
}

switch结构

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

 var day = new Date().getDay();
 switch (day) {
   case 0:
   console.log("Sunday");
   break;
   case 1:
   console.log("Monday");
   break;
 default:
   console.log("...")
 }

循环结构

for循环

  for (let i=0;i<10;i++) {
    console.log(i);
  }

for循环练习

打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']

for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}

while循环

  while(条件){
      循环体代码
  }

js函数

如何定义js内的一个普通函数

function 函数名(形参){
    函数体代码
    return 返回值
}
例：
function func(a, b){
    console.log(a, b)
}

js函数中的参数不需要完全对应

限制参数的个数使用关键字arguments

function func(a, b){
    if (arguments.length==3){
        console.log(a,b)
    }
    else{
        console.log('你没有传入参数')
  }
}

调用函数传入不同参数的结果

匿名函数
```
function(a,b){
    return v;
}
```

箭头函数

let f = function(v){
    return V;
}
使用箭头函数写法后:
let f = v => v;

let f = () => 5;
  // 等同于
let f = function(){return 5};

let sum = (num1, num2) => num1 + num2;
//等同于
var sum = function(num1,num2){
    return num1 + num2;         // 这的return只能返回一个值，要返回多个值，需要手动包一个数组或者对象中
}

js内置函数

js中的内置函数类似于python中的内置函数或者内置模块

固定语法

var 变量名 = new 内置对象名();

1. Date日期对象
1. JSON序列化对象
- 与python的对比
js python
JSON.stringify() json.dumps
JSON.parse() json.loads()

js	python
JSON.stringify()	json.dumps
JSON.parse()	json.loads()

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}$/;
# js中的正则有一些特殊需要注意

前端03 javascript基础