了解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 ...
随机推荐
- 邮箱/邮件地址的正则表达式及分析(JavaScript，email，regex)
简言 在做用户注册时,常会用到邮箱/邮件地址的正则表达式.本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案. 方案1 (常用) 规则定义如下: 以大写字母[A-Z].小写字母[a-z] ...
- Vue的computed和methods区别
1,computed里面定义的方法是以属性的方式(当然也可以以函数调用的方式)出现在html里面,而methods里面定义的方法是以函数的方式: 2,computed依赖于data里面的数据,只有相关 ...
- Eclipse IDE配置PHP开发、调试环境
前言 使用java语言开发的朋友想必对Eclipse开发工具已经不陌生了,那么Eclipse作为java主流的开发工具,是否能够开发PHP项目呢?答案如你所想,肯定是可以的!以下就是该IDE下如何配置 ...
- Win10激活方法（企业版）
Win10激活 注意:以管理员身份运行,需要电脑有网(亲测激活企业版没问题) 然后一条一条复制执行 slmgr /ipk NPPR9-FWDCX-D2C8J-H872K-2YT43 slmgr /sk ...
- Java写诗程序
import java.util.Random; public class test_word { public static void main(String[] args) { System.ou ...
- javaweb基础(16)_jsp指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
- destoon 数据库操作
1.插入数据 $db->query("INSERT INTO ".get_table($mid)." ($sqlk) VALUES ($sqlv)"); ...
- 【linux】 服务器文件说明
文件名 说明 /etc/resolv.conf 域名解析服务器地址文件 /etc/services 服务程序对应端口号文件 /etc/passwd 登录账号文件 /etc/hosts 本地IP域名解 ...
- Relu的缺点
Relu不适合梯度过大的的输入 Relu是我们在训练网络时常用的激活函数之一(对我而言没有之一).然而最近发现Relu太脆弱了,经常由于输入的函数梯度过大导致网络参数更新后,神经元不再有激活功能.特别 ...
- python里字典的用法介绍
一.什么是字典 字典是python里的一种数据类型,特点是元素的无序性,和键key的唯一性.字典的创建方法是{key:values},字典里的键key只能是不可变的数据类型(整型,字符串或者是元组), ...