2018-11-21更新
目录
文章目录
- 目录
- @[toc]
- 别人的
- 1.Js基础
- this几种不同的使用场景
- 类型
- === 和 ==
- 内置函数(数据封装类对象)
- JS变量按照存储方式区分为哪些类型,并描述其特点
- 强类型转换(===不进行强制类型转换)
- setTimeout()和setInterval()
- js全局属性/全局函数
- 随机数
- 关于IFrame表述正确的有
- DIV和Span
- 块元素、行内元素
- 将块元素变为行内元素
- 将行内元素变为块元素
- splice
- 关于==的题
- Math.max.apply
- 2.概念理解
- DOM、BOM
- 变量提升
- 闭包(函数内部和函数外部连接的桥梁)
- 作用域
- 同步和异步的理解
- 同步任务
- 异步任务
- ajax
- json
- 微信小程序,React循环里的key
- 面向对象(对象是对现实世界事务的理解和抽象)
- 跨域
- 事件冒泡
- 快捷链接
别人的
1.Js基础
this几种不同的使用场景
- 作为构造函数执行(指代new出来的对象)
- 作为对象属性执行(指代对象方法)
- 作为普通函数执行(指代当前函数)
- call、apply、bind(参数为空时,默认调用全局对象window。有参数则按照以上)
类型
- js的基本类型有
undefined、null、string、array、number、boolean、object、function - js中使用typeof能得到哪些类型
(undefined、string、number、boolean)全部数值类型、(object、function)部分引用类型
解释null由于属于空对象多以为object!
如何判断array和null
- array用instanceof判断!(arr instanceof Array)
- typeof(null) 返回的是 : object,所以要typeof(x) == ’ object ’ && x == null结合判断
=== 和 ==
- == 运算符只比较值,不进行类型的比较,比较之前会进行隐式转化,null==undefined 返回true.
- === 区分两者,不仅仅比较内容,还比较数据类型 null===undefined false
-何时使用=何时使用?
当需要判断一个值是空时,使用双等anull或者aundefind,这相当于a=null || a=undefind。其他都用===。这是JQ的推荐写法!
内置函数(数据封装类对象)
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
JS变量按照存储方式区分为哪些类型,并描述其特点
值类型
var a=10
var b=a
a=11
console.log(b) //10
特点:ab数值分块存储,所以b还是10而非=a=11
引用类型
var obj1={x:1}
var obj2=obj1
obj1.x=2
console.log(b) //2
特点:obj1、2则是引用,所以obj2=obj1={x:2}
强类型转换(===不进行强制类型转换)
100+‘10’ //‘10010’
100 == ‘100’ //true
‘’ == 0 //true
100 === ‘100’ //false
‘’ === 0 //false
null == undefined //true
null === undefined //false
if(100){console.log(110)} //110
if(’’){console.log(110)} //undefined
10 && 0 //0 (与if的转换一致。将10或空字符串进行了0,1转换)
‘’ || ‘abc’ “abc”
if(0){}、if(NaN){}、if(’’){}、if(null){、if(undefined){}、if(false){}括号中的值都转换为0的情况!!
setTimeout()和setInterval()
setTimeout(设定结束时间)在规定时间后执行完某个操作就停止了
setInterval(设定时间间隔)则可以一直循环执行下去
随机数
Math.random()取0-1随机数
同理拓展例子:
Math.random()*10取0-10随机数(包括一大堆小数点)
Math.random()*9+1取1-10随机数
Math.random()*8+2取2-10随机数
Math.random()*899+100取100-999随机数
Math.random()*(m-n)+n取n-m随机数
其中常用:Math.floor()只取随机数整数部分
关于IFrame表述正确的有
A、可以通过脚本调整IFrame的大小
B、在相同域名下,外层网页脚本可以获取IFrame网页内的对象
C、在相同域名下,内嵌的IFrame可以获取外层网页的对象
D、通过IFrame,网页可以嵌入其他网页内容,并可以动态更改
答案:ABCD
DIV和Span
div占用的位置是一行;块标签
span占用的是内容有多宽就占用多宽的空间距离;行内标签
块元素、行内元素
块元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
行内元素
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)
将块元素变为行内元素
display:inline-block
将行内元素变为块元素
display:block
float
position(absolute和fixed)
splice
var a = [1,2,3];
a.splice(1,1,2,3,4);
console.log(a);
输出结果是[ 1, 2, 3, 4 ,3]
splice(index,delLength,addElements);
删除index1处的delLength个元素,在index1处插入addElements2,3,4
关于==的题
下面程序得到的结果分别是什么?(D)
console.log(([])?true:false);
console.log(([]==false?true:false));
console.log(({}==false)?true:false)
A.false true true B.true true true C.true false true D.true true false
解析:
Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0
因此:
console.log(([])?true:fasle);// => console.log((true)?true:false); //true
console.log([]false?true:false); // => console.log(00?true:false); //true
console.log(({}false)?true:false); // => console.log((NaN0)?true:false); //false
理解在“==”运算符作用下值的“过滤”
如果一个值是null,另一个值是undefined,则它们相等
如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后的值进行比较。
如果其中一个值是true,则将其转换为1再进行比较。如果其中的一个值是false,则将其转换为0再进行比较。
如果一个值是对象,另一个值是数字或字符串,则将对象转换为原始值,再进行比较。
所以在js更加严格的判一帮更推荐用 ===
Math.max.apply
var a = [1,4,5,2,9];
下面求a中最大值正确的是D
A、Math.max(a)
B、Array.max(a)
C、Math.max.call(null,a)
D、Math.max.apply(null,a)
E、以上均不是
Math.max.apply(null,a)=Math.max.apply(null, [a, b, c, d, …])=Math.max(a, b, c, d, …)
这里,我们有方法把数组,一个一个拆分开来,传递到Math.max()方法中,就实现了传递数组的方法。apply(Function, Args)调用盖函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数
2.概念理解
DOM、BOM
DOM文档对象模型(Bom的子集),BOM浏览器对象模型。
变量提升
var 、函数所有声明提升到提到执行环境顶端(初始化不会提升,函数为最顶端)
闭包(函数内部和函数外部连接的桥梁)
在函数内部声明变量的时候,一定要使用var命令,如果不用的话,实际上声明的是一个全局变量!!!!!
闭包就是有权访问另一个函数作用域的变量的函数。只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
优点:
一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在外函数调用后被自动清除而内函数可以用。
缺点:内存消耗大,过多影响性能(且注意,内函数取变量最后的值的问题!)
//闭包实际应用中主要用于封装变量,收敛权限
//Exp1
function F1(){
var a =100;
return function(){
console.log(a);
}
}
var f1 = F1();
function F2(fn){
var a = 200;
fn()
}
F2(f1);
//Exp2
function ifFirstLoad(){
var _list =[];
return function(id){
if(_list.indexOf(id)>=0){
return false;
}else{
_list.push(id);
return true;
}
}
}
var firstLoad = isFirstLoad();
firstLoad(10); //true
---------------------
原文:
作用域
同步和异步的理解
首先,js是单线程的。
同步和异步的差别就在于同一条流水线上各个流程的执行顺序不同。
最基础的异步是setTimeout和setInterval函数
console.log( "1" );
setTimeout(function() {
console.log( "2" )
}, 0 );
setTimeout(function() {
console.log( "3" )
}, 0 );
setTimeout(function() {
console.log( "4" )
}, 0 );
console.log( "5" );
---------------------
1
5
2
3
4
尽管setTimeout的time延迟时间为0,其中的function也会被放入一个队列中,等待下一个机会执行,当前的代码(指不需要加入队列中的程序)必须在该队列的程序完成之前完成,
同步任务
在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务
不进入主线程、而进入"任务队列"(task queue)的任务,只有等主线程任务执行完毕,"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行。耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。
举例子:
1.回调函数
2.微信小程序api里面常出现的complie()
ajax
原生:
var xhr = new XMLHttpRequest();
xhr.open("GET","/api",true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//客户端可以使用
if(xhr.status == 200){//表示成功处理请求
alert(xhr.responseText);
}
}
}
xhr.send(null);
json
js对象(有两个API :JSON.stringify() 、JSON.parse())和数据格式
obj = {
name:"kxx",
last:"0000",
}
stringify(转字符串 如果 是 对象)将对象变成字符串
parse(理解)将字符串变成对象
微信小程序,React循环里的key
【官方解释】当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
所以优点为:key相当于数组的键值,代表了对应下标下的唯一标识。只是将对应的对象重新排序。未发生变化的对象,不会重新创建(不必重新渲染全部对象)。
【注意!】此处使用数组下标做key是不被推荐的,如果遇到数组排序的情况下此效果发挥不了,将降低渲染性能。
面向对象(对象是对现实世界事务的理解和抽象)
理解js的对象就是普通名值对的集合,oop即面向对象编程中,对象就是类的实例,类定义了对象的特征。如自带的Stack,Set,LinkedList,Dictionary,Tree,Graph等.而面向对象则是对对象的抽象、封装,继承和多态。将对象和行为于情景结合的过程:比方说人具有什么特征“抽象”其特性,而世界上有多种人,我将之“封装”为各种类型,同时该人可能是“继承”的上代的特性,他们都会有对应的技能比如开门,看书等。
那么!!!方法:人.打开门()就是面向对象。解读为人做了一个打开的功能。
而面向过程方法:门被打开(),则是这个门被打开了,是一个状态。
所以在我看来面向对象的思想怎样都离不开对象的动作。(这是我的个人理解,若有不对望指正,谢谢)
创建对象的方法:
1.var obj = new Object();
2.var obj = {};
或:obj = {
name:"kxx",
last:"0000",
}
声明一个类:
function Book(title,author){
this.title = title;
this.author = author;
}
实例化一个类
var book = new Book('title','author')
访问和修改对象属性
book.title = 'newTitle'
console.log(book.title)
包含函数的类
1.另外声明
Book.prototype.printTitle = function(){
console.log(book.title)
}
book.printTitle ();
2.在类里面定义
function Book(title,author){
this.title = title;
this.author = author;
this.printTitle = function(){
console.log(book.title)
}
}
跨域
跨域构成原因:
ajax,flash,iframe的document对象不支持跨域
后台解决:反代理
js解决方法:
第一种方式:jsonp请求;jsonp的原理是利用
事件冒泡
以最具体是元素接收时间发生逐步向上级传播到doc节点
对比鼠标放到li上对应的li背景变灰。
利用事件冒泡实现:
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
我们直接给所有li都绑上事件也可以:
$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
})
虽然从代码简洁程度上两者是相若仿佛的,但是前者少了一个遍历所有li节点的操作,所以在性能上肯定是更优的。