这篇博客是作者作为初学者的学习笔记，介绍了JavaScript的基础知识，包括语言的执行环境、变量、常量、数据类型、运算符、逻辑结构、函数、对象等内容。作者通过实例演示了如何搭建开发环境、声明变量、创建函数以及理解数据类型的转换。此外，还涉及到了JavaScript在客户端和服务器端的运行环境差异，以及Node.js的安装和验证。
这是我的第一篇博客，俗话说好记性不如烂笔头，记下来就可以多学习！
笔者也是一个初学者，这算是我的一个学习笔记，还希望路过的有人多多指评，共同学习。
这篇博客是我对js的基础认识，是学习一门语言的必备过程
- 了解语言的背景，历史，特点，应用领域，现状
- 搭建开发环境，编写 hello world
- 声明变量和常量
- 数据类型
- 运算符
- 逻辑结构
- 函数、对象
1、JS的执行环境
(1)运行在客户端，使用浏览器所自带的JavaScript解释器。本身由于浏览器过多，存在兼容性问题。
(2)运行在服务器端，使用NodeJS解释器，基于谷歌的V8引擎。在服务器端不存在兼容性。
2、Nodejs下载
https://nodejs.org 下载 10.16.0LTS
查看nodejs是否安装成功
node -v
显示所安装的nodeJS版本号
练习：
创建02.js，打印个人的姓名，使用nodejs运行，查看结果。
console.log("吉米");//js文件
以下是在HTML中运行js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>运行JS文件</title>
<script src="js/outname.js"></script>
</head>
<body>
</body>
</html>
运行结果，打开浏览器输入HTML地址，按F12打开控制台，查看结果：
3、语法规范
(1)区分大小写
(2)每一行结束，可以不加英文的分号结束，习惯上加上分号。
(3)分为单行注释( //… )，和多行注释( /…/ )
4.变量
变量是用于存储信息的容器
(1)变量的声明
var x = 1;
var是声明变量的关键字；
x是变量的名称
x=1表示把1赋值给变量x
说明：如果声明了一个变量，没有赋值，默认是undefined。
(2)变量的命名规范
可以放字母、数字、下划线(_)、美元符号($)
不能以数字开头
不能使用关键字和保留字作为变量名
保留字(class、int、float)
变量名称习惯上有明确的语义，例如用户名 userName，密码userPwd，命名分为驼峰命名法和下划线命名法。
练习：
使用变量来存储员工的信息，声明员工的编号，姓名，性别，生日，工资，并初始化具体的信息
var No = 001;//员工编号
var name = "吉米";//员工姓名
var sex = 1;//员工性别，1为男性，0为女性
var birthday ="1998/05/05";//员工生日
var wage = 2000;//员工工资
5.常量
常量就是不能改变的值。
使用 const关键字来声明
习惯上常量名称使用大写 const PI=3.14;
6.数据类型
JS分为原始类型和引用类型
(1)原始类型
分为数值型、字符串型、布尔型、未定义型(undefined)、null
数值型又分为整数和浮点数
1)整数型
分为八进制(以0开头->010)，十进制，十六进制(以0X开头->0XF)
注意：此处的“0”是数字0
2)浮点型
使用小数点记录的数据，还可以使用指数记录的数据
例如：1.2 3.4 1.888e3
练习:
计算圆的周长和面积：
把半径值5使用变量存储，把圆周率使用常量存储。
最后打印周长和面积。
js代码：
var r = 5;
const PI = 3.1415;
console.log("周长为："+2*PI*r);
console.log("面积为："+PI*r*r);
运行结果：
3)布尔型
在程序中表示真或者假的结果
取值 true/false
常用语表示是否的结果
例如：是否登录，是否注册，是否是会员…
4)未定义型
只有一个值 undefined
当声明一个变量，未赋值，此时变量的值为undefined
5)null
在js中，null表示空，常用于释放一个对象。
关于引用数据类型笔者这里引用了网友“暖暖的风儿”的一篇文章——《JS基本数据类型和引用数据类型的区别及深浅拷贝》我觉得值得学习
链接：js基本数据类型和引用类型的区别及深浅拷贝
（2）检测数据类型
typeof( 参数 ) 参数表示要检测的数据
结果有number(数值型)，string(字符串型)，boolean(布尔型)，undefined(未定义型)
（3）数据类型转换
1)隐式转换
①数字 + 字符串：数字会被转成字符串
10 + ‘kb’ //‘10kb’
②数字 + 布尔值：布尔值会被转换数字 true->1/false->0
1 + true //2
③布尔值 + 布尔值：布尔值会被转成数字 true->1/false->0
true + false //1
④布尔值 + 字符串：布尔值会被转成字符串
true + ‘abc’ //‘trueabc’
练习：查看输出结果
var num1=3, num2=‘st’, num3 = true;
console.log(num1+num2+num3); //‘3sttrue’
console.log(num2+num3+num1); //‘sttrue3’
console.log(num3+num2+num1); //‘truest3’
console.log(num1+num3+num2); //‘4st’
结果：
2)强制转换
①强制转换成整型
parseInt()
parseInt(‘23.55t’); // 23
从第一位开始找数字，遇到非数字或者小数点，结束，如果第一位是非数字，返回NaN
NaN --> Not a Number 不是一个数字
练习： 转换15a.8 hello1 1hello
②强制转换成浮点型
parseFloat()
parseFloat(‘23.55t’) //23.55
从第一位开始找数字，遇到数字继续往后找，遇到小数点继续往后找，知道遇到非数字就会终止。如果第一位是非数字返回NaN
③转换成数值型
Number()
Number(‘23.55t’) //NaN
Number(‘23.55’) //23.55
如果被转换的值中有非数字，则结果为NaN
④转换成字符串型
toString()
20.toString() // ‘20’
toString可以将数值型和布尔型的值转换为字符串类型。
7、运算符和表达式
由运算符连接的操作的数据，这种形式就成为表达式。
(1)算术运算符
+ - * / % ++ –
% 取余
++ 自增，在原来的基础之上加1
– 自减，在原来的基础之上减1
console.log(num++); //先打印num的值，然后再执行加1
console.log(++num); //先执行加1，然后再打印num的值
练习：
var a = 1;
console.log(a++ + ++a); //a=3
console.log(a++ + ++a + a++)；//a=7
(2)比较(关系)运算符
> >= < <= == != ===(全等于) !==(不全等于)
产生的结果是一个布尔型的值(true / false)
等于(==)：比较值是否相同
全等于(===)：比较值和类型是否相同，两个都满足结果是true
‘3’ > 10 //false
比较运算符的两端，只有有一个是数值型，另外一个隐式转换为数值型
‘3’ > ‘10’ //true
比较运算符的两端，如果都是字符串，比较的是Unicode码值
练习：比较两个中文的大小
‘张三丰’ > ‘张无忌’
//三 -> 19977 无 -> 26080
如果第一个字符相同，则继续比较第二个字符。
‘3m’ > 10
字符串3m会隐式转换为数值型，使用的是Number，结果NaN;
NaN和任何的值比较，结果都是false，即使和自身比较也是false。
(3)逻辑运算符
&& 并且 | | 或者 ! 非
&& 两个条件都满足结果是true
| | 两个条件至少满足其一结果是true
! 反向，逆向；非真为假，非假为真
逻辑中断(短路逻辑)
&& 如果第一个条件为false，整个的结果就是false，第二个条件也没有继续执行的必要了
| | 如果第一个条件为true，整个的结果就是true，第二个条件也没有继续执行的必要了
练习：
var a = 1,b=2;
a>3 && (a=5);
b<5 | | (b=4);
//a结果是1 b结果是2
(4)位运算符(了解)
1 10 11 100 101 110 111 1000 1001 1010 1011
1100 1101
在执行位运算的时候，十进制的值会转成二进制。
按位与(&) 上下两位都是1，结果才是1，否则是0
按位或( | ) 上下两位只要有一个1，结果就是1，否则是0
按位异或(^) 上下两位相同是0，不同是1
按位右移(>>) 删除最后的几位， 例如 3>>1 结果1，数字变小
按位左移(<<) 在末尾添加0，例如3<<1 结果6，数字变大
练习： 10>>2 ->2 5^8 ->13
(5)赋值运算符
= +=(在原来基础之上加) -= *= /= %=
声明一个变量 var year = 2014;
判断年份是否为闰年？
4年一闰(能被4整除)，100年不闰(能被100整除)，400年再闰(又能被400整除)
&& | |
代码：
var year = 2014;
if((year%4==0&&year%100==0)||(year%400==0)){
console.log("闰年！");
}
else{
console.log("不是闰年！");
}
结果：
8、逻辑结构
程序三种执行方式：顺序执行，选择执行，循环执行。
选择执行：
if(逻辑表达式) { 语句; }
逻辑表达式可以直接写true和false，
undefined，null，0，’’，NaN
if(逻辑表达式) { 语句1; } else{ 语句2; }
逻辑表达式 ? 语句1 : 语句2
if(逻辑表达式1){语句1;}else if(逻辑表达式2){语句2;}…else{ }
switch(表达式){
case 1:
语句1;
break;
…
default:
语句n;
}
while(循环的条件){ //循环体 }
（1）循环中的break
用于终止循环，出现break之后，循环到此结束。
练习：
使用弹出提示框完成猜数字游戏；
游戏规则：初始化一个数字(var num=10)，循环(无限循环)弹出提示框，如果输入的数字大，提示’big’，如果输入的数字小，提示’small’，否则提示’right’，结束循环(break)
提示使用弹出警示窗口 alert()
js代码：
var x = 25;
alert("开始提示，出现此界面为程序开始！")
while(1){
var a = prompt();
var b = parseInt(a);
if(b>x){
alert("输入数偏大！");
}
else if(b<x){
alert("输入数偏小！");
}
else if(b==x){
alert("正确！");
break;
}
else{
alert("请输入正确信息！")
}
}
（2）do…while循环
do{
//循环体
}while(循环条件)
执行过程：
执行循环体，判断循环条件是否为true，如果为true，继续执行循环体，如果为false，终止循环。
while和do-while的区别
①while先判断再执行
②do-while 先执行一次，然后再判断
③如果条件为false的时候，while立即终止，而do-while会执行一次然后终止。
练习：
输入密码，先输入完密码之后，才能进行判断是否正确。
使用弹出提示框，输入密码，如果输入的正确，结束循环，否则继续弹出提示框。
初始化密码，无限循环弹出提示框，直到输入正确的密码结束循环。
（3）for循环
for(表达式1;表达式2;表达式3){
//循环体
}
表达式1：循环的初始值，例如 i=0;
表达式2：循环的条件，例如i<10
表达式3：循环的变化(自增，自减)，例如i++
练习1：计算1~100之间所有奇数的和？//判断奇数：i%2取余为1
js代码：
var sum = 0;
for(var i = 1;i<=100;i++){
if(i%2!=0){
sum+=i;
}
}
alert("100以内奇数和为："+sum);
运行结果：
练习2：计算1~100之间所有能被7整除，并且是奇数的和。
运行结果：
js代码：
var sum = 0;
for(var i = 1;i<=100;i++){
if(i%2!=0&&i%7==0){
sum+=i;
}
}
alert("100的奇数且能被7整除的和为："+sum);
（4）break和continue在循环中的应用
break 结束整个循环，break后的语句也不能被执行。
continue 结束这一次的循环，还执行自增或者自减
（5）循环嵌套
while，do-while，for之间可以相互嵌套。
8、函数
（1）函数
分为两种
一种是js提供的，例如typeof()、 parseInt()、parseFloat()、alert()…；这些事可以直接使用的。
另一种是自定义函数(function)，也称为方法(method)；
自定义函数是一段已经预定义好的代码块，并且可以反复执行。
（2）定义函数和使用函数
1)普通函数的声明和调用
声明
function 函数名称( ){ //和声明变量规则一致
//函数体 —— 要重复执行的代码
}
调用
函数名称( )
函数只是声明，里边的代码不执行。只要调用函数才会执行函数体中的代码。
练习：声明一个函数calc，在函数体中实现两个数字相加，并打印结果。
js代码：
function calc(){
var x1=6,x2=7;
return x1+x2;
}
alert(calc());
2)带有参数的函数声明和调用
声明
function 函数名称(参数列表){
//函数体
}
调用
函数名称(参数列表)
参数列表：可以声明0个或者多个，多个之间用逗号隔开；声明时的参数称为“形参”，调用时的参数称为“实参”；
形参只是负责占位，在调用的时候，实参的值会赋给形参
练习：声明函数calc，传递两个参数，计算相加并打印最终的结果。
var a = 6,b =7;
function calc(x1,x2){
return x1+x2;
}
alert(calc(a,b));
3)带有返回值的函数的声明和调用
声明
function 函数名称(参数列表){
//函数体
return 值;
}
调用
函数名称(参数列表)
说明：
①函数中没有添加return，返回结果是undefined；
②函数有return，如果return后的值为空，返回结果是undefined
③return后的所有语句都不能被执行到，return就是函数结束。
练习1：声明函数getMax，传递两个参数，计算两个参数的大小，返回最大值。
function getMax(x1,x2){
if(x1>x2){
return x1;
}else{
return x2;
}
}
练习2：声明函数getMax，传递3个参数，返回最大值。
function getMax(x1,x2,x3){
var max = x1;
if(x1<x2){
max = x2;
}
if(max<x3){
max = x3
}
return max;
}
（3）变量的作用域
变量的作用域指变量的可访问范围。
分为全局作用域和局部(函数)作用域
全局作用域下的变量可以在任何位置访问到
局部作用域下的变量只能在局部(函数内部)访问到
注意：函数内部声明的变量没有使用var关键字，声明的变量就成为全局变量。
变量提升
js程序在执行前，声明的变量都会加载到程序的最前边(只是提升声明)，但是赋值还是在原来的位置。函数内部也存在变量的提升。
（4）函数作用域
函数和变量相同，也分为全局作用域和局部作用域。
局部(函数)作用域下声明的函数，只能在函数的内部访问。
全局作用域下声明的函数，可以在任何的位置访问
在程序执行前，声明的函数会提升到程序的最前边。
（5）递归
在函数的内部，调用自身。
练习：
声明函数getSum，使用递归(函数)，来获取前n项的和
function getSum(n){
var sum=0;
if(n!=0){
sum = n+getSum(n-1);
}
return sum;
}
（6）函数内部访问函数名
arguments.callee 是在函数的内部使用，自动会访问当前的函数名称。
（7）声明函数的方式
除了之前所说的函数声明方式，还可以使用匿名函数的方式
声明
var 变量名称 = function(形参列表){
//函数体
}
调用
变量名称(实参列表)
注意：使用匿名函数的方式不存在函数提升，因为函数名称使用变量表示的，只存在变量提升。
（8）回调函数
匿名函数以实参形式传递，这种写法就叫回调函数。
getSum( function(){ return 1; } );
匿名函数自调用
(function(){
//函数体
})();
（9）全局函数
encodeURI 对一个URI进行编码(针对于里边的中文)
decodeURI 对已经编码的URI进行解码
isNaN 检测一个值是否为NaN，是返回true，不是返回false
isFinite 检测一个值是否为有限值，是返回true，不是返回false
1/0 = infinity(无限值)
parseInt 转换为整型
parseFloat 转换为浮点型
eval 执行 字符串表达式的值
练习：
使用弹出提示框，输入任意的数学计算，例如“2+35/68-13”,使用eval来执行这个字符串。
var str = prompt();
alert(eval(str));
9、对象
js中的数据类型：原始数据类型和引用数据类型
引用数据类型：对象、函数
对象如何定义？
任何事物只要有属性，有功能都可以称为对象。
电脑：大小，颜色，品牌，配置…；玩游戏，看视频，写代码，办公，作图…
杯子：形状，颜色，品牌…;装水，喝水，保温，打人…
手机：颜色，品牌，大小，系统… 打电话，玩游戏，看视频，听歌，学习…
—— 万物皆对象
对象：具体到某一个事物。
JS中的对象是一组属性和方法(method)的集合。
JS中的分为内置对象(原生对象)，宿主对象，自定义对象
(1)自定义对象
对象直接量
内置构造函数
使用自定义构造函数
（2）使用对象直接量创建对象
①使用大括号创建对象 { }
②多个属性之间用逗号隔开
③属性名和属性值之间用冒号隔开
④如果对象中出现了空格，-，属性名必须添加引号，其它的情况引号可加可不加
练习：创建一本书对象，包含的属性有书名bname，作者author，出版社publish，页码page，出版时间pub-time。
var book = {
bname:"钢铁是怎样炼成的",
author:"尼古拉·阿列克谢耶维奇·奥斯特洛夫斯基",
publish:"",
time:""
}
alert(book.bname);//调用对象的属性名，输出
对象中属性的访问
对象.属性名 book.bname
对象[‘属性名’] book[‘bname’]
属性名使用了引号，访问形式只能使用中括号形式。
添加或者修改对象的属性
对象.属性名=属性值 对象[‘属性名’]=属性值
（3）使用内置构造函数
var o = new Object();
需要单独添加属性，为了便于使用这种方式 —— 工厂函数
练习：创建多个电脑对象 品牌brand，大小size，颜色color，要求使用工厂函数。
（4）遍历属性
遍历：获取所有的属性及其对应的属性值
for(var key in 对象){
//key表示要遍历的所有属性
//如果要获取属性值只能使用 —— 对象[key]
}
注意：只能遍历自定义的属性，不能遍历预定义的属性。
练习：创建一个汽车对象(品牌brand，类型type，颜色color，产地country)，使用for-in遍历对象。
var car = {
brand:"奔驰",
size:"2m",
color:"红色",
country:"德国"
}
for( var key in car){
alert(key);//输出的是属性的名字，不是值
}
（5）对象中的方法
var person = {
name: ‘tom’, //成员属性
say: function(){ } //成员方法
}
成员方法的调用 person.say()
成员方法中访问成员属性 this.name
创建一个圆对象，添加属性(半径 r )，添加成员方法(获取周长 getLength，获取面积 getArea);
var circle = {
r:5,
getArea:function(){
return 3.14*this.r*this.r;
},
getLength:function(){
return 2*3.14*this.r;
}
}
（6）JavaScript中的常用内置对象
date对象
(1)获取date对象
new Date() 获取当前系统的
new Date(2018,11,20,10,20,30);
获取具体某个时间的date对象，月份范围 0~11
new Date(‘2018-12-20 10:20:30’);
获取具体某个时间的date对象
new Date(246060*1000);
获取距离计算机元年的date对象
(2)获取date对象下时间信息
getFullYear()/getMonth()/getDate()/getHours()/getMinutes()/
getSeconds()/getMilliseconds()/getDay()
获取年/月/日/小时/分钟/秒钟/毫秒/星期
月范围 0~11
星期 0~6 0->星期日
(3)设置date对象下的时间信息
setFullYear( )/setMonth()/setDate()/setHours()/setMinutes()
setSeconds()/setTime()
setTime() 设置距离计算机元年的毫秒数
练习：
计算合同的到期时间等
员工入职时间2018-5-10
合同的有效期为3年，求合同的到期时间是多少？
在合同到期前一个月续签合同，如果遇到周末，提前到上一个周五，求续签时间？
要求在续签前一周，向员工发起续签的提醒，求提醒时间？
(4)本地化date对象
toLocaleString() 年-月-日 时：分：秒
toLocaleDateString() 年-月-日
toLocaleTimeString() 时：分：秒
Number对象
Number.MAX_VALUE; 数值型保存的最大值
Number.MIN_VALUE; 数值型保存的最小值
(0.1+0.2).toFixed(2); 保留小数点后2位
Boolean对象
将数据转换为布尔型的值
new Boolean(值) / Boolean(值)
!!值 —> 推荐写法
11、数组
（1）数组的分类
数组分为 索引数组(以数字作为下标)，关联数组(以字符串作为下标)
（2）数组的创建和访问
数组的创建
new Array(元素1,元素2...);
var arr=new Array(3)；
数组的访问
a = arr[0];//索引数组的访问
（3）数组的遍历
for(var i=0;i<arr.length;i++){//i下标
arr[i]
}
for(var key in arr){
arr[key]
}
（4）数组的方法——API
本文在此就不一一展开，日后会详细整理。
数组转为字符串 toString() join(’|’)
拼接数组 concat(names1,names2…)
截取数组元素 slice(-3,-1)
删除(替换，插入)数组元素 splice(2,0,‘tom’,‘jerry’)
翻转数组元素 reverse()
数组排序 sort(function(a,b){ return b-a; }) Unicode码从小到大
push(参数) 在数组的最后添加元素
pop() 删除数组最后一个元素
unshift(参数) 在数组的最前边添加元素
shift() 删除数组第一个元素
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
