JavaScipt入门

Pax

2024-03-18 (Updated: 2024-08-08)

语言

入门

JavaScript

JavaScript简介

JavaScript代码需要在<script>标签中写入
JavaScript代码可以在<head>，<body>以及外部文件中写入

JavaScript基础四用法：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

1.window.alert()

1
2
3

<script>
	window.alert(5 + 6);
</script>

2.document.write

1
2
3

<script>
    document.write(HELLO);
</script>

3.innerHTML

1
2
3

<script>
    document.getElementById("pq").innerHTML = 'is a handsome!';
</script>

4.console.log()

1
2
3

<script>
   console.log(3 + 4);
</script>

JavaScript入门

字面量和变量概述

字面量概述：

在编程语言中，一般固定值称为字面量，如 3.14。数字，字符串，表达式，数组，对象，函数都可以作为字面量

变量概述：

需要声明变量，用var声明，不需要声明数据类型，允许一个var声明多个变量
Value = undefined，在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined
重新声明 JavaScript 变量不会丢失原来的值
变量值可以如python一样，直接转换值类型

变量类型：

**值类型(基本类型)**：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

声明须知：

字符串赋值不在意单或双引号

声明数组：var car=new Arroy(‘a’, ‘b’, ‘c’).;下标从0开始

或者：var cars=[“Saab”,”Volvo”,”BMW”];

声明布尔：var x=true; var y=false;

声明对象：var person={firstname:”John”, lastname:”Doe”, id:5566};

Undefined 和 Null：Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

对象须知：

访问对象属性的两种方式：A.a 或 A[‘a’]。

对象方法：A.a()

JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript函数名对大小写敏感。格式如下：

function myFunction(***var1***,***var2***)
{
*代码*
}

一个简单的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GRAAMMER</title>
</head>
<body>
    <button onclick="pq()">点这里</button>
</body>
<script>
    function pq(){
        document.write('HELLO');
    }
</script>
</html>

JavaScript对象

创建对象（介绍两种方法）

对象字面量：

var object {

name = pq;

age = 100;

}

使用构造函数：

function person(name, age) {

this.name = name;

this.age = age;

}

ver son = new person(pq, 19);

对象属性和方法

属性是对象中名称和值之间的关联，并且可以包含任何数据类型。

属性通常是指对象的特征。

方法是作为对象属性值的函数，因此是对象可以执行的任务。

方法存储在属性中作为函数定义。

this关键字

this关键字是指代码被写入内部当前对象-所以在这种情况下，this等同于user。

new关键字

当使用关键字声明JavaScript变量时，new关键字会使变量作为对象创建。

JavaScript语句

分支语句

if 语句

if 语句与C语言近乎一致，给一个模板即可：

var a = 10, b = 20, c = 30;
var answer;

if (a > b) {
   if (a > c) {
  answer = "A 是三个中最大的";
   } else {
  answer = "C 是三个中最大的";
   }
} else if (b > c) {
   answer = "B 是三个中最大的";
} else {
   answer = "C 是三个中最大的";   
}

或者使用：condition ? A : B

当条件为true时进行A语句，否则进行B语句。

switch语句

switch 语句与C语言近乎一致，给一个模板即可：

var day;
switch (new Date().getDay()) {
case 0: 
 day = "Sunday";
 break;
case 1: 
 day = "Monday";
 break;
case 2: 
 day = "Tuesday";
 break;
case 3: 
 day = "Wednesday";
 break;
case 4: 
 day = "Thursday";
 break;
case 5: 
 day = "Friday";
 break;
case 6: 
 day = "Saturday";
 break;
default: 
 day = "Undefined Day";
}

同C语言一样，break与default必不可少。

循环语句

for语句

大体上与C语言一致

for …in

for…in循环迭代的对象的属性。

for(let i in objects) {

document.write(i);

}

for …of

二者区别

for...in 主要用于遍历对象的属性（键名），而 for...of 主要用于遍历可迭代对象的属性值。在处理数组等可迭代对象时，for...of 更常用，而在遍历对象属性时，for...in 更合适。

while语句

大体上与C语言一致

JavaScript变量

JavaScript字符串及方法

语法

字符串对引号类型不做要求，但是必须保证引号不能提前闭合
字符串之间用加号连接

${}语法：如下：

