了解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 ...
随机推荐
- Spring事务的5种隔离级别
概述:isolation设定事务的隔离级别,事务管理器根据它来控制另外一个事务可以看到本事务内的哪些数据. 定义的5个不同的事务隔离级别: DEFAULT:默认的隔离级别,使用数据库默认的事务隔离级别 ...
- canvas雪花特效-jQuery插件实现
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...
- 【Python图像特征的音乐序列生成】关于数据集的分享和样例数据
数据集还在制作中,样例数据如下: 我将一条数据作为一行,X是ID,O代表了情感向量,S是速度,是一个很关键的参数,K是调式,M是节拍,L是基本拍.后面是ABC格式的序列,通过embedding化这些音 ...
- 【Python图像特征的音乐序列生成】第一阶段的任务分配
从即日起到7月20号,项目成员进行了第一次任务分配. 赵同学A.岳同学.周同学,负责了图像数据的情感数据集制作,他们根据自己的经验,对图像进行了情绪提取. 赵同学B全权负责向量映射这一块的网络搭建. ...
- Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] A A Problem about Polyline（数学）
题目中给出的函数具有周期性,总可以移动到第一个周期内,当然,a<b则无解. 假设移动后在上升的那段,则有a-2*x*n=b,注意限制条件x≥b,n是整数,则n≤(a-b)/(2*b).满足条件的 ...
- 跑edgebox
这是edge的作者的代码:https://github.com/pdollar/edges 这是matlab写的,还需要装Matlab Image Processing Toolbox和Piotr's ...
- windows系统下的两个批处理命令
启动应用:***.exe 关闭应用:taskkill /f /im ***.exe 保存为.bat文件
- 【数学 思维题】HDU4473Exam
过程很美妙啊 Problem Description Rikka is a high school girl suffering seriously from Chūnibyō (the age of ...
- [LUOGU]P1508 Likecloud-吃、吃、吃
题目背景 问世间,青春期为何物? 答曰:"甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!" 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日 ...
- js替换函数用法
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replac ...