JavaScript基础入门

文章目录

• JavaScript基础语法
• • 简介
  • • Javascript组成
    • 基本用法
  • 语句和注解
  • 标识符和关键字
  • • 标识符
    • 关键字
  • 变量
  • • 变量的声明
    • 变量的提升
  • 数据类型
  • 数据类型转换
  • • 自动类型转换
    • 函数转换
    • • parseInt()
      • pasefloat（识别一个小数点）
    • 显示转换
    • • toString()函数
      • toFixed()函数
      • 构造方法
      • String()方法
  • 运算符
  • 数组
  • • 数组的定义
    • 基本操作
    • 数组的遍历
    • • 普通的for循环遍历
      • [for ... in](#for ... in)
      • forEach
      • 注意
    • 数组方法
  • 函数
  • • 函数的定义
    • • 函数声明语句
      • 函数定义表达式
      • Function构造函数
    • 函数的调用
    • 函数的作用域
    • • 经典问题1
      • 经典问题2
  • 内置对象
  • • String
    • Math
    • Date
  • 对象
  • • 对象的创建
    • • 字面量形式创建（常用）
      • [通过new Object创建](#通过new Object创建)
      • 通过Object对象的create方法创建
    • 对象的序列化和反序列化
    • this
    • • 在函数中使用this
      • 在对象中使用this

JavaScript基础语法

简介

JavaScript是基于对象和时间驱动并具有相对安全性的客户端脚本语言

Javascript组成

• JavaScript的核心语法ECMAScript描述了该语言的语法和基本对象
• 文档对象模型（DOM）------ 描述了处理网页内容的方法和接口
• 浏览器对象模型（BOM）------ 描述了与浏览器进行交互的方法和接口

基本用法

• 行内JS：写在标签内部的JS代码
• 内部JS：定义在script标签中的代码（一般置于body标签后面）
• 外部JS：单独的js文件，在HTML中通过scrip标签引入

//行内JS：
<button onclick="alert('you clicked hered!!!')">click here</button>

//内部JS：
<script type="text/javascript">
	alert('this is inner js code')//弹窗
</script>

//外部JS文件：
//hello.js
alert('this is a outter js document');

//hello.html
<!-- 在需要使用js的html页面中引入 -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

语句和注解

JavaScript程序的执行单位为行（line），也就是一行一行地执行，一般情况下，每一行就是一个语句。

单行注释：//注释内容
多行注释：/* 注释内容 */
兼容html注释方式：<!--注释内容-->

标识符和关键字

标识符

//规则
由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写

//规范
（1）见名知意
（2）驼峰命名或下划线规则

关键字

关键字分类	关键字列表
变量声明	var、let、const
流程控制（条件）	if、else、switch、case、default
流程控制（循环）	for、while、do、break、continue、for...in、for...of
函数相关	function、return、arguments、this、new
异常处理	try、catch、finally、throw
类型判断 / 操作	typeof、instanceof、delete、void
其他核心关键字	null、undefined、true、false、class、extends、super、import、export、module、yield、async、await

变量

变量的声明

// 先声明再赋值
 var a ;
 a = 10;
// 声明同时赋值
 var b = 20;

• 只声明未定义------------返回undifined（不报错）
• 未声明就使用------------则报错（报错，则后面的代码不执行）
• js中单引号和双引号用处一样
• JavaScript是一种动态类型、弱类型语言，可以赋予各种类型的值

//可以在同一条var命令中声明多个变量
var a, b, c = 10;

//使用var重新声明一个已经存在的变量，是无效的
var box = 10
var box;

//使用var声明一个已经存在的变量并赋值，则覆盖原来的值
var box = 10;
var box = 25;

变量的提升

使用 var 声明的变量，其声明会被提升到作用域顶部，但赋值不会提升

console.log(a); // 输出 undefined
var a = 5;

//实际的执行顺序如下
var a;
console.log(a); 
a = 5;

数据类型

JavaScript 中有6 种数据类型，其中有五种简单的数据类型： Undefined、Null、布尔、数值、字符串 和Object

数 值（Number）： 整数和小数（比如 1 和 3.14）
//所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，而且 1 加上 1.0 得到的还是一个整数，浮点数最高精度是17位小数

字符串（String）： 字符组成的文本（比如"Hello World"）
//1）当 + 两边有一个是字符串时，执行字符串拼接；否则执行数字相加
//2）所有类型转字符串都是加引号

布尔值（Boolean）：true（真）和 false（假）两个特定值

Undefined： 表示"未定义"或不存在，即此处目前没有任何值
//1）调用函数时，该函数有形参，但未提供实参，则该参数为undefined
//2）函数没有返回值时，默认返回 undefined

Null： 表示空缺，即此处应该有一个值，但目前为空
//1）使用typeof操作符测试null返回object字符串
//2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等

对象（object）(引用) ： 各种值组成的集合
1)、对象（object）{name:"zhangsan",age:"18"}
2)、数组（array）[1,2,3]
3)、函数（function）function test() {}