var str1 = "quick brown fox";
var str2 = "over the lazy dog";

var str3 = `The ${str1} jumps ${str2}.`;

字符串转义序列：在JavaScript中，我们通过在字符\前面加上反斜杠()来实现此目的。
长代码换行用 + 号

字符串基元和字符串对象

var pq = ‘man’;

var pq = new String(man);

二者弱等于，且无法比较

方法

str.length：返回字符串长度
str.concat(ex)：拼接ex到str后面
str.ToupperCase()（TolowerCase）：转为大（小）写
str.indexof(ex, num)：返回ex第一次出现的位置，从第num处开始；可以将indexof替换成lastof
str.search(ex)：查询ex第一个匹配项的位置
str.split(‘ex’)：以ex为分割方式将str分割为字符数组
str.trim：字符串的两端删除空格，但不能去除字符串之间的空白，空格可以是制表符或空格
str.replace(ex1, ex2)：将第一个匹配的ex1替换成ex2,ex1可使用正则进行全匹配
str.slice(num1,num2)：提取字符串的一部分，并将其作为新字符串返回，而无需修改原始字符串。
str.charAt(num)：返回字符串中指定索引处的字符

JavaScript数值及方法

语法

JavaScript只有一种数字类型，没有整数和浮点数的单独指定，用var声明
JavaScript中的数字被认为是准确的，最多15位数字。这意味着数字将在到达第16位后四舍五入
JavaScript数字允许用科学计数法e，与C语言类似
字符串 + 数字的结果是拼接
数值字符串可以执行数学表达式，但是数值加法不可执行

NaN-非法数字：
1
var x = 50 / "(cainiaojc.com)"; // x = NaN (Not a Number)

显而易见的

使用全局JavaScript isNaN()函数来确定值是否为数字：

1 2	var x = 50 / "(cainiaojc.com)"; isNaN(x);// 返回true，因为x不是一个数字

将值分配给NaN时，即使另一个数是合法数字，也将返回NaN

1
2
3

var x = NaN;
var y = 27;
var z = x + y;  // z  = NaN

JavaScript无穷

正无穷：Infinity，负无穷：-Infinity

1 2	var x = 5 / 0; // 将返回无穷 var y = -5 / 0; // 将返回负无穷

数值上限：1.797693134862315E+308

数值下限：-1.797693134862316E+308

JavaScript基数

默认情况下，JavaScript将数字显示为以10为基数的小数。

数字也可以用十六进制（基数16），二进制（基数2）和八进制（基数8）表示。

二进制前缀：0b

八进制前缀：0

十六进制前缀：0x

数字基元和数字对象

弱等于，但是不强等于，数值对象无法比较。

JavaScript数组及方法

语法

JavaScript中的数组是一种全局对象，用于在单个变量中存储多个值。

创建数组数组通常用于将相似数据类型的列表组合在一起，但是从技术上讲，它们可以包含任何值或值的混合，如下：

1	let myArray = [5, 22, "Arrow", "Bone", true, new Date()];

在上文中介绍了两种方法创建数组：方括号和new关键字（尽量避免new）

1	let fruits = ["Apple", "Mango", "Banana", "Orange"];

1	let fruits = new Array("Apple", "Mango", "Banana", "Orange");

向数组添加元素

看个例子：

1 2	let fruits = ["Apple", "Mango", "Banana", "Orange"]; fruits[4] = "Guava";

一切正常，但是如果：

1	fruits[6] = "Strawberry";

跳过的都将创建值为空(“”)的元素

附：通过Array.length查看数组长度

方法

Array.toString()：将数组转换为（逗号分隔）数组值的字符串。

Array.join(ex)：将数组转换为（ ex 分隔）数组值的字符串，默认是逗号。

Arrary.push(ex)：添加元素ex到数组，并返回新的数组长度。

Array.unshift(ex1, ex2, ···)：一个或多个新元素添加到数组的开头，并返回新的数组长度。

Array.pop()：删除数组末尾的最后一个元素，并返回“popped out（弹出）”的值。

Array.shift()：从数组中删除开始的第一个元素，并返回被“移出（shifted out）”的元素。

Array.splice(s_num, sum, ex)：对现有元素和（或）添加新元素来更改数组。s_num为开始索引值，sum表示对多少个元素进行操作，ex为添加的元素。

