最近时间有余,小结一下当前我所学到的,所用到的,所理解的JavaScript,若有错误,请留言指正,万分感激!html
首先JavaScript就是咱们常说的js,能够大体分为两类,一类是遵循ECMA 262标准的js基础语法,另外一类则是遵照W3C标准的操做DOM和BOM的API。java
js是一种弱类型的,普遍应用于客户端的脚本语言,与java这种编译型语言不一样,js是解释型语言,这一点和python同样,在代码执行前不会预先编译成字节码文件,而是经过解释器(浏览器内置的js引擎)边解释边执行,可是在浏览器执行一段 script 以前,会将在函数做用域内的全部变量声明都提高到顶部,而且值为undefined(函数声明除外,整个函数体将都提高到顶部)。python
4种基本数据类型: number,string,undefined,boolean,以及复杂的object类型和function类型,以下:web
typeof(1) // number typeof('') // string typeof(undefined) //undefined typeof(true) // boolean typeof(null) // object typeof({}) // object typeof([]) // object typeof(console.log) //function
js中数据类型转换分为强制类型转换和隐式类型转换(弱类型语言)。api
1).强制转换:数组
利用js提供的 parseInt(),parseFloat(),Number(),String(),Boolean()函数进行数据类型转换。前二者分别是对整形和浮点型进行转换,对数据从前日后,将数字进行转换,若是第一位就不是数字,返回NaN(number 类型的一种)。浏览器
parseInt("123");//123 parseInt("+123");//123 parseInt("-123");//123 parseInt("12.3元")//12 parseInt("abc");//NaN parseInt([1,2])//1 parseInt([1,2,4])//1 parseInt(" ");//NaN
该方法还能够将其余进制类型数据转换成整形,取决去parseInt()的第二个参数,如:闭包
parseInt("AA",16);//170 parseInt("10",2);//2 parseInt("10",8);//8
Number()就是将数据转换成number类型,非number的返回NaN,Boolean()将空,0,undefined,'' ,"" 转换成false,其它则为true,String()将数据转换成字符串。app
Number("11.2元") // 11.2 Number("") // 0 Number("开发") //NaN Boolean(0) //false Boolean(undefined) //false Boolean('') //false String (false) // "false" String(Null) //" Null"
2).隐式类型转换:dom
JS中隐式类型转换指数据类型和字符串之间的转换,数字类型与字符串类型进行四则运算时,会进行隐式类型转换,“+”时,会默认将数字类型进行String(),变成字符串,“-”,“%”,“/”,“*”时,会对字符串进行Number()操做,变成数字类型,以下:
11 + "11" // "1111" 11 - "11" // 0 11 * "0" // 0 11 % "11" // 1 11 / "11" // 1
"==" 判断,若是类型相同,则进行 "===" 判断,若是不一样,则会进行一次类型准换,转换成相同类型再比较。
"==="判断,若是类型不一样,直接false。
通常状况下,js中都用"===",只有以下图作判断时,能够用"==":
var a if( a == null ) { // 这里a表示能够是null 或者是 undefined // a === null || a === undefined }
建立数组的三种方式:
let arr1 = [1,2,3] //方式一 let arr2 = new Array(1,2,3) // 方式二 let arr3 = new Array(3) // 方式三 arr3[0] = 1 arr3[1] = 2 arr3[2] = 3 console.log(arr1,arr2,arr3)
遍历数组,for,while,do...while,for in,forEach 等,除forEach外,其余方式能够经过 break,continue,return(必须在函数中使用,不然报没法捕获异常: Illegal return statement):
var arr = [1,3,7,6,4,5] for (let i = 0,len = arr.length; i < len; i++) { console.log(arr[i]) // 1 3 7 6 4 5 } for (let i = arr.length - 1; i >= 0; i--) { console.log(arr[i]) // 5 4 6 3 4 1 } for(let index in arr){ console.log(index,arr[index]) // 1 3 7 6 4 5 } arr.forEach(item =>{ console.log(item) // 1 3 7 6 4 5 })
数组中经常使用的方法:
arr = [1,5,7,4,6] // map :遍历数组,将数组中每一元素做为参数提供给函数调用,结果做为一个新的数组返回 let mapArr = arr.map(item => item*2) console.log(mapArr) // forEach: 遍历数组,将数组中的每个元素执行以提供的函数,没有返回值,直接改变原数组,注意和map的区别 arr.forEach(item => item*2) console.log(arr) // filter: 过滤数组中的元素,将符合条件的结果,造成一个新的数组并返回。 let filterArr = arr.filter(item => item > 5) console.log(filterArr) // sort: 排序 let sortArr = arr.sort((a,b) => a-b) console.log(sortArr) // find: 查找符合条件的第一个元素,并返回 let findEle = arr.find(item => item > 4) console.log(findEle) // some:判断数组元素至少有一个符合条件,返回true let someArr = arr.some(item => item > 6) console.log(someArr) // true //every: 判断数组中的元素是否所有符合条件 let everyArr = arr.every(item => item > 2) console.log(everyArr) //false // concat:合并数组 arr1 = [1] arr.concat(arr1) // [1,5,7,4,6,1] // push :数组末尾添加元素 // pop(): 删除数组最后一位元素 // shift:删除第一个元素 // unshift: 像数组首部添加一个或多个元素 // isArray():判断对象是不是数组 // toString: 转换成字符串 // join():转换成字符串(可设置元素之间的间隔) // splice(开始的位置,删除的个数,元素):数组切割 let arr = [1, 2, 3, 4, 5]; let arr1 = arr.splice(2, 0 'haha') let arr2 = arr.splice(2, 3) let arr1 = arr.splice(2, 1 'haha') console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素 console.log(arr2) //[1, 2] 删除三个元素 console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
对象的建立方式:
// 建立对象 var obj1 = {} function Fn(){ this.name = '小明' } var obj2 = new Fn(); var obj3= Object.create({}); console.log(obj1,obj2,obj3)
遍历对象有两种方式:for / in ,Object.keys()
for (let i in obj){ // 同时会把原型链上可枚举的属性遍历 console.log(i) console.log(obj[i]) } console.log(Object.keys(obj))// 输出对象属性名
咱们在建立一个对象的时候,js便给这个对象建立了一个原型对象,能够经过 对象名.__proto__ 方式访问该对象的原型对象,咱们称这个为对象的隐式原型对象。
js中全部的函数均可以做为构造函数,全部的函数都有一个 ‘prototype’属性,咱们称之为显式原型对象。
一个对象的隐式原型对象 与构建这个对象的函数的原型对象相等。
咱们在查找对象的属性时候,若是对象的原生属性不包含,会继续在该对象的原型链上去查找。
function Fn ( name ){ this.name = name } var o1 = new Fn('zhuangsan') o1.__proto__ === Fn.prototype //true
Fn.prototype.html = 'html'
console.log(o1.html) // 'html'
var o2 = new Object() o2.__proto__ === Object.prototype // true
Object.prototype.constructor === Object // true
经过原型链,咱们能够在对象原型链上封装一些方法来操做DOM
当前做用域没有声明的变量,作为自由变量,会向声明它的做用域查找;当行成闭包时,函数即便执行结束,也不会当即销毁。
闭包的两种使用场景: 1)函数做为返回值 2)函数做为参数被引用
// 1.案例 当两次输入同一值时返回false
function fn (){ let _list = [] return function (n) { if(_list.indexOf(n) < 0){ _list.push(n) return true; }else{ return false; } } }
var f = fn()
f(5) // true
f(5) // false
在上面代码中,_list声明在fn函数中,但在它的返回函数中调用了该变量,在执行 f 时,f 中未定义_list,会向定义它的父级做用域查找,而且由于造成闭包,执行结束后,函数栈不会被销毁。
1 // 获取DOM 节点 2 var id = document.getElementById('ID') 3 var classs = document.getElementsByClassName('className') 4 var tags = document.getElementsByTagName('TagName') 5 var selectors = document.querySelectorAll('p') // 获取页面全部 p 标签 6 // 建立 DOM 节点 7 var dom = document.createElement('NodeName') 8 doc.appendChild(dom) 9 doc.append(dom) 10 11 // 改变DOM属性 12 document.getElementBy('id').attr = ... 13 14 // js 事件 addEventListener(type,function,boolean) 15 // mouseover 鼠标移上 16 // mouseout 鼠标移出 17 // click 点击 18 // mousedown 鼠标点下 19 // mouseup 鼠标弹起
1 // Navigator 2 navigator.UserAgent // 浏览器信息 3 4 //loaction 5 loaction.href // http://www.baidu.com 6 loaction.host // 域名 : www.baidu.com 7 loaction.port // 端口 (http 默认 80,https默认 443) 8 loaction.search // ?后的内容 9 loaction.hash // #后的内容 10 loaction.pathname 11 12 // location 13 location.forward() // 前进 14 location.back()// 后退