JS介绍
JavaScript诞生于1995年,当时的主要目的是为了运行在浏览器中进行简单的表单验证。经过一系列的发展,现在的JavaScript既可以作为浏览器脚本语言,运行在浏览器进行表单验证、页面的局部更新(dom操作),浏览器的操作(bom操作);也可以作为服务器端语言,运行在node.js。
注意:在node.js中,不存在兼容性问题,因为node.js中压根就没有dom/bom,因此切记不要在node.js中执行任何dom和bom代码!!! 由于不存在兼容性问题,node.js可以大量发挥js高级标准——ES6,所以刚开始在学习基础语法的时候,更推荐大家在linux系统上的node.js环境下学习。
JS组成
组成部分 | 作用 | 提供者 | 兼容性 |
---|---|---|---|
ECMAScript5 | 核心语法(Javascript标准) | ECMA | 不存在(ES6的部分高级语法仍存在) |
DOM(Document Object Model) | 文档对象模型(用来控制html / css 的代码) | 浏览器厂商 | 存在 |
BOM(Browser Object Model) | 浏览器对象模型(用来控制浏览器的代码) | 浏览器厂商 | 存在 |
JS与Java的区别
JavaScript | Java | |
---|---|---|
数据类型 | 弱类型语言 | 强类型语言 |
定位 | 基于对象和事件驱动的脚本语言 | 完全面向对象的编程语言 |
执行方式 | 解释性语言,执行前无需编译 | 执行前必须编译为.class文件 |
联编方式 | 动态联编 | 静态联编 |
JS编译执行
在node.js中:
- 通过vi编辑 。(es5)
- 通过node.js来执行 。
在浏览器中:
- 通过vscode编辑。(es5、dom、bom)
- 内嵌式:
理论上JavaScript代码可以写在HTML文档的任意位置,建议写在< body>结束标签之前。
<body>
<script>
alert("内嵌式")
</script>
</body>
- 链式:
单独新建一个后缀名为.js的JS文件,编写好HTML文件,在< head>标签中添加< script> 标签来导入JS文件。
<script src="js文件路径地址"></script>
- 行内式:
直接写在开始标签里。
<button onclick="alert('提交成功!');">提交</button>
- 通过浏览器来执行。
注释
单行注释:
var a = 2;//单行注释
多行注释:
/*
第一行注释
第二行注释
*/
var a = 2;
变量
变量是一个值的容器,该容器的值可以随时改变。JavaScript的变量是弱类型 ,可以用来保存任何类型的数据。
弱类型语言的特点:
- 变量的数据类型在初始化的时候
- 变量的数据类型可以随时发生改变
- 类型细分不明显
变量的声明:
var
- 变量可以重复声明,体现JS弱类型语言特点:变量的数据类型可以随时变化。
var a = 2;
var a = "hello world";
- 变量声明会被提升(函数的声明也会),提升到所有代码执行之前。
console.log(a);
var a = 2;
执行这两句代码会输出undefined而不是报错。按理说应该是从上到下顺序执行,但是JS会在所有代码执行之前,进行预处理,会去寻找整个js代码中所有var的声明,并提升到所有代码执行之前。相当于以下代码:
var a;
console.log(a);
a = 2;
- var声明的变量没有局部作用域,全局变量在 JavaScript 程序的任何地方都可以访问;函数内使用 var 声明的变量只能在函数内访问,如果不使用 var 则是全局变量。
function fun(){
if(true){
var a = 3;
console.log(a); //输出:3 正常访问
}
console.log(a); //输出:3 变量a定义在函数内,函数内任意位置都可以访问
};
console.log(a); //会报错:函数外不能访问
fun();
let
let 声明的变量只在 let 命令所在的代码块{ }内有效。
{
let a = 2;
}
// 这里不能访问a变量
const
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
const GLOBAL = 10;
数据类型
基本数据类型:
JS中共有五种基本数据类型:Number,String,Boolean,Null,undefined。基本数据类型以类似键值对的形式保存在栈区。
number(数字类型)
数字有很多类型,按照数字精度可以分为整数(int),单精度(float),双精度(double ),按照数字的表示方法可以分为二进制(Binary),八进制(Octal),十进制(decimal system),十六进制(Hexadecimal)。但是在Js中,所有的数字统一使用Number来表示。(体现JS弱类型语言特点:类型细分不明显)
var a = 2;
var a = 2.1;
var a = 0X10;
var a = 010;
typeof a; //类型检测,输出"number"
String(字符串类型)
String表示由零个或者多个16位Unicode字符组成的字符序列,即字符串。通常用单引号 / 双引号 / 反引号括起来,或者结合嵌套使用。
var a = "hello world";
var a = 'hello world';
var a = `
<ul>
<li>terry</li>
<li>larry</li>
<li>tom</li>
</ul>
`; //反引号会打印出换行
var json = '{"name":"terry","age":12}';
//json字符串可以解析输出成对象,会有高亮显示
console.log(JSON.parse(json));
Boolean(布尔类型)
布尔类型,取值为true / false,通常用于条件判断。
var a = true;
var a = false;
Null(空类型)
空引用数据类型,当前变量为空对象,将来可能会保存一个对象。
var a = null;
typeof a; //输出'object'
由于null不能调用对象的任何属性和方法,所以不把null归到对象里,用typeof检测a时,输出的结果是’object’,而不是’null’。
Undefined(未定义)
未定义类型只有一个值:undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined。
var a;
var a = undefined;
引用数据类型(指针):
在JS中除了以上基本数据类型之外的其他所有类型都可以归结为引用数据类型。变量的引用地址保存在栈区,真正的值保存在堆区。
var a = {name:"terry",age:12};
var a = [18812344321,15912344321];
var a = function add(a,b){
return a + b;
};
var a = /[abc]def/i;
其他数据类型:
NaN (not a number)
var result = 10/'a'
console.log(result ); // NaN
console.log(isNaN(result)); //true
Infinity、-Infinity(无穷大)
var result = 10/0; //Infinity
var result = -10/0; //-Infinity
console.log(isFinite(result)); //false
数据类型检测
typeof
typeof "hello world" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [1,2,3,4] // 返回 "object"
typeof {name:'zevin', age:21} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof a // 返回 "undefined"
typeof null // 返回 "object"
isNaN
判断是不是数字,不是数字,即为NaN,输出true。
var a = 10/'a';
console.log(a); //输出:NaN
console.log(typeof a); //输出:number
console.log(isNaN(a)); //输出:true
isFinite
判断是不是有效的数字,无穷就属于无效的数字。
var a = 10/0;
console.log(a); //输出:Infinity
console.log(typeof a); //输出:number
console.log(isFinite(a)); //输出:false
数据类型转换
–>数字类型
通常在dom中或者是从后端拿到的数据不是纯数字类型,但是需要进行数学运算,在运算之前要先转换为数字类型。
- Number()
Number("123") // 123
Number("1.2222") // 1.2222
Number(null) // 0
Number('') // 0
Number('12asva') // NaN
Number('zevin') // NaN
- parseInt()
parseInt() 函数可以将给定的字符串(string)以指定的基数(radix)解析为整数。语法为:parseInt(string,radix)。第二个参数(radix)表示使用什么进制进行解析,当不指定第二个参数时,会默认以十进制解析字符串。当然我们可以指定二进制,八进制或者十六进制等等。
pasrseInt("123") // 123
pasrseInt("1.2222") // 1
pasrseInt(null) // NaN
pasrseInt('') // NaN
parseInt("19",10); // 19
parseInt("11",2); // 3
parseInt("17",8); // 15
parseInt("1f",16); // 31
parseInt() 函数解析string时,在遇到不能解析的字符时就返回已经解析的整数部分,如果第一个字符就不能解析,就直接返回NaN。
pasrseInt("abc123") // NaN
pasrseInt("123abc") // 123
pasrseInt(false) // NaN
- 一元加( + )运算符
+3 // 3
+true // 1
+'2' // 1
+'a' // NaN
+null // 0
+undefined // NaN
+[] // 0
+{} // NaN
- 一元减( - )运算符
-3 // -3
-true // -1
-'2' // -2
-'a' // NaN
-null // -0
-undefined // NaN
-[] // -0
-{} // NaN
–>布尔类型
- Boolean()
Boolean('zevin') // true
Boolean(-123) // true
Boolean(null) // false
- 非( ! )运算符
var a; // undefined
!a // true
!!'hello' // true
!123 // false
!null // true
- if(exp1){ }(exp1 可以是任意数据类型,因为js在执行过程中会自动将其转换为布尔类型。)
if(obj != null){ }
if(obj){ }
–>字符串类型
- String()
String(123) // '123'
String(false) // 'false'
- toString()
false.toString() // 'false'
- 加( + )算数运算符
123 + " " // '123'
如果加运算的操作数中出现了字符串,那么加运算就执行的是字符串拼接运算。所以,我们可以在其他数据类型后加上一个空的字符串,就可以把它转换成字符类型。