Array.concat(array)：Array与array合并。

Array.slice(begin, sum)：将数组的一部分复制到新数组。如果省略第二个参数，则该slice()方法将切出数组的其余部分。允许使用负值。

Array.indexOf(ex)：返回可以在数组中找到元素ex的第一个索引。如果ex在数组中不存在，返回 -1。lastindexOf()同理。

Array.fill(ex, begin, final)：用一个静态值替换数组中的范围内的元素，左闭右开。

Array.reverse()：反转数组中元素的顺序。

Array.sort()：根据元素中的第一个字符对数组中的元素进行排序。在第一个字符相同的情况下，它将继续向下一行并比较第二个字符，依此类推。先排大写。

数组迭代

Array.forEach(ex, index, Array)

该方法对数组的每个元素执行一次提供的函数（一个回调函数）

该函数带有3个参数，由于2个参数（索引，数组）是可选的，因此我们可以跳过它们：

元素值（必填）
元素索引（可选）
数组本身（可选）

Array.map(ex, index, Array)

该方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。

该方法与**Array.forEach(ex, index, Array)**类似

Array.filter(ex, index, Array)

该方法把Array的某些元素过滤掉，然后返回剩下的元素。其主要原理是 filter会把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。

Array.reduce(result, ex, index, Array)

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。这在数字中很常见，例如找到数组中所有数字的总和。

该函数采用4个参数：

初始值/先前返回的值（必填）
元素值（必填）
元素索引（可选）
数组本身（可选）

Array.find(ex, index, Array)

该方法返回通过给定检测的数组中的第一个值。

Array.findIndex(ex, index, Array)

该方法返回通过给定检测的数组中的第一个索引值。

Array.every(ex, index, Array)

该方法用于检测数组所有元素是否都符合指定条件（通过函数提供检测）。

JavaScript事件

概述：

事件是在浏览器中发生的操作，可由用户或浏览器本身启动。

每个可用事件都有一个事件处理程序，该事件处理程序是代码块（通常是用户定义的JavaScript函数），将在事件触发时运行。

举几个例子：

页面加载完成
用户单击一个按钮
用户滚动文档
用户调整浏览器大小
用户移动鼠标
用户提交表单
用户按下键盘上的一个键
HTML输入字段已更改

使用事件的三种方式

内联事件处理程序
事件处理程序属性
事件监听器

内联事件处理程序

在HTML中，onclick 是一种事件属性（event attribute），它允许你为特定的HTML元素指定一个JavaScript代码块，在用户触发点击事件时执行这个代码块。具体说，onclick 属性用于定义鼠标单击事件的处理程序。

利用onclick属性，如下：

<h onclick="funOne(this)">Click me</h>
<script>
        function funOne(self) {
            self.innerHTML = 'As we know, PQ is a handsome!';
        }
 </script>

附：内联事件处理程序是开始理解事件的简单方法，但通常不应将其用于测试和教育目的之外。

事件处理程序属性

利用id属性，如下：

<p id="id_one">Well, I am a handsome.</p>
var id_one = document.getElementById('id_one')
        id_one.onclick = function() {
            id_one.innerHTML = 'The senctence is true.';
        }

焦点事件

onmouseover当将指针设备（通常是鼠标）移动到元素或其子元素之一时，将触发该事件。

onmouseout当将指针设备（通常是鼠标）移离元素或其子元素之一时，将触发该事件。

事件监听

addEventListener()方法

该方法将事件处理程序附加到指定的元素。

语法：

1	element.addEventListener(event, listener, useCapture)

第一个参数是事件的类型（例如“ click”或“ mousemove”）。

第二个参数是事件发生时我们要调用的监听函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是使用事件捕获。此参数是可选的。

注意，不要为事件使用“ on”前缀。使用“ click”代替“ onclick”。

将事件监听添加到元素

内部放入函数，如下：

<script>
    const h1 = document.querySelector("h1")
    h1.addEventListener("click", function() {
        document.write('HHHHHHH')
    })
 </script>

外部引用，如下

h1.addEventListener('mouseenter', abc)
function abc() {
    document.write('click, click')
}

注意：第二个参数填函数名，没有括号。

将多个事件监听添加到同一元素

1
2
3

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);

传递参数

传递参数值时，请使用匿名函数，该函数使用参数调用指定的函数：

