avaScript 系列博客（一） 前言 本系列博客为记录学习 JavaScript 的学习笔记，会从基础开始慢慢探索 js。今天的学习笔记主要为 js 引入、定义变量以及 JavaScript 中数据类型和数据类型之间的转换。 引入 JavaScript 什么是JavaScript 语言？ JavaScript 是一种轻量级的脚本语言。所谓的‘’脚本语言‘’，指的是它不具备开发操作系统的能力，而是只用来编写相关应用程序的‘’脚本‘’，使用场景最多的是浏览器中。 JavaScript 也是一种嵌入式语言。本身的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O相关的接口，都要靠宿主环境提供，所以 JavaScript 只适合嵌入更大型的应用程序环境，去调用宿主环境提供的接口。比如和浏览器的交互。 从语法角度看，JavaScript 语言是一种‘’对象模型‘’语言（Object Models）。各种宿主环境通过这个模型，描述自己的功能和操作接口，还支持其他编程范式（比如函数式编程）。 JavaScript 的核心语法非常精简，只包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（一系列的具体对象类型，比如 Array、Date 等）。除此之外，各种宿主环境提供额外的接口（即只能在该环境使用的接口），以便 JavaScript 调用。以浏览器为例，他提供个额外接口分为三大类。 浏览器控制类：操作浏览器 DOM 类：操作网页的各种元素 Web 类：实现互联网的各种功能 如果宿主环境是服务器，则会提供各种操作系统的接口，比如文件操作接口，网络通信接口等。 JavaScript 与 Java的关系 其实我很早就知道 JavaScript 和 Java 了，开始也很纳闷它们之间的关系，这里详细介绍一下。 JavaScript 的基本语法和对象体系，是模仿 Java 设计的。但是JavaScript 没有采用 Java 的静态 类型。正是因为 JavaScript与 Java 有很大的相似性，所以这门语言从一开始的 LiveScript 改名为 JavaScript。基本上，JavaScript 这个名字的原意是‘’很像 Java的脚本语言‘’。 JavaScript 语言的函数是一种独立的数据类型，以及采用基于原型对象的继承链。这是它与 Java 语法最大的两点区别。JavaScript 语法比 Java 要自由的多。（约束少了，问题也会多起来）。 除此之外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释器直接执行。 JavaScript 与 ECMAScript 的关系 1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为JScript（JavaScript 是 Netscape 的注册商标，微软不能用），首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。 1996年11月，Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗微软。ECMA 的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。 1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。这个版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由于商标的关系，Java 是 Sun 公司的商标，根据一份授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 已经被 Netscape 公司注册为商标，另一方面也是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。 ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是由 W3C组织（World Wide Web Consortium）制定的。 ECMA-262 标准后来也被另一个国际标准化组织 ISO（International Organization for Standardization）批准，标准号是 ISO-16262。 在 HTML 中引入 js 在之前学习 css 中有三种引入 css 的方式，那么也有三种引入 js 的方式。 行间式 特点： 行间式代码块书写在一个个全局事件名属性中，没有 script 这样的一个全局属性； 在某一个标签的某一个事件属性值中，出现的 this 代表该标签； 该标签对象 this 可以访问该标签的任意全局属性。 内联式 特点： 可以通过标签的 id（唯一标识），在 js 代码块中访问到该标签（js 选择器）； js 代码块中语法采用的是小驼峰命名法，属性的值都是用字符串形式进行复制； js 属于解释型语言，加载顺序会影响执行结构。 外联式 特点： 通过 script 标签的 src 数据连接外部 js 文件； 使用外联的 script（拥有 src 属性）标签，会屏蔽掉标签内部的 js 代码块； 在 js 的任意地方，均有 this对象，this 对象不指向任何标签时，指向的是 window 对象。 在 js 中定义变量 四种定义变量的方式 语法: 关键词 变量名 = 变量值 num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用 var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问 let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问 const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量 /* 产生块级作用域的方式 { 直接书写 } if语句可以产生 while语句可以产生 for语句也可以产生 */ // 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问 // ES5 | ES6 // 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法 命名规范 // 命名规范 // 变量命名规范 // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑) // 可以以什么开头: 字母, _, $, 中文 // 不能出现什么: 关键字, 保留字 // 提倡什么书写规范: 小驼峰, 支持_连接语法 好的 = "真好"; console.log(好的); 数据类型 值类型 number 类型 var num = 10; // 类型, 值 console.log(typeof(num), num) // 判断方式 console.log(typeof num == 'number'); num = 3.14; console.log(typeof(num), num); string类型 var str = '单引号字符串'; console.log(typeof(str), str); str = "双引号字符串"; console.log(typeof(str), str); boolean 类型 var res = true; console.log(typeof(res), res); res = false; console.log(typeof(res), res); undefined 类型 console.log(typeof(abc), abc); var abc = undefined; console.log(typeof(abc), abc); 引用类型 function 类型 var fn = function (a, b) { return a + b; }; console.log(typeof(fn), fn); object 类型（类字典方式来使用） var obj = { name: 'egon', age: 78 }; console.log(typeof(obj), obj); console.log(obj instanceof Object); 其他形式对象 null 类型 var xyz = null; console.log(typeof(xyz), xyz); // object null console.log(xyz instanceof Object); // false => Null类型 具体的对象类型 Array 类型 var a = new Array(1, 2, 3, 4, 5); console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Array); Date 类型 var a = new Date(); console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Date); RegExp 类型 var a = new RegExp('a'); a = /[abc]/; console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof RegExp) // 使用正则 console.log('abc'.match(a)) 数据类型之间的转换 number 与 boolean 类型 // boolean类型的true就是数字1, false就是数字0 console.log((true + true) * 10 * false) // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用 string,boolean 转换为 number var a = '10'; // => 10 a = '3.14'; // => 3.14 a = '3.14.15'; // => NaN var b = true; var n1 = Number(a); console.log(n1) var n2 = Number(b); console.log(n2) a = '3.14.15'; // 3.14 a = 'a3.14'; // NaN console.log(parseFloat(a)); a = '3.94.15'; // 3 console.log(parseInt(a)); // 体现弱语言类型 a = '10'; var res = +a; // number 10 console.log(typeof(res), res) number,string 转换为 boolean // 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型 // 不在判断中, 如何转换 console.log(Boolean("")); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean("1")); console.log(Boolean(-100)); number,boolean 转换为 string console.log(String(true)); console.log(String(1)); var a = 123; console.log(a.toString()); console.log(123..toString()); console.log(3.14.toString()); var c = 123 + ""; console.log(typeof c, c); // 用例 var z1 = 2 + +"5"; // 7 z1 = 2 + "5"; // "25" // z1 = 2 ++"5"; // 语法错误 ++连在一起是 ++语法(了解) var z2 = "5" - 2; // 3 console.log(z1, z2); // 补充 // NaN与NaN不相等 总结 一.JS三个组成部分 ES: ECMAScript语法 DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互 BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互 二.引入方式 行间式 出现在标签中的全局事件属性中 this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red") 内联式 出现在script脚本标签中 可以通过标签的id唯一标识,在js代码块中操作页面标签 js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行) 外联式 通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽 在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象 js具体出现的位置 head标签的底部: 依赖性js库 body标签的底部(body与html结束标签的之间): 功能性js脚本 三.变量的定义 四种定义变量的方式 语法: 关键词 变量名 = 变量值 num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用 var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问 let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问 const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量 /* 产生块级作用域的方式 { 直接书写 } if语句可以产生 while语句可以产生 for语句也可以产生 */ // 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问 // ES5 | ES6 // 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法 // 命名规范 // 变量命名规范 // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑) // 可以以什么开头: 字母, _, $, 中文 // 不能出现什么: 关键字, 保留字 // 提倡什么书写规范: 小驼峰, 支持_连接语法 好的 = "真好"; console.log(好的); 四.三种弹出框 // 普通弹出框 // alert("你丫真帅!!!"); // 输入框: 以字符串形式接收用户输入内容 // var info = prompt("请输入内容:"); // console.log(info) // 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果 // var res = confirm("你是猪吗?"); // console.log(res) 五.数据类型 // 值类型 var a = 10; // Number 10 var a = 'abc'; // String abc var a = true; // Boolean true var a = undefined // undefined undefined // 引用类型 var a = function(){} // function f(){} var a = {} // Object {} var a = null // Null null // 其他Object具体体现 Array | Date | RegExp 六.值类型的类型转换 // 1.通过类型声明转换 Number() | String() | Boolean() // 2.方法(函数) parseInt('10') | parseFloat('3.14') 123..toString() // 3.隐式转换 +'10' => 10 '' + 10 => '10'https://www.cnblogs.com/zuanzuan/p/10134041.html