百度前端技术学院二十二至二十四天学习笔记

最新推荐文章于 2022-09-02 15:05:30 发布

MING23333

最新推荐文章于 2022-09-02 15:05:30 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MING23333/article/details/82990561

这篇博客介绍了JavaScript的基础知识，包括变量的声明与赋值，动态类型特性，数组的使用，对象的概念及属性操作，以及常用的数学运算和字符串处理方法。通过实例展示了如何创建和操作变量，以及对象的属性动态添加。同时讲解了JavaScript的数字类型，以及在处理浮点数时的精度问题。最后提到了JavaScript的内置对象和for...in循环遍历对象属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js变量
例
<!DOCTYPE html>
<html>
<body>

document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

</body>
</html>

当您向变量分配文本值时，
应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，
不要使用引号。如果您用引号包围数值，
该值会被作为文本来处理。
例
<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>
例2
<p>点击这里来创建变量，并显示结果。</p>

JavaScript 数组
<script>
var i;
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>
JavaScript 对象
对象由花括号分隔。
在括号内部，
对象的属性以名称和值对的形式 (name : value) 来定义。
属性由逗号分隔：
<script>
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
</script>

引用类型能动态添加属性

var person=new Object();

person.name="jack";

person.age=20;

console.log("姓名：%s,年龄：%d",person.name,person.age);

结果

值类型不能添加

var
person="";
person.name="jack";
person.age=20;
console.log("姓名：%s,年龄：%d",person.name,person.age);
结果

说明
属性动态添加失败，说明这是值类型的变量。

---------------------

var num=10;

var num2=num;//创建新的空间，拷贝num的值到num2。
JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写

var x;
document.write("<p>只有 17 位: ");
x=12345678901234567890;
document.write(x + "</p>");

document.write("<p>0.2 + 0.1 = ");
x=0.2+0.1;
document.write(x + "</p>");

document.write("<p>可分别乘以 10 并除以 10 : ");
x=(0.2*10+0.1*10)/10;
document.write(x +"</p>");

</script>

整数就是整数,例如 10, 400, 或者 -5.
浮点数 (浮点) 有小数点或小数位，例如 12.5，和 56.7786543。
双精度双精度是一种特定类型的浮点数，它们具有比标准浮点数更高的精度（这意味着它们精确到更大的小数位数）。

addEventListener() 方法用于向指定元素添加事件句柄

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

isNaN() 函数用于检查其参数是否是非数字值。
定义和用法
abs() 方法可返回数的绝对值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
定义和用法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
parseInt() 函数可解析一个字符串，并返回一个整数。

JavaScript ceil() 方法
JavaScript Math 对象
定义和用法
ceil() 方法可对一个数进行上舍入。
语法
Math.ceil(x)

JavaScript floor() 方法
Math 对象参考手册 JavaScript Math 对象
实例
返回小于等于x的最大整数:

Math.round()方法中的数字四舍五入为最接近的整数

max() 方法可返回两个指定的数中带有较大的值的那个数。

min()返回 A 和 B 中的最低值

concat() 方法用于连接两个或多个数组。
length，获取当前选中输入的内容长度
concat() 方法用于连接两个或多个数组。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf() 方法可返回某个指定的字符串值在字符串中最后一次出现的位置
slice() 方法可从已有的数组中返回选定的元素。
\n是换行，英文是New line，表示使光标到行首
\r是回车，英文是Carriage return，表示使光标下移一格
定义和用法
split() 方法用于把一个字符串分割成字符串数组。
\r\n表示回车换行
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

toLowerCase()把所选输入框中的内容全部转为小写
toUpperCase()把所选输入框中的内容全部转为大写

\s代表空格 //两个反斜杠之间代表正则表达式，g表示匹配全部
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

JavaScript 对象
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

这个例子使用了 String 对象的 length 属性来获得字符串的长度：
var message="Hello World!";
var x=message.length;

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>

JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
语法
for (对象中的变量)
{
要执行的代码
}
例1
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
例2
var person = {
name : ['Bob', 'Smith'],
age : 32,
gender : 'male',
interests : ['music', 'skiing'],
bio : function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};