数据类型转换

自动类型转换

函数转换

parseInt()

判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN

pasefloat（识别一个小数点）

从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN

显示转换

toString()函数

// 将内容转换为字符串形式
var data = 10
console.log(data.toString())
// 根据小数点后指定位数将数字转为字符串，四舍五入
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
// 不能对null和undefined使用
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())

对 null 或undefined 值强制类型转换会报错

toFixed()函数

将根据小数点后指定位数将数字转为字符串，四舍五入

var b = 12.23;
console.log(b.toFixed(0));
//toFixed填的数字为保留的小数位数，0则为取整

构造方法

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
Boolean(""); // false -- empty string
Boolean("hi"); // true -- non-empty
string
Boolean(100); // true -- non-zero
number
Boolean(null); // false - null
Boolean(0); // false - zero
Boolean(new Object()); // true -- object

String()方法

可把任何值转换成字符串

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won't work, causes anerror

对 null 或undefined 值强制类型转换可以生成字符串而不引发错误

运算符

运算符分类	运算符	说明	示例
算术运算符	+	加法或字符串拼接	2 + 3 → 5；"a" + "b" → "ab"
	-	减法	5 - 2 → 3
	*	乘法	3 * 4 → 12
	/	除法（结果为浮点数）	10 / 3 → 3.333...
	%	取模（余数）	10 % 3 → 1
	++	自增（前置：先增后用；后置：先用后增）	let a=2; a++ → 2（a 变为 3）
	--	自减（规则同自增）	let b=3; --b → 2（b 变为 2）
赋值运算符	=	基础赋值	let x = 5
	+=	加法赋值（x += y 等价于 x = x + y）	let a=2; a += 3 → a=5
	-=	减法赋值	let b=5; b -= 2 → b=3
	*=	乘法赋值	let c=3; c *= 4 → c=12
	/=	除法赋值	let d=10; d /= 2 → d=5
	%=	取模赋值	let e=10; e %= 3 → e=1
比较运算符	==	相等（宽松比较，自动类型转换）	5 == "5" → true
	===	严格相等（不转换类型，值和类型都需相同）	5 === "5" → false
	!=	不相等（宽松比较）	5 != "5" → false
	!==	严格不相等	5 !== "5" → true
	>	大于	6 > 3 → true
	<	小于	2 < 5 → true
	>=	大于等于	4 >= 4 → true
	<=	小于等于	3 <= 2 → false
逻辑运算符	&&	逻辑与（短路：左侧为假则返回左侧，否则返回右侧）	true && 5 → 5；false && 5 → false
	!	逻辑非（取反，先转布尔值）	!true → false；!0 → true
三元运算符	condition ? expr1 : expr2	条件判断：condition 为真则返回 expr1，否则返回 expr2	3 > 5 ? "yes" : "no" → "no"

数组

数组的定义

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定长度

基本操作

//数组的长度可以通过length属性来获取，并可以任意更改
数组名.length = 新长度

//数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界
数组名[下标]
数组名[下标] = 新值

数组的遍历

普通的for循环遍历

for(var i=0; i<=数组.length-1; i++){
}
//注意变量用var声明

for ... in

for(var 下标(名称任意) in 数组名){
数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
console.log(arr[idx]);
}

forEach

数组名.forEach(function(element,index){
// element(名称任意)：元素，index(名称任意)：下标
})
如：
arr.forEach(function(elem,idx){
	console.log(idx + "-->" + elem);
});

注意

数组在使用的时候建议大家规矩来用。在存放数据时，从下标0开始顺序的存放数组元素。
如果下标：
	1.为非负整数(包括整数字符串)：自动从0开始,不存在添加undefined
	2.为负数、小数、非数字符串：这些内容不计算在长度内，当成"属性"处理，相当于自定义属性。
	
数组非常灵活，使用数组元素
	1.下标: 非负整数(包括整数字符串)：
		数组[下标]
	2.下标：负数、小数、非数字字符串：
		数组[属性]
* for --> 不遍历属性
* foreach -->不遍历属性和索引中的undefined
* for in -->不遍历索引中的undefined

