前端小入门——JavaScript

目录

一、JavaScript

1.1 JavaScript简介

1.2 引入方式

二、基础语法

2.1 变量

2.2 数据类型 

2.3 运算符

三、JavaScript对象

3.1 数组

3.1.1 创建

3.1.2 数组操作

3.2 函数

3.2.1 语法格式

3.2.2 关于参数个数

3.2.3 函数表达式

3.3 对象

3.3.1 使用字面量创建对象

3.3.2 使用new Object创建对象

3.3.3 使用构造函数创建对象

---

一、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();