2021-4-22 前端总结之JavaScript

最新推荐文章于 2024-07-24 10:40:52 发布

不想注册csdn

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量116

点赞数

分类专栏：前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_43371243/article/details/116011494

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近做项目和面试，发现了很多从前的不足，以为Java就是Java基础和框架，忽视了对前端知识的重视，在开发的过程中遇到了很多的问题。所有接下来的一周里，我会总结Html，CSS，JavaScript，Jquery，Bootstrap和layui。关于vue的总结放在日后有空的时候。这篇主要是总结JavaScript的语法和使用，具体的使用可以参考W3School！

语法

首先，我们要了解一下常用的标签和格式：

<script> 标签：在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

<head> 或 <body> 中的 JavaScript
可以在 HTML 文档中放置任意数量的脚本，脚本可被放置与 HTML 页面的 <body>和<head> 部分中。把<script>放在body结尾或则做成.js文件可以加快页面的加载速度。

JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入弹出层，会弹出一个框显示数据；

使用 document.write() 写入 HTML 输出document.write(5 + 6);在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ，一般测试的时候使用；

使用 innerHTML 写入 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。

<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

使用 console.log() 写入浏览器控制台，使用较少。

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。如上面的代码，告诉页面在id为demo的地方输出一个值11；分号分隔 JavaScript 语句；js同样会忽略掉空格；代码太长的话可以在中间的运算符进行折中；{------}代码块的作用是定义一同执行的语句。下面是常见的关键字和作用，有的作用和Java中的关键字作用差不多：
js常见的关键字和作用
JavaScript的语法格式没有Java中那么严谨，比如小数的使用，变量的赋值都比较随意，字符串单双引号都可以。

JavaScript 使用 var 关键词来声明变量关键词，告知浏览器创建新的变量，数字不需要加引号，加引号的会被视为字符串类型，未申明的没有值或者是undefined，如果值是 undefined，typeof返回的类型也是 undefined。" "空串不是undefined，是String。

= 号用于为变量赋值；使用算数运算符（+ - * /）来计算值。

标识符用于命名变量（以及关键词、函数和标签），标识符对大小写敏感，首字符必须是字母、下划线（-）或美元符号（$），连串的字符可以是字母、数字、下划线或美元符号，提示：数值不可以作为首字符，遵循小写开头的驼峰式命名法。

双斜杠 // 或 /* 与 */ 之间的代码被视为注释：分为单行和多行的习惯。

var x = "8" + 3 + 5; x = 835;
var x = 3 + 5 + "8"; x = 88;

其他的运算符可以参考Java，运算符的规则基本上大同小异。
JavaScript算术运算符

JavaScript赋值运算符
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 
var x = true;
var y = false;
布尔值只有两个值：true 或 false。

JavaScript 对象用花括号来书写：对象属性是 name:value 对，由逗号分隔，下面的person是一个对象{ }里的是对象的属性值。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

函数

JavaScript的基本语法大概就是这些了，下面要学习一个比较重要的知识点，就是他的函数。
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()，函数名与变量名相同。函数的优点和好处就不多说了。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
    }
    //计算两个数的和
   var z = add(10,20);
function add(x,y){
	return x+y;
}

局部变量：在 JavaScript 函数中声明的变量，会成为函数的局部变量，局部变量只能在函数内访问。由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。局部变量在函数开始时创建，在函数完成时被删除。

function myFunction() {
    var carName = "Volvo";
}

访问对象属性两种方式访问属性：objectName.propertyName 或者 objectName[“propertyName”]；
访问对象方法如下：objectName.methodName() 实例 name = person.fullName()。

HTML 事件

可以是浏览器或用户做的某些事情。这个等后期总结HTML还会再说。

<p id="demo"></p>
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

常见的html事件
特殊字符：避免字符串显示不完全的解决方法是，使用 \ 转义字符。

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"
var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。"

常见的转义字符
常用的字符串方法：
length 属性返回字符串的长度：

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1，两种方法都接受作为检索起始位置的第二个参数。

search() 方法搜索特定值的字符串，并返回匹配的位置：

有三种提取部分字符串的方法：
slice(start, end)
substring(start, end)
substr(start, length)

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分，该方法设置两个参数：起始索引（开始位置），终止索引（结束位置，如果某个参数为负，则从字符串的结尾开始计数。
substring() 类似于 slice(),不同之处在于 substring() 无法接受负的索引。

replace() 方法用另一个值替换在字符串中指定的值：

var n = str.replace("Microsoft", "W3School");

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

var n = str.replace(/MICROSOFT/i, "W3School");
var n = str.replace(/Microsoft/g, "W3School");

通过 toUpperCase() 把字符串转换为大写：
concat() 连接两个或多个字符串：
trim() 方法删除字符串两端的空白符：

数值

JavaScript 数值始终是 64 位的浮点数；NaN 属于 JavaScript 保留词，指示某个数不是合法数；尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）；
常用的方法
toString() 以字符串返回数值，valueOf() 以数值返回数值；

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toFixed() 返回字符串值，它包含了指定位数小数的数字：

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