示例

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

将事件监听添加到Window对象

文档

1
2
3

document.addEventListener("click", function() {
alert("Hello World!!!");
});

窗口

1
2
3

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

removeEventListener()方法

该方法从元素中删除一个或所有事件，语法与addEventListener()一致。

事件传播

事件传播是一种描述在Web浏览器中触发的事件“堆栈”的方法。

原理

有冒泡和捕获两种传播机制

语法：element.addEventListener(event, listener, useCapture)

“useCapture”缺省值为false，它将默认使用冒泡传播；而将值设置为true时，事件将使用捕获传播。

在捕获阶段：

浏览器将检查元素的最外层父级（html）是否在捕获阶段注册了onclick事件处理程序，如果是，则运行该事件处理程序。

然后，它移动到中的下一个元素并执行相同的操作，然后执行下一个，依此类推，直到到达实际单击的元素。

在冒泡阶段，正好相反：

浏览器检查在冒泡阶段实际单击的元素是否在其上注册了onclick事件处理程序，如果是，则运行该事件处理程序。

然后，它移动到下一个直接父级元素，然后再执行下一个，依次类推，直到到达html元素为止。

停止事件传播

可以使用event.stopPropagation()，如下：

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);

function myFunc() {
  alert("You clicked: "+ this.tagName);
  event.stopPropagation();
}

访问目标元素

目标元素，即event.target

须知：在事件传播的捕获阶段，只有一个方向，即从最外层的祖先元素一直传播到目标元素。一旦到达目标元素，再往下传播到子元素的阶段，事件将进入冒泡阶段，这时才会再次触发事件处理程序。

目标元素是已生成事件的DOM节点。

例如，如果用户单击超链接，则目标元素是超链接。

目标元素的访问方式为event.target，在事件传播阶段不会更改。

防止默认动作

某些事件具有与之关联的默认操作。例如，如果您单击链接浏览器，则将您带到链接的目标，当您单击表单提交按钮时，浏览器将提交表单等等。您可以使用event.preventDefault()事件对象的方法来防止此类默认操作。

1
2
3

function myFunc() {
  event.preventDefault();
}

但是，阻止默认操作并不能阻止事件传播；事件继续照常传播到DOM树。

事件委托

冒泡还使我们能够利用事件委托。

如果你想在点击时弹出一条消息，你可以在父

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
  if(event.target && event.target.nodeName == "LI") {
 alert("List item " + event.target.id.replace("post-", "") + " was clicked!");
  }
});
</script>

JS HTML DOM

概述：

文档对象模型，通常被称为DOM，是使网站交互的一个重要部分。

文档对象模型表示被显示在一个窗口中的HTML文档。

它是一个接口，允许JavaScript处理网站的内容，结构和样式。

例子

HTML DOM方法是可以对HTML元素执行的操作。

HTML DOM属性是可以设置或更改的HTML元素的值。

在DOM中，所有HTML元素都定义为objects

例子如下：

1
2
3

<script>
document.getElementById("para").innerHTML = "Hello world";
</script>

getElementById()是方法，innerHTML是属性。

JS HTML DOM选择器

简单来说就是定位器，有以下方法：

通过ID查找HTML元素
通过标签名称查找HTML元素
通过类名称查找HTML元素
通过CSS选择器查找HTML元素
通过HTML对象集合查找HTML元素

按ID查找

方法：getElementById()

例子：var x = document.getElementById(“msg”);

按标签查找

方法：getelementsByTagName()

例子：var x = document.getElementsByTagName(“p”);

返回的是列表

按类名称查找

方法：getElementsByClassName()

例子：var x = document.getElementsByClassName(“demo”);

返回的是列表

通过CSS选择器查找

方法：querySelectorAll()

例子：var x = document.querySelectorAll(“div”);

通过HTML对象集合

HTML文档中最顶层的元素可以直接用作文档属性。

例子：

1 2	var html = document.documentElement; var body = document.body;

JS DOM 改变HTML内容

更改HTML内容

使用innerHTML属性，语法如下：

1	element.innerHTML = text

须知：利用各种选择器返回的是元素对象。

改变输出流

使用**document.write()**方法

须知：此方法仅在解析该文档时将内容写入当前文档。如果在页面加载后使用此方法，它将覆盖该文档中的所有现有内容。

