本文探讨了JavaScript的三大组成部分，包括ECMAScript语法、DOM和BOM，讲解了变量声明、数据类型（包括基本类型和对象类型）、字符串处理、数值转换以及数据类型间的转换技巧。重点介绍了变量的使用规则和数据类型的特性。
目录
一、认识JS
Js的三大组成部分
- ECMAScript（基础语法）
- DOm（文档对象模型）
- BOM（浏览器对象模型）
引用js的三种方式
- 行内JS-----内嵌脚本一般用在JS事件中
<button onclick="执行一段JS代码">按钮</button>
比如：
<button onclick="alert('Hello World!');">按钮</button>
<button onclick="add(6);">按钮</button>- 内嵌JS------
<script>可被放置在 HTML 页面的<body>标签 或者<head>标签内部。
<script>
alert("hello world");
</script>- 外部JS------注意：引用外部 JS文件的 script 标签中间不可以写JS代码。
<script src="index.js"></script><noscript>元素
<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。在下列两种情况下，浏览器将显示包含在 <noscript> 中的内容：
-
浏览器不支持脚本；
-
浏览器对脚本的支持被关闭。
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>HTml程序执行
程序在页面中的执行顺序是从上而下执行的，但是浏览器会优先执行html标签和文字信息，将图片、视频和外部引用的资源放在后面执行。
-
JS执行过程中，浏览器会停止HTML和CSS的渲染工作，直到JS代码执行完毕，再继续执行HTML和CSS的解析。
-
一个页面中可以引入多个JS文件，这些JS文件在执行时，会按照顺序拼接在一起，运行在同一个环境内。
二、语法基础
标识符--------命名规范
所谓标识符，就是变量、函数、属性或函数参数的名称。标识符可以由一或多个下列字符组成：
-
第一个字符必须是一个字母、下划线（_）或美元符号（$）；
-
剩下的其他字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符使用驼峰大小写形式，即第一个单词的首字母小写，后面每个单词的首字母大写。
虽然这种写法并不是强制性的，但因为这种形式跟 ECMAScript 内置函数和对象的命名方式一致，所以算是最佳实践。
注意 关键字、保留字、true、false 和 null 不能作为标识符。
注释
- 单行注释
// 单行注释- 多行注释
块注释以一个斜杠和一个星号（/*）开头，以它们的反向组合（*/）结尾，如：
/* 这是多行
注释 */ 关键字与保留字
保留的关键字不能用作标识符或属性名
ECMA-262 第 6 版规定的所
有关键字如下：
break do in typeof
case else instanceof var
catch export new void
class extends return while
const finally super with
continue for switch yield
debugger function this
default if throw
delete import try 规范中也描述了一组未来的保留字，同样不能用作标识符或属性名。虽然保留字在语言中没有特定用途，但它们是保留给将来做关键字用的。
以下是 ES6 为将来保留的所有词汇。始终保留:
enum 严格模式下保留:
implements package public
interface protected static
let private 模块代码中保留:
await这些词汇不能用作标识符，但现在还可以用作对象的属性名。一般来说，最好还是不要使用关键字和保留字作为标识符和属性名，以确保兼容过去和未来的 ECMAScript 版本。
JS输出语句
- console 用于在控制台输出一行内容
console.log('hello world'); console.log(2+5); // 多个内容的打印，可以使用逗号,分隔 console.log(2, 3, 2+3, 'hello world'); - alert
用于弹出一个对话框。 alert的执行是阻塞的，一个alert在被用于点掉之前，下面的代码不会执行
alert("这是一个弹出框"); alert("这是第二个对话框"); - prompt
prompt用于弹出一个带输入框的对话框，一般用于接收用户输入的信息，返回用户输入的"字符串"。
prompt也是阻塞运行的，用户输入完毕点下确定后，其输入的值就会作为prompt的值。
var content = prompt("请输入您的姓名"); console.log(content); -
confirm confirm，用于输入获取一个布尔值。
var isSingleDog = confirm("你单身么?"); console.log(isSingleDog); - write document.write，向页面中输入内容。 document.writeln，向页面中输入内容，然后再输入一个回车
//html文档中多余的空格、回车、缩进，都会被替换为一个小空格。但是<pre>标签中的内容除外。 document.write("<pre>"); document.writeln("你好"); document.write("这二个输出的内容"); document.write("</pre>");
三、变量
变量声明
格式：var 变量名;
变量命名规范------和上面一样
var a;变量赋值
给一个变量设置具体值，需要使用赋值语句。
格式为：变量名 = 具体值或表达式;
其中 = 是赋值运算符
age = 18;变量的初始化
声明变量的同时可以直接赋值。
声明一个变量并赋值， 我们称之为变量的初始化
var age = 10;同时声明多个变量
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var age, height, name;
var age = 18, name = '张三';变量的重新赋值
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var height = 175;
height = 180;
// height 最后的值为180变量未赋值
使用未赋值的变量，打印结果为：undefined 未定义的
var wieght;
console.log(wieght); // undefined 变量未声明
使用未声明的变量，程序会报错，浏览器会抛出错误，导致程序终止，但是由于JS是解释型的脚本语言，报错之前的代码正常运行，报错时候的代码不再执行。
console.log(wieght);
注意分析错误：
-
ReferenceError 是引用错误的意思
-
wieght 是变量名
-
index.html:40 表示该报错出现在index.html的第40行
未使用var的变量
未使用var声明的变量是全局变量，不建议使用。
wieght = 100;
console.log(wieght); // 100四、数据类型
JS数据类型分类
JS中数据类型分为两大类：基本数据类型和引用数据类型
基本数据类型也叫简单数据类型、值类型，引用数据类型也叫复杂数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）。
引用数据类型：对象数据类型（Object）。
我们所说的JS数据类型有6种：
-
基本类型5种：Boolean、Number、String、Null、Undefined
-
引用类型1种：Object
这6中数据类型不包含ES6的数据类型，其中Object又包含对象(Object)、数组(Array)、函数(Function)等。
数字类型Number
Number 类型可以表示整数和小数（浮点数）
整数
var age = 18; //整数八进制数字：第一个数字为0，然后是相应的八进制数字（数值 0~7）。如果字面量中包含的数字超出了应有的范围，就会忽略前缀的零，后面的数字序列会被当成十进制数：
var num = 071; //表示十进制的57
var num2 = 079; //无效的八进制，当成79处理十六进制数字：必须让真正的数值前缀 0x（区分大小写），然后是十六进制数字（0~9 以 及 A~F）。十六进制数字中的字母大小写均可：
var num1 = 0xA; // 十六进制 10
var num2 = 0x1f; // 十六进制 31小数（浮点数）
var weight = 62.5; // 小数浮点数精确度
var a = 0.1, b = 0.2;
var c = a + b;
console.log('c=',c); // c= 0.30000000000000004解决方法：保留一位先*10取整再/10，保留两位先*100取整再/100
NaN
有一个特殊的数值叫 NaN，意思是“不是数值”（Not a Number），用于表示本来要返回数值的操作失败了（而不是抛出错误）。比如，用 0 除任意数值在其他语言中通常都会导致错误，从而中止代码执行。但在 ECMAScript 中，0、+0 或0 相除会返回 NaN：
console.log(0/0); // NaN
console.log(-0/+0); // NaN如果分子是非 0 值，分母是有符号 0 或无符号 0，则会返回 Infinity 或-Infinity：
console.log(5/0); // Infinity
console.log(5/-0); // -Infinity NaN 有几个独特的属性：
-
任何涉及 NaN 的操作始终返回 NaN（如 NaN/10），在连续多步计算时这可能是个问题。
-
NaN 不等于包括 NaN 在内的任何值。例如，下面的比较操作会返回 false：
// NaN也是JS中唯一一个不等于自身的值，判断某个值不能直接与NaN比较
console.log(NaN == NaN); // false
console.log(NaN == 2); // false 字符串类型String
var name = '张三';
var hobby = "睡觉";字符串引号嵌套
var str = '我是"好人"';
var str = "我是'好人'";转义字符
var str = '我是\'好人\'';
var str = "我是\"好人\"";| 转义字符 | 解释说明 |
|---|---|
\n | 换行符，n 是 newline 的意思 |
\\ | 斜杠 \ |
\' | ' 单引号 |
\" | ” 双引号 |
\t | tab 缩进 |
\b | 空格 ，b 是 blank 的意思 |
布尔类型Boolean
Boolean（布尔值）有两个字面值：true 和 false。true 表示真（对），而 false 表示假（错）。
var isOpen = true;
var isHot = false;未定义类型Undefined
var wieght;
console.log(wieght); // undefined
console.log(wieght == undefined); // true 典型用法是： （1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 （3）对象没有赋值的属性，该属性的值为undefined。 （4）函数没有返回值时，默认返回undefined。
空的Null
Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空对象指针，这也是给typeof 传一个 null 会返回"object"的原因：
var obj = null;null表示"没有对象"，即该处不应该有值。典型用法是： （1） 作为函数的参数，表示该函数的参数不是对象。 （2） 作为对象原型链的终点。
对象类型Object
ECMAScript 中的对象其实就是一组数据和功能的集合。对象通过 new 操作符后跟对象类型的名称来创建。开发者可以通过创建 Object 类型的实例来创建自己的对象，然后再给对象添加属性和方法。
常用的对象的类型：Object、Array、String、Date、Math、RegExp。
五、数据类型的获取typeof
-
"undefined"表示值未定义；
-
"boolean"表示值为布尔值；
-
"string"表示值为字符串；
-
"number"表示值为数值；
-
"object"表示值为对象（而不是函数）或 null； "function"表示值为函数；
var message = "some string";
var num = 22;
console.log(typeof message); // "string"
console.log(typeof(message)); // "string"
console.log(typeof true); // "boolean"
console.log(typeof num); // "number"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "null"
console.log(typeof NaN);// "number" 注意 NaN 是数字类型
// 对象：object， 数组:array，函数function 都属于对象类型
var p = {};
console.log(typeof p);//object
var arr = [1, 2, 3];
console.log(typeof arr);//object
function add() { }
console.log(typeof add);//function六、字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：var a = 2;
字符串字面量：var str = '你好！';
布尔字面量：var isOpen = true;
对象字面量：var zhangsan = { name: '张三' }
数组字面量：var arr = [2,3,6,5];七、数据类型转换
JavaScript 中一种数据类型的变量能够被转换另一种数据类型的变量，常见的转换有三种：
-
转换为数字类型
-
转换为字符串类型
-
转换为布尔类型
转为数字类型
有 3 个函数可以将非数值转换为数值：Number()、parseInt()和 parseFloat()。Number()是转型函数，可用于任何数据类型。后两个函数主要用于将字符串转换为数值。
-
Number()转换
-
布尔值，true 转换为 1，false 转换为 0。
-
数值，直接返回。
-
null，返回 0。
-
undefined，返回 NaN。
console.log(Number(true));//1 console.log(Number(false));//0 console.log(Number(12));//12 console.log(Number(null));//0 console.log(Number(undefined));//NaN console.log(Number('22'));//22 console.log(Number('22.3'));22.3 console.log(Number(''));//0 注意这个是空字符串 console.log(Number(' '));//0 注意这个是空格字符串 console.log(Number('1a'));//NaN console.log(Number('hello world'));//NaN
-
parseInt()转换
console.log(parseInt("1234blue"));//1234 console.log(parseInt(""));//NaN console.log(parseInt("22.5"));//22 console.log(parseInt("a1234blue"));//NaN -
parseFloat()转换
console.log(parseInt("1234blue"));//1234 console.log(parseInt(""));//NaN console.log(parseInt("22.5"));//22 console.log(parseInt("a1234blue"));//NaN console.log(parseFloat("22.34.5"));//22.34 -
JS隐式转换
隐式转换是我们在进行算术运算的时候，JS 自动转换了数据类型，使用运算符 - * / 可以把数字字符串（只包含数字的字符串）转为数字类型：
-
运算符
-*/可以把数字字符串转为数字类型 -
数字使用运算符
+-*/与布尔类型进行运算时，true转为1，false转为0
var res = '12';
console.log(res - 1);//11
console.log(res * 1);//12
console.log(res / 1);//12
var res = '12.5';
console.log(res - 1);//11.5
console.log(res * 1);//12.5
console.log(res / 1);//12.5
console.log(6 + true);//7
console.log(6 - true);//5
console.log(6 * true);//6
console.log(6 / true);//6
console.log('6' - true);//5
console.log('6' * true);//6
console.log('6' / true);//6
//如果是包含非数字的字符串会计算结果为NaN
var res = '12.5a';
console.log(res - 1);//NaN
console.log(res * 1);//NaN
console.log(res / 1);//NaN转换为字符串类型
转换为字符串使用 toString() 或者 String()。
toString()转换
toString()方法可见于数值、布尔值、对象和字符串值。（没错，字符串值也有 toString()方法，该方法只是简单地返回自身的一个副本。）
null 和 undefined 值没有 toString()方法。
var num = 12;
var isOpen = true;
console.log(num.toString());// '12'
console.log(isOpen.toString());// 'true'toString() 和 String() 的区别
-
大多值都有toString()方法，null和undefined是没有的
-
任何值都可以使用String()方法，如果是 null 返回值是 "null",如果是undefined 返回值是"undefined"；
var res1 = null;
var res2 = undefined;
console.log(String(res1)); // 'null'
console.log(String(res2));// 'undefined'
console.log(res1.toString());// 直接报错，无法使用 TypeError: Cannot read properties of null (reading 'toString')
console.log(res2.toString());// 直接报错，无法使用 TypeError: Cannot read properties of undefined (reading 'toString')转换为布尔类型
Boolean()转型函数可以在任意类型的数据上调用，而且始终返回一个布尔值。什么值能转换为 true或 false 的规则取决于数据类型和实际的值。
-
空的字符串、数字0、NaN、null(空)、undefined都是false，其他都为true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false理解布尔类型的转换非常重要，因为像 if 等流控制语句会自动执行其他类型值到布尔值的转换。
字符串拼接
字符串拼接：多个数据之间使用 + 可以进行字符串拼接， + 就像胶水一样，把两个字符串粘起来，字符串拼接运算的结果为字符串类型。
字符串拼接分两种类型：
-
表达式开头为字符串
-
表达式开头不为字符串
表达式：是由数字、算符、数字分组符号（括号）、自由变量等以能求得数值的有意义排列方法所得的组合。
表达式开头为字符串
字符串在 + 运算表达式的最前面，直接进行拼接，就像是把多个变量的值粘起来一样。
var a = 'hello' + '你好'; // 'hello你好'
// 字符串可以和数字直接拼接，最终转化为字符串
// 隐式转换: 2 转换为 '2'
var a = '你好' + 2 + '3' + '她好';// '你好23她好'
// 数字与字符串相加，会自动转化为字符串，变成字符串类型
// 相当于 '1' + '0.5';
var b = '1' + 1 / 2; // '10.5'
// 布尔类型与字符串相加，转化为字符串
var d = '1' + true; // '1true'
var d = '1' + false;// '1false'表达式开头不为字符串
+ 运算表达的最前面不为字符串，并且表达式中有多个 + 运算，可能会产生加法运算。
var a1 = 10, a2 = 20, a3 = true, str = 'hello';
var res = a1 + a2 + str; //'30hello'
var res = a1 + str + a2; //'10hello20'
var res = str + a1 + a2; //'hello1020'
var res = a1 + a2 + + a3 + str; //'31hello'
var res = a1 + a2 + str + a3; //'30hellotrue'
var res = a1 + str + a2 + a3; //'10hello20true'
var res = str + a1 + a2 + a3; //'truehello1020'
var res = a3 + str;//truehello字符串拼接时，我们只需要掌握表达式的运算顺序：在加号运算表达式中是从左往右运算，在运算的过程中从左到右的顺序，比如 a1 + a2 + str + a3 先计算a1+a2 得到的结果30，然后计算30+str，得到的结果30hello，再计算'30hello'+a3，最终得到 '30hellotrue'。
字符串拼接只有 + 运算
字符串拼接支持 +运算，但是不支持 - * /，数字与字符串相减、相乘、相除时最终会转化为数字
console.log( '2' - 1 / 2); //1.5
console.log( '2' * 2);//4
console.log( '2' / 2);//1
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
