javascript基础

obeoas

已于 2024-02-20 19:41:40 修改

阅读量814

点赞数 21

文章标签： javascript 前端开发语言

于 2024-02-20 19:38:39 首次发布

本文链接：https://blog.csdn.net/obeas/article/details/136180152

版权

输出

使用 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 计算长度

注意 const points = [40] (这个索引后会得出正确的值) != const points = new Array(40)

数组搜索

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;