JavaScript的基础语法

🔎编写第一个HelloWorld

alert('hello world')

通过 3 种方式编写 hello world

• 行内式
• 内嵌式
• 外部式

行内式

<input type="button" value="点我一下试试" onclick="alert('hello world')">

内嵌式

<script> alert('hello world'); </script>

外部式

<script src="app.js"></script>

🔎注释

JavaScript 的注释分为 2 种

• 单行注释
• 多行注释

单行注释 → //

多行注释 → /* */

🔎consoloe.log()

使用 alert() 得到的效果是弹框
(alert 得到的弹框属于模态对话框 → 一旦弹出, 就会阻止用户操作界面的其他部分)

使用 console.log() 得到的效果是在控制台打印

利用consoloe.log()打印HelloWorld

console.log('hello world');

🔎基础语法

变量

变量的使用

创建变量

关键字包括 var, let 两种类型

关键字 变量名 = 初始值;

(var a = 1;)
(let a = bibubibu;)

推荐使用let作为关键字, var有不合理之处

举个栗子🌰

var a = 10;
var a = 20;
console.log(a);

针对上述代码, 变量 a 已经存在, 无法再定义
但使用var关键字只是将值进行覆盖, 不会报错

使用let

let a = 10;
let a = 20;
console.log(a);

动态类型

动态类型
程序运行过程中确定变量的类型
即一个变量的类型可以发生改变

举个栗子🌰

let a = 10;
console.log(a);
a = 'hello world';
console.log(a);

执行let a = 10;变量 a 类型为数字
执行a = 'hello world';变量 a 类型为字符串

🔎基础数据类型

JS 中内置的几种数据类型

类型	描述
number	数字(不区分整数和小数)
boolean	布尔(true → 真 / false → 假)
string	字符串
undefined	表示未定义的值
null	表示空值

🔎运算符

算术运算符

• +
• -
• *
• /
• %

复合赋值运算符

• +=
• -=
• *=
• /=
• %=

自增自减运算符

• i++ / ++i
• i-- / --i

比较运算符

• <
• >
• <=
• >=
• ==(会进行隐式类型转换)
• !=
• ===(不会进行隐式类型转换)
• !==

隐式类型转换🍭

针对不相同的类型进行比较 / 运算时, 将其尽可能的转换为相同的类型

举个栗子🌰

针对如下代码
由于其类型不同, 默认比较结果为 false
但是==触发了隐式类型转换(将其尽可能转换为相同的类型)
导致其结果为 true

let a = 10;
let b = '10';
console.log(a == b);

let c = true;
let d = 1;
console.log(c == d);

若使用===(不进行隐式类型转换), 其结果为 false

• "强类型"语言: 不太支持隐式类型转换
• "弱类型"语言: 比较支持隐式类型转换

默认强类型语言比弱类型语言好
(类型强, 即不同类型之间的区分度较高 → 编译器能做的检查工作就更多 → 代码的出错概率就更低)

逻辑运算符

• &&
• ||
• !

位运算

• &
• |
• ~
• ^

移位运算

• <<
• >>
• >>>

🔎数组

在 JS 中
数组不仅仅是传统意义上的数组
而是具有"键值对"性质的数组

创建数组

• let arr = new Array();(通过 new 创建)
• let arr = [];(直接创建)

在 JS 中, 数组的元素可以是任意类型

举个栗子🌰

let arr = [1, 'hello', true, []]

获取数组中的元素

创建一个数组let arr = ['hello', 'the', 'world'];

---

获取数组中的指定元素🍭

根据下标获取指定元素

例如

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

特殊的下标🍂

以let arr = ['hello', 'the', 'world'];为例

arr 的长度为 3

默认下标从 0 开始

在 JS 中, 存在一些特殊的下标

• > 数组长度的下标(空余位置为 empty)
• < 0 的下标(解析为键值对结构)
• 自定义的下标(解析为键值对结构)

> 数组长度的下标(空余位置为 empty)

let arr = ['hello', 'the', 'world'];
			
arr[100] = '滑稽';

console.log(arr);

< 0 的下标(解析为键值对结构)

let arr = ['hello', 'the', 'world'];
			
arr[-1] = 'Tom';
arr[-2] = 'Homo';

console.log(arr);

自定义的下标(解析为键值对结构)

let arr = ['hello', 'the', 'world'];
			
arr['name'] = 'Jack';

console.log(arr);

---

获取数组中的所有元素🍭

• 利用循环获取数组中所有元素
• 利用数组名获取数组中所有元素

利用循环获取数组中所有元素🍂

方法1

