目录
输出
- 使用
window.alert()
写入警告框 - 使用
document.write()
写入 HTML 输出 - 使用
innerHTML
写入 HTML 元素 - 使用
console.log()
写入浏览器控制台
变量
var,let,const用于定义变量
let a = 3;
var b = 4;
const c = 5;
下面是使用区别
- 始终声明变量
- 如果不应更改值,则始终使用
const
- 如果类型不应更改,则始终使用
const
(数组和对象) - 仅
let
在不能使用时才使用const
- 仅
var
当您必须支持旧浏览器时才使用。
变量也有局部和全局变量,作用域不同
运算符
包括算数运算符,赋值运算符,比较运算符,逻辑运算符,位运算符
这里仅论述与c的不同:
- ==表示等于,===表示等值类型(类型相等)
- 相反的有 !== ,!===
- 类型运算符 typeof(返回变量的类型)和instanceof(如果是对象类型返回ture)
- 位运算符有无符号右移运算符>>>
函数function
语法
function name(参数 1, 参数 2, 参数 3) { 要执行的代码; }
对象object
对象定义
var car = {type:"porsche",model:"911",color:"white"};
索引
类似结构体,用 "" . "" 运算符访问成员(即js对象属性)
或者用 对象["属性名称"] 方式
this关键字
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子:
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
事件属性通常调用函数, 事件简单时可以不用函数
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
字符串定义及使用
let str = "hello"
字符串索引,截断
name.at(2),name.chatAt(0) ,等价name[2],类似数组name索引(但事实并非如此)
如果未找到字符,[ ] 和at()返回 undefined,而 charAt() 返回空字符串。
截断提取字符串 name.slice(起始位置,终止位置(不含))
类似的还有 substring(起始位置,终止位置(不含)) (不能为负),substr(起始位置,长度)
符号代表从左到右(正号) ,从右到左(负号)计数
以上均为0开始计数,类似数组索引
大小写转换
使用以下命令将字符串转换为大写toUpperCase()
使用以下命令将字符串转换为小写toLowerCase()
数字转换方法
方法 | 描述 |
---|---|
toString() | 将数字作为字符串返回。 |
toExponential() | 返回以指数表示法书写的数字。 |
toFixed() | 返回带小数位数的数字。 |
toPrecision() | 返回指定长度的数字。 |
ValueOf() | 以数字形式返回数字 |
格式
" . " 加 表达式 如 str.toString();
Number(变量或日期new date("")) 将日期转换为时间戳(距1970-01-01的毫秒数),将变量转换为数字
数组
数组定义
const students = ["zhangsan","lisi","wangwu"];
document.getElementById("demo").innerHTML = students;
或使用new关键字
const students = new Array("zhangsan","lisi","wangwu");
数组是一种特殊类型的对象object, JavaScript 中的typeof
运算符返回数组的“对象”。
数组索引
与c类似m,但还可以用前面的字符串索引方式 .at() , 可用 .length 计算长度
数组搜索
indexOf()
在数组中搜索元素并返回其位置 语法: 数组名.indexOf("想要查找的元素")
注意其值为从0开始计数的,通常+1
Array.indexOf() | 在数组中搜索元素值并返回其位置。 |
Array.lastIndexOf() | 返回指定元素最后一次出现的位置。 |
Array.includes() | 检查数组中是否存在元素 |
Array.find() | 返回通过测试函数的第一个数组元素的值。 |
Array.findIndex() | 返回通过测试函数的第一个数组元素的索引 |
Array.findLastIndex() | 查找满足条件的最后一个元素的索引。 |
Math.min.apply(null, Array) Math.max.apply(null, Array) | 查找数组中的最小数字 查找数组中的最大数字 |
数组变化
以下前者改变原数组,后者创建新数组
sort() 或 toSorted() | 含字母顺序进行排序 |
reverse() 或 toReversed() | 反转数组, |
Array.sort() ,括号内可填函数 如function(a, b){return a - b} ,也可不填则按字母顺序
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
let x = a.type.toLowerCase();
let y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>
数学表示方法
Math.round(x) | 返回 x 四舍五入到最接近的整数 |
Math.ceil(x) | 返回 x 四舍五入到最接近的整数 |
Math.floor(x) | 返回 x 向下舍入到最接近的整数 |
Math.trunc(x) | 返回 x 的整数部分 |
还有见过的pow(),sart(), abs(), sin(),cos(),
Math.min(),
Math.max()
用于查找参数列表中的最低或最高值 如Math.min(0, 150, 30, 20, -8, -200);
Math,random()返回一个0到1的值,和c类似
控制结构
- 条件结构 if... else if... else...
- 开关结构 switch() {case... defaut..}
- 循环结构for,for in,for of,while
for(let x in Object){} 循环访问对象的属性(一般不用于数组)
for(let x of Array){} 循环遍历数组字符串等
特别地 , new set变量.forEach(函数) 为new set变量内每个set元素调用函数
//创建一个set
const letters = new Set(["a","b","c"]);
// 遍历所有元素
let text = "";
letters.forEach (function(value) {
text += value + "<br>";
})
document.getElementById("demo").innerHTML = text;
类型tepeof
JavaScript 中有五种可包含值的数据类型:
- 字符串(string)
- 数字(number)
- 布尔(boolean)
- 对象(object)
- 函数(function)
有三种对象类型:
- 对象(Object)
- 日期(Date)
- 数组(Array)
同时有两种不能包含值的数据类型:
- null
- undefined