[toc]

Javascript快速入门（一）

变量的命名规则

• 变量名不能以数字或者某些特殊字符开头
• 变量名不能是关键字，eg：for，var，function，let····
• 变量名不要以下划线开头
• 推荐的命名形式叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符，eg：myAge
• 变量命名要见名知意

命名示例

// 正确的命名agemyAgeinitfinalOutputValueaudio1//错误和不规范的命名1a_12MYAGEvarDocumentskjfndskjfnbdskjfb

变量与常量

变量

在JS中声明变量需要使用关键字

• 老版本 ：

  var

  （全部都是全局变量）

• 新版本 ：let （可以声明局部变量）

ps：这里的let在ECM6中可用，可能在较低的版本中无法正常使用，pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6需要我们自定义设置

//变量示例var name = \'Hammer\'let name = \'Hammer\'

常量

在JS中声明常量也是需要关键字的

• 关键字：

  const

const pi = 3.14//常量一但声明，不可改变，变量可以改

数据类型

JS一共有六种数据类型

数值型：Number

var n = 100var pi = 3.14

• 还有一种NaN，表示不是一个数字（Not a Number）

常用方法：

//转换数据类型:字符转数字//方法一：parseInt(保留整数)   parseFloat(保留小数)parseInt()  //NaNparseInt(\'\') //NaN···parseInt("123")  // 返回123，此时的数据类型为numberparseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。parseFloat("123.456")  // 返回123.456//方法二：NumberNumber(\'123\') // 123Number(\'123ABC\')  //NaN

字符串：String

var str = "Hammer";var str1 = \'ze\';//es6新增的定义字符串，使用反引号可以写多行字符串var str2 = `我爱学JS`;//格式化输出(模板字符串的功能)var name = \'Hammer\'var age = 18`my name is ${name} my age is ${age} `

常用方法：

ps：字符串拼接推荐使用

+

布尔类型：Boolean

var is1 = true;var is2 = false;

未定义类型 ：Undefined

未定义的意思就是只声明不定义，没有值，规范的来说是**缺省**

var a;console.log(a);//undefined

空类型：Null

var timer = null;console.log(timer);

对象类型：Object

标签、数组、对象、Math···都是对象类型

数组