更改属性值

语法：element.attribute = new value

向DOM添加新元素

document.createElement()

<script>
    var new_h = document.createElement('h2');
    var new_h_con = document.createTextNode('HHHHH');
    new_h.appendChild(new_h_con);
    document.body.appendChild(new_h);
</script>

appendChild()方法将新元素添加到指定父节点的任何其他子节点的末尾。

body.insertBefore()

但是，如果要在其他任何子项的开头添加新元素，则可以使用该insertBefore()方法.

语法：body.insertBefore(newElement, body.childNodes[n]);

从1开始，在n前面。

从DOM中删除现有元素

该removeChild()方法从DOM中删除子节点，如下：

1 2	var div = document.getElementById("demo"); div.removeChild(div.firstElementChild);

JS DOM 改变CSS

使用style属性将样式应用于特定的HTML元素。

语法：element.style.property = ‘value’

要获取实际上用于呈现元素的所有CSS属性的值，可以使用以下window.getComputedStyle()方法：

1 2	let para = document.querySelector('p'); let compStyles = window.getComputedStyle(para);

JS DOM 改变元素属性

获取元素的属性值

getAttribute()方法用于获取元素上指定属性的当前值。

语法：var a = element.getAttribute(property)

在元素上设置属性

setAttribute()方法用于设置指定元素上的属性的值。

如果属性已经存在，则更新值；否则，将添加具有指定名称和值的新属性。

语法：element.setAttribute(property, ex)

将元素element的属性property设置为ex

从元素中删除属性

removeAttribute()方法用于从指定元素中删除属性。

语法：element.removeAttribute(property)

DOM节点

根据W3C HTML DOM标准，HTML文档中的所有内容都是一个节点：

整个文档是一个文档节点

每个HTML元素都是一个元素节点

HTML元素内的文本是文本节点

每个HTML属性都是一个属性节点（不建议使用）

所有注释都是注释节点

DOM HTML树

在节点之间导航

使用以下节点属性来导航：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

访问子节点

使用：element.childNode[]

附：

使用firstChildDOM节点的属性来访问节点的第一个直接子节点

但是由于代码的规范化，两个标签间会有换行和空格，会创建一个**#text**节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
</head>
<body>
    <div id="1">
      <div id="2">
        <div id="3">
          <p id="4">
            HELLO
          </p>
          <p id="5">
          </p>
        </div>
      </div>
    </div>
  <script>
    var father = document.getElementById('4');
    var child = father.firstChild.textContent;
    document.getElementById('5').innerHTML = child;
  </script>
</body>
</html>

将目标作为自己的父节点，可以获取自身文本内容。

附：nodeName是element的一个只读属性，返回当前节点作为字符串的名称。

访问父节点

语法：element.parentElement

访问兄弟节点

使用previousSibling和nextSibling属性来访问DOM树中的上一个和下一个节点。

DOM根节点

以下两个属性允许访问整个文档：

document.body(head)
document.documentElement

附：document.documentElement的功能更强大，可以显示标签里的所有内容。

noteType属性

该属性以数字形式返回指定节点的节点类型

语法：element.noteType

下表列出了最重要的节点类型：

ELEMENT_NODE	1	Hello, World
ATTRIBUTE_NODE	2	class =“heading”（不建议使用）
TEXT_NODE	3	Hello, World
COMMENT_NODE	8	<！–这是注释–>
DOCUMENT_NODE	9	HTML文档本身（的父级）
DOCUMENT_TYPE_NODE	10	<！doctype html>

JavaScript对象

基础

概述：

对象是由属性和方法的集合组成的数据类型。

在JavaScript中，基本上所有东西都是对象：

字符串可以是对象（如果使用new关键字定义）

数字可以是对象（如果使用new关键字定义）

布尔值可以是对象（如果使用new关键字定义）

日期始终是对象

数学永远是对象

数组始终是对象

正则表达式始终是对象

函数永远是对象

Object就是对象

除原语外，所有JavaScript值都是对象。

附：在Java编程语言中，原语（primitive）指的是一组基本的数据类型，它们不是对象，也不具有方法。

JavaScript基元

原始值是没有属性或方法的值。

在JavaScript中，有5种原始类型：

string
number
boolean
null
undefined

创建JavaScript对象

终于详细讨论这个问题了。

