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节点的操作,所以在性能上肯定是更优的。