本文介绍Javascript的基本语法。
变量
let name = ‘kelemi’;
// 以let开头，以分号结尾
let name;
// 也可以不用初始变量值
// 变量名一般规则建议：
// 1.命名不能用保留字，比如 if
// 2.命名要有意义，比如a,b 不太好
// 3.不能以数字开头，比如 1name
// 4.不能包含空格和连字号 –
// 5.大小写敏感
let firstName = ‘chen’;
let lastName = ‘yongping’;
// 变量用的是驼峰命名，第一个单词首字小写，以后单词首字大写
常数
const interestRate = 0.3
// const表示常数，初始化后不能改变
// 如果后续再执行 interestRate = 0.5 将出错
值类型
在Javascript中，有两种类型，一种是值类型，另一种是引用类型。
// 值类型包括 String,Number,Boolean,undefined,null
let name = ‘chen’;// String类型
let age = 30; //Number类型
let isApproved = false; //Boolean类型
let firstName;
// 未初始化就是undefined类型
// 当然也可以直接赋类型 let firstName = undefined,一般很少这么声明
let selectedColor = null; //null类型用于清空值
在ES6中，还有一种类型是 Symbol。
动态类型
变量会根据赋值的不同变换类型。
console.log(typeof (name));
// 输出string
name = 30;
// 重新赋值为30
console.log(typeof (name));
// 现在类型变成了number
console.log(typeof (isApproved));
// boolean
console.log(typeof (firstName));
// 输出 undefined
console.log(typeof (selectedColor));
// 注意 null的类型是 “object”
另外，Javascript不分整数与浮点数，都是number类型。
Object（对象）
Javascript中的引用类型有三种：Object（对象），Array（数组），Function（函数）
先来看Object：
let person = {
name: ‘kelemi’,
age: 18
};
// 以上定义了一个对象，有两种方法访问点引用或方括号引用
person.name = ‘chen’;
// 用点引用方法重新赋值变成了 chen
console.log(person.name)
person[‘name’] = ‘huang’;
// 用方括号方式赋值
console.log(person.name)
//用方括号有时比较灵活，可以动态赋值
let selection = ‘name’;
person[selection] = ‘可乐米’
console.log(person.name)
Arrays（数组）
let selectColors = [‘red’, ‘blue’];
console.log(selectColors);
// 输出数组[‘red’, ‘blue’]
console.log(selectColors[0]);
// 输出 red，下标从0开始
Javascript是一种动态语言，运行时类型和长度都是可变的，比如可以直接增加一个元素：
selectColors[2] = ‘green’;
// 这样数组就变成了3个元素了。
// 各元素类型不必一样，如：
selectColors[2] = 1;
// 检查一下类型
console.log(typeof (selectColors))
// 输出类型是 object
// 类似Object，可以用点属性访问，只是这些属性未明确定义而已。如length等很多可用的属性。
console.log(selectColors.length)
Functions（函数）
function green() {
console.log(“Hello World”);
}
// 函数体大括号后面不用跟分号
green(); //调用
// 参数传递
function green(name, lastName) {
console.log(“Hello ” + name + ‘ ‘ + lastName)
}
green(‘chen’, ‘yongping’);
// 输出 Hello chen yongping
green(‘chen’);
// 输出：Hello chen undefined，只传递一个参数，另一个相当于传的是undefined
函数一般有两种作用，执行某些操作，以及计算并返回值。前面是执行一些操作，下面我们来看返回值。
function square(number) {
return number * number;
// return是保留字，返回给调用者
}
console.log(square(2))
运算符
Javascript中操作有算术运算符、赋值运算符、比较运算符、逻辑运算符、位元操作符，下面分别介绍。
算术运算符
let x = 10;
let y = 3;
console.log(x + y);//13
console.log(x – y);//7
console.log(x * y);//30
console.log(x / y);//3.3333333333333335，除
console.log(x % y);//1，余
console.log(x ** y);//1000，冥
console.log(++x);//11,先计算先显示
// console.log(x++); //10，先显示后计算
// console.log(x–);// 10
// console.log(–x);//9
赋值运算符
let x = 10;
x = x + 10;
// 等同于 x+=10;
x = x * 3
// 等同于x*=3
比较运算符
let x = 1;
console.log(x > 0);//true
console.log(x >= 1);//true
console.log(x < 1);//false
console.log(x >= 1);//true
console.log(x === 1);//true
console.log(x !== 1);//false
相等比较运算符
您是否注意到，前面比较是否相等的运算符是三个等号，这里再讲一下两个等号：==
三个等号 === 表示是绝对相等，表示类型和值都相等，比如:
console.log(1 === 1);//true
console.log(‘1’ === 1);//false
而二个等号 == 表示只要值相等即可，会将右边的转换成左边的类型，再比较值，只要相等就是 true。比如：
console.log(1 == 1);
console.log(‘1’ == 1);
console.log(true == 1);
// 前面三句均输出 true
实际开发过程中，一般用三个等号较多，确保是真的相等。
三元运算符
let point = 90;
let type = point > 100 ? “gold” : “silver”;
// 用冒号分隔，表达式为true选冒号前的，为false的话选冒号后面的
console.log(type);//输出silver,因为90没有大于100，为false
逻辑运算符
逻辑运算符包括：
- &&，表示与
- ||，表示或
- !，表示非
let x = true;
let y = true;
console.log(x || y);//true
console.log(x && y);//true
console.log(!y);//false
看个实际例子：
let highIncome = false;
let goodCreditScore = false;
let eligibleForloan = highIncome || goodCreditScore;
// 符合条件的要么是高收入，要么是征信好
console.log(‘Eligible’, eligibleForloan);
let applicationRefused = !eligibleForloan;
console.log(‘Application Refused ‘, applicationRefused)
在非布尔值中进行逻辑运算
逻辑运算的结果不一定是布尔值，取决于运算的数据
console.log(false || true); //true
console.log(false || ‘kekemi’); // 输出’kelemi’
console.log(false || 1); // 输出1
console.log(false || 1 || 2);
//输出1，这是短路现象，解释引擎看到1就返回，不管后面是什么
Javascript中有些类假 Falsy，包括：
- undefined
- null
- 0
- false
- ”
- NaN，表示不能返回数字的运算值
除了这些类假，其它都是类真。来看个实际例子：
let userColor = ‘red’;
let defaultColor = ‘blue’;
let currentColor = userColor || defaultColor;
console.log(currentColor)
// 输出 ‘red’
// 如果userColor未初始化，则会输出 ‘blue’
// 这是一个强大的功能，用户要是没有选择颜色就用默认的颜色，刚好利用类假的特性
位元运算符
位元运算符包括：
- |，表示位或
- &，表示位与
console.log(1 | 2); // 输出3，相当于 00000011
console.log(1 & 2); // 输出0，相当于 00000000
来个读写控制的例子：
// 假设：
// 读表示 00000100
// 写表示 00000010
// 执行表示 00000001
const readPermission = 4;
const writePermission = 2;
const executePermission = 1;
let myPermission = 0;
myPermission = myPermission | readPermission | writePermission;
let message =
(myPermission & readPermission) ? ‘yes’ : ‘no’;
// 判断是否有读权限
console.log(message)
运算符优先级
let x = (2 + 3) * 4
// 括号里选运算，然后冥，乘除，加减等
console.log(x)
If…else语句
Javascript中有两种条件句式：
- if…else
- switch…case
先看if…else：
let hour = 20;
if (hour >= 6 && hour < 12) {
console.log(“Good morning”);
// 只有一句也可以去掉大括号
}
else if (hour >= 12 && hour < 18)
console.log(“Good Afternoon”);
else
console.log(“Good evening”);
Switch…case语句
let role = “guest”;
switch (role) {
case ‘guest’:
console.log(‘Guest User’);
break;
// 跳出，否则后面语句还执行
case ‘modorator’:
console.log(‘Modorator User’);
break;
default:
console.log(‘Unknown user’)
}
完全可以用if…else代替，switch…case有点过时了！
For循环
循环有以下几种：
- for
- while
- For…in
- For…of
先看for:
for (i = 0; i < 5; i++) {
// for分三段，第一段是初始化，第二段是比较，第三段等完成循环就执行一下
console.log(“Hello world”)
}
While循环
let i = 0;
while (i < 5) {
if ((i % 2) !== 0)
console.log(i);
// 取奇数
i++;
}
Do…while循环
这种循环用得不多。
let i = 0;
do {
if (i % 2 !== 0)
console.log(i);
i++;
} while (i <= 5)
// 与while循环区别是Do…while至少会执行一次，哪怕不满足条件
无限循环
使用无限循环时，注意语句加上终止条件，无限循环将导致浏览器崩溃，死机等。
以下都是无限循环的例子：
for (; 😉 { }
while (1) { }
do { } while (1)
// 这些语句都有可能出现无限循环
For…in循环
用来遍历一个对象object的所有属性。也可以用在数组上，但ES6后数组有更好的方法For…of循环。
const person = {
name: “kelemi”,
age: 18
};
for (let key in person) console.log(key, person[key]);
// 用在数组上也用for…in
const colors = [‘red’, ‘green’, ‘blue’];
for (let index in colors)
console.log(index, colors[index])
// 输出：
// age 18
// 0 red
// 1 green
// 2 blue
For…of循环
用来遍历一个数组
const colors = [‘red’, ‘green’, ‘blue’];
for (let color of colors)
console.log(color)
// 输出：
// red
// green
// blue
Break和Continue
所有循环都可以用。
break：中断循环
continue: 继续循环
let i = 0;
while (i <= 10) {
// if (i === 5) break;
if (i % 2 === 0) {
i++;
continue;
}
console.log(i);
i++;
}
// 现代javascript一般不用continue，旧版可能还在用，不过太丑了。
基本语法小建议
- 一个函数结构如果类似：function(){ if(条件){ // 执行语句 } else{ // 执行语句 }}请改成更简洁的结构：function(){ if(条件){ return } // 执行语句}
- 一个函数只能做一件事，否则就拆分成更小的函数。
- 嵌套循环结构，可以将内循环提取成外部的一个函数。
小结
本文介绍了javascript的基本语法及结构，下一节将开始介绍javascript中对象的相关知识。