有多种创建新对象的方法：

使用对象常量，它使用大括号：{}

使用对象构造函数，它使用new Object()

可以创建一个构造函数 ，然后示例化一个调用该函数的对象

使用对象常量

例子：

1	var Pq = {name: 'pq', age:20};

附：对象定义可以跨越多行。

使用new Object()

例子（哈哈哈，我简化了）：

1
2
3

var user = {};
user.name = 'pq';
user.age = 20;

使用构造函数

例子：

function Man(name, age) {
    this.name = name;
    this.age = age;
}
var Pq = new Man('pq', 20);

JavaScript对象是可变的

可变是一种可以更改的变量。在JavaScript中，只有对象和数组是可变的，不是原始值。

可变对象是一种对象，其状态在创建后即可修改。

不可变对象是一旦创建对象便无法更改其状态的对象。

字符串和数字是不可变的，改值后地址变了。

对象是可变的：它们是通过引用而不是值来寻址的。

如果user是对象，则以下语句将不会创建该用户的副本：
1
var x = user;  // 这不会创建user副本.
对象x不是user的副本，它是user。x和user是同一个对象。

对x的任何更改也将更改user，因为x和user是相同的对象。

比较对象

在JavaScript中，对象是引用类型。即使两个不同的对象具有相同的属性，它们也永远不会相等。

仅将同一对象引用与其自身进行比较会得出true。

JavaScript 对象属性

属性是对象内的名称（键）和值之间的关联，并且它可以包含任何数据类型。

属性通常是指一个对象的特征。

通常可以更改，添加和删除属性，但某些属性是只读的。

访问JavaScript属性

有两种访问对象属性的方法：

点表示法： .
括号符号： []

添加新，修改旧属性

直接使用等于号，

注意：避免对属性或方法名称使用保留字。

删除对象属性

语法：delete element.property

遍历对象属性

JavaScript具有for…in专门用于迭代对象属性的循环。

语法：

1	for (variable in object) { statement to be executed}

例子：

var user = {firstName:"Seagull", lastName:"Anna", age:22, location:"New Delhi"};

for (let x in user) {
    document.write(x);
}

附：for…in循环不应与for…of循环混淆，后者仅在Array对象类型上使用。

另一个有用的枚举方法是Object.keys()方法，该方法将返回对象属性的数组。

语法：object.keys(对象)

此方法使我们可以将对象的属性作为数组使用，因此您可以利用JavaScript数组的所有方法。

附：属性的内部属性

所有属性都有一个名称。另外它们也有属性值。

该值是属性的属性之一。

其他属性是：可枚举，可配置和可写。

这些属性定义了属性的访问方式（可读性，可写性）。

在JavaScript中，可以读取所有属性，但是只能更改属性值（并且仅在该属性为可写状态时）。

JavaScript 对象方法

概述：

方法是与对象，或者说相关联的函数，一种方法是一个对象，它是函数的一个属性。

方法的定义方式与常规函数的定义方式相同，不同之处在于必须将它们分配为对象的属性。

使用this作为对象引用

JavaScript有一个特殊的关键字this，您可以在方法中使用它来引用当前对象。

如下：

1
2
3

getName: function() {
 return this.firstName + " " + this.lastName;
}

this关键字是指代码被写入内部当前对象-所以在这种情况下，this等同于user。

换句话说，this.firstName表示此对象的firstName属性。

添加新方法

直接等于号，如下：

user.greet = function() {
    return "Hello World";
};
document.getElementById("para").innerHTML = user.greet();

Getters和Setters

getter是一种获取特定属性值的方法。

setter是一种设置特定属性值的方法。

例子：get关键字

//创建一个对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  get loc() {
     return this.location;
  }
};

//显示来自对象的数据
document.getElementById("para").innerHTML = user.loc;

还有：set关键字

//创建一个对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  get loc() {
     return this.location;
  }
};

//显示来自对象的数据
document.getElementById("para").innerHTML = user.loc;

Object.defineProperty()

Object.defineProperty()方法还可以用于添加Getter和Setter。

语法：

1	Object.defineProperty(object, property, {value : value})

JavaScript 对象构造函数

JavaScript 内置构造函数：

