共计 8590 个字符，预计需要花费 22 分钟才能阅读完成。
简介
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 与 Java 的区别
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是在设计上。
Java 是更复杂的编程语言，由 Sun 公司发明，现在属于 Oracle 公司。
ECMAScript—ES, 是 JavaScript 标准的官方名称。
JavaScript 由工作于 Netscape 的 Brendan Eich。
ES 简介
1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。
在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。
ES6，全称 ECMAScript 6.0，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
如何编写 JS
1.1、页面嵌入
页面嵌入，一般情况下是在 head 标签中嵌入 script 标签，该标签可以直接在开始标签和结束标签之间编写 JS 代码，也可以导入 / 引入外部的 JS 文件；也可以在 body 标签中或 body 标签之后嵌入 script 标签，编写代码。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>helloworldtitle>
script>
function helloWorld()
{
alert("hello JS");
console.log("Hello JS");
}
helloWorld();
script>
head>
body>
body>
html>
1.2、JS 注释
除了 javadoc 专用注释以外，和 Java 中的注释一样使用，此处省略。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>body jstitle>
head>
body>
script>
function hello()
{
console.log("hello JavaScript")
}
hello()
script>
body>
script>
function world()
{
console.log("JS World")
}
world()
script>
html>
1.4、独立 js 文件使用
单独创建一个后缀为 *.js 格式文档，在该文档中编写需要的 JS 代码，这种写法，一般是，该 js 代码是由多个 HTML 页面需要引用 / 共用，编写以后，通过
function hello()
{console.log("Hello World JavaScript");
}
// 调用函数 hello()
hello()
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>外部 JS 文档引入title>
script src="../js/demo.js">script>
head>
body>
body>
html>
变量
变量的命名和声明与 Java 一样，也是区分大小写，编写规范和 Java 一样，此处省略。
和 Java 不一样的是如果变量声明后，没有给值，此时该变量的值为 undefined。
JS 中变量的声明格式:
var 变量名；全局变量推荐使用 var
let 变量名; 一般定义块级变量使用 let
const 变量名；这是定义 / 声明的常量，JS 中的常量定义后立刻初始化
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>变量title>
script>
var a = 123;
let b = "hello";
const c = false;
var A = "world";
let a1 = "123";
let a2 = "3";
let b1;
document.write(a);
document.write(b);
document.write(c,"
");
document.write(c+"
");
document.write(`a1 = ${a1}
`);
document.writeln(A)
document.write(a1+a2);
console.log(a1+a2);
document.write(b1);
script>
head>
body>
body>
html>
数据类型
JS 中数据类型分为基本数据类型 (数值类型) 和引用数据类型 (对象类型)。
1.1、基本数据类型
值类型 (基本数据类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未
定义（Undefined）、Symbol。
1.1.1、String
字符串类型，在 JS 中单引号’‘、双引号 ” “、格式化 “ 都是字符串类型，格式化符合和单引号双引号的区别是，单引号双引号中所有的数据都是字符串，并按照原来的样子进行输出，而格式化符号中可以包含变量的调用以及输出，调用的格式是 ${变量名}
1.1.2、Number 数值类型
数值 / 数字类型包括整数型、浮点型。
typeof 表示获取变量或数据的类型
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>获取数据类型title>
head>
body>
script>
var a = 123;
let b = 'hello';
const c = true;
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof 3.14);
console.log(typeof "world");
console.log(typeof `abc`);
script>
body>
html>
1.1.3、Undefined 未定义的值
Undefined 这个值表示变量不含有值 / 表示变量没有值。
1.1.4、Null 空值
可用于判断某个变量是否为 null
1.1.5、Symbol
符号型，标记型
前言:
ES5 以及之前的对象的属性名都是字符串，容易造成命名冲突，即重名。
概述
ES6 中添加了一种原始数据类型 Symbol
特点:
1、Symbol 属性对应的值是唯一的，解决了命名冲突的问题。
2、Symbol 值不能与其他数据进行计算，包括同字符串拼接。
3、forin、forof 遍历时，不会遍历 Symbol 属性。
注意：ES6 引入了一种新的数据类型 Symbol，该类型表示独一无二的值，最大的用法是用来定义对象的唯一性属性名，其永远不会重复。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>symboltitle>
head>
body>
script>
console.log(Symbol());
var a = Symbol();
console.log(a);
var b = "abc";
var c = "abc";
console.log(b == c);
var d = Symbol("abc");
var e = Symbol("abc");
console.log(d === e);
let a1 = 123;
let a2 = "123";
console.log(a1 == a2);
console.log(a1 === a2);
script>
body>
html>
1.2、引用数据类型
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
1.2.1、Object 对象
Object 对象引用数据类型。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Objecttitle>
head>
body>
script>
console.log(Object);
var a = new Object();
console.log(a);
var b = new String();
console.log(b);
var c = new Array();
console.log(c);
script>
body>
html>
1.2.2、数组 Array
格式:
1、修饰符 数组名 = new Array(小括号中元素根据自己的需求可有可无)；
2、修饰符 数组名 = [元素 1，…，元素 N];
元素: 数组中存放的每一个数据
长度: 数组中存放的元素个数，可以通过 数组名.length 获取数组长度。
索引 / 下标: 元素在数组中的存放位置，数组索引从 0 开始，到 数组长度 - 1 结束，即 0 ~ 数组
名.length – 1
一维数组
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>数组title>
head>
body>
script>
var a = new Array(123,321,true,"hello","world");
console.log(a);
var b = ["hello",3.14,false,Symbol()];
console.log(b);
var c = new Array();
c[0] = 678;
c[1] = "hello";
console.log(c);
script>
body>
html>
二维数组
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>二维数组title>
script>
var a = [[123,"hello"],[true,"world",3.14]];
for(let i = 0;i a.length;i++)
{
for(let j = 0;j a[i].length;j++)
{
console.log(a[i][j]);
}
}
console.log("-----------");
for (let s of a)
{
for (let t of s)
{
console.log(t);
}
}
console.log("-----------");
for (let i in a)
{
for (let j in a[i])
{
console.log(a[i][j]);
}
}
script>
head>
body>
body>
html>
1.2.2.1、forof 循环
格式:
for(let 元素变量名 of 数组或集合对象)
{
循环体
}
如果元素变量名前面使用了 let，则表示该变量只能在当前的 for 语句中使用，是一个块级变量，否则是全局变量。
forof 相当于 Java 中的 foreach。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>foroftitle>
head>
body>
script>
var a = new Array(123,"hello",true,6.78);
for(abc of a)
{
console.log(abc);
}
script>
body>
html>
1.2.2.2、forin 循环
格式:
for(let 下标变量名 / 索引变量名 in 数组或集合对象)
{
循环体
}
备注：
1、forin 中的下标 / 索引是 Number 类型。
2、如果下标变量名 / 索引变量名前面使用了 let，则表示该下标变量名 / 索引变量名只能在当前的 for 语句中使用，是一个块级变量，否则是全局变量。
forof 与 forin 的区别：
1、forof 小括号中 of 关键字前面是元素的变量名；而 forin 小括号中 in 关键字前面是元素的下标 / 索引。
2、forof 小括号中的关键字是 of；forin 小括号中的关键字是 in。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>foroftitle>
head>
body>
script>
var a = new Array(123,"hello",true,6.78);
for(abc of a)
{
console.log(abc);
}
console.log("--------------");
for (let i in a)
{
console.log(a[i]);
}
script>
body>
html>
1.3、值类型 (原始类型) 和引用类型:
值类型 (原始类型) 数据:
类型包含: String、Number、Boolean、Undefined、Null
内存分布：栈内存中
值类型传递的是值。
引用类型数据:
类型包含: 除值类型以外
内存分布：堆内存区
引用类型数据传递的是引用地址，和 java 中一样。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>datatypetitle>
head>
body>
script>
var a = new Array(123,"hello");
var b = 123;
var c = b;
var d = a;
c = 678;
d[0] = "world";
console.log("a =",a);
console.log("b =",b);
console.log("c =",c);
console.log("d =",d);
var abc = 123;
console.log("abc---",typeof abc);
abc = "hello";
console.log("abc===",typeof abc);
abc = true;
console.log("abc***",typeof abc);
script>
body>
html>
函数
函数声明的格式：
function [函数名](形参 1,…, 形参 N)
{
函数体
}
调用:
函数名 ([实参 1, …, 实参 N]);
备注：在 JS 中实参和形参不是必须，可以传递也可以不传递。
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>函数title>
script>
function hello(a,b,c)
{
console.log("a =",a);
console.log("b =",b);
console.log("c =",c);
console.log("hello()---");
}
function hello(a,b)
{
console.log("a ---",a);
console.log("b ---",b);
console.log("hello()***");
}
function hello(a)
{
console.log("a ---",a);
console.log("hello()***");
}
function hello()
{
console.log("hello()###");
}
hello(123,"hello",true,false);
var ft = function(abc=123,haha="hello")
{
console.log("acb =",abc);
console.log("haha =",haha);
console.log("匿名函数");
}
ft(678,"world");
var world = (a,b) => {
console.log("a =",a);
console.log("b =",b);
};
world(123,678);
script>
head>
body>
body>
html>
DOM 操作
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
1.1、获取 DOM 对象
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>DOMtitle>
style>
span
{
background-color: aqua;
}
style>
head>
body>
button id="btn" onclick="dj()">按钮button>
button id="btn1">a href="">普通按钮a>button>
button id="btn2">DOM 按钮button>
div id="dv">
span>spanspan>
div>
body>
script>
var btn = document.getElementById("btn");
console.log(btn);
function dj()
{
let doc = document.getElementById("btn1").innerHTML;
console.log(doc);
}
script>
html>
JS 操作 CSS
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>JS CSS Domtitle>
head>
body>
button id="btn">点击处理 DIV 效果button>
div id="dv">divdiv>
body>
script>
let btn = document.getElementById("btn");
btn.onclick = function()
{
let dv = document.getElementById("dv");
dv.style.border = "1px solid black";
dv.style.width = "200px";
dv.style.height = "200px";
}
script>
html>
1.2、JQuery 操作 DOM
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>JS CSS Domtitle>
script src="../js/jquery-3.7.1.min.js">script>
head>
body>
button id="btn">点击处理 DIV 效果button>
div id="dv">divdiv>
body>
script>
$(function(){
$("#btn").click(function(){
$("#dv").css({"border":"1px solid black",
"background-color":"green","width":"200px"}).height("200px");
});
});
script>
html>
JSON
1.1、概念
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。
什么是 JSON？
● JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
● JSON 是轻量级的文本数据交换格式
● JSON 独立于语言 *
● JSON 具有自我描述性，更易理解
- JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
1.2、JSON 分为
JSON 对象格式:
{key1:value,…,keyN:value}
JSON 数组:
[{key1:value,…,keyN:value},…,{key1:value,…,keyN:value}]
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>JSONtitle>
head>
body>
script>
let jn = {"username":"tom","userage":21,"usersex":"男"};
console.log(jn.username);
console.log(jn.userage);
console.log(jn.usersex);
let jnarray = [{"username":"tom","userage":21,"usersex":"男"},{"username":"jim","userage":26,"usersex":"man"}];
console.log(jnarray[1].username);
console.log(jnarray[1].userage);
console.log(jnarray[1].usersex);
let jsonText = JSON.stringify(jn);
console.log(jsonText);
let jnobj = JSON.parse(jsonText);
console.log(jnobj.username);
console.log(jnobj.userage);
console.log(jnobj.usersex);
script>
body>
html>
原文地址: 一文读懂 JavaScript(JS)基础知识大全