• 数组如果下标存在就是覆盖旧值，如果不存在就是添加新元素
• 如果定义数组长度，则未赋值的元素为undefined

数组方法

push 添加元素到最后（常用）
unshift 添加元素到最前（常用）
pop 删除最后一项（常用）
shift 删除第一项（常用）
reverse 数组翻转（常用）
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

函数

函数即方法，可以反复调用。函数也是对象

函数的定义

函数声明语句

function 函数名([参数列表]){
}
例如：
function foo(){
console.log(1);
}
foo();

// 给参数默认值
function defaultValue(a){
	a = a || "a";
	return a;
}
console.log(defaultValue());
function f(a){
//若参数a不为undefined或null，则取本身的值，否则给一个默认值
    (a !== undefined && a !== null) ? a = a : a= 1;
	return a;
}
console.log(f());

该种方式定义的函数具有声明提升的效果

foo();
function foo(){
	console.log(1);
}
// 变量声明提升
console.log( a );
var a = 2;

函数定义表达式

//直接获得返回值
var 变量名 = function ([参数列表]) {
}
变量名();
例如：
var fun = function(){
	console.log("Hello");
}
fun();

Function构造函数

var add = new Function('x','y','return (x + y)');//最后写返回值
// 等同于
function add(x, y) {
	return (x + y);
}
add();

• js中的函数没有重载，同名的函数，会被后面的函数覆盖

• 有参函数无需声明形参参数类型

• 实参可以省略，那么对应形参为undefined

• 参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象

• 可以给参数设置默认值

函数的调用

//常用调用
函数名([实参]);

//函数调用
function add(a,b){
	return a+b;
}
var sum = add(1,2);

//方法调用
var o = {
	m: function(){
		console.log(1);
	}
};
o.m();

函数的作用域

只有函数才有作用域（其他代码块没有作用域）

经典问题1

//全局变量与局部变量同名问题
var box =1; // 全局变量
function display(box){
	var box = 3; // 此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部变量
	var b = 2; // 局部变量
	console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);

经典问题2

//在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量
function fun(){
	a = 100;
}
fun();
alert(a);

函数内部定义变量，建议加上var，如果要定义全局变量，则放置在函数外部

内置对象

Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date 日期对象，用来创建和获取日期
Math 数学对象
String 字符串对象，提供对字符串的一系列操作

String

charAt(idx) 返回指定位置处的字符
indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
toLowerCase() 将字符串中的字符全部转化成小写。
toUpperCase() 将字符串中的字符全部转化成大写。
length 属性，不是方法，返回字符串的长度。

Math

Math.random() 随机数
Math.ceil() 向上取整，大于最大整数
Math.floor() 向小取整，小于最小整数String

Date

// 获取日期
◦ getFullYear() 年
◦ getMonth() 月
◦ getDate() 日
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串

注意：

• getMonth()：得到的值：0-11（1月~12月）

• setMonth()：设置值时0~11

• toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

对象

对象，就是一种无序的数据集合，由若干个"键值对"（key-value）构成。JavaScript对象满足的这种"键值对"的格式我们称为JSON格式（JSON对象）

对象的创建

字面量形式创建（常用）

var 对象名 = {};//创建一个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
	'name' : 'hello',
	age : 12,
	sayHello : function () {
	console.log("我是对象中的方法");//存放方法
},
	courses : {
		javase : 4,
		javascript : 3//最后的不加逗号
	},//存放对象
	isLike : true,
	members : [
		{name : "小红",age : 20},
		{name : "小绿",age : 22},
		{name : "小蓝",age : 27},
		{name : "小黄"}
	]
};

不加属性尾逗号

通过new Object创建

var 对象名 = new Object(); // 创建一个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

通过Object对象的create方法创建

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

对象的序列化和反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象

// 序列化对象，将对象转为字符串
JSON.stringify(object);

// 反序列化，将一个Json字符串转换为对象。
JSON.parse(jsonStr);

this

谁调用this，则指代的就是谁

在函数中使用this

在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问

function test () {
	this.x = 1;
	console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性

var x = 10;
console.log(x) // 10
	function test (){
		console.log(this.x) // 10
		this.x = 1;
		console.log(this.x) // 1
		console.log(this)
	}

test();
console.log(x); // 1
console.log(this);

在对象中使用this

在对象中的函数使用this，代表当前的上级对象

var obj = {
	name : '张三',
	age : 20,
	sayHello : function () {
		console.log(this.name)
		console.log(this)
	}
}
obj.sayHello();