JS基础

Posted 2021-02-05 the-artist

JS分为三部分：

　　ECMAScript标准  js基本语法

　　DOM  文档对象模型　　　  DOM提供了方法操作DOM树上的节点

　　BOM  浏览器对象模型  　　通过BOM可以 获得屏幕分辨率 控制浏览器跳转 弹出框 

 

　　BOM中的顶级对象就是window,DOM中的顶级对象是document。document是window的一个子对象。

　　　　window.onload(){}

　　　　setInterval()　　clearInterval()

　　　　setTimeout()　 clearTimeout()

　　　　Location 对象  

　　　　　　包含的属性有  hash（地址栏#后的内容）、href（地址）、protocol（协议）、port（端口）、

　　　　　　　　　　　　  host（主机和端口号）、hostname（主机名字）、pathname（路径名字）、search（搜索的内容：获取的？后的内容）

　　　　　　location.assign()  //和location.href一样的操作

　　　　　　location.replace() //替换的地址，没有历史记录

 　　　  　　location.reload()  //页面重新加载

　　　　History 对象

　　　　　　historty.forward();　　//前进

　　　　　　history.back()　　　　//后退

　　　　　　history.go()　　　　   //正数就是前进，负数就是后退

 　　DOM对象：

　　　　普通的标签的属性:src/href/title/width/height/...

　　　　表单标签的属性:name/value/type/checked/disabled/selected/...

　　　　document.getElementById(‘div‘);　　　　　　//返回一个ID属性为‘div’的对象

　　　　document.getElementByTagName(‘div‘);　　 //返回由所有div标签的组成的数组

　　　　document.getElementByClassName(‘div‘);　  //返回所有含有类名为‘div’的元素数组

　　　　document.getElementByName(‘div‘);　  　　 //返回含有属性名为‘div’的元素数组

　　　　document.querySelector("a[targe]");返回第一个含有target属性的<a>元素

　　　　document.querySelectorAll(".example");返回是多个含有类名为example的元素的数组

 

js有五种基本数据类型：

　　number / string / boolean / undefined / null　　　　(可使用 typeof方法 来判断基础对象类型) 

 

引用型数据类型：

　　function / object

　　其中需要注意的是：

　　　　引用数据类型会开辟出堆内存，它们指向的是 内存地址。

　　　　字符串 之间用 ‘+‘  会拼接字符串，如果其他类型数据和字符串拼接，会被转换为字符串，这其中涉及到变量的隐式转换

 

类型转换：

　　数字类型转换：

　　　　parseInt() / parseFloat() / Number()

　　　　总结:想要转整数用parseInt()，想要转小数用parseFloat()，想要转数字:Number();要比上面的两种方式严格。

　　其他类型转换：

　　　　.toString() / String() / Boolean()

　　补充：

　　　　NaN 不是一个数字，或者不是数字与数字的计算就会得到 NaN  (isNaN()  判断一个值是不是 NaN)

　　　　!    表示非，  !false == true  的结果为true  

 

操作符：

　　算数运算符：+  -  * / %

　　算数运算表达式：由算数运算符连接起来的表达式

　　一元运算符：++ -- 

　　二元操作符： && || 

　　三元操作符： 条件？结果1 : 结果2

 　  复合运算符: +=  -=  *= /= %=

　　复合运算表达式:由复合运算符连接起来的表达式

 

流程控制：

　　if(){　　} else if(){　　}else{　　}    

　　switch(){  case  ：；default:  ;  } 

　　while(){　　} / do{　　}while() / for( ; ; ){　　}

　　其中：

　　　　break 用来取消后续循环，continue  用来取消本次循环。

　　　　switch中的条件判断 使用的是严格模式的全等于。

 

JS内置对象：

　　实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法

　　静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调用的)

　　Array 创建方式有两种： 可以直接通过字面量创建  /  通过构造函数进行创建　:　var a =[]   /   var a = new Array()

　　　　Array对象的静态方法：

　　　　　　Array.isArray(对象)　　//判断这个对象是不是数组

　　　　Array对象的实例方法：

　　　　　　.concat(数组，数组，..)组合一个新数组

　　　　　　.every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)

　　　　　　，如果这个数组中的每个元素的值都符合条件,最后才返回的是true

　　　　　　.filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组

　　　　　　.push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度

　　　　　　.pop();--->删除数组中最后一个元素,返回值就是删除的这个值