三种 JavaScript 方法可用于将变量转换为数字：
Number() 方法，返回数字，由其参数转换而来。
parseInt() 方法，解析其参数并返回浮点数。
parseFloat() 方法，解析其参数并返回整数。

数组：
创建方法：

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
var cars = new Array("Saab", "Volvo", "BMW");
var first = cars[0];

length 属性返回数组的长度（数组元素的数目）;
遍历数组的最安全方法是使用 “for” 循环：
也可以使用 Array.foreach() 函数：

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

向数组添加新元素的最佳方法是使用 push() 方法：
数组的方法
toString() 把数组转换为数组值（逗号分隔）的字符串，
join() 方法也可将所有数组元素结合为一个字符串。
pop() 方法从数组中删除最后一个元素：
push() 方法（在数组结尾处）向数组添加一个新的元素：
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，返回被“位移出”的字符串；
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

亲自试一试
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：
够使用 splice() 在数组中不留“空洞”的情况下移除元素：
具体的数组和遍历以及数组的排序更多方法参考：

https://www.w3school.com.cn/js/js_array_methods.asp

日期

var d = new Date();

日期的获取方法 new一个对象，然后赋值给他；
日期的设置方法
Math方法和Java的很像，学过看看就好了。
math对象方法

Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数

这几个都是和Java语法大同小异，直接跳过
在这里插入图片描述这几个都是和Java语法大同小异，直接跳过，比较，条件，switch，boolean

JavaScript 数据类型
JavaScript 中有五种可包含值的数据类型：
字符串（string）
数字（number）
布尔（boolean）
对象（object）
函数（function）

有三种对象类型：
对象（Object）
日期（Date）
数组（Array）

同时有两种不能包含值的数据类型：
null
undefined

正则表达式***比较重要

在这里插入图片描述

test()它通过模式来搜索字符串，然后根据结果返回 true 或 false。
exec() 方法是一个正则表达式方法,它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。如果未找到匹配，则返回 null。

异常
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

Let关键字可以让全局变量在局部方法中改变，完成后局部变量销毁，全局变量恢复；

var x = 10;
// 此处 x 为 10
{ 
  let x = 6; // 此处 x 为 6，同时let可以用于for方法等{...}中
}
// 此处 x 为 10

通过 let 关键词定义的全局变量不属于 window 对象；

关键字 const 有一定的误导性，它没有定义常量值，它定义了对值的常量引用。

JavaScript 表单验证

js的表单可以给程序省去很多代码，例如没用使用js需要提交到后台验证，加一个js的话，可以直接在前台就进行判断提醒。

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

在html中加一个属性required可以直接提示未填写的表单，不适用于 Internet Explorer 9 或更早的版本。具体的input属性查看html。

在 JavaScript 中，几乎“所有事物”都是对象。
布尔是对象（如果用 new 关键词定义，但是一般不建议）
数字是对象（如果用 new 关键词定义，但是一般不建议）
字符串是对象（如果用 new 关键词定义，但是一般不建议）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象

使用对象字面量
这是创建对象最简答的方法，使用对象文字，您可以在一条语句中定义和创建对象。对象文字指的是花括号 {} 中的名称:值对（比如 age:62）。
下面的例子创建带有四个属性的新的 JavaScript 对象：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue"
};

使用 JavaScript 关键词 new，下面的例子也创建了带有四个属性的新的 JavaScript 对象：

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";

上面的两个例子结果是一样的。无需使用 new Object()。出于简易性、可读性和执行速度的考虑，请使用第一种创建方法（对象文字方法）。

for…in 循环中的代码块会为每个属性执行一次。循环对象的属性：

var person = {fname:"Bill", lname:"Gates", age:62}; 
for (x in person) {
    txt += person[x];
}

JavaScript call() 方法
call() 方法是预定义的 JavaScript 方法，它可以用来调用所有者对象作为参数的方法,通过 call()，您能够使用属于另一个对象的方法。本例调用 person 的 fullName 方法，并用于 person1;

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

具体的js方法使用和介绍就不过多描述，前面也写了，不会的可以参考

https://www.w3school.com.cn/js/js_function_definition.asp

js的一部分总结就到此结束了，其他的jquery和json内容将会写新的一篇。

不想注册csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-4-22 前端总结之JavaScript

最近做项目和面试，发现了很多从前的不足，以为Java就是Java基础和框架，忽视了对前端知识的重视，在开发的过程中遇到了很多的问题。所有接下来的一周里，我会总结Html，CSS，JavaScript，Jquery，Bootstrap和layui。关于vue的总结放在日后有空的时候。这篇主要是总结JavaScript的语法和使用，具体的使用可以参考W3School！首先，我们要了解一下常用的标签： **<script> 标签**在 HTML 中，JavaScript...
复制链接

扫一扫

专栏目录