前端之js

标签：summer name 前端 js 运算符 var 代码

JavaScript简介

JavaScript和Java没有任何关系！！
1.js是基于对象和事件驱动的语言,应用于客户端.
2.三大特性:

    交互性:信息的动态交互

    安全性:js不能访问本地磁盘文件

    跨平台性:java是用虚拟机实现的,而js基于浏览器
3.组成

    ECMAScript:基本语法(ECMA--欧洲计算机协会)

    BOM:浏览器对象模型(浏览器中的关闭按钮,地址栏.......)

    DOM:文档对象模型

js变量与常量

在js中申明变量和常量都需要使用关键字
var：定义在全局名称空间
let：定义在局部名称空间
const：定义常量

js也是动态类型，变量名绑定的数据值不是固定的
'''
js代码编写的地方：pycharm 浏览器
'''

js数据类型

数值类型

# 在js中查看数据类型的方法是typeof
整型浮点型统称为数值类型number
parseInt（）
parseFloat（）

NAN ：not a number 不是一个数字

字符串类型

字符串类型：string
var name=''
模板字符串：`` 可以格式化输出
在js中涉及到字符串的拼接方法建议使用+

布尔值类型

关键字：Boolean
# 区别于python true和false都是小写
var a=false
var b=true

在js中'空字符串，0，null，undefined，NAN'都是false

null和undefined区别：
1.null是曾经有过现在没了，称为空（一般是指定值或者清空变量时）
2.undefined是一直未曾赋值的变量，变量默认值是undefined

对象（object）

在js中也是一切皆对象，也可自定义对象，对象只是带有特殊属性和方法的数据类型


数组对象的作用是：使用单独的变量名来存储一系列的值，类似于python中的列表
定义数组的方法：
      var list = ['name','jason','psaaword',123]
		console.log(list[2])  # psaaword

数组对象常用内置方法：
length  数组的长度 console.log(list.length)

------------


forEach() 将数组的每个元素传递给回调函数
语法结构：forEach(function(参数1，参数2))
var name_list=['summer','jason','tony','bubu']
传一个参数的情况：name_list.forEach(function(a){console.log(a)})；
返回结果是列表里的每一个值 summer jason tony bubu

传两个参数的情况：name_list.forEach(function(a,b){console.log(a,b)});
返回的结果是：summer 0  jason 1 tony  2 bubu 3
# 两个参数的话是将每个值都返回了对应的索引


------------
splice 删除元素，并将数组内添加新元素
var list=['summer','jason','tony','bubu']
list.splice(0,1,'jerry'); #第一个参数是起始位置，第二个是删除的索引位置
list.splice(0,0,'huhu');  
返回结果： ['huhu', 'jerry', 'jason', 'tony', 'bubu']
# 0起始0删除对列表没有影响 添加的值直接在0位置

自定义对象

自定义对象就相当于python中的字典
有两种定义方式：
 1.直接定义 let dic={'name':'summer','id':'999'}
 2.用关键字new let dict1=new Object（）
   添加键值对的方式
   dict1.name='summer'  #{name: 'summer'}
   直接用变量名点的方式去添加，如果有值的话就是修改值
 

JS常见运算符

算数运算符

javascript算术运算符有：加法运算符“+”，减法运算符“-”、乘法运算符“*”、除法运算符“/”、求余运算符“%”、递增运算符“++”、递减运算符“--”、幂运算符“**”

例题：
   var x = 10;
   var res1 = x++; 先赋值后自增
   var res2=++x;  先自增后赋值
   # res1=10，res2=12
   
递增运算符 ++ 为其操作数增加1，并返回一个数值。如果使用后置，如x++，将会在递增前返回数值。如果前置，如 ++x，将会在递增后返回数值。

比较运算符

> >= < <= != == === !==
# 需要注意的：
1 == '2' true 弱等于（js会把不同数据类型的比较自动转换成同种数据类型）
1 === '2'false 强等于 （不自动转换）

逻辑运算符

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

赋值运算符

= += -= *= /=

流程控制

if else

单if分支
语法结构：
  if（条件）{
     条件成立执行的代码
  }



