本文最后更新于67 天前,其中的信息可能已经过时,如有错误请发送邮件到2401292661@qq.com
运行方式
- js运行可在浏览器中运行,也可以在node中运行
- 在浏览器中可以f12或检查找到consolo(控制台)进行调试
- 在node中运行要在控制台中运行,cmd可以进入js文档的路径中【比较麻烦】或者在vscode中ctrl+`键弹出vscode的控制台,再输入node js文档路径【相对路径即可】
js的书写位置
- 内部:在html文件中书写js代码;一般在body结束前,与html,css代码隔离开,在
<script></script>
中书写js代码【为了先渲染界面,再解读js代码】 - 外部:创建一个.js的文件,里面书写js代码;再在html的body结束前书写
<script src='js文件路径'></script>
【注意中间部分不能写js代码,写了也无效】 - 行内:就是在一个标签的内部写,这个在vue的部分会涉及多;此次不涉及太多,了解即可
输入输出
- 输入:prompt()语句,相当于python的input,括号中可输入提示语句;但这种只是在界面弹窗中输入
- 注意输入的类型都是字符串,需要进行类型转换
prompt("请输入");
效果
“:
-
输出语句:
-
alert();括号中输出东西,与prompt一样,弹窗输出
alert("我今年18岁了~");
效果
: -
console.log();括号中输出东西,相当于python的print,在控制台中显示结果,界面中无
console.log("我今年18岁了~");
-
document.write();括号中输出东西,可以是标签,在浏览器界面显示
document.write("<h1>我今年18岁了~</h1>");
-
变量与常量
- js是一个弱数据结构编程语言,与python一样
- js声明变量用var、let、const;具体的数据类型在定义后才知道
- var因为有很多的bug错误,现在几乎不用;现在用let声明变量,const声明常量
注意
:const声明时要初始化数值,后期不能更改
数据类型
- js数据类型有String、Number、Boolean、null、undefined、object
- js中浮点数也是数值型
- typeof方法:typeof可以查看某个变量的数据类型;typeof 变量
注意
:对象的类型被标记为0,null标签null指针,在大多数平台中为0x00,因此null的类型标记为0,返回值类型为object【js的一个小错误】
- NaN是数值类型,表示非数字;其他与其运算还是NaN
类型转换:
-
隐式转换:
- +号两边只要有一个是字符串,则另一个也会转换称字符串;
- 而-*/则会转换成数值型【不管两边是啥】;
- 单一个+跟一个字符串则会转换成数值型
-
显示转换:
- 字符串转数值:Number(变量)【使用隐式转换+更简单】
- 数值转字符串:String(变量)
- parseInt(数据):只保留整数【可以将像素的px去掉】
- parseFloat(数据):可以保留小数【也可以将px去掉】
字符串
连接字符串方法:
-
使用+号连接:"I am"+username
-
模板字符串:使用``包裹字符串,要用变量的地方用${}替代
I am ${username}
字符串内置方法
- 字符串长度:.length;
s.length
获取s的长度 - 字符大写:.toUpperCase();
s.toUpperCase
让s字符全大写 - 字符小写:.toLowerCase();
- 切割字符串:.substring(起始索引,终止索引);
s.substring(0,5)
获取s的0-4的字符;与python的[]一致 - 分割字符:.split(分割的字符);
s.split("");
最小分割,将s的元字符分割存在数组中
数组
- js的数组与python的列表一样,可以存任何的数据类型,混合类型也可
创建数组:
- 构造函数:
let arr = new Array();
括号中放元素 - []创建:
let arr = [1,2,3]
索引找元素【查改】:
- 使用索引可以找到元素,如s[1],找到s数组的第二个元素
- 索引找到后可以进行修改,如s[1]=1
- 找某元素索引:.indexOf(元素);s.indexOf("1"),就可以找到字符串1的索引
增删:
-
增:
- 尾部增加:.push(元素);可以数组尾部添加元素
- 头部增加:.unshift(元素);
-
删:.pop();弹出尾部元素,就是栈
判断:Array.isArray(待判断变量);就可以判断出是否为数组
if语句
- 双等号与三等号:双等号不考虑数据类型,而三等号会考虑数据类型
- 其他与c语言相同:else if() ;else();||(或)&&(且)
三目运算符
与c语言相同:x>10 ? 1:2;
switch语句
- case可为任意的类型,case中的语句可不用大括号括起来
- break也要写
switch(color)
{
case "red":console.log("color is red");
break;
case "blue":console.log("color is blue");
break;
default:
console.log("None");
}
循环
- 与c一样的for:
for(let i=0;i<10;i++){console.log(i);}
- 第二中for:
for(let todo of todos){console.log(todo);}
这可以打印数组todos的每一项,有点像python的for i in todos: - while循环:与c一样
- break与continue也一样
断点调试
在浏览器的检查中的源代码(source)中找到要断的地方,然后再刷新页面,就可以开始调试了
数学内置对象
Math对象包含的方法有:
random() //生成0-1之间的随机数,不包含1包含0
ceil(x) //向上取整
floor(x) //向下取整
max(value0, value1, /* … ,*/ valueN) //找最大数
min(value0, value1, /* … ,*/ valueN) //找最小数
pow(base,exponent) //幂运算
abs(value) //绝对值
round() //四舍六入,五舍大
具体见网站
生成任意范围随机数
- 生成0-n([0,n])的随机数:Math.floor(Math.random()*(n+1))【与数组结合则成arr.length就行】
- 生成n-m([n,m])的随机数:Math.floor(Math.random()*(m-n+1)+n)
基本引用类型
引用值(或者对象)是某个特定引用类型的实例。在ECMAScript中,引用类型是把数据和功能组织到一起的结构。与类的概念相似,但它缺少传统面向对象编程语言所具备的某些基本结构,包括类和接口。引用类型也被称为对象定义,它描述了自己的对象应有的属性和方法。
对象就是某个特定引用类型的实例。新对象通过使用new操作符后跟一个构造函数来创建。如:let now = new Data();
Data
- Data类型将日期保存为自协调世界时(UTC)时间1970年1月1日午夜(零时)至今所经过的毫秒数。
日期对象:
构造方式:let now = new Data();
- 在不给Data构造函数传参数的情况下,创建的对象将保存当前日期和时间。要基于其他日期和时间创建日期对象,必须传入其毫秒表示(UNIX纪元1970年1月1日午夜之后的毫秒数)。ECMAScript提供两个辅助方法:Data.parse()和Data.UTC()
Data.parse()
-
传入参数:表示日期的字符串参数。支持格式:
- ”月/日/年“,如"5/23/2019";
- ”月名 日,年“,如"May 23, 2019";
- ”周几 月名 日 年 时:分:秒 时区“,如"Tue May 23 2019 00:00:00 GMT-0700"