文章目录
环境准备
安装node
中文官网地址:https://nodejs.org/zh-cn/
下载安装即可
安装完成后,需要测试一下是否安装成功
测试方式是:
- 打开命令终端
- 输入命令
node -v
,如果可以看到版本号,即为安装成功
使用node运行js代码
- 在命令终端中进入js文件所在目录
- 运行命令
node js文件名
使用 code runner 插件
使用vscode的插件code runner
,可以更加轻松的运行js
数据的表达1
和HTML、CSS不同,JS是一门 命令式编程语言,和其他命令式编程语言一样,它的本质是处理数据
JS 提供了三种方式来表达一个数据:
- 变量
- 字面量
- 表达式
程序中任何需要数据的地方,都可以使用上面任意一种数据表达。
标识符
程序中有些可以自行命名的地方,称之为标识符
常见的标识符有:变量名、函数名、参数名
js 的标识符必须符合以下规则:
- 允许数字、字母、下划线、$符号
- 不得以数字开头
- 不能和关键字冲突
- 建议使用驼峰命名法
一个完整的程序中,会涉及成百上千的标识符,好的名称不仅可以减少名称冲突,更有利于程序的阅读和维护。
名称要做到望文知意
转义符
转义符 | 含义 |
---|---|
\' | 普通英文单引号 |
\" | 普通英文双引号 |
\r | 回车 |
\n | 换行 |
小技巧:常用
\r\n
表示换行
数据的表达2
数据类型
原始类型:number、string、boolean、null、undefined
引用类型:对象(包含普通对象、数组、函数)
对象的原始写法
对象的所有属性名都是字符串,因此使用单引号或双引号包裹起来
var obj = {
'name': '小刘',
'age': 35,
'graduate date': '2024-7-1',
'home address': {
'province': '成都',
'city': 'city'
}
};
为了书写的方便,当对象的属性名是纯数字或符合标识符规范时,可以省略引号
小贴士:
书写代码时我们无须关注这些规则,直接按照简写方式书写属性,若编辑器出现报错,则使用引号包裹属性名即可
读取对象属性时,使用[]
,把要读取的属性名传递到中括号中
obj['name'] // 读取obj的name属性
obj['home address'] // 读取obj的home address属性
obj['home address']['province'] // 这是啥意思?
若属性符合标识符规范,可以使用.
符号连接属性名
obj.name // 读取obj的name属性
obj.age // 读取obj的age属性
obj['home address'].province // 请自行脑补
数据的表达3
数组,用于表达多个同种类的数据
它的本质就是一个对象
// 数组的对象结构
{
'0': xxx,
'1': xxx,
'2': xxx,
'length': 3
}
var name='小李';
var age='20';
var gender='男';
//把上面三个数据组装成一个对象,对象属性名和变量相同
var dengBro = {
name:name,
age:age,
gender:gender,
};
console.log(liBro.name)
/*
于谦,男,职业榜眼,手机号码:13437385657,江湖人称谦哥,家住北京八大胡同。
其父亲王老爷子是古汉语专家,爱好洗澡
用字面量描述上面的数据*/
var name='于谦';
var sex='男';
var profession='职业榜眼';
var number='13437385657';
var address='北京八大胡同';
var father='父亲王老爷子是古汉语专家';
var hobby='爱好洗澡';
var invisial={
name:name,
sex:sex,
profession:profession,
nember:number,
address:address,
father:father,
hobby:hobby,
};
console.log(invisial)
/*
*打印一个对象的某个属性
* @param {object} obj 要打印的对象
* @param {string} key 要打印的对象属性名
*/
function printProperty(obj,key)
{
//完成函数
console.log(obj[key]);
}
var user={
name:'Autia',
age:'20',
sex:'女',
};
printProperty(user,'name');
printProperty(user,'age');
printProperty(user,'sex');
/*
小刘,81岁,爱好香菜,秋葵,遛鸟
小李, 28岁,爱好扯淡,找邓嫂
Autia,17岁,爱好奶茶,唱歌
用字面量描述上面的信息
思考:
1. 如何得到平均年龄
2. 如何得到所有人所有爱好的总数
*/
var sex=[81,30,17];
var hobby=['香菜,秋葵,遛鸟','扯淡,找好朋友','奶茶,唱歌'];
var sum=0;
for(var i=0;i<3;i++)
{
sum+=sex[i];
}
console.log(sum/3);
console.log(hobby);
数据的运算
运算符
算术(数学)运算
支持:加(+)、减(-)、乘(*)、除(/)、求余(%)
值得注意的是,+和-可以放到单个数据的前面,表示正负。
算术运算的表达式一定返回数字,可以利用其特点做类型转换,参考类型的隐式转换
字符串拼接
当+
的两端有一个是字符串时,不再进行算术运算,而变为字符串拼接
表达式一定返回string,可以利用其特点做类型转换,参考类型的隐式转换
赋值运算
涉及的运算符:=
+=
*=
/=
-=
%=
。
其中,a += xxx
,等效于a = a + (xxx)
,其他类似
小贴士
赋值表达式始终返回赋值结果,我们可以利用该特点完成连续赋值// 将 3 同时赋值给 a、b a = b = 3;
比较运算
涉及的运算符:==
===
!=
!==
>
>=
<
<=
小贴士
在实际开发中,没有任何理由使用==
和!=
,你可以当做这两个运算符并不存在。
应该始终使用===
和!==
来比较相等和不相等
小贴士
比较运算始终返回boolean,我们可以利用这一点来完成某些赋值// 啰嗦的代码 if(sex === '男'){ user.isMale = true; } else{ user.isMale = false; } // 简洁优雅的代码 user.isMale = sex === '男'
逻辑运算
逻辑运算会涉及到布尔判定
运算符:!
对后面的数据取反,表达式一定返回boolean。
可以利用其特点做类型转换,参考类型的隐式转换
运算符:&&
并且,真真为真,其他为假,具有短路规则。
表达式返回最后一个判定的数据
小贴士
在实际的开发中,我们可以利用短路规则简化代码// 实现功能,如果exp有值(判定为真),就输出ok // 啰嗦的代码 if(exp){ console.log(exp); } // 简洁的代码 exp && console.log(exp)
运算符:||
或者,假假为假,其他为真,具有短路规则。
表达式返回最后一个判定的数据
小贴士
在实际的开发中,我们可以利用短路规则简化代码// 实现功能,如果exp有值,就把它的值赋值给n,如果没有值,就给n赋值为默认值 1 // 啰嗦的代码 if(exp){ n = exp; } else{ n = 1; } // 简洁的代码 n = exp || 1;
运算符:? :
,格式a ? b : c
三目运算,判定a,为真时表达式返回b,否则返回c
小贴士
三目运算通常用于替代一些简单的if结构// 如果exp为真,则把1赋值给n,否则,把2赋值给n // 啰嗦的代码 if(exp){ n = 1; } else{ n = 2; } // 更简洁的代码 n = exp ? 1 : 2;
布尔判定
所有需要判断真假的地方都会使用下面的规则
数据 | 判定 |
---|---|
false null undefined 0 NaN '' | false |
剩余所有数据 | true |
类型的隐式转换
每个运算符都有自己期望的数据,比如*
期望两端都是数字
一旦数据不符合运算符的期望,js就会悄悄的对数据进行类型转换,把它转换成期望的值后进行运算。
值得注意的是,这种转换是 临时 的,并不会对原数据造成影响
小贴士
在实际的开发中,我们可以利用类型的隐式转换完成以下功能:var n = +a; // 不管a是啥,都会被转换成数字,保存到n中 var s = a + ''; // 不管a是啥,都会被转换成字符串,保存到s中 var b = !!a; // 不管a是啥,都会被转换成boolean,保存到b中
数据的运算的JS代码练习1:
/*
编写一个完美的求和函数:
1. 若有两个数据都是普通数字,求和即可
2. NAN的数据需要变为0
3. 其他类型的数据需要转换为数字
*/
function sum(a,b){
a= +a||0;
b= +b||0;
return a+b;
}
console.log(sum('NAN','12'));
数据的运算的JS代码练习1:
/*
不使用if语句,判断一个年份是否是闰年,输出是或否
闰年规则:
1. 4年一闰年,百年不闰
2. 400年必闰
上述两点满足其一即可
*/
var year=2000;
var type;
type=(year%4===0 && year%100!==0) || year%400===0?'是':'否';
console.log(type);
数据的运算的JS代码练习1:
/*
不适用if
根据身高,体重,计算健康状况
健康状况取决于BMI BMI=体重/身高平方
BMI正常值在20~25,少于偏瘦,多于偏胖
输出:正常,偏瘦,偏胖
*/
var height=178;
var weight=72;
var BMI;
BMI=weight/((height/100)*(height/100));
var result=BMI >= 20 && BMI <=25?'正常':(BMI>=25?'偏重':'偏瘦');
console.log(result);