本文主要是介绍Java研学-JavaScript，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一 JavaScript
1 简介：
JavaScript（简称“JS”）一种具有函数优先的轻量级，解释型或即时编译型的编程语言。以开发Web 页面的脚本语言出名，被应用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
2 组成部分
① ECMAScript（核心）：JavaScript 语言基础，规定 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等
② DOM（文档对象模型）：规定访问 HTML 和 XML 的接口，提供了访问 HTML 文档，如body、form、div、textarea 等的途径以及操作方法
而Node是一个接口，表示文档中的节点。Node接口是DOM中所有节点类型的基础接口，包括Document、Element、Attr和Text等。Node接口定义了一些常用的属性和方法，用于操作和访问节点的信息
③ BOM（浏览器对象模型）：是指浏览器提供的一组对象和方法，用于在浏览器窗口之间进行交互。BOM提供了访问浏览器窗口的各种功能，例如获取浏览器窗口的大小、版本信息、浏览历史记录等。
BOM的核心对象是window对象，它代表了浏览器窗口本身。通过window对象，我们可以访问和操作浏览器窗口的各种属性和方法
3 特点
JavaScript 是一种解释性脚本语言，代码不进行预编译，主要用来向 HTML页面添加交互行为，可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
HTML 和 JS 都是直接交给浏览器去执行和渲染, 每个浏览器中都有对应的 JS 引擎,JS 代码的执行需要依赖 HTML，不能单独执行。
4 代码编写
① 直接编写在 HTML 的 script 标签中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部引入</title><!--内部引入js可以在当前文件的任意位置都能执行，推荐写在 head 标签中--><!--HTML 中 js 的所有代码都是顺序执行,出错则不再往下执行，SyntaxError 则都不执行--><script>//js代码alert("内部引入js......");</script>
</head>
<body>
<p></p>
<script>//js代码alert("内部引入js......")</script>
</body>
</html>
<script>//js代码alert("内部引入js......")
</script>
② 编写在 JS 文件中
单独编写一个文件 (*.js) 来存放 Javascript 代码，在需要使用的 html 页面直接引入该 js 文件。
好处：可以使 js 文件和 HTML 文件相分离、一个 js 文件可被多个 HTML 文件使用、维护起来也更方便
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部引入</title><!--外部引入：引入的位置可以是当前文件的任意位置--><!--使用 script 标签的 src 属性加载指定的 js文件,type 可省略--><script src="js/js01.js"></script>
</head>
<body>
<!--同一个script标签不能同时执行内部引入和外部引入，一个标签之前选择是内部引入或者是外部引入-->
<script src="js/js01.js"></script>
<script >//引入jsalert("内部引入")
</script>
</body>
</html>
<script src="js/js01.js"></script>
js
//外部文件的js代码 javascript-demo\views\js\js01.js 这里只能编写JS代码
alert("外部引入js。。。。。。。")
③ 注意事项
script标签不能同时引入js文件和编写其他js代码
script 标签是双标签,不能写成单标签。
<!-- 错误的演示代码 -->
<script type="text/javascript" src="login.js">
alert("这样不行");
</script>
二 JS 基本语法
1 JavaScript 中的标识符
变量，常量，函数，语句块的名字，统称为标识符。标识符可以由任意顺序的大小写字
母、数字、下划线和美元符号组成，标识符不能以数字开头，不能是 JavaScript 中的保留字
或关键字。
合法的标识符举例：ename、e_name、_eName、$ename；
非法的标识符举例：int、3.14、Nice Day
2 JavaScript 严格区分大小写
username 和 userName 是两个完全不同的符号。
3 JavaScript 程序代码的格式
每条功能执行语句的最后必须用分号 ; 结束，每个词之间用空格、制表符、换行符或大括号、小括号分隔符隔开 。语句块使用{}来表示。
4 JavaScript 程序的注释
/…/ 中可以嵌套“//”注释，但不能嵌套“ /…/ ”。 、 /**…文档注释.*/
三 变量
程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象
① JS 是弱类型的语言,未严格区分数据类型，故使用 var 或 let 关键字代替所有类型
例如：var name; 若变量没有初始化，默认是undefined。
② 也可以在声明变量的同时为其赋值, 例如 ：var name = “大黄”;
③ 单独对变量赋值（注意类型）,例如：name =18;
④ 变量的类型由值来决定,值是什么类型,变量就是什么类型.
⑤ var 可声明同名变量，后声明覆盖前声明，let 同名则报错。
⑥ 常量使用 const 声明，值不可修改
⑦ JavaScript 定义变量无需指定类型，任何类型都使用 var 或 let声明，可以将 var / let 理解为
Java 中的 Object ,可以接收任何类型的值
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>tjjs</title><script type="text/javascript">var ename;//不事先声明变量而直接使用会报错// alert(变量名)在浏览器中弹出对话框需点击确定alert(ename); // undefinedvar ename = "大黄"; // 声明的同时赋值，可声明同名变量，会覆盖前面的变量alert(ename);ename = 18; // 单独赋值，需注意值的类型的合理性let age = 6;// let age = 8; // 错误，SyntaxError，解开则整个js文件无法执行alert(age);// console.log(变量名);等级以下五种（info、log、debug、warn、error）在浏览器控制台打印内容console.info(age,ename);const phone="3366"; // 声明常量，值不可修改// phone="4399"; // TypeError 错误使用</script>
</head>
<body>
</body>
</html>
四 数据类型
1 概述
在 JavaScript 中，变量是动态类型的，这意味着它们可以在任何时候改变其数据类型。当你使用 var 或 let 关键字声明一个变量时，这个变量会被默认为 undefined。然后你可以给它赋一个值，这个值的类型决定了该变量的类型。
此外，JavaScript 有一些原始类型（包括 Number、String、Boolean、Null、Undefined 和 Symbol），以及一些对象类型（包括 Object、Array、Function）。其中，Null 和 Undefined 是特殊的值，而不是数据类型。
对于 Object 对象，它是 JavaScript 中所有对象的基类。你可以通过字面量的方式创建对象，也可以通过 new 关键字创建新的对象实例。在 JavaScript 中，几乎所有的东西都是对象，包括函数（Function 对象）。
2 常用的数据类型
① Number 数值
整数常量,如: 60
实数常量, 如: 3.14、 2E7、3e6等
特殊数值：NaN、Infinity (除数为零)，对应的判断函数 isNaN()、isFinite()
② Boolean 布尔
true 和 false
③ String 字符串
值可用单引号或者双引号括起来。 js 没有 char 类型，故 ‘h’ 也是一个字符串
④ 其他常量
null 常量、undefined 常量 （定义未赋值）
3 typeof 运算符
获取变量的数据类型
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>tjjs</title><script type="text/javascript">var msg ='yellow';console.log(typeof msg );//stringmsg = 27;console.log(typeof msg);//number</script>
</head>
<body>// js只有" var/let 变量名 = 值 ", 不可以 " 变量类型 变量名 = 值// name 是自带的一个成员变量,类型无法修改,所以结果一直为 string// 正确 var age = 10;// 错误 Number age = 10;
</body>
</html>
4 运算符
① 比较运算符
= 和 == 以及 === 之间的区别：
= 赋值运算符：把一个常量/变量的值赋值给另外一个变量
== 比较运算符：比较两个数据的值是否相等，不会去判断类型 console.log(“24” == 24 );
=== 比较运算符：先判断数据类型是否相等，然后再去判断值是否相等 console.log(“24” === 24);
② 逻辑运算符
逻辑运算中 0、“”、false、NaN、undefined、null 表示为 false，其他类型数据都表示true。
a && b 将 a, b 先转换为 Boolean 类型，在执行逻辑与，若 a 为 false，则返回 a，否则就返回b；
a || b 将 a, b 先转换为 Boolean 类型，再执行逻辑或，若 a 为 true，则返回 a，否则就返回b。
③ && 和 || 运算符的区别
&& 操作：从左往右依次判断，返回第一个为 false 的值，否则返回最后一个为 true 的值；
&& 找 false ,找到则返回对应的值,直到最后一个如果没有找到,则返回最后一位的值.
|| 操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个为 false 的值。
|| 找 true ,找到则返回对应的值,直到最后一个如果没有找到,返回最后一位的值.
<script type="text/javascript">/*先转布尔，找false直接返回*/console.log(true && true);// trueconsole.log(2 && true);// trueconsole.log(2 && 4);// 4console.log("A" && 4);// 4console.log("" && 8);//console.log(null && "B");// nullconsole.log("A" && "B");// Bconsole.log(1 && 2 && 3);// 3console.log("" && null && 0);//console.log(1 && null && 3);// null/*先转布尔，找true直接返回*/console.log(true || true);// trueconsole.log(2 || true);// 2console.log(2 || 4);// 2console.log("A" || 2);// Aconsole.log("" || 2);// 2console.log(null || "B");// Bconsole.log("A" || "B");// Aconsole.log(1 || 2 || 3);// 1console.log("" || null || 0);// 0console.log(1 || null || 3);// 1/*若x为true的值,则返回x的值,否则返回0*/function func(x){x = x || 0;console.info(x);}</script>
五 函数
1 介绍
将脚本编写为函数，避免页面载入直接执行脚本，定义一次即可多次调用，实现代码的复用性
// JS中不需指定函数的返回值类型(无论怎样都有返回)
function 函数名([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
[return 值;]
}// 参数和返回值都是可选的, 若函数没有返回值，默认返回 undefined
// 普通函数定义,有参有返回
function fun1(name){
return name;
}
// 普通函数定义,无参无返回
function fun2(){
console.log(name);
}
2 匿名函数
无固定的函数名称，通常定义一个变量接收该匿名函数，可将匿名函数看成一个普通的值
var 变量名 = function([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
[return 值;]
}var sum = function(i, j){
return i+j;
}
3 箭头函数
去除匿名函数的 function ，于参数右边加 => 即可
// 无参单行函数体的箭头函数
/*
function (){
console.log("play";
}
*/
() => console.log("play");// 无参多行函数体的箭头函数
() => {
console.log("函数体1");
console.log("函数体2");
};
// 一个形参数的箭头函数
ename => console.log(ename);
// 多个参数多行函数体
(ename,age) => {
console.log(ename);
console.log(age);
}
4 函数调用
函数定义后不会立即执行, 需要执行到调用函数的代码时才会执行,方法如果有返回值，那么变量接收到的结果则是实际返回的值，方法如果没有返回值,那么变量的值为 undefined
var 变量 = 函数名(实参1,实参2,...);// 普通函数定义,有返回function fun1(ename){return ename;}// 普通函数定义,无返回function fun2(ename){console.log(ename);}// 匿名函数定义，把没有名称的函数赋值给一个变量（当变量的值）var sum = function(x, y){return x+y;}// 多个参数多行函数体var fun3 = (username,age) => {console.log(username);console.log(age);}// 普通函数调用var ret1 = fun1("小黄");var ret2 = fun2("小白");console.log(ret1); // 小黄console.log(ret2); // 小白 返回值：undefined// 匿名函数定义，把没有名称的函数赋值给一个变量（当变量的值）var sum = function(x, y){return x+y;}// 多个参数多行函数体var fun3 = (username,age) => {console.log(username);console.log(age);}// 匿名函数调用sum(1,3); // 直接把变量作为函数名去调用匿名行数// 把匿名函数作为变量的值传递给另一个函数（printSumResult），在另一个函数中来调用function printSumResult(sum){console.log(sum(3,5));}// 调用printSumResult 时带入匿名函数sumprintSumResult(sum); // 传入已定义的函数// 调用 printSumResult 时重新定义函数printSumResult(function (x,y){return x + y;});// 箭头函数的定义fun3("小黄",17);// 可以将箭头函数作为匿名函数使用printSumResult((x,y) =>{return x-y;});
调用函数时, 实参和定义函数的形参可以不一致
sum(); // 函数被调用，但是参数都为 undefined
sum(2,4,6,8); // 只有前两个，后面的自动忽略
查看函数被调用时传了哪些参数：arguments（箭头函数没有 arguments）
function fun4(){
console.log(arguments); // 每个函数都内置了一个arguments属性，用于存放调用时带入的实际参数值
}
fun4(1,2,3);// 1，2，3
fun4();
fun4("小黄","小白",18);// 小黄，小白，18
六 面向对象
JS 中的构造函数（Constructor）模式，即普通函数内部使用了 this 变量。对构造函数使用 new 运算符，可生成实例，并且 this 变量会绑定在实例对象上。加 new 执行的函数构造内部变化：自动生成对象，this 指向这个新创建的对象，函数自动返回这个新创建的对象
1 构造函数和对象
构造函数(类)定义：
//JS定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
创建对象和操作成员
<script>//构造函数：可以new生成对象实例function Person(name,age){this.name=name;this.age=age;this.sleep=function (){console.log("干饭")}}//创建对象var person1=new Person("小黄",20);console.log(person1)// 访问对象中的成员console.log(person1.name);// 访问对象中的方法person1.sleep();//可以给当前对象绑定自定义属性person1.email="yellow@123.com";console.log(person1)var person2=new Person("大黄",24);console.log(person2)//字面式创建对象:ES6语法 obj 类型var person3={name:"小小黄",age:14}console.log(person3)</script>
此时 Person 称之为构造函数，也可以称之类，构造函数就是类 。person1, person2均为 Person 的实例对象。
Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。构造函数首字母大写（规范）
创建对象的快捷方式：字面式创建对象
// 属性名如果有特殊字符需要加引号括起来。
var obj = {username:"小黄", age:"18"};
console.log(obj.username);
console.log(obj.age);
2 内置对象
① Object
constructor 对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。
Prototype对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。
Object 对象还具有几个方法：
hasOwnProperty(property)判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(“name”)）
IsPrototypeOf(object)判断该对象是否为另一个对象的原型。
PropertyIsEnumerable判断给定的属性是否可以用 for…in 语句进行枚举。
ToString()返回对象的原始字符串表示。对于 Object 对象不同的ECMAScript 实现具有不同的值。
② Date
Date() 返回当前日期和时间
getFullYear() 获取Date对象中四位数字的年份
getMonth() 获取Date对象中的月份(0~11)
getDate() 获取Date对象中的天(1~31)
getHours() 获取Date对象中的小时
getMinutes() 获取Date对象中的分钟
getSeconds() 获取Date对象中的秒
<script>//日期对象：获取系统当前时间var d=new Date();console.log(d)//格式化日期参数var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() +" " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();console.log(time)</script>
③ String
属性:
length 字符个数
方法:
charAt(index) 返回指定位置的字符
concat(string1,string2,string3,…) 拼接字符串
fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
substring(start,stop) 提取字符串中两个指定的索引号之间的字符。
<script>//String对象var str="asdhasjdhjkashdjk";// 属性:字符个数console.log(str.length)// 方法console.log(str.charAt(10)) console.log(str.toUpperCase())console.log(str.substring(1,12))</script>
七 数组
1 数组的定义方式
// 创建数组对象
var arr = new Array();
// 静态初始化
var arr2 = new Array("大黄","小黄","小小黄");
var arr2 = new Array(1, 2, 3);
// 动态初始化 这里的3是数组的长度不是元素
var arr3 = new Array(3);
var arr4 = ["大黄","小黄","小小黄"];//对于 js 中的数组不会出现数组越界的异常，也不是定长的。
2 数组中的常用属性和方法
① 属性
length 属性，获取数组长度。
② 方法
concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。pop()：删除并返回数组的最后一个元素。shift()：删除并返回数组的第一个元素。push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。// 例子<script>//定义数组var arr=["java","msyql","redis",12,33];var arr2=[1,2,3,3];//获取数组元素:通过元素下标获取console.log( arr)console.log( arr[5])//数组不会出现越界异常console.log(arr.length)//拼接数组:数组可以存储不同类型的数据var arr3= arr.concat(arr2);console.log(arr3)</script>
3 数组的遍历方式
① for
var arr = ["A","B","C","D"];
for(var i = 0; i< arr.length; i++){
console.log(arr[i]);
}
② forEach
数组里的元素个数有几个，该方法里的回调函数就会执行几次
第一个参数是数组里的元素
第二个参数为数组里元素的索引
第三个参数则是遍历的数组本身
数组自带的遍历方法，性能比普通循环低点
var arr = ["A","B","C","D"];
arr.forEach(function(item,index,array){
console.log(item);
});// 函数中的 arguments 存了调用函数时带入的实际数据,可通过 arguments 获取带入的数据
.
③ map
遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回
var arr = ["A","B","C","D"];
var newArr = arr.map(function(item,index,array){
return item+index;
});
//newArr中的数据:["A1","B2","C3","D4"]
④ for-in
可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）
//如果是遍历数组,i对应的是数组的索引
var arr = ["A","B","C","D"];
for(var i in arr){
console.log(i); //索引
console.log(arr[i]); //元素
}
//如果是遍历对象，对象是一种复合数据类型，可以包含多个键值对
var obj = new Object();
// 为obj对象添加了两个属性
obj.username = "小黄";
obj.age = 18;
// 遍历对象的所有属性。在每次循环中，变量name都会被赋值为当前正在被遍历的属性名。
for(var name in obj){
// 分别打印出当前属性名和该属性对应的值
console.log(name);
console.log(obj[name]);
}
这篇关于Java研学-JavaScript的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