var a =[123,\'ABC\'];a[0]  // 123,类似python列表的索引取值typeof a   //\'object\'

常用方法：

//forEach()示例，函数做参数称之为回调函数arry.forEach(function(item,index){//代码体})ietm：数组的每一个值index：下标var n = [1,2,3,4]n.forEach(function(item,index){console.log(item,index)})

sort()需要注意的是，它也是需要写回调函数

//sort()直接对数组排序，可能得不到想要的结果var arr = [0,-55,-58,12,33,6,55,7]console.log(arr.sort())//[-55, -58, 0, 12, 33, 55, 6, 7]//这样的结果是和理想输出的结果有偏差的，应该这样写//a,b代表两个相邻的元素，如果返回值大于0，就交换ab的位置顺序，来达到排序的效果arry.sort(function(a,b){return a-b;})arr.sort(function(a,b){return a-b})console.log(arr)

Math对象

常用方法

**

输出数据类型的方法

• typeof [变量]

• 需要注意的是，空类型的数据类型属于

  object

• NaN的含义是Not a Number，但是它的数据类型是

  number

运算符

JavaScript 比较运算符在逻辑语句中使用，以判定变量或值是否相等，返回 true 或 false；逻辑运算符用于判定变量或值之间的逻辑

比较运算

我们假定 num = 5，下表中解释了比较运算符：

ps:

=

是赋值运算符

逻辑运算符

我们假定 num = 5，下标中解释了逻辑运算符：

算数运算

算数运算符比较简单有：

+

、

-

、

*

、

/

、

%

、

++

、

--

分别是：加、减、乘、除、取余、自增、自减

• 需要注意的是：a和a的区别++a表示的是先自增后赋值
• a++表示的是先赋值后自增

隐式类型转换

JS存在的特性，比如字符串和数字进行加运算时，会将数字转换成字符串，然后和另外一个字符串进行拼接；

var num1 = \'123\'var num2 = 12var num3 = num1 + num2console.log(num3)// 结果：\'12312\'

字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和 另一个数字进行运算或比较

var num1 = \'10\'var num2 = 1var num3 = num1-num2console.log(num3)//结果：9

各种值转换为布尔值

• 数字 0，空字符串""，null，undefined 转成布尔值的时候都是 false
• 非0数字，非空字符串转换成布尔值的时候都是true
• 任何数组（即使是空数组），任何对象（即使是空对象） 转成布尔值的时候都是 true

var a = 0if (a) {console.log(\'hello\')} else {console.log(\'world\')}//world

案例

var a = truevar b = 2var c = a*bconsole.log(c)//2/*这里的true会被转换成1代入运算*/

条件分支

• if分支
• switch分支

if分支

基本语法结构

//单分支if(条件){//代码体}//双分支if (条件1){//代码体}else if(条件2){//代码体}//多分支if(条件1){//代码体}else if(条件2){//代码体}else{//代码体}

switch 分支

基本语法结构

switch (expression) {case value1:// 当 expression 的结果与 value1 匹配时，执行此处语句break; case value2:// 当 expression 的结果与 value2 匹配时，执行此处语句break;...case valueN:// 当 expression 的结果与 valueN 匹配时，执行此处语句break;default:// 如果 expression 与上面的 value 值都不匹配，执行此处语句break;}

示例：

var expr = \'Hammer\'switch (expr) {case \'Hammer\':console.log(\'I am Hammer\');break;case \'Jason\':console.log(\'I am Jason\');break;case \'Hans\':console.log(\'I am Hans\')default:console.log(\'sorry,this is nothing!\')}

示例：

var a = 8if (a>7) {a=3}if (a>4) {a=5}console.log(a)   //3//解析:首先a=8，大于7，所以将3赋值给a，现在a=3，下面a>4为假，所以不执行，所以最后a为3

循环

for循环

for循环的使用方法

• for：多次遍历代码块
• for/in：遍历对象属性

格式

for (语句 1; 语句 2; 语句 3) {//要执行的代码块}

• 语句 1 在循环（代码块）开始之前执行
• 语句 2 定义运行循环（代码块）的条件
• 语句 3 会在循环（代码块）每次被执行后执行

示例

for (var i=0;i<10;i++) {console.log(i);}//0 1 2 3 7 8 9

var arr = [11, 22, 33, 44, 55]for (var i = 0; i < arr.length; i++) {console.log(arr[i])}// 11 22 33 44 55

var obj = {name:"tom", gender:"man", age:32}for (var key in obj) {// 打印键console.log(key)// 打印值console.log(obj[key])}//执行结果nametomgendermanage32

while循环

var i = 0;while (i < 10) {console.log(i);i++;}//0 1 2 3 7 8 9

三元运算符

在python中，三元运算符是这样的：

格式： \'成立输出内容\' if 条件判断  else  \'不成立输出\'res = \'上班\' if 1>2 else \'休息\'# 显然结果是休息

在js中三目运算符是这样的：

格式：条件判断 ? \'成立输出内容\':\'不成立输出内容\'res = 1>2 ? \'上班\':\'休息\'//和上面的结果是一样的

函数

在JS中是通过声明来定义函数的，关键字是

function

和python中的

def

类似

function关键字

结构

function name(参数1，参数2，···){//代码块return 返回值}//name是函数名//return 并不是必需的，没有 return 的话，函数会返回undefined

示例

function pri(){console.log(\'简单的示例，hello\')}pri() //简单的示例，hello

function add1(a, b) {return a + b;}var res = add1(1,2)console.log(res) // 3function add2(a, b) {a + b;}var res = add2(4, 5)console.log(res) // undefined

函数在调用的时候，会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时 给定的参数个数不够，那么函数体中没有绑定的参数将被赋值为 undefined

function foo(a, b) {console.log(b)}foo(4) // 预期输出：undefinedfoo(4,8) // 预期输出：8

表达式定义函数

var func = function name (参数1,参数2···){//代码块}

示例

var f = function foo(v){return v;}//调用，使用表达式名加括号调用f()//如果使用foo()调用的会报错

箭头定义函数

ES6中允许使用“箭头”（=>）定义函数var f = v => v;表达式  参数  返回值//等同于var f = function foo(v){return v;}

arguments属性

我们可以不指定参数的个数，使用arguments来获取实参的个数，代表当前的参数列表；

function add(){var sum = 0;for (var i=0;i<arguments.length;i++){ //遍历sum+=arguments[i]}return sum}var n = add(1,2,3,4,5,6)console.log(n) //21

匿名函数

• 回调函数

var add = function(a,b){return a+b;}console.log(add(1,2))

自执行函数

不需要调用自己执行

(function(a,b,c){console.log(a+b+c)})(1,2,3) //括号内传参

递归函数

函数最后调用自身

//如果随机数不大于十就一直打印function shown(){var n = rand(0,12)if (n>10){return //结束函数}else{console.log(n)shown()}}shown()function rand(min,max){return Math.round(Math.random()*(max-min)+min);}

//用setTimeout实现setIntervalfunction interval(){setTimeout(function(){alert(\'递归函数\')interval()},1000)}interval()//等同于setInterval(function(){alert(\'递归函数\')},1000)

对象结构

JS中常用的数据类型是数组（上面）和对象结构，对象结构类似python中的字典，也是以

key：value

展示

//定义var info = {name:\'Hammer\',age:18,gender:\'man\',city:\'石家庄\'}//访问,修改//方法一info.nameinfo.name = \'Ze\'//方法二info[\'age\']

//添加属性info.car = \'宝马\'//删除属性delete info.car

遍历，使用for/in

var obj = {name:"tom", gender:"man", age:32}for (var key in obj) {// 打印键console.log(key)// 打印值console.log(obj[key])}//执行结果nametomgendermanage32

在js中可以使用点的方法，输出对象的值，那么对于python字典是不可以的，下面写一个方法来实现

class MyDict(dict):def __getattr__(self, item):return self.get(item)def __setattr__(self, key, value):self[key] = valueres = MyDict(name=\'Hammer\',age=18)print(res.name)res.xxx = 123   # 添加key，valueprint(res.xxx)print(res)

序列化反序列化

前后端如何实现数据交互的呢，比如python的数据类型和js的有区别，那么前后端交互就需要一个翻译官”json“，来做这个任务

# python中import jsonjson.dumps()  # 序列化json.loads()  # 反序列化

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

内置对象

如果需要使用内置对象，需要关键字

new

# python中使用内置模块import timetime.time()  # 获取时间戳# js中使用内置对象new date()   # 获取时间戳

Date对象

var d = new Date()d// Sat Feb 12 2022 16:54:41 GMT+0800 (中国标准时间)d.toLocaleDateString()// \'2022/2/12\'d.toLocaleString()// \'2022/2/12 16:54:41\'d.getDay()// 6d.getHours()// 16

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表示全局匹配var reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/greg.test(\'hammer666\')truereg.test(\'hammer666\')falsereg.test(\'hammer666\')truereg.test(\'hammer666\')false//全局匹配会有一个lastIndex属性，匹配成功停在待匹配字符的最后，所以第二次匹配是false，第三次匹配就会重新匹配

reg/^[a-zA-Z][a-zA-Z0-9]{5,9}$/greg.test()//truereg.test()//falsereg.test()//truereg.test()//false//校验不穿参数，默认传的是undefinedvar un = /undefined/un.test()//true

match匹配

计时器

JS提供了两种计时器

• setTimeout (fn,time)：延迟time后，执行一次fn
• setInterval (fn,time)：每隔time后，执行一次fn
• time的时间是以毫秒为单位的

setTimeout示例，只执行一次计时任务

setInterval 任务

当然了有建立计时任务，就有清除计时任务的方法

• clearTimeout：清除计时任务
• clearInterval：清除计时任务

var timer = null;var count = 0;timer = setInterval(function(){count ++;if(count ==10 ){clearInterval(timer)}console.log(\'记得关闭计时任务哦~\')},2000)

案例

有很多小程序，会统计距离新年还有多少天，或者恋爱了多少天，其实实现起来很简单

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>新年倒计时</title><style>*{margin:0;padding: 0;}html,body{height: 100%;}.bg{height: 100%;background-color: #999999;background-image: url("https://imgapi.cn/bing.php");background-size: cover;background-position: center center;}.shadow{height: 100%;background-color: rgba(0,0,0,.5);overflow: hidden;}p{height: 40px;line-height: 40px;font-size: 36px;color: white;text-align: center;}</style></head><body><div class = \'bg\'><div class = \'shadow\'><p style="margin-top: 300px">恋爱了</p><p style="margin-top: 20px"><span id="day">0</span>&nbsp;&nbsp;天</p></div></div></body><script>//获取标签var spanDay = document.getElementById(\'day\')var timer = null;timer = setInterval(function (){var date1 = new Date("2018-09-02")var date2 = new Date("2022-02-12")var n = date2.getTime() - date1.getTime()n /=1000; //秒var day = n / (60*60*24)  //天数spanDay.innerHTML = parseInt(day)},1000)</script></html>