资讯专栏INFORMATION COLUMN

JS基础(选择器,变量类型,内置对象,作用域,JSON)

DangoSky / 740人阅读

摘要:是的一个子对象。局部变量在函数作用域销毁时,就会被释放,而全局变量一旦被创建,就不会被释放,除非页面关闭但是隐式全局变量可以被销毁,没有使用声明的全局变量。预解释中的变量提升,只会提升到当前作用域的最前面,而不是其他作用域。

JS DOM和BOM:

  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 对象
history.forward()  //前进
history.back()    //后退
history.go()     //正数就是前进,负数就是后退

DOM对象:
document.getElementById("div");     //返回一个ID属性为‘div’的对象
document.getElementsByTagName("div");   //返回由所有div标签的组成的数组
document.getElementsByClassName("div");  //返回所有含有类名为‘div’的元素数组
document.getElementsByName("div");     //返回查询元素的 name属性为‘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(函数);   //数组中复合条件的元素,组成新数组
.map(函数);    //每个元素都执行这个函数,把执行后的结果重新放在一个新的数组中
.forEach(函数)   //遍历数组用
.push(值);     //把值追加到最后了,返回值是追加数据后的数组长度
.pop();       //删除最后一个元素,返回值就是删除的这个值
.shift();     //删除第一个元素,返回值就是删除的这个值
.unshift();    //向第一个元素前插入新元素,返回值是插入后的长度
.indexOf(元素值); //返回的是索引,没有则是-1
.join("字符串"); //返回的是一个字符串
.reverse();    //反转数组
.sort();      //排序
.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(索引)             //返回值是指定索引位置的字符串,超出索引,结果是空字符串
.concat(字符串1,字符串2,...);     //返回的是拼接之后的新的字符串
.indexOf(要找的字符串,开始的索引值);  //返回的是这个字符串的索引值,没找到则返回-1
.lastIndexOf(要找的字符串);      //从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
.replace("原来的字符串","新的字符串");//用来替换字符串的
.slice(5,10);  //从索引5的位置开始提取,到索引为10的前一个结束,没有10,并返回这个提取后的字符串
.split("字符串",切割后留下的个数);   //切割字符串
.substr(开始的位置,个数);       //返回的是截取后的新的字符串
.substring(开始的索引,结束的索引)   //返回截取后的字符串,不包含结束的索引的字符串
.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]);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108975.html

相关文章

  • 前端入门23-CSS预处理(Less&Sass)

    摘要:声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候,预处理器就出现了,其实应该是说和这类语言出现了。声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网 感谢大佬们的分享。 正文-CSS预处理(less&Sass) CSS预处理 什么是 CSS 预处理?为什么要有 CSS 预处理? 这...

    freecode 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • 【前端面试】变量类型计算

    摘要:题目使用能得到哪些类型和的选择中有哪些内置函数变量按存储方式分为哪些类型,并描述其特点如何理解知识点值类型和引用类型值类型引用类型对象,数组,函数值类型直接把值存储在堆中,把赋值给在内存中是又给开辟了一块新的空间,存储了同样的值。 1.题目 1.JS使用typeof能得到哪些类型 === 和 == 的选择 JS中有哪些内置函数 JS变量按存储方式分为哪些类型,并描述其特点 如何理解J...

    DoINsiSt 评论0 收藏0
  • 前端_JavaScript_面向对象编程

    摘要:面向对象编程对象的原生方法分成两类自身的方法静态方法和的实例方法。的静态方法方法与,参数是对象,返回一个数组,数组的值是改对象自身的所有属性名区别在于返回可枚举的属性,返回不可枚举的属性值。 面向对象编程 Objects对象的原生方法分成两类:Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象,所有的其他对象都是继承自Objec...

    Blackjun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<