for(let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

方法2

for(let i in arr) {
	console.log(arr[i]);
}

方法3

for(let i of arr) {
	console.log(i);
}

注意区分let i in arr与let i of arr
in表示数组的下标
of表示数组的元素

运行效果

利用数组名获取数组中所有元素🍂

console.log(arr);

运行效果

添加数组中的元素

利用push添加数组中的元素

举个栗子🌰

let arr = ['hello', 'the', 'world'];

添加元素

arr.push('bibubibu');

运行效果

删除数组中的元素

利用splice删除数组中的元素

splice一共 3 个参数

• start(必需), 指定要操作的起始位置
• deleteCount(可省略), 从起始位置开始要删除的元素数量. 若省略或值大于从起始位置到数组末尾的元素数量时, 则删除从起始位置到数组末尾的所有元素
• item1, item2, ...(可省略), 要添加到数组的元素, 从起始位置添加

删除数组中的元素🍭

let arr = ['hello', 'the', 'world'];
			
// 删除
arr.splice(2, 1); // ['hello', 'the']

添加数组中的元素🍭

let arr = ['hello', 'the', 'world']; 

// 添加
arr.splice(2, 0, 'bibubibu'); // ['hello', 'the', 'bibubibu', 'world']

替换数组中的元素🍭

let arr = ['hello', 'the', 'world'];

// 替换
arr.splice(2, 1, 'bibubibu'); // ['hello', 'the', 'bibubibu']

🔎函数

语法

function 函数名(形参列表) {
	函数体
	return 返回值; // 可省略
}

举个栗子🌰

function add(x, y) {
	console.log(x + y);
	return x + y;
}

注意🍂

• 形参无需指定类型
• NaN, Not a Number
• 实参个数 < 形参个数, 多出来的形参的值为 undefined
• 实参个数 > 形参个数, 多出来的实参不参与运算

实参个数 < 形参个数🍭

function add(x, y) {
	return x + y;
}

console.log(add(10));
console.log(add('10'));

实参个数 > 形参个数🍭

function add(x, y) {
	return x + y;
}

console.log(add(10, 20, 30));
console.log(add(20, 30, 40));

实参个数较多时, 如何获取

通过 arguments 获取全部实参

每个函数都会自定义一个 arguments 变量, 是一个数组, 包含全部实参

function add() {
	let ret = 0;
	for(let x of arguments) {
		ret += x;
	}
	return ret;
}

console.log(add(10, 20, 30, 40));

函数表达式

在 JS 中, 可以像普通变量一样, 将函数赋值给某一个变量
也可以将函数作为另一个函数的参数, 或者把函数作为另一个函数的返回值
(这个特性, 将函数在 JS 中称为"一等公民")

将函数赋值给某一变量🍭

// 函数表达式
let add = function() {
		let ret = 0;
		for(let x of arguments) {
			ret += x;
		}
		return ret;
}

// 执行函数表达式
console.log(add(10, 20));
// 变量的类型
console.log(typeof(add));

将函数作为另一个函数的返回值🍭

function f2() {
	console.log("执行 f2() ");
	return 10;
}

function f1() {
	return f2;
}

let fun = f1();
console.log(fun());

变量的作用域

观察如下代码🍭

let num = 1;
			
function test1() {
	let num = 2;
	
	function test2() {
		let num = 3;
		console.log("test2: " + num);
	}
	
	test2();
	console.log("test1: " + num);
}

test1();
console.log("global: " + num);

运行结果🍭

结果分析🍭

在 JS 中
会先寻找当前函数作用域, 如果当前没有, 就去寻找上层函数作用域…, 一直找到全局作用域
如果全局作用域也没有, 就会报错 / undefined

🔎对象

对象是指一个具体的事物

在 JS 中, 字符串, 数值, 数组, 函数…都是对象

每个对象包含若干的属性和方法

对比 JS 中的对象与 Java 中的对象🍂

• JS 中的对象没有类的概念
• JS 中的对象没有 Private / Public 等修饰符
• JS 中的对象没有继承
• JS 中的对象没有多态

使用{ }创建对象

let student = {
	name: 'cxk',
	age: 25,
	height: 185,
	weight: 70,
	sing: function() {
		console.log('鸡你太美');
	},
	dance: function() {
		console.log('铁山靠');
	}
};

使用 new Object 创建对象

let student = new Object();
student.name = 'cxk';
student.age = 25;
student.height = 185;
student.weight = 70;
student.sing = function() {
	console.log('鸡你太美');
}
student.dance = function() {
	console.log('铁山靠');
}

注意🍭

使用 { } 创建对象也可以利用 student.age = 18 这样的方式添加属性

🔎结尾

创作不易,如果对您有帮助,希望您能点个免费的赞👍
大家有什么不太理解的，可以私信或者评论区留言，一起加油