if else分支
语法结构：
  if(条件){
     条件成立之后执行的代码
  }else{
      条件不成立执行的代码
  }

if elesif else

语法结构：
    if(条件1){
        条件1成立执行的代码
    }else if(条件2){
       条件1不成立，条件2成立执行的代码
    }else{
      条件1和条件2都不成立执行的代码
    }

switch

switch 语句用于基于不同条件执行不同动作。
语法结构：
   switch(表达式){
      case1 条件：
	           case1条件成立执行的代码
	           break；
	  case2 条件：
	            case2条件成立执行的代码
	           break；
	  case3 条件：
	           case3条件成立执行的代码
			   break；
       default：
	          以上条件不成立执行的默认代码
   }  
   
switch(new Date().getDate()){
    case 0:
           day = '星期天';
           break;  # 每一个条件结束！break必须写
    case 1:
           day = '星期一';
            break;
    case 2:
            day = '星期二';
            break;
    default:
            day = '哈哈哈';
}

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

循环结构

for

代码实操 循环打印1-100
for(let i=1;i<101;i++){
    console.log(i)
}

课堂小练习：
打印数组内所有的数据值
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(条件){
    条件成立执行的代码
  }
 
案例实操：
let text=0
while (i<10){
      text+=i
	  console.log(text)
	  i++
}
# while循环一定要加结束条件，如果不对条件中的变量进行自增，那么循环不会结束

函数

函数的定义

语法结构：
    function 函数名(参数){
	  函数代码
	  return 返回值
	}
	
# 在js中函数的实参不需要和形参一一对应，传几个会返回几个，如果需要强制对应的话，使用关键字：arguments

代码实操：
      function func(a,b){
         if(arguments.length==2){
                console.log(a,b)
       }else{
       console.log('缺少参数无法执行！！')
   }
 }

函数的分类

匿名函数：
 function(a,b){
    return a+b;
 }
如果想要调用的话需要给函数取变量名

代码实操：
  let func1= function(a,b){console.log('美好的事情即将发生')};
  func1()

箭头函数 （重要！！！）
var func2=function(a){return a}
改成箭头函数：
   var func2=a=>a;
 
var sum(sum1,sum2){return sum1+sum2}
var sum=(sum1,sum2)=>sum1+sum2

函数的名称空间与作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
代码实例：
     var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？ BeiJing

JS内置对象

类似于python中的内置模块和内置函数
固定语法： var 变量名=new 内置对象名()；

date对象

创建date对象
let dObj = new Date();
dObj  # Thu Aug 25 2022 22:26:28 GMT+0800 (中国标准时间)
dObj.toLocaleString();  当地时间
 # '2022/8/25 22:26:28'
dObj.getTime();  时间戳
# 1661437588791  返回累计毫秒数(从1970/1/1午夜)

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

json序列化对象（很重要！）

先回顾一下python序列化方法
import json
json.dumps() 将其他格式转换成json格式字符串
json.loads() 将json格式字符串反序列化成其他格式

js里的序列化两个方法：
1.JSON.stringify 将其他格式转换成json格式字符串
2.JSON.parse  将json格式字符串反序列化成其他格式

代码实操：
let  dd ={'name':'summer'};
let strJson = JSON.stringify(dd);
strJson  # '{"name":"summer"}'
JSON.parse(strJson) # {name: 'summer'}

regexp正则对象

js中定义正则的两种方式：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  推荐使用

正则校验：
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('summer99999');  # false
reg2.test('summer');  # true

js中正则表达式的一些特性(bug)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.test('summer');
1.当我们在表达式最后面加了g，每次匹配完数据的时候，会停留在匹配的数据那里，下一次匹配的时候会基于第一次匹配的位置直接匹配，第三次会直接回到开头继续匹配

2.reg2.test();  # true
当括号里什么都不写的时候，括号内的值直接会默认为undefined，虽然正则对括号是不匹配的，但是undefined正好满足正则表达式的条件所以结果是true

BOM和DOM

简介

BOM操作

DOM操作

节点操作

标签：summer,name,前端,js,运算符,var,代码
From： https://www.cnblogs.com/Hsummer/p/16622449.html