前端学习（4）—— JavaScript(基础语法)
是世界上最流行的编程语言之一是一个脚本语言, 通过解释器运行主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.网页开发(更复杂的特效和用户交互)网页游戏开发服务器开发(node.js)桌面程序开发(Electron, VSCode)手机 app 开发最初在网景公司，命名为LiveScript后来 Netscape 将其命名为了JavaScript，是因为当时 Java
目录
9.4 JavaScript 对象和 C++/Java 对象的区别
一，介绍
1.1 是什么
JavaScript，简称JS：
- 是世界上最流行的编程语言之一
- 是一个脚本语言, 通过解释器运行
- 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.
JS能做的事情：
- 网页开发(更复杂的特效和用户交互)
- 网页游戏开发
- 服务器开发(node.js)
- 桌面程序开发(Electron, VSCode)
- 手机 app 开发
JavaScript和Java的关系：
- 最初在网景公司，命名为LiveScript
- 后来 Netscape 将其命名为了JavaScript，是因为当时 Java 风生水起的时候，带有 Java 的名字有助于这门新语言的传播
- 所以 Java 和 JavaScript 的关系相当于印度和印度尼西亚一样，黑客和博客一样，是不同的两个东西
1.2 组成
- ECMAScript(简称 ES): JavaScript 语法
- DOM: 页面文档对象模型, 对页面中的元素进行操作
- BOM: 浏览器对象模型, 对浏览器窗口进行操作
光有 JS 语法只能写一些简单的基础逻辑流程，要想完成更复杂的任务，比如浏览器以及页面的交互，那么就需要 DOM API 和 BOM API
1.3 书写形式
①第一个程序
<script>
alert("你好");
</script>直接用浏览器打开后，就是一个弹窗信息
②行内式
这种是直接嵌入到 html 元素内部的属性中：
<input type="button" value="按钮" onclick="alert('你好')">运行后显示一个按钮，按下就会显示一个确认弹窗
③内嵌式
这种就是和 css 一样，写到 script 标签中，就和 ① 一样
<script>
alert("你好");
</script>④外部式
这个也是和 css 一样，将 JS 代码写到另一个 .js 文件中，然后在 html 文件里引入即可：
<script src="hello.js"></script>
alert("你好")1.4 输入输出
①输入：prompt
<script>
prompt("你好");
</script>会弹出一个输入框
②输出：alert
这个就是弹出一个对话框，前面已经演示过了：
<script>
alert("你好");
</script>③输出：console.log
这个是在控制台打印一个日志：
<script>
console.log("你好");
</script>其中打印的信息只有在浏览器的调试界面才能看到：
这样的输出一般是给程序猿看的，不展示给用户
console 是一个 js 中的“对象”，而点点 “ . ” 表示取对象中的某个属性或者方法，这点和 C++ 一样
二，变量的使用
2.1 基本用法
直接上代码：
<script>
var name = '张三';
var age = 20;
console.log(name);
console.log(age);
</script>
- var 是 JS 中的关键字, 表示这是一个变量.
- = 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中
- JS 中可以省略末尾分号，但是建议还是加上
- 初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来. 初始化的值如果是数字, 那么直接赋值即可.
如下示例：
<script>
var name = prompt("请输入姓名：");
var age = prompt("请输入年龄：");
var score = prompt("请输入分数：");
alert("您的姓名是：" + name);
alert("您的年龄为：" + age);
alert("您的分数是：" + score);
/*alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
score + "\n"); 也可以把三个输出内容合并*/
</script>
2.2 动态类型
JS 的变量类型是程序运行过程中才确定的，这点和 Python 一样：
var a = 10; //数字
a = "hehe"; //字符串三，基本数据类型
3.1 数字类型
关于number数字类型：
- JS 中不区分整数和浮点数，统一都使用 "数字类型" 来表示
- 计算机中都是使用二进制来表示数据，而人平时都是使用十进制，因为二进制在使用过程中不太方便(01太多会看花眼)。所以在日常使用二进制数字时往往使用八进制和十六进制 来表示二进制数字
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头然后就是一些特殊的数字值：
- Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围
- -Infinity: 负无穷大, 小于任何数字
- NaN: 表示当前的结果不是一个数字
- 负无穷大 和 无穷小不是一回事，无穷小指无限趋近与 0, 值为 1 / Infinity
- 'hello' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接
- 可以使用 isNaN 函数判定是不是一个非数字
<script>
console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true
</script>3.2 字符串类型
①基本使用
字符串值需要用双引号或单引号括起来，否则运行出错：
<script>
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错
</script>如果字符串中本来包含引号，可以使用下面两种方法解决：
②求字符串长度
直接使用 String 的 length 属性即可：
③字符串拼接
- 直接使用 + 进行拼接
- 数字和字符串也可以拼接
- 要分清除相加的变量是数组还是字符串
3.3 布尔类型
- 这个我们已经很熟悉了，就是真或者假，Boolean 参与运算时当作 1 和 0 来看待
<script>
console.log(true + 1);
console.log(false);
</script>3.4 未定义数据类型
- 如果一个变量没有被初始化过，结果就是 undefined
- undefined 和字符串进行相加，结果是进行字符串拼接
- undefined 和数字进行相加，结果为 NaN
3.5 空值类型
- null 表示当前的变量是一个“空值”
- null 和 undefined 都表示取值非法的情况，但是侧重点不同
- null 表示当前的值为空，表示有一个盒子，但是这个盒子是空的
- 而 undefined 表示当前变量未定义，就是连盒子都没有
四，运算符
关于运算符这里就不赘述了，和其它高级语言的使用是大差不差的：
| 名称 | 符号 | 备注 |
|---|---|---|
| 算术运算符 | +、-、*、/、% | |
| 赋值运算符 | =、+=、-=、*=、/=、%= | |
| 自增自减运算符 | ++、-- | |
| 比较运算符 | <、>、<=、>=、==、!=、===、!== | 两个等于号的比较相等会进行隐式类型转换，而三个等于号的不会 |
| 逻辑运算符 | &&、||、! | |
| 位运算 | &、|、~、^ | |
| 位移运算 | <<、<<、>>> | >>是有符号右移，<<<是无符号右移 |
五，条件语句
5.1 基本语法
基本语法和C++一样，if、else if 和 else，这里不再赘述，下面通过两个案例了解一下即可：
①判断一个数字是正数还是负数
<script>
var num = 10;
if (num > 0)
{
console.log("num 是正数");
}
else if (num < 0)
{
console.log("num 是负数");
}
else
{
console.log("num 是 0");
}
</script>②判断一个年份是否是闰年
<script>
var year = 2000;
if(year % 100 == 0)
{
if(year % 400 == 0) console.log("yes");
else console.log("no");
}
else
{
if(year % 4 == 0) console.log("yes");
else console.log("no");
}
</script>附：三元表达式在 JavaScript 仍然可用
5.2 switch语句
语法格式也和C++一样，这里不再赘述
判断一个数是星期几：
<script>
var day = prompt("请输入今天星期几: ");
switch (parseInt(day))
{
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("输入有误");
}
</script>六，循环语句
6.1 while
①计算 !5
<script>
var a = 5;
var ret = 1;
while(a > 0)
{
ret *= a;
a--;
}
console.log(ret);
</script>②打印 1 - 100 内的偶数
<script>
var a = 1;
while(a <= 100)
{
if(a % 2 == 0) console.log(a);
a++;
}
</script>6.2 for
for的用法和C++一样，不再赘述
计算 !5
<script>
var ret = 1;
for(var i = 1; i <= 5; i++) ret *= i;
console.log(ret);
</script>七，数组
7.1 创建数组
可以使用 new 关键字创建，也可以使用字面量方式创建，一般使用后者
<script>
var arr1 = new Array();
var arr2 = [];
var arr3 = [1, 2, '你好', true]; //允许元素类型不同
</script>7.2 获取数组元素
使用下标的方式访问数组
注意：请勿给数组直接赋值，否则会干掉数组原有的所有元素，然后数组这个变量就不再是数组了
7.3 新增元素
①通过修改 length 新增
相当于在末尾新增元素，默认为 undefined，可以通过下标来修改
②通过下标新增
如果下标超出原有范围去赋值元素，则会给指定位置擦汗如元素，其余位置填充 undefined：
③使用 push 进行追加元素
示例：将一个数组的元素放进另一个数组里去：
7.4 删除元素
我们使用 splice 方法来删除元素，里面有两个参数，表示删除第一个参数位置到第二个参数为重中间的所有值，包括位置本身，如下示例：
八，函数
8.1 语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值8.2 函数表达式
可以将一个函数搞成匿名函数，然后将这个函数用一个变量表示，后续可以通过这个变量来调用函数：
<script>
var add = function() {
var sum = 0;
for(var i = 0; i < arguments.length; i++)
{
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20));
console.log(add(1,2,3,4));
console.log(typeof add);
</script>
8.3 作用域
JS中变量的作用域和C++很像，下面说明下不同点：
- 创建的全局变量在整个 script 标签中或者单独的 .js 文件中有效
- 如果在函数内部创建变量时不带 var 关键字，那么这个变量会变成全局变量
- 函数内部可以再定义函数，内部函数可以访问外层函数的局部变量
九，对象
9.1 理解对象
这里对象的概念和主流面向对象编程语言是很类似的，在JS中，字符串，数值，数组，函数等都是对象，都包含属性和方法
JS的对象和 Java/C++ 对象概念基本一致，只是具体的语法表现形式差别较大
9.2 创建对象
①使用字面量创建对象（常用）
使用 {} 创建对象，并且属性和方法使用键值对的形式，键值对之间用逗号分割
如下代码：
<script>
var a = {}; //创建空对象
var student = {
name: '你好',
height: 180,
weight: 150,
SayHello: function(){
console.log("hello");
}
};
console.log(student.name);
console.log(student['height']);
student.SayHello();
</script>
②使用 new Object 创建对象
是先创建一个空对象，然后直接使用下面的方式来新增属性，并且可以随时新增：
<script>
var student = new Object();
student.name = '你好',
student.height = 180,
student.weight = 150,
student.SayHello = function(){
console.log("hello");
}
console.log(student.name);
console.log(student['height']);
student.SayHello();
</script>③使用构造函数创建对象
JS的构造函数和C++很类似，但是JS的构造函数不是和类强绑定的，JS的构造函数仅仅只是一个特殊的函数而已，如下代码：
<script>
function Student(name, height, Say)
{
this.name = name;
this.height = height;
this.Say = function(){
console.log(Say);
}
}
var s1 = new Student('张三', 140, '你好');
var s2 = new Student('李四', 150, '你好鸭');
var s3 = new Student('王五', 160, '你也好呀');
console.log(s1);
s1.Say();
</script>
- 构造函数首字母一般是大写
- 构造函数不需要 return
- 使用构造函数创建对象必须使用 new 关键字
9.3 关于 new 关键字
new的执行过程：
- 先在内存中创建一个空的对象 { }
- this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
- 执行构造函数的代码, 给对象创建属性和方法
- 返回这个对象 (构造函数本身不需要 return, 由 new 完成了)
- 参考：new - JavaScript | MDN
9.4 JavaScript 对象和 C++/Java 对象的区别
①JS没有“类”的概念
- 对象其实就是“属性” + “方法”
- 类其实就是把一些具有共性的对象的属性和方法单独提取出来，相当于一个模板
- JS中的构造函数也有类似的效果，即使不是用构造函数，也可以随时通过 { } 的方式指出一些对象
②JS对象不区分属性和方法
js中的函数就是万金油，和普通变量一样，存储了函数的变量能够通过括号来进行调用执行
③JS对象没有 private/public 等访问控制
这就代表，对象中的属性可以被外界随意访问
④JS对象没有继承和多态
技术共进，成长同行——讯飞AI开发者社区
更多推荐
27
0- 0
已为社区贡献3条内容
所有评论(0)