【Javascript的基本知识——环境准备和数据的表达及运算】

环境准备

安装node

中文官网地址：https://nodejs.org/zh-cn/

下载安装即可

安装完成后，需要测试一下是否安装成功

测试方式是：

1. 打开命令终端
2. 输入命令 node -v，如果可以看到版本号，即为安装成功

使用node运行js代码

1. 在命令终端中进入js文件所在目录
2. 运行命令 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);