　　　　　　.shift();--->删除数组中第一个元素,返回值就是删除的这个值

　　　　　　.unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度

　　　　　　.forEach(函数)方法---遍历数组用---相当于for循环

　　　　　　.indexOf(元素值);返回的是索引,没有则是-1

　　　　　　.join("字符串");----返回的是一个字符串

　　　　　　.map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中

　　　　　　.reverse();----->反转数组

　　　　　　.sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码

　　　　　　.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值

　　　　　　.splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素

　　Math 对象 :

　　　　Math对象的静态方法：

　　　　　　Math.PI  ---π---     

　　　　　　Math.sqrt()  ---取平方根--- 

　　　　　　Math.pow(a,b)  ---a的b次方--- 

　　　　　　Math.E  ---自然常数---   

　　　　　　Math.abs ---绝对值--- 

　　　　　　Math.ceil  ---向下取整--- 

　　　　　　Math.floor  ---向上取整---      

　　　　　　Math.Max()  ---取最大值---     

　　　　　　Math.Min()  ---取最小值--- 

　　　　　　Math.random()  ---取0-1之间随机值(不包括1)---         

　　Date 对象

　　　　Date对象的静态方法：

　　　　　　Date.now()　　　　　　　　　　//获取当前时间

　　　　Date对象的实例方法：

　　　　　　.getFullYear()　　  　　　  //获取年份

　　　　　　.getMonth()　　　 　　　  //获取月份从0开始

　　　　　　.getDate()　　　　 　　　 //获取日

　　　　　　.getHours()　　　　　　   //获取小时

　　　　　　.getMinutes()　  　　　　 //获取分钟

　　　　　　.getSeconds()　　 　　　 //获取秒数

　　　　　　.getDay()　　　　   　　  //获取星期数

　　　　　　.toLocaleDateString()  　 //"2019/1/25"

　　　　　　.toLocaleTimeString()　　//"下午2:20:26"

　　　　　　.valueOf()　　　　　　　  //1548397226024

　　　　　　.toString()　　　　　　　 //"Fri Jan 25 2019 14:20:26 GMT+0800 (中国标准时间)"

　　String 对象

　　　　字符串可以看作是由很多字符组成的数组，字符串有不可变的特性，字符串的值之所以看起来是改变的,那是因为指向改变了,并不是真的值改变了。 

　　　　字符串的常用属性:
　　　　　　.length------>字符串的长度

　　　　　　.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串

　　　　　　.fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值

　　　　　　.concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串

　　　　　　.indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1

　　　　　　.lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1

　　　　　　.replace("原来的字符串","新的字符串");用来替换字符串的

　　　　　　.slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串

　　　　　　.split("要干掉的字符串",切割后留下的个数);切割字符串

　　　　　　.substr(开始的位置,个数);返回的是截取后的新的字符串

　　　　　　.substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串

　　　　　　.toLocaleLowerCase();转小写

　　　　　　.toLowerCase();转小写

　　　　　　.toLocaleUpperCase()转大写

　　　　　　.toUpperCase();转大写

　　　　　　.trim();干掉字符串两端的空格

 

作用域：

　　分为全局作用域和局部作用域，根据所在的作用域不同，变量又分为全局变量和局部变量。

　　　　其中还有块级作用域，被‘{ }‘包裹就可以看成一个块，其实的变量定义，使用var 定义可以被外部使用， 使用 const、let 不可以被外部使用。

　　　　局部变量在函数作用域销毁时，就会被释放，而全局变量一旦被创建，就不会被释放，除非页面关闭（但是隐式全局变量可以被销毁，没有使用var声明的全局变量）。

　　在所有作用域创建的时候，js引擎会有一个处理，预解释，它所做的事，就是提前把所有的变量声明了，所有的函数声明并定义了（所以你可以在定义函数之前来调用这个函数）。

　　　　预解释中的变量提升，只会提升到当前作用域的最前面，而不是其他作用域。

　　　　预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)。

 

JSON对象

　　一组无序属性的集合的键值对,属性的值可以是任意类型，这就是对象。JSON也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来的。

　　JSON对象拥有两个方法，parseInt() (将字符串转换为JSON对象)和 stringify() (将JSON对象转换为字符串)，这两个一般用于 数据存储或者与后台交互。

　　遍历对象：

　　for(var key in json ){

　　　　console.log(key +‘===========‘ + json[key]);

　　}