了解JavaScript核心精髓（一）
ES5
1.声明脚本
<script type="text/javascript"></script>
PS：<script>标签放在body里面。
<html>
<!-- ... -->
<body>
<!-- ... -->
</body>
<script type="text/javascript" src="./js/config.js"></script>
</html> <!-- 或者 --> <html>
<!-- ... -->
<body>
<!-- ... -->
<script type="text/javascript" src="./js/config.js"></script>
</body>
</html>
浏览器最终渲染成这样。
2.DOM与BOM
DOM（Document Object Model）指文档对象模型。
BOM（Borwser Object Model）指浏览器对象模型。
PS：DOM基本操作
查找节点 document.getElmentById
创建节点 element.creatElement，document.body.appendChild
删除节点 element.remove
修改节点 element.setAttributeNode
windows.top指顶端对象。
windows.parent指父对象。
3.var与不var的区别
//表示全局变量
var a = 89
function test() {
//全局变量a重新赋值。
// a = 80
//函数内部定义一个变量a
var a = 80
console.log(a)
}
test()
console.log(a)
PS：js是弱数据类型，意思是不需要指定数据类型是什么，数据类型是由js引擎决定的。
4.js 比较运算符
console.log(2 > 1) //true
console.log(6 < 2) //false
console.log(2 <= 4) //true
console.log(2 >= 4) //false //==比较值是否相等，需要自动转换类型再比较。
//===精准比较值与类型是否相等，不需要自动转化类型再比较。
console.log('2' == 2) //true
console.log('2' === 2) //false
console.log('2' != 2) //false
console.log('2' !== 2) //true //null是引用为空时（如对象）
//undefined是数值为空时（如普通变量）
console.log(typeof null) //object
console.log(typeof undefined) // undefined console.log(null == undefined) //true，因为null是空白的对象引用，空白的对象引用就等于没有定义，所以相等。
console.log(null === undefined) //false，因为null是null类型，undefined是undefined类型，类型不匹配，所以不相等。
5.js逻辑运算符
var expr = 1
//expr表达式为（null、NaN、0、''、undefined）会转为false
if (expr) {
console.log(true)
} else {
console.log(false)
}
// true var expr1 = 1
var expr2 = 1
// &&、||、!、!! 逻辑运算符，逻辑运算符结果类型不一定是boolean，可以是任意类型。
console.log(expr1 && expr2) // 1。
// &&、|| 具有短路功能，第一个表达式不满条件（false），后面的表达式将被忽略。
console.log(true && false) //false
console.log(false && true) //false
console.log(false || true) //true
console.log(true || false) //true
// !、!! 逻辑运算符
console.log(!true) // false
console.log(!!true) // true
// &、| 既是逻辑运算符,也是位运算符（按位操作符）。
console.log(true & false) //0，false 转换为 0，true 转换为 1，0 & 1 = 0
console.log(true | false) //
5.js中this关键字
this用法等于public（全局）
function Person(){
var name ="abc";//私有
this.name ="abd3"//共有
}
this指向上一个对象，最后调用的的对象。
6.js闭包
闭包就是能够读取其他函数内部变量的函数。外部是不能访问函数内部的。
7.prototype和__proto__区别
prototype是只属于function的，显式属性，而__proto__属于所有object的，隐式属性。
function的prototype属性表示该function所创建的对象的原型。
PS：构造器其实就是一个普通的函数。当使用 new 操作符来作用这个函数时，它就可以被称为构造方法（构造函数）。
funtion的引用就是原型。
原型指向自己的原型（prototype）所形成一级一级的链结构就是原型链。
8.编码转化
//将字符串转换成URL编码
var myString = 'hello all'
var code = encodeURI(myString)
var str = decodeURI(code)
console.log(code) //hello%20all
console.log(str) //"hello all"
10.js innerhtml 与outerhtml区别
innerhtml 设置或获取位于对象起始和结束标签内的 HTML
如：<div><span>innerhtml</span></div>
outerhtml 设置或获取对象及其内容的 HTML 形式
如：<div><span>innerhtml</span></div>
12.js中的document对象与window对象区别
document当前页面所有的，包括超出的部分。
window当前窗口所有的，超出的部分不计。
13.js性能优化
能用原生js就用js代码写，减少js库（jquery）依赖。
避免使用 with 关键字与eval() 函数。（不精准定位查询，整体遍历查询，耗资源）。
将重复的表达式赋值精简到最小 （建议使用三目运算符）。
在复杂对象中使用索引来查找数组 （快速定位，节约查询时间）。
少用 document.write()函数（文档流输入输出也是很占资源的）。
15.js的严格模式
在函数里面加"use strict";
比如：使用严格模式下，变量都必须先用var命令声明，然后再使用。
好处就是保证代码的严谨性。（慎用）
16.js代码懒加载
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "script.js";
document.getElementsByTagName("head")[0].appendChild(script);
优点：无阻塞，异步加载js代码快。
17.函数
函数声明
function foo(){
console.log(1)
}
函数表达式
var foo = function(){
console.log(1)
}
匿名函数
function(){
console.log(1)
}
补充： IIFE(Immediately Invoked Function Expression) ，称为立即执行函数，即不需要调用立即执行函数， 在函数周围添加括号以表明它是一个函数表达式。
优点防止全局污染内部变量。
//无参数
(function(){
var a = ;
var b = ;
alert(a+b);
})(); //有参数
(function(a,b){
var result = a+b;
return result;
})(,);
18.链式调用（jquery为例）
如：$("p").append("文本颜色").css("color","red");
19.call与apply、bind区别
call() 调用一个对象的一个方法，以另一个对象替换当前对象。 （ 我替换别人的方法）
apply() 应用某一对象的一个方法，用另一个对象替换当前对象。 （别人的方法交给我去使用）
bind() 创建一个新函数，把新函数的tihs传给指定对象。
PS：es6中使用箭头函数取代bind()。
20.setInterval与setTimeout区别
setTimeout超时执行一次。
setInterval每隔一段时间执行一次。
PS：setTimeout与setInterval是同步方法。
使用定时器都要先clearTimeout(xxx)，防止定时器多次执行。
21.typeof与instanceof区别
instanceof 判断对象的原型链是否存在于某个构造函数prototype属性上，返回一个布尔型。
typeof 判断数据类型，返回一个字符串，返回值为"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
PS：简单类型使用typeof，复杂类型使用instanceof，因为typeof无法确定引用对象中具体类型。
[] instanceof Array; // true
typeof []; //object
补充：typeof应用：可以判断某些对象或方法是否已经初始化。
22.js作用域
全局变量和局部变量。
23.target与currentTarget区别
target一般指当前元素点击事件流。
currentTarget一般指当前元素的父元素事件流。
24.ajax缓存
请求一些长期不变的数据可以缓存起来，提高的页面性能。比如城市级联的数据。
PS：get 请求适合采用缓存。
25.ajax轮询与ajax长轮询。
//ajax轮询，定时发起ajax请求。
window.setInterval(getInfoApi, 10000) function getInfoApi() {
$.ajax({
type: "get",
url: "http://www.xxx.com",
contentType: "application/json",
success: function(res) {
console.log(res)
},
error: function(err) {
console.error(err)
},
})
}
//ajax长轮询，循环发起ajax请求
getInfoApi() function getInfoApi() {
$.ajax({
type: "get",
url: "http://www.xxx.com",
contentType: "application/json",
success: function(res) {
getInfoApi()
},
error: function(err) {
getInfoApi()
},
})
}
PS：ajax请求contentType常见类型
“application/x-www-form-urlencoded” ：form表单提交。
优点：简单快捷，支持各种数据类型提交。
缺点：仅适用用于简单数据类型，解析效率低。
POST /xxx HTTP/1.1
Content-Type: application/x-www-form-urlencoded name=Sroot&sex=man ---------------------------------------------------- GET /xxx?name=Sroot&sex=man HTTP/1.1
Content-Type: application/x-www-form-urlencoded
“multipart/form-data”：FormData数据格式提交。
优点：简单快捷，适合传输二进制文件，文件类型传输效率高。
缺点：仅适用用于简单数据类型，解析效率低。
POST /xxx HTTP/1.1
Content-Length:
Content-Type: multipart/form-data; boundary=--------------------------- -----------------------------
Content-Disposition: form-data; name="foo"，filename="foo.txt"
“application/json”：json数据格式提交。
优点：简单快捷，支持复杂数据类型，文本类型传输效率高。
缺点：仅适用于文本数据类型，对文件类型传输效率低。
POST /xxx HTTP/1.1
Content-Type: application/json; {"uid":"4d5df","info":{"sex":"man"}}
其他不常见类型就不列举。
26.html调用js方法。
<button onclick="test()">点我</button> <script>
//正确写法
test = function() {
alert('ok')
} //错误写法
function test () {
alert('ok')
}
</script>
27.监听浏览器关闭事件
window.onbeforeunload = function(e) {
console.log('beforeunload')
return 1
}
PS：1.当前页面标签关闭才会触发，关闭浏览器按钮不会触发。
2.当前页面需要有表单元素（input、textarea）才会触发。
28.回调函数
一般指http请求的回调函数，等待数据请求回来才执行的函数。
function testAjax(params,callback){
var result = 1;
$.ajax({
url : 'http://www.ss.com',
type : "post",
data : {"params ":params },
async : true,
success : function(data) {
result = 2;
callback(result);
}
});
}
testAjax("Value",function(rs){
console.log(rs)
})
29.回调地狱 （callback-hell）。
指嵌套过多的回调函数。
getData(function(x) {
nextFuntionA(x, function(y) {
nextFuntionB(y, function(z) {
//...
})
})
})
js函数柯里化
柯里化指将函数转换为多个的过程，减少重复性就可以实现相同的功能。（简单来讲就是一环扣一环，类似回调地狱形式）
// 普通函数
function add(x, y) {
return x + y
} // 柯里化函数
function curryingAdd(x) {
return function (y) {
return x + y
}
} add(1, 2) //
curryingAdd(1)(2) //
PS：Reactjs的高阶组件就是应用函数柯里化的例子。
补充：函数柯里化优点：复用参数，复用部分通用方法。
函数柯里化缺点：不易于阅读代码，容易滥用导致js性能下降。
30.js纯函数与非非纯函数
纯函数
指函数只依赖传入的参数，相同参数返回相同的结果，不会与外部（方法、变量）进行交互产生副作用。
例子：
function pureFunc(x,y){
return x + y;
}
非纯函数
指函数除了只依赖的传入的参数之外，还有其他影响因素（方法、变量、读写操作、网络）影响产生副作用。
例子：输出显示、随机数、时间、网络请求、读写操作的数据。
function impureFunc(value){
return Math.random() * value;
}
A();//函数A执行完，会被垃圾回收器回收内存。 var c=A(); //不会被回收，变量c引用函数A。 c=null // 变量c置空，函数A就会被垃圾回收器回收内存
内存泄漏就是应用程序无法释放不再使用内存，导致计算机系统可用内存较少，降低计算机性能。
例子：无限循环语句（计时器）、全局变量（没有使用变量修饰符，闭包）。
<button onclick="addLi()">添加li元素</button>
<ul onclick='getEventType(event)'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> <script type="text/javascript">
function getEventType(e) {
console.log(e.target.innerText);
}
var ulElement = document.getElementsByTagName('ul')[0]
function addLi() {
var ulLength = ulElement.children.length
var liElement = document.createElement('li')
liElement.innerText = ulLength
ulElement.appendChild(liElement)
}
</script>
//阻止冒泡事件
e.stopPropagation()
e.cancelBubble = true
//函数内部
return false //阻止捕获事件/默认行为
e.preventDefault()
e.returnValue = false
//函数内部
return false
补充:
1.js递归函数。（自己调用自己）
如：function count(i) {
PS: 递归函数一定要添加判断条件，否则就会报错出现内存溢出问题。
斐波那契数列(这个数列从第3项开始，每一项都等于前两项之和,即1, 1, 2, 3, 5, 8, 13)
举例:求第四项的值
var num1 = 1;
var num2 = 1;
for(var i = 3; i <= 4; i++) {
var temp = num2;
console.log("第" + (i - 2) + "次,temp=" + temp)
num2 = num1 + num2;
console.log("第" + (i - 2) + "次,num2=" + num2)
num1 = temp;
console.log("第" + (i - 2) + "次,num1=" + num1)
}
console.log("结果,num2=" + num2);
了解JavaScript核心精髓（一）的更多相关文章
- 了解JavaScript核心精髓（四）
ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...
- 了解JavaScript核心精髓（三）
1.js判断对象是否存在属性. hasOwnProperty(‘property’) 判断原型属性是否存在. "property" in o; 判断原型属性和原型链属性是否存在 ...
- 了解JavaScript核心精髓（二）
1.字符串操作 //声明字符串 var str = "abcd"; var str = new String("abcd") //截取字符串 console.l ...
- 周爱民带你深入剖析JavaScript核心原理
作为前端工程师必备技能,JavaScript 的重要性不言而喻.虽然易上手,但却有着诸多复杂微妙的机制,想要真正掌握绝非易事. 专栏面向JavaScript语言的实际应用者与深度爱好者,以讲述Java ...
- javascript 核心语言笔记- 3 - 类型、值和变量
JavaScript 中的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型包括数字.字符串和布尔值 JavaScript 中有两个特殊的原始值: ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- JavaScript 核心参考教程 内置对象
这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...
- 试读《JavaScript语言精髓与编程实践》
有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...
- Javascript核心概述 - 深入了解javascript
/* 一.执行上下文:堆栈(底部全局上下文+顶部当前活动上下文) */ /* 二.变量对象: 变量根据执行上下文,找到数据存储位置,这种机制叫变量对象 1. 变量都要var定义,且都不能delete ...
随机推荐
- IO（Properties、序列化流、打印流、CommonsIO）
第1章 Properties类 1.1 Properties类介绍 Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字 ...
- 行框基线位置确定（line box 基线）
在设置vertical-align属性(只有inline元素有效,对inline-block和block元素无效)时有一个属性值:baseline,那么这个基线是什么,怎么确定. 这个基线就是其所在行 ...
- 2017-3-7-lint183-wood-cut
2017-3-7-lint183-wood-cut 在河之洲 算法 lintcode problem lintcode183 wood cut solution 注意两点 注意边界条件 取的是最大值而 ...
- UVA 10382 Watering Grass （区间覆盖，贪心）
问题可以转化为草坪的边界被完全覆盖.这样一个圆形就换成一条线段. 贪心,从中选尽量少的线段把区间覆盖,按照把线段按左端点排序,记录一个当前已经覆盖区间的位置cur, 从左端点小于等于cur选一个右端点 ...
- UVA 1616 Caravan Robbers 商队抢劫者（二分）
x越大越难满足条件,二分,每次贪心的选区间判断是否合法.此题精度要求很高需要用long double,结果要输出分数,那么就枚举一下分母,然后求出分子,在判断一下和原来的数的误差. #include& ...
- Linux增加sudo用户
1. root用户编辑文件/etc/sudoers vi /etc/sudoers 2. 按yy复制行root ALL=(ALL) ALL 按p粘贴,修改 “root” 为添加的用户 ...
- Oracle Real Application Clusters (RAC)
Oracle Real Application Clusters — 概述 包含 Oracle Real Application Clusters (RAC) 选件的 Oracle 数据库允许依托一组 ...
- Linux centos 6 配置php环境，扩展redis
1.首先安装一个虚拟机(我自己版本:VM 10.0.4) yum -y install openssl psmisc openssl-devel php-devel pcre-devel gcc gc ...
- 删除sqlserver管理器登录信息缓存
在Windows10下测试有效: C:\Users\<user>\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shel ...
- 01_3_创建一个Servlet
01_3_创建一个Servlet 1.创建一个Servlet import java.io.IOException; import java.io.PrintWriter; import javax. ...