JavaScript

变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

JavaScript let 和 const

变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明（JavaScript 变量提升）。let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

// 在这里不可以使用 carName 变量
let carName;

JavaScript 只有声明的变量会提升，初始化的不会。下面例子中， y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

以上代码类似于：
var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7

const 关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const PI;
PI = 3.14159265359; // 错误写法

const PI = 3.14159265359; // 正确写法

const定义常量与使用let 定义的变量相似：

• 二者都是块级作用域
• 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

• const声明的常量必须初始化，而let声明的变量不用
• const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

JS 对象

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。如果使用 fullName 属性，不添加 (), 它会返回函数的定义：
注释：在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

清空对象

• 你可以设置为 null 来清空对象: var person = null; // 值为 null(空), 但类型为对象
• 你可以设置为 undefined 来清空对象: var person = undefined; // 值为 undefined, 类型为 undefined

undefined 和 null 的区别

null === undefined           // false
null == undefined            // true

null是一个只有一个值的特殊类型。表示一个空对象引用。
在 JavaScript 中 null 表示 “什么都没有”。 用 typeof 检测 null 返回是object。

在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。

JS函数

局部JS变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除（生命周期）。

全局JS变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除（生命周期）。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。如：window.carName

JS作用域

• 作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。
• 在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
• JavaScript 函数作用域: 作用域在函数内修改。

JS局部作用域

变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

JS事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

通常，当事件发生时，你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> 按钮元素中添加了 onclick 属性

JS 字符串

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = “John”

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

<script>
var x = "John";              // x是一个字符串
var y = new String("John");  // y是一个对象
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>

string object

注释：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
(x === y) 结果为 false，因为 x 是字符串，y 是对象（=== 为绝对相等，即数据类型与值都必须相等。）

字符串方法：https://www.runoob.com/js/js-strings.html

JS类型

JS数据类型

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。在 JavaScript 中有

• 6 种不同的数据类型：string、number、boolean、object、function、symbol
• 3种对象类型：object、data、array
• 2个不包含任何值的数据类型：null、undefined
  

constructor属性

JS常见误区

比较运算符常见误区

在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：

var x = 10;
var y = "10";
if (x == y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以上 if 条件语句返回 false。
这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较，
以下实例由于类型不一致不会执行 alert 弹窗：

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined。

JS this

单独使用this

单独使用 this，则它指向全局(Global)对象。在浏览器中，window 就是该全局对象为 [object Window]:
(严格模式下，如果单独使用，this 也是指向全局(Global)对象。）

<script>
var x = this;    //typeof x  --->  object
document.getElementById("demo").innerHTML = x;   //[object Window]  
</script>

this的多种指向

• 在对象方法中， this 指向调用它所在方法的对象。
• 单独使用 this，它指向全局(Global)对象。
• 函数使用中，this 指向函数的所属者。
• 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
• 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
• apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

JS JSON

JSON （JavaScript Object Notation）是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。

• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *

注释：JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

var obj = {a: 'Hello', b: 'World'}; 
//这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; 
//这是一个 JSON 字符串，本质是一个字符串

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 字符串转换为 JavaScript 对象

使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象,
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}  一个对象
var json = JSON.stringify({a: 'Hello', b: 'World'}); 
//结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

JS void

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
void的2种表达：

 void func()
javascript:void func()
或者
void(func())
javascript:void(func())

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

 <a href="javascript:void(alert('Warning!!!'))">点我!</a> //会弹框

function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}   //a = undefined  b = 5   c = 7

href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接（点击无用）。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

JS异步编程

菜鸟教程：https://www.runoob.com/js/js-async.html

异步的概念

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

什么时候用异步编程

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

异步AJAX

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下

JavaScript Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。
注释： Promise 只不过是一种更良好的编程风格。
菜鸟：https://www.runoob.com/js/js-promise.html

Promise 将嵌套格式的代码变成了顺序格式的代码。Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。 当 Promise 被构造时，起始函数会被异步执行

JS 函数

函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。

箭头函数

ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。箭头函数不需要使用 function、return 关键字及大括号 {}。

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

• 有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。
• 当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。
• 箭头函数是不能提升的，所以需要在使用之前定义。
• 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

通过值传递参数

• 在函数中调用的参数是函数的隐式参数。
• JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
• 如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
• 隐式参数的改变在函数外是不可见的。

通过对象传递参数

• 在JavaScript中，可以引用对象的值。
• 因此我们在函数内部修改对象的属性就会修改其初始的值。
• 修改对象属性可作用于函数外部（全局变量）。
• 修改对象属性在函数外是可见的。

闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

DOM EventListener

addEventListener() 方法

• addEventListener() 方法用于向指定元素添加事件句柄。
• addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
• 你可以向一个元素添加多个事件句柄。
• 你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
• 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
• addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
• 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。
每次重置浏览器时会生成一个随机数。

<body>
<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

事件冒泡与事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将<p> 元素插入到 <div> 元素中，用户点击<p> 元素, 哪个元素的 “click” 事件先被触发呢？

• 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
• 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发<p> 元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型。默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

兼容所有浏览器

<script>
/*
 * 参数：
 *     obj：要绑定事件的对象
 *     eventStr：事件(注意：这里不要on)
 *     callback：回调函数
 */
function bind(obj , eventStr , callback){
    if(obj.addEventListener){
        //大部分浏览器
        obj.addEventListener(eventStr , callback , false);
    }else{
        //IE8及以下
        obj.attachEvent("on"+eventStr , function(){
            //在匿名函数中调用回调函数
            callback.call(obj);
        });
    }
}     
var x = document.getElementById("myBtn");
bind(x,"mouseover",myFunction);

function myFunction() {
    alert("Hello World!");
}
</script>

JS Window-浏览器对象模型（BOM）

Window对象

• 所有浏览器都支持 window 对象。它表示浏览器窗口。
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• 甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");
与此相同：
document.getElementById("header");

JS Cookie

• Cookie 是一些数据, 存储于你电脑上的文本文件中。
• 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
• Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
  - 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
  - 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
  Cookie 以名/值对形式存储，如下所示: username=John Doe
• 当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

注释：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;