let x1 = new String(); //一个新的String对象。
let x2 = new Number(); //一个新的number对象。
let x3 = new Boolean(); //一个新的布尔对象。
let x4 = new Object(); //一个新Object对象。
let x5 = new Array(); //一个新的Array对象。
let x6 = new RegExp(); //一个新的RegExp对象。
let x7 = new Date(); //一个新的date对象。
let x8 = new Function(); //一个新函数对象。

不要将Number、String或Boolean声明为对象

终将数字，字符串或布尔值视为原始值。不作为对象。

将这些类型声明为对象会降低执行速度，并产生意外结果。

也可以这样做：

使用{}代替new Object()
使用””代替new String()
使用0代替new Number()
使用false代替new Boolean()
使用[]代替new Array()
使用/()/代替new RegExp()
使用function (){}代替new Function()

JavaScript 对象原型及原型链

原型

原型是一种机制，JavaScript对象通过该机制彼此继承特征。

prototype属性可以向构造函数添加属性和方法。

语法：object.property.name = value

原型链

部分内容摘自：一文搞懂JS原型与原型链（超详细，建议收藏） - 掘金 (juejin.cn)

原型对象

JS的每个函数在创建的时候，都会生成一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象。该原型对象中有个属性为constructor，指向该函数。这样原型对象和它的函数之间就产生了联系。

JS原型链

每个通过构造函数创建出来的实例对象，其本身有个属性__proto__，这个属性会指向该实例对象的构造函数的原型对象。

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会通过它的__proto__隐式属性，找到它的构造函数的原型对象，如果还没有找到就会再在其构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

注意点：如果通过p1实例对象的__proto__属性赋值，则会改变其构造函数的原型对象，从而被所有实例所共享。

原型链的尽头是NULL。

神评：

每个构造函数：例如Array都有自己的原型对象 Prototype, 而 Array每次new 出来的实例对象 array = new Array() 如果想找到原型对象 Prototype上面的属性的话，得通过 proto 来找到（也就是 arrar.proto === Array.Prototype）; 但是Array的原型对象 Prototype的上层其实还有 proto, 而它的__proto__指向的就是 Object.Prototype ; 也就是Array.Prototype._proto

自我总结：每个构造函数抽象出一个原型对象以承载公共属性和方法，原型链使对象与构造函数的原型对象建立link。

JavaScript 类

概述：

类是用于创建对象的模板。

创建一个类并实例化的语法格式如下

class Runoob {
    constructor(name, url) {
        this.name = name;
        this.url = url;
    }
}
let site = new Runoob("菜鸟教程",  "https://www.runoob.com");

类继承

super() 方法引用父类的构造方法。

通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。

语法： super(father方法);

还可以使用原型链。

JavaScript 静态方法

静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。

静态方法不能在对象上调用，只能在类中调用。

JavaScript

JavaScript简介

JavaScript基础四用法：

JavaScript入门

字面量和变量概述

字面量概述：

变量概述：

变量类型：

声明须知：

JavaScript函数

JavaScript对象

创建对象（介绍两种方法）

对象字面量：

使用构造函数：

对象属性和方法

this关键字

new关键字

JavaScript语句

分支语句

if 语句

switch语句

循环语句

for语句

for …in

for …of

二者区别

while语句

JavaScript变量

JavaScript字符串及方法

语法

**${}**语法：如下：

字符串基元和字符串对象

方法

JavaScript数值及方法

语法

NaN-非法数字：

JavaScript无穷

JavaScript基数

数字基元和数字对象

JavaScript数组及方法

语法

方法

数组迭代

Array.forEach(ex, index, Array)

Array.map(ex, index, Array)

Array.filter(ex, index, Array)

Array.find(ex, index, Array)

Array.findIndex(ex, index, Array)

Array.every(ex, index, Array)

JavaScript事件

概述：

使用事件的三种方式

内联事件处理程序

事件处理程序属性

焦点事件

事件监听

addEventListener()方法

语法：

将事件监听添加到元素

将多个事件监听添加到同一元素

传递参数

将事件监听添加到Window对象

removeEventListener()方法

事件传播

原理

停止事件传播

访问目标元素

防止默认动作

事件委托

JS HTML DOM

概述：

JS HTML DOM选择器

按ID查找

按标签查找

按类名称查找

通过CSS选择器查找

通过HTML对象集合

JS DOM 改变HTML内容

更改HTML内容

改变输出流

${}语法：如下：