3 HTMLJS等前端知识系列之javascript的基础

preface

作为一名运维开发，必须懂得前端知识，比如javascript，dom等等，下面就聊聊javascript。

include

数据格式
条件判断，循环流程等。
函数
面向对象

what is javascript??

JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

javascript的存在形式

文件，src引用某个js文件
块，以代码块的形式存在

javascript 存放在哪？

应该存放在body标签的底部。

局部变量与全局变量

var 申明的是局部变量
var name='ljf'
没有加var，表示是全局变量。谨慎使用全局变量。
name='yq'

注释

当行注释可以使用//，如下所示

// alert('abc')

多行注释可以使用/* */来包裹需要注释的内容

/*
f1();
f2();
*/

Notice
以下操作都是在浏览器的console下操作的。

数据类型:1 数字，字符串，数组（字典）

特殊值

先说说几个特殊的值

null
undefined

以上bool值都是false

数字

var age=19
var age=Number(20)
var age=Number('20')

typeof 判断类型

var age=19
typeof age
"number"
age='19'
"19"
typeof age
"string"

parseInt 转换类型，从字符串到数字

age=parseInt(age)
19

parseFloat 转换类型，从字符串到浮点

age='19.9'
"19.9"
age=parseFloat(age)
19.9
age
19.9

字符串去除两边空格

var name = ' ljf '
undefined
name.trim()
"ljf"

指定左右边去除空格

name.trimLeft()
"ljf "
name.trimRight()
" ljf"

charAt 取值

从0开始的下标，传入参数为下标

name.charAt(2)
"j"
name.charAt(0)
" "

substring 切片

name.substring(0,2)
" l"
name.substring(2,5)
"jf "

indexOf 获取指定元素的下标

name.indexOf('j')
2

数组（字典）

等于python里面的列表

push 数组后端追加

a=[1,2,3,4]
[1, 2, 3, 4]
a.push(5)
5
a
[1, 2, 3, 4, 5]

unshift 最前面追加

a.unshift(1)
6
a
[1, 1, 2, 3, 4, 5]

splice 指定位置插入

第二个参数必须是0，非0会报错。遵循左闭右开的原则

a.splice(1,0,'ali')
[]
a
["the", "ali", 1, 1, 2, 3, 4, 5]
a.splice(4,0,'fuck')
[]
a
["the", "ali", 1, 1, "fuck", 2, 3, 4, 5]

pop 删除最后一个并且返回删除的值

a=["the", "ali", 1, 1, "fuck", 2, 3, 4]
c=a.pop()
c
4

slice 切片处理

传入下标，然后就能够对列表切片

a
["the", 2, 3, 1, 44]
a.slice(1,3)
[2, 3]

reverse 反转列表

并不返回新值，而是在原处修改。

a
["the", 2, 3, 1, 44]
a.slice(1,3)
[2, 3]
a.reverse()
[44, 1, 3, 2, "the"]

join 拼接功能

a
[44, 1, 3, 2, "the"]
a.join('-')
"44-1-3-2-the"

concat 合并数组

把数组b在a数组后面追加

var b=[11,22,33,44]
undefined
a.concat(b)
[44, 1, 3, 2, "the", 11, 22, 33, 44]

splice 删除指定下标的值

a
["the", 1, "fuck", 2, 3]
a.splice(1,2)
[1, "fuck"]
a

bool值

true和false都是小写的，如下所示：

var a=true;
undefined
a
true

json序列号与反序列化

采用json数据格式

dic = {'k1':'v2'}
Object {k1: "v2"}
m=JSON.stringify(dic)
"{"k1":"v2"}"
n=JSON.parse(m)
Object {k1: "v2"}

下面说说js的循环流程

Notice
以下操作都是在浏览器的console下操作的。

for循环

break跳出循环
continue 继续循环

循环数组

在数组里面的，默认是循环列表的下标

li=[11,22,33,44]
[11, 22, 33, 44]
for(var item in li){console.log(item);
}0123
undefinedfor(var item in li){console.log(li[item]);
}11223344

循环字典

默认是循环k

a={'k1':'v1','k2':'v2'}
Object {k1: "v1", k2: "v2"}
for(var i in a){console.log(i)}k1k2
undefined

仿c语言的for循环

这个只能适用于数组，不能适用于字典

for(var i=0;i<100;i++){console.log(i)}012

while循环

while(true){console.log(11)}

if条件判断

下面看看伪代码

if(条件){}else if(条件){}else if() {}

switch 条件判断

下面看看伪代码

switch(name){case 1:console.log('1111');break;case 2:console.log('222');break;default:console.log('dddd')
}

异常捕获

下面看看伪代码

try{}catch(e){      # e就是异常类型，}finally {     # 最后执行的。
}

下面看看js的函数定义以及调用

普通函数

    function fuc1(args) {console.log(args);return 'ljf'}xx = fuc1(123);alert(xx);

匿名函数

下面这样的函数比较少见

var f = function (args) {console.log(args);};f('this ni ming func')

自执行函数

自动执行的函数，一般用于js库。代码如下

    (function(arg){console.log('1212',arg);})('ljf')

面向对象的用法，我们一般用的少，这里的this等于python的self。

    function  Foo(name,age){this.Name = name;this.Age = age;this.Func = function(arg){return this.Name + arg;}}var obx = new Foo('ljf',22);console.log(obx.Name);console.log(obx.Age);var ret = obx.Func('hehe');console.log(ret)

转载于:https://www.cnblogs.com/liaojiafa/p/6180977.html