目录
一、JavaScript
1.1 JavaScript简介
JavaScript (简称 JS), 是⼀个脚本语言, 解释型或即时编译型的编程语言。 虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器中。
1.2 引入方式
引入方式 | 语法描述 | 示例 |
---|---|---|
行内样式 | 直接嵌入到html元素内部 |
<input type="button" value="点我⼀下" οnclick="alert('haha')">
|
内部样式 | 定义<script>标签,写到script标签中 |
<script>
alert("haha");
</script>
|
外部样式 | 定义<script>标签,通过src属性引入外部js文件 |
<script src="hello.js"></script>
|
三种引入方式对比:
- 内部样式会出现大量的代码冗余, 不方便后期的维护,所以不常用;
- 行内样式,只适合于写简单样式。只针对某个标签生效。 缺点是不能写太复杂的js;
- 外部样式,html和js实现了完全的分离, 企业开发常用方式。
二、基础语法
2.1 变量
创建变量(变量定义/变量声明/变量初始化),js声明变量有3种方式。
关键字 | 解释 | 示例 |
---|---|---|
var |
早期JS中声明变量的关键字, 作用域在该语句的函数内
|
var name = 'zhangsan';
|
les |
ES6 中新增的声明变量的关键字, 作用域为该语句所在的代码块内
|
les name = 'zhangsan';
|
const |
声明常量的,声明后不能修改
|
const name = 'zhangsan';
|
注意:
JavaScript 是一门动态弱类型语言,变量可以存放不同类型的值(动态),比如:
var name = 'zhangsan';
var age = 20;
随着程序的运行, 变量的类型可能会发生改变。 (弱类型)
var a = 10; //数字
a = "hhh"; //字符串
2.2 数据类型
虽然js是弱数据类型的语言,但是js中也存在数据类型,js中的数据类型分为原始类型和引用类
型,具体有如下类型:
数据类型 | 描述 |
number |
数字,不区分整数和小数
|
string |
字符串类型。字符串字面值需要使用引号引起来, 单引号双引号均可
|
boolean | 布尔类型,true为真,false为假 |
undefined | 表示变量未初始化,只有唯一的值undefined |
<script>
var a = 10;
console.log(typeof a);//number
var b = 'hello';
console.log(typeof b);//string
var c = true;
console.log(typeof c);//boolean
var d;
console.log(typeof d);//undefined
var e = null;
console.log(typeof e);//null
</script>
2.3 运算符
JavaScript 中的运算符和 Java 用法基本相同。
运算符类型 | 运算符 |
---|---|
算术运算符 | + , - , * , / , % |
自增自减运算符 | ++ , -- |
赋值运算符 | = , += , -= , *= , /= , %= |
比较运算符 | < , > , <= , >= , != , !==
== 比
较相等(会进行隐式类型转换)
=== 比
较相等(不会进行隐式类型转换)
|
逻辑运算符 | && , || , ! |
位运算符 |
&
按位与
|
按位或
~
按位取反
^
按位异或
|
移位运算符 |
<<
左移
>>
有符号右移(算术右移)
>>> 无
符号右移(逻辑右移)
|
三元运算符 | 条件表达式 ? true_value : false_value |
<script>
var age = 20;
var age1 = "20";
var age2 = 20;
console.log(age == age1);//true, ⽐较值
console.log(age === age1);//false, 类型不⼀样
console.log(age == age2);//true, 值和类型都⼀样
</script>
三、JavaScript对象
3.1 数组
3.1.1 创建
创建数组有两种方式
- 使用new关键字创建
// Array 的 A 要⼤写
var arr = new Array();
- 使用字面量方式创建(常用)
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"
3.1.2 数组操作
读: 使用下标的方式访问数组元素(从 0 开始);
增: 通过下标新增, 或者使用push 进行追加元素;
改: 通过下标修改;
删: 使用 splice 方法删除元素。
<script>
var arr = [1, 2, 'haha', false];
//读取数组
console.log(arr[0]); //1
//添加数组元素
arr[4] = "add"
console.log(arr[4]);//add
console.log(arr.length);//5, 获取数组的⻓度
//修改数组元素
arr[4] = "update"
console.log(arr[4]);//update
//删除数组元素
arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元素个数是 1 个
console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
console.log(arr.length);//4, 获取数组的⻓度
</script>
注意:
- 如果下标超出范围读取元素, 则结果为 undefined;
- 不要给数组名直接赋值, 此时数组中的所有元素都没了。
3.2 函数
3.2.1 语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) //考虑返回值
函数定义并不会执行函数体内容, 必须要调用才会执行。调用几次就会执行几次。
function hello() {
console.log("hello");
}
// 如果不调⽤函数, 则没有执⾏打印语句
hello();
调用函数的时候进入函数内部执行,函数结束时回到调用位置继续执行。可以借助调试器来观察。
函数的定义和调用的先后顺序没有要求。(这一点和变量不同, 变量必须先定义再使用)
// 调⽤函数
hello();
// 定义函数
function hello() {
console.log("hello");
}
3.2.2 关于参数个数
实参和形参之间的个数可以不匹配。但是实际开发一般要求形参和实参个数要匹配。
如果实参个数比形参个数多,则多出的参数不参与函数运算。
sum(10, 20, 30); // 30
如果实参个数比形参个数少, 则此时多出来的形参值为 undefined。
sum(10); // NaN, 相当于 num2 为 undefined
3.2.3 函数表达式
另外一种函数的定义方式
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function
此时形如
function() { }
这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示。
后面就可以通过这个 add 变量来调用函数了。
3.3 对象
在 js 中, 字符串, 数值, 数组, 函数都是对象,每个对象中包含若干的属性和方法。
3.3.1 使用字面量创建对象
使用 { } 创建对象
var a = {}; // 创建了⼀个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
- 使用 { } 创建对象;
- 属性和方法使用键值对的形式来组织;
- 键值对之间使用 , 分割,最后一个属性后面的 , 可有可无;
- 键和值之间使用 : 分割;
- 方法的值是一个匿名函数。
使用对象的属性和方法:
// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()
student.sayHello();
3.3.2 使用new Object创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
使用 { } 创建的对象也可以随时使用
student.name = "
蔡徐坤
";
这样的方式来新增属性。
3.3.3 使用构造函数创建对象
function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function...
}
var obj = new 构造函数名(实参)
注意:
- 在构造函数内部使用this 关键字来表示当前正在构建的对象;
- 构造函数的函数名首字母一般是大写的;
- 构造函数的函数名可以是名词;
- 构造函数不需要 return;
- 创建对象的时候必须使用 new 关键字。
//使⽤构造函数重新创建猫咪对象
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound); // 别忘了作⽤域的链式访问规则
}
}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');
var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');
console.log(mimi);
mimi.miao();