函数本身也是一种类型,他可以被变量接收,所有函数类型的变量,也可以直接被调用:
function f(a = "6666") { console.info("得到的实参为:"+a) return 666 } let k = f; k();我们也可以直接将匿名函数赋值给变量:
let f = function (str) { console.info("实参为:"+str) }既然函数是一种类型,那么函数也能作为一个参数进行传递:
function f(test) { test(); } f(function () { console.info("这是一个匿名函数") })对于所有的匿名函数,可以像Java的匿名接口实现一样编写lambda表达式:
function f(test) { test(); } f(() => { console.info("可以,不跟你多bb") }) function f(test) { test("这个是回调参数"); } f(param => { console.info("接受到回调参数:"+param) }) JavaScript数组和对象JS中的数组定义与Java不同,它更像是Python中的列表,数组中的每个元素并不需要时同样的类型:
let arr = [1, "lbwnb", false, undefined, NaN]我们可以直接使用下标来访问:
let arr = [1, "lbwnb", false, undefined, NaN] console.info(arr[1])我们一开始编写的排序算法,也是使用了数组。
数组还可以动态扩容,如果我们尝试访问超出数组长度的元素,并不会出现错误,而是得到undefined,同样的,我们也可以直接往超出数组长度的地方设置元素:
let arr = [1, "lbwnb", false, undefined, NaN] arr[5] = "???" console.info(arr)也可以使用push和pop来实现栈操作:
let arr = [1, "lbwnb", false, undefined, NaN] arr.push("bbb") console.info(arr.pop()) console.info(arr)数组还包括一些其他的方法,这里就不一一列出了:
let arr = [1, "lbwnb", false, undefined, NaN] arr.fill(1) console.info(arr.map(o => { return \'xxx\'+o }))我们接着来看对象,JS中也能定义对象,但是这里的对象有点颠覆我们的认知:
let obj = new Object() let obj = {}以上两种写法都能够创建一个对象,但是更推荐使用下面的一种。
JS中的对象也是非常随意的,我们可以动态为其添加属性:
let obj = {} obj.name = "伞兵一号" console.info(obj)同理,我们也可以给对象动态添加一个函数:
let obj = {} obj.f = function (){ console.info("我是对象内部的函数") } obj.f()我们可以在函数内使用this关键字来指定对象内的属性:
let name = "我是外部变量" let obj = {} obj.name = "我是内部变量" obj.f = function (){ console.info("name属性为:"+this.name) } obj.f()注意:如果使用lambda表达式,那么this并不会指向对象。
除了动态添加属性,我们也可以在一开始的时候指定对象内部的成员:
let obj = { name: "我是内部的变量", f: function (){ console.info("name属性为:"+this.name) } } obj.f()注意如果有多行属性,需要在属性定义后添加一个,进行分割!
JavaScript事件当我们点击一个页面中的按钮之后,我们希望之后能够进行登陆操作,或是执行一些JS代码来实现某些功能,那么这个时候,就需要用到事件。
事件相当于一个通知,我们可以提前设定好事件发生时需要执行的内容,当事件发生时,就会执行我们预先设定好的JS代码。
事件有很多种类型,其中常用的有:
onclick:点击事件
oninput:内容输入事件
onsubmit:内容提交事件
那么如何为事件添加一个动作呢?
<input type="password" oninput="console.info(\'正在输入文本\')">我们可以直接为一个元素添加对应事件的属性,比如oninput事件,我们可以直接在事件的值中编写js代码,但是注意,只能使用单引号,因为双引号用于囊括整个值。
我们也可以单独编写一个函数,当事件发生时直接调用我们的函数:
function f() { window.alert("你输入了一个字符") } <input type="password" oninput="oninput()">仅仅了解了事件,还不足以实现高度自定义,我们接着来看DOM。
Document对象当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),它将整个页面的所有元素全部映射为JS对象,这样我们就可以在JS中操纵页面中的元素。
比如我现在想要读取页面中某个输入框中的内容,那么我们就需要从DOM中获取此输入框元素的对象:
document.getElementById("pwd").value通过document对象就能够快速获取当前页面中对应的元素,并且我们也可以快速获取元素中的一些属性。