基础语法

JavaScript虽然⼀些设计理念和Java相去甚远,但是在基础语法层⾯上还是有⼀些相似之处的. 有了Java的基础很容易理解JavaScript的⼀些基本语法.

变量

创建变量(变量定义/变量声明/变量初始化),JS声明变量有3种⽅式

关键字	解释	示例
var	早期JS中声明变量的关键字,作⽤域在该语句的函数内	var name='zhangsan';
let	ES6中新增的声明变量的关键字,作⽤域为该语句所在的代码块 内	let name='zhangsan';
const	声明常量的，声明后不能修改	const name='zhangsan';

注意事项:

1. JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态),⽐如:

var name = 'zhangsan';
var age = 20;

随着程序的运⾏,变量的类型可能会发⽣改变.(弱类型)

var a = 10; // 数字 
a = "hehe"; // 字符串 

Java是静态强类型语⾔,在变量声明时,需要明确定义变量的类型.如果不强制转换,类型不会发⽣变 化.

2. 变量名命名规则:

a. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）

b. 数字不能开头

c. 建议使⽤驼峰命名

3. + 表⽰字符串拼接, 也就是把两个字符串⾸尾相接变成⼀个字符串.

4. \n 表⽰换⾏

数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类 型，具体有如下类型

数据类型	描述
number	数字.不区分整数和⼩数.
string	字符串类型. 字符串字⾯值需要使⽤引号引起来,单引号双引号均可.
boolean	布尔类型.true真,false 假
undefined	表⽰变量未初始化.只有唯⼀的值undefined.

使⽤typeof函数可以返回变量的数据类型

<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>

运算符

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对象

数组

数组定义

创建数组有两种⽅式

1. 使⽤ new 关键字创建

//Array 的 A 要⼤写 
var arr = new Array();

2. 使⽤字⾯量⽅式创建 [常⽤]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素" 

注意:JS的数组不要求元素是相同类型.

这⼀点和C,C++,Java等静态类型的语⾔差别很⼤.但是Python,PHP等动态类型语⾔也是如此.

数组操作

1. 读:使⽤下标的⽅式访问数组元素(从0开始)

2. 增:通过下标新增,或者使⽤push进⾏追加元素

3. 改:通过下标修改

4. 删:使⽤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, 获取数组的⻓度 
</scirpt>

注意:

1. 如果下标超出范围读取元素,则结果为undefined

2. 不要给数组名直接赋值,此时数组中的所有元素都没了.

相当于本来arr是⼀个数组,重新赋值后变成字符串了.

var arr = ['⼩猪佩奇', '⼩猪乔治', '⼩⽺苏西'];
arr = '⼩猫凯迪';

函数

语法格式

// 创建函数/函数声明/函数定义 
function 函数名(形参列表) {
 函数体
 return 返回值;
}
// 函数调⽤ 
函数名(实参列表) // 不考虑返回值 
返回值 = 函数名(实参列表) // 考虑返回值 

• 函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.

function hello() {
 console.log("hello");
}
// 如果不调⽤函数, 则没有执⾏打印语句 
hello();

• 调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.可以借助调试器来观察.

• 函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)

// 调⽤函数 
hello();
// 定义函数 
function hello() {
 console.log("hello");
}

关于参数个数

实参和形参之间的个数可以不匹配.但是实际开发⼀般要求形参和实参个数要匹配

1. 如果实参个数⽐形参个数多,则多出的参数不参与函数运算

sum(10, 20, 30);

2. 如果实参个数⽐形参个数少,则此时多出来的形参值为undefined

sum(10);

JS的函数传参⽐较灵活,这⼀点和其他语⾔差别较⼤.事实上这种灵活性往往不是好事.

函数表达式

另外⼀种函数的定义⽅式

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() { } 这样的写法定义了⼀个匿名函数,然后将这个匿名函数⽤⼀个变量来表 ⽰.

后⾯就可以通过这个add变量来调⽤函数了.

JS中函数是⼀等公⺠,可以⽤变量保存,也可以作为其他函数的参数或者返回值.

对象

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

每个对象中包含若⼲的属性和⽅法.

• 属性:事物的特征.

• ⽅法:事物的⾏为.

JavaScript的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较⼤.

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

2. 使⽤newObject创建对象

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. 使⽤构造函数创建对象

function 构造函数名(形参) {
 this.属性 = 值;
 this.⽅法 = function...
}
var obj = new 构造函数名(实参);

注意:

• 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.

• 构造函数的函数名⾸字⺟⼀般是⼤写的.

• 构造函数的函数名可以是名词.

• 构造函数不需要return

• 创建对象的时候必须使⽤new关键字.

this相当于"我"

使⽤构造函数重新创建猫咪对象

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