js概念知识

对象也可以有方法。方法以函数定义被存储在属性中

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在函数定义中，this 引用该函数的“拥有者”。this 指的是“拥有” fullName 函数的 person 对象。this.firstName 的意思是 this 对象的 firstName 属性。

访问对象属性

objectName.propertyName
objectName[“propertyName”]

访问对象方法

objectName.methodName()
如果您不使用 () 访问 fullName 方法，则将返回函数定义：

请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

JavaScript 事件

HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

转义字符

反斜杠转义字符把特殊字符转换为字符串字符
不能通过反斜杠对代码行进行换行：

字符串可以是对象，字符串也可通过关键词 new 定义为对象。

请不要把字符串创建为对象。它会拖慢执行速度。

===需要类型和值同时相等，==是值相等

对象无法比较

字符串方法

①字符串长度 。Length
②查找字符串的字符串第一次出现的位置 indexOf() ， 可以传递第二个位置参数，代表从第二个位置参数向后开始检索。
③lastIndexOf() 返回最后一次出现的索引，可以传递第二个位置参数，代表从第二个位置参数向前开始检索
④search()搜索特定值的字符串，并返回匹配的位置
⑤ indexOf() 与search() 相等，但是search()无法传递第二个参数。indexOf()无法设置更强大的搜索值（正则表达式）

提取部分字符串

如果参数为负数，则是从字符串的结尾开始计数
如果省略第二个参数，则截取到最后
slice(start,end) 截取开始索引到结束索引的字符串，参数可以为负数
substring(start,end) 无法接受负数
substr(start,length) 第二个参数是长度，位置可以为负数 ，长度不可为负数。

替换字符串内容

relace() 不会改变原字符串，返回是新字符串，默认只替换首个匹配项。对大小写敏感
如果需要对大小不敏感的替换 用正则表达式/i，注意不能带引号，
/g 是全局替换

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

转大写 toUpperCase() 转小写 toLowerCase()

concat() 字符串拼接

标题所有字符串都会返回新字符串，它们不会修改原始的字符串，字符串是不可变的，不能更改，只能替换

trim() 删除字符串两端的空白符

提取字符串字符

charAt() 返回字符串指定下标位置的字符
var str = "HELLO WORLD"; str.charAt(0); // H

charcodeAt() 返回字符串中指定索引的字符unicode编码

var str = "HELLO WORLD";
str.charCodeAt(0);    // 72

JavaScript 数组排序

sort() 方法以字母顺序对数组进行排序
reverse() 方法反转数组中的元素

比值函数
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

JavaScript 数学

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：
Math.pow(x, y) 的返回值是 x 的 y 次幂：
Math.sqrt(x) 返回 x 的平方根：
Math.abs(x) 返回 x 的绝对（正）值：
Math.ceil(x) 的返回值是 x 上舍入最接近的整数：
Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。
Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

 Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：

JavaScript typeof

5 种不同的可以包含值的数据类型

string
number
boolean
object
function
6 种类型的对象
Object
Date
Array
String
Number
Boolean
2 种不能包含值的数据类型
null
undefined

正则表达式

i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找由 | 分隔的任何选项

\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

test() 是一个正则表达式方法。它通过模式来搜索字符串，然后根据结果返回 true 或 false。

exec() 方法是一个正则表达式方法。它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

Throw 和 Try to Catch

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。
JavaScript 语句 try 和 catch 成对出现：

try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}

JavaScript 变量的有效期

JavaScript 变量的有效期始于其被创建时。

局部变量会在函数完成时被删除。

全局变量会在您关闭页面是被删除。

JavaScript 声明会被提升

用 let 或 const 声明的变量和常量不会被提升！ var 变量要替提升

严格模式中的 JavaScript 不允许在未被声明的情况下使用变量 “use strict”。

JavaScript 闭包。它使函数拥有“私有”变量成为可能。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后

JavaScript 类

ECMAScript 2015，也称为 ES6，引入了 JavaScript 类。

JavaScript 类是 JavaScript 对象的模板

ECMAScript 2015，也称为 ES6，引入了 JavaScript 类。
注意：类似java

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

JavaScript 类不是对象。

它是 JavaScript 对象的模板。

构造方法
构造方法是一种特殊的方法：
它必须有确切的名称的 “constructor”
创建新对象时自动执行
用于初始化对象属性
如果您没有定义构造方法，JavaScript 会添加一个空的构造方法。

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

类继承

继承对于代码可重用性很有用：在创建新类时重用现有类的属性和方法

class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ’ + this.model;
}
}

类还允许您使用 getter 和 setter。请使用 get 和 set 关键字。

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

getter/setter 方法的名称不能与属性名称相同，
使用下划线字符将 getter/setter 与实际属性分开

  get carname() {
    return this._carname;
  }

即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。
即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

let myCar = new Car("Ford");
myCar.carname = "Volvo";

您必须先声明类，然后才能使用它，类声明不会被提升 Hoisting

JavaScript Static 方法

static 类方法是在类本身上定义的。您不能在对象上调用 static 方法，只能在对象类上调用。

JavaScript 回调

JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。

回调是作为参数传递给另一个函数的函数。

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

当您将函数作为参数传递时，请记住不要使用括号。

回调真正闪光之处是异步函数，其中一个函数必须等待另一个函数（例如等待文件加载）。

异步的 JavaScript

“I will finish later!”
与其他函数并行运行的函数称为异步（asynchronous）

setTimeout

当您将函数作为参数传递时，请记住不要使用括号。

若不将函数的名称作为参数传递给另一个函数，您始终可以传递整个函数：
就是直接把函数体作为参数

JavaScript Promise

“I Promise a Result!”

“Producing code（生产代码）” 是需要一些时间的代码

“Consuming code（消费代码）” 是必须等待结果的代码

Promise 是一个 JavaScript 对象，它链接生成代码和消费代码
JavaScript Promise 对象包含生产代码和对消费代码的调用：

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

  myResolve(); // 成功时
  myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

Promise 对象属性
JavaScript Promise 对象可以是：

Pending
Fulfilled
Rejected
Promise 对象支持两个属性：state 和 result。

当 Promise 对象 “pending”（工作）时，结果是 undefined。

当 Promise 对象 “fulfilled” 时，结果是一个值。

当一个 Promise 对象是 “rejected” 时，结果是一个错误对象。

JavaScript Async

“async and await make promises easier to write”

async 使函数返回 Promise
await 使函数等待 Promise

await 关键字只能在 async 函数中使用。

HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

DOM 是一项 W3C (World Wide Web Consortium) 标准

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

所有 HTML 元素都被定义为对象。

HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

查找 HTML 元素

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
本例返回 class=“intro” 的所有

元素列表：
document.querySelectorAll(“p.intro”);

通过 HTML 对象集合查找 HTML 元素
id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值

var x = document.forms[“frm1”];

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

①document.write() 可用于直接写入 HTML 输出流：
②document.getElementById(id).innerHTML = new text
③document.getElementById(“myImage”).src = “landscape.jpg”;

for … in 遍历数组

遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如——例3
特别情况下, for … in 循环会以看起来任意的顺序遍历键名