Javascript知识点汇总-初级篇
JavaScript的数据类型都有什么?
基本数据类型:String,Boolean,Number,Undefined, Null
引用数据类型:Object(Array,Date,RegExp,Function)
那么问题来了,如何判断某变量是否为数组数据类型?
- 方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效
- 方法二.obj instanceof Array 在某些IE版本中不正确
- 方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:
if(typeof Array.isArray==="undefined")
{
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
JS中Null与Undefined的区别
在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?
Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。
Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
var oValue;
alert(oValue == undefined); //output "true"
这段代码显示为true,代表oVlaue的值即为undefined,因为我们没有初始化它。
alert(null == document.getElementById('notExistElement'));
当页面上不存在id为"notExistElement"的DOM节点时,这段代码显示为"true",因为我们尝试获取一个不存在的对象。
alert(typeof undefined); //output "undefined"
alert(typeof null); //output "object"
第一行代码很容易理解,undefined的类型为Undefined;第二行代码却让人疑惑,为什么null的类型又是Object了呢?其实这是JavaScript最初实现的一个错误,后来被ECMAScript沿用下来。在今天我们可以解释为,null即是一个不存在的对象的占位符,但是在实际编码时还是要注意这一特性。
判断数据类型
1. 我们可以使用typeof运算符来判断数据类型
typeof undefined; //"undefined"
typeof null; "object"
typeof true; "boolean"
typeof 0; //"number"
typeof NaN; //"number"
typeof "string"; //"string"
typeof function(){}; //"function"
typeof []; //"object"
typeof new Date(); //"object"
有几个看起来比较蹊跷需要我们注意
- typeof是运算符,不是方法,也就是说和加减号一样用,不考虑优先级问题,没必要给操作数加括号,当然加了也没事儿,说实话可读性还挺高
- typeof返回值都是小写字符串
- null的类型不是null,而是"object"
- NaN这个不是数字的类型也是"number"
- function明明也是对象,但是typeof却给了"function"类型
- 其它对象都返回"object",很没有识别性
具体识别对象类型使用instanceof 操作符,这个记住一点儿就行,对于基本类型,instanceof 永远返回false
instanceof Number; //false
new Number(1) instanceof Number; //true
2、判断已知对象类型的方法: instanceof
alert(c instanceof Array) ---------------> true
alert(d instanceof Date)
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
3、根据对象的constructor判断: constructor
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
注意: constructor 在类继承时会出错
eg:
function A(){};
function B(){};
A.prototype = new B(); //A继承自B
var aObj = new A();
alert(aobj.constructor === B) -----------> true;
alert(aobj.constructor === A) -----------> false;
而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:
alert(aobj instanceof B) ----------------> true;
alert(aobj instanceof B) ----------------> true;
言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
aobj.constructor = A; //将自己的类赋值给对象的constructor属性
alert(aobj.constructor === A) -----------> true;
alert(aobj.constructor === B) -----------> false; //基类不会报true了;
4、通用但很繁琐的方法: prototype
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
大小写不能写错,比较麻烦,但胜在通用。
HTTP 状态消息 200 302 304 403 404 500 分别表示什么?
- 200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
- 302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下,这个响应才是可缓存的。
- 304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。
- 403:服务器已经理解请求,但是拒绝执行它。
- 404:请求失败,请求所希望得到的资源未被在服务器上发现。
- 500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。
例举至少 3 种强制类型转换和 2 种隐式类型转换?
1. 强制类型转换: 明确调用内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parseInt、parseFloat
2. 隐式类型转换: 在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有:+、–、==、!
4.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色(不使用第三方框架)
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
JavaScript 的事件流模型都有什么?
事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构,当页面中的某一个元素触发了某个一个事件,事件会从最顶层的 window 对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的话,则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)后,事件又会向上传播到 window 元素,途径的祖先节点都会触发对应的事件(如果绑定事件处理函数的话)
事件流包含三个阶段:
- 事件捕捉阶段
- 处于目标阶段
- 事件冒泡阶段
- 事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;
- 处于目标阶段:处在绑定事件的元素上;
- 事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;
BOM 对象有哪些,列举 window 对象?
建议回复:
- window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
- document 对象,文档对象;
- location 对象,浏览器当前URL信息;
- navigator 对象,浏览器本身信息;
- screen 对象,客户端屏幕信息;
- history 对象,浏览器访问历史信息;
请简述 AJAX 及基本步骤?
- 简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
AJAX 基本步骤:
- 初始化ajax对象
- 连接地址,准备数据
- 发送请求
- 接收数据(正在接收,尚未完成)
- 接收数据完成
7.什么是Ajax和JSON,它们的优缺点。
Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。
优点:
- 可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
- 避免用户不断刷新或者跳转页面,提高用户体验
缺点:
- 对搜索引擎不友好(
- 要实现ajax下的前后退功能成本较大
- 可能造成请求数的增加
- 跨域问题限制
JSON是一种轻量级的数据交换格式,ECMA的一个子集
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)
同步和异步的区别?
- 首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后,如何进行处理、或者说关注的是一种消息通信机制。
- 同步的情况下,是由处理消息者自己去等待消息是否被触发;
- 而异步的情况下是由触发机制来通知处理消息者;
举例: 比如在上课时,你问老师一个问题,这个问题可能需要花费一点时间去思考,这个时候老师可能:
- 思考,思考……,好了,有答案了;
- 这个问题需要一点时间,你先做点别的,等我想好了,去找你。
第一种就是同步,第二种就是异步。所以同步异步可以说是对被请求方来说的,被请求者使用什么方式来告知处理结果。
- 阻塞非阻塞,主要是对于请求者而言的。
- 阻塞:发出请求等待结果返回,然后再处理后续的事情;
- 非阻塞:发出请求不等待结果返回,可以接着做后续的事情;
举例,还是上一个例子:
- 老师在使用同步思考的时候,你可以静静的等待老师给出答案,也可以边做自己的事情边等待老师的回答,当然这时候你需要时刻去关注老师是否已经想好了,在程序中需要进行轮询了。乀(ˉεˉ乀)
- 老师使用异步的方式,这个时候老师告诉你可以先去做别的,好了就通知你,那么你可以去做点别的,然后监听事件就行,当然你也可以很轴,我就不做别的!我要一直等着老师“想好了”的事件发生。
- 所以同步可以是阻塞的也可以是非阻塞的,异步也是如此。
GET和POST的区别,何时使用POST?
GET和POST的区别:
GET:一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限制,所以对使用get方式所发送信息的数量有限制,同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息,包括地址后面的数据。get 只能发送普通格式(URL 编码格式)的数据。
POST:一般用于向服务器发送数据,对所发送的数据的大小理论上是没有限制,浏览器会缓存记录地址,但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串,形式多样。
在以下情况中,请使用 POST 请求:
- 以提交为目的的请求(类似语义化,get 表示请求,post 表示提交);
- 发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);
- 向服务器发送大量数据(数据大小限制区别);
- 上传文件图片时(数据类型区别);
十一、new 操作符具体干了什么呢?
当使用 new 操作符调用构造函数,函数实际会经历如下步骤:
- 创建一个新对象;
- 把函数中上下文(作用域)对象this指向该对象;
- 执行代码,通过this给新对象添加属性或方法;
- 返回对象;
十二、null 和 undefined 的区别?
null: null表示空值,转为数值时为0;
undefined:undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
- 变量被声明了,但没有赋值时,就等于undefined。
- 对象没有赋值的属性,该属性的值为undefined。
- 函数没有返回值时,默认返回undefined。
十三、JavaScript 原型,原型链 ? 有什么特点?
JavaScript 原型: 每创建一个函数,函数上都有一个属性为 prototype,它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候,那么这些实例都会共享原型上的属性和方法。
原型链: 在 JavaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接(proto)。这个原型对象又有自己的原型,直到某个对象的原型为 null 为止(也就是不再有原型指向)。这种一级一级的链结构就称为原型链(prototype chain)。 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止;到查找到达原型链的顶部(Object.prototype),仍然没有找到指定的属性,就会返回 undefined。
不同进制的转换
Number可以使用四种数字进制:十进制,二进制,八进制和十六进制。非十进制只使用与整数。
- 二进制表示法:以零为开头,后面接一个小写或大写的拉丁文字母B(0b或者是0B)
- 八进制表示法:以0为开头的。假如0后面的数字不在0到7的范围内,该数字将会被转换成十进制数字。
- 在ECMAScript 5 严格模式下禁止使用八进制语法,会被视为十进制
- 在ECMAScript 6中使用八进制数字是需要给一个数字添加前缀"0o"
- 十六进制表示法:以零为开头,后面接一个小写或大写的拉丁文字母X(0x或者是0X)
// 十进制
12345678
42
0777 // 在非严格格式下会被当做八进制处理 (用十进制表示就是511) // 二进制
var a = 0b100000; // 32
var b = 0b0111111; // 63
var c = 0B0000111; // 7 // 八进制
var n = 0755; // 493
var m = 0644; // 420
var a = 0o10; // ES6 :八进制 // 十六进制
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
0x123456789ABCDEF // 81985529216486900
0XA // 10
进制的转换主要用到Number的toString()方法或parseInt()方法:
- toString() 方法接受一个值为 2~36 之间的整数参数指定进制,默认为十进制,将Number转为String
- parseInt() 第二个参数接受一个值为 2~36 之间的整数参数指定进制,默认为十进制,将String转为Number
// toString转换,输入为Number,返回为String
var n = ;
n.toString(); // "120"
n.toString(); // "1111000"
n.toString(); // "170"
n.toString(); // "78"
n.toString(); // "60" 0x11.toString(); // "17"
0b111.toString(); // "7"
0x11.toString();// "15" // parseInt转换,输入为String,返回为Number
parseInt(''); //
parseInt('', ); //
parseInt('', ); //
parseInt('', ); //
parseInt('', ); // 702 // toString和parseInt结合使用可以在两两进制之间转换
// 将 a 从36进制转为12进制
var a = 'ra'; // 36进制表示的数
parseInt(a, ).toString(); // "960"
21.怎样添加、移除、移动、复制、创建和查找节点(原生JS,实在基础,没细写每一步)
1)创建新节点
- createDocumentFragment() //创建一个DOM片段
- createElement() //创建一个具体的元素
- createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
- appendChild() //添加
- removeChild() //移除
- replaceChild() //替换
- insertBefore() //插入
3)查找
- getElementsByTagName() //通过标签名称
- getElementsByName() //通过元素的Name属性的值
- getElementById() //通过元素Id,唯一性
Javascript中callee和caller的作用?
答案:
caller是返回一个对函数的引用,该函数调用了当前函数;
caller是函数对象的一个属性,该属性保存着调用当前函数的函数的引用(指向当前函数的直接父函数)
先来个例子吧
function a(){
b();
};
function b(){
alert(b.caller);
};
a(); //结果就是弹出函数a和内容
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。
可以看出来callee是arguments对象的一个属性,指向arguments对象的函数,这个函数就是chen(chen=arguments.callee),这样解释应该可以理解了吧。
那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==){
return ;
}else if(n==){
return ;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-)+arguments.callee(n-);
return result[n];
}
}
}
JavaScript继承有哪两种形式形式(擦,这么大一个问题)
声明:整理了一下网上关于javascript的初始面试题,非原创。
Javascript知识点汇总-初级篇的更多相关文章
- JavaScript -- 知识点汇总
js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: v ...
- HTML+Css+JavaScript知识点汇总
HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...
- Kotlin——初级篇(八):关于字符串(String)常用操作汇总
在前面讲解Kotlin数据类型的时候,提到了字符串类型,当然关于其定义在前面的章节中已经讲解过了.对Kotlin中的数据类型不清楚的同学.请参考Kotlin--初级篇(三):数据类型详解这篇文章. 在 ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- Java工程师学习指南 初级篇
Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
- BBS项目知识点汇总
目录 bbs项目知识点汇总 一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作 二 . html在线编辑器 三 . ...
- ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇(转)
ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇 阅读目录 ASP.NET Identity 前世今生 建立 ASP.NET Identity 使用ASP.NET ...
- (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- Redis从入门到精通:初级篇
原文链接:http://www.cnblogs.com/xrq730/p/8890896.html,转载请注明出处,谢谢 Redis从入门到精通:初级篇 平时陆陆续续看了不少Redis的文章了,工作中 ...
随机推荐
- 重点:怎样正确的使用QThread类(很多详细例子的对比,注意:QThread 中所有实现的函数是被创建它的线程来调用的,不是在线程中)good
背景描述: 以前,继承 QThread 重新实现 run() 函数是使用 QThread唯一推荐的使用方法.这是相当直观和易于使用的.但是在工作线程中使用槽机制和Qt事件循环时,一些用户使用错了.Qt ...
- shell 从文件中读取批量文件名并做命令行操作
222文件内容: /home/zhangsuosheng/Desktop/9-30/9_30/1bak/1538291162.png /home/zhangsuosheng/Desktop/9-30/ ...
- Design Patterns Example Code (in C++)
Overview Design patterns are ways to reuse design solutions that other software developers have crea ...
- SVM支持向量机总结
一.拉格朗日乘子法 一般,在有等式约束时使用拉格朗日乘子法,在有不等约束时使用KKT条件.这里我们先介绍拉格朗日乘子法,后面再介绍KKT条件. 比如考虑下面的组合优化的问题, 这是一个带等式约束的优化 ...
- HALCON串口通讯程序
串口通讯程序 * Note: This example is meant to demonstrate the use of the serial interface * of HALCON. ...
- Part01、sqlalchemy 使用
一.ORM 连表 一对多 1.创建表,主动指定外键约束. 2.操作. ...
- 利用google api生成二维码名片
利用google api生成二维码名片 二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码.堆叠式/行排式二维条码形态上是由多行短截的一维条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩 ...
- 10 Linux Commands Every Developer Should Know
转载:http://azer.bike/journal/10-linux-commands-every-developer-should-know/ As a software engineer, l ...
- Hadoop集群的各部分常用端口
hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- 制作RPM包
RPM包制作过程 1.1 前期工作 1)创建打包用的目录rpmbuild/{BUILD,SPECS,RPMS, SOURCES,SRPMS} 建议使用普通用户,在用户家目录中创建 2)确定好制作的对象 ...