JavaScript 基础知识

news2024/11/18 4:49:59

一、初识 JavaScript

1、JS 初体验

JS 有3种书写位置，分别为行内、内部和外部。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- 2.内嵌式的js -->
   <script>
       // alert('Mary');
   </script>
   <!-- 3.外部js script 双标签 -->
   <script src="./my.js"></script>
</head>
<body>
   <!-- 1.行内式的js 直接写在元素的内部 -->
   <!-- <input type="button" value="Mike" οnclick="alert('Jane')"> -->
</body>
</html>
行内式 JS

<input type="button" value="click me" onclick="alert('Hello World')" />

  • 在HTML中推荐使用双引号，JS 中推荐使用单引号
内嵌 JS
<script>
	alert('Hello World');
</script>
外部 JS 文件

<script src="my.js"></script>

  • 引用外部 JS 文件的 script 标签中间不可以写代码

2、JavaScript 注释

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
       // 1.单行注释 ctrl + /
       /* 2.多行注释 
          默认快捷键 shift + alt + a
       */
   </script>
</head>
<body>

</body>
</html>

3、JavaScript 输入输出语句

常用语句：

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框，用户可以输入浏览器

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
       // 这是一个输入框
       prompt('input your age,pls');
       // 弹出警示框 输出的展示给用户
       alert('the result is:')
       // 控制台输出 给程序员测试用的
       console.log('i am computer.')
   </script>
</head>
<body>

</body>
</html>

效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、变量

1、变量的使用

声明变量
// 声明变量
var age; // 声明一个名称为 age 的变量
  • var（variable 变量的意思）

1、简介

变量的数据类型

JavaScript 是一种弱类型/动态语言

2、简单数据类型

简单数据类型（基本数据类型）
简单数据类型说明默认值
Number数字型，包含 整型值和浮点型值，如 21、0.210
Boolean布尔值类型，如 true、false，等价于 1 和 0false
String字符型类型，如 ”张三”“”
Undefinedvar a; 声明了变量 a 但是没有赋值，此时 a = undefinedundefined
Nullvar a = null; 声明了变量 a 为空值null
数字型 Number
1、数字型进制
// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 010; // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA

在JS中八进制前面加0，十六进制前面加 0x

2、数字型范围

JavaScript中数值的最大值和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
3、数字型三个特殊值
alert(Infinity);
alert(-Infinity);
alert(NaN);
  • Infinity，代表无穷大，大于任何数值
  • -Infinity，代表无穷小，小于任何数值
  • NaN，Not a number，代表一个非数值
4、isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false

字符串型 Srting
1、字符串长度

通过字符串 length 属性可以获取整个字符串的长度

var strMsg = "xxxx";
alert(strMsg.length);
2、字符串拼接
  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined

var variable;
console.log('你好' + variable): // 你好undefined
console.log(11 + variable); // NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11

3、获取变量数据类型

获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

4、数据类型转换

转换为字符串
方式说明案例
toString()转成字符串var num = 1; alert(num.toString());
String() 强制转换装成字符串var num = 1; alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num + “abc”);
转换为数字型
方式说明案例
parseInt(string) 函数将string类型转换成整数数值型parseInt(‘78’)
parseFloat(string) 函数将string转换成浮点数数值型parseFloat(‘78.21’)
Number() 强制转换函数将string类型转换成数值型Number(’12‘)
js 隐式转换( - * / )利用算术运算隐式转换为数值型’12‘ - 0
转换为布尔型
方式说明案例
Boolean() 函数其他类型转换为布尔值Boolean(‘true’);
  • 代表空、否定的值会被转换为 false

三、运算符

逻辑运算符

短路运算（逻辑中断）

原理：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。

  1. 逻辑与
    • 语法：表达式1 && 表达式2
    • 如果第一个表达式的值为真，则返回表达式2
    • 如果第一个表达式的值为假，则返回表达式1
  2. 逻辑或
    • 语法：表达式1 || 表达式2
    • 如果第一个表达式的值为真，则返回表达式1
    • 如果第一个表达式的值为假，则返回表达式2

四、作用域

作用域链

  • 写在函数内部的局部作用域链
  • 如果函数中还有函数，那么在这个作用域中又可以产生一个作用域
  • 根据在内部函数可以访问外部变量的这种机制，用链式查找界定哪些数据能被内部函数访问，就称作做作用域链

五、预解析

  1. js引擎运行js分为两步：预解析 代码执行
    • 预解析：引擎会把js里面所有的 var 和 function 提升到当前作用域的最前面
    • 代码执行：按照代码书写的顺序从上往下执行
  2. 预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）
    • 变量提升：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
    • 函数提升：把所有的函数声明提升到当前作用域的最前面，不调用函数

六、对象

1、创建对象的三种方式

  • 利用字面量创建对象
  • 利用 new Object 创建对象
  • 利用构造函数创建对象
利用字面量创建对象

对象字面量：就是 {} 里面包含了表达式这个具体事物（对象）的属性和方法。

（） 里面采用键值对的形式表示

var star = {
   name: 'Bob',
   age: 18,
   sex: 'male',
   greet: function() {
       alert('Hello');
   }
}
利用 new Object 创建对象
var obj = new Object();
obj.name = 'Bob';
obj.age = 18;
obj.sex = 'male';
obj.greet = function() {
   console.log('Hello');
}
利用构造函数创建对象
function Star(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
   this。words = function(say) {
       console.log(say);
   }
}
var someOne = new Star('Bob', 18, 'male');
someOne.word('Hello');
// 构造函数名字首字母要大写
// 构造函数不需要 return 就可以返回结果
// 构造函数必须使用 new
构造函数和对象
  • 构造函数，如 Star() ，抽象了对象的公共部分，封装到了函数里面，他泛指某一大类（class）
  • 创建对象，如 new Star()，特指某一个，通过 new 关键字创建对象的过程我们也叫对象实例化

2、new关键字

new 执行的四件事：

  1. 在内存中创建一个新的空对象。
  2. 让 this 指向这个新的对象。
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
  4. 返回这个新对象（所以构造函数里面不需要return）。

4、遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

var obj = {
   name: 'Bob';
   age: 18;
   sex: 'male';
}
for (var key in obj) {
   console.log(key); // key 变量输出得到的是属性名
   console.log(obj[key]); // obj[key] 得到的是属性值
}

七、内置对象

  • 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

1、Math 对象

Math 概述
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入 就近取整 例：-3.5 → -3
Math.abs() // 绝对值
Math.max() / Math.min() // 求最大和最小值
随机数方法 random()
  1. random() 返回一个随机的书（0 ≤ x < 1)
  2. 得到两个数之间的随机整数并且包含这2个整数
    Math.floor(Math.random() * (max - min + 1)) + min;

2、日期对象

Date() 方法的使用

  1. 获取当前时间必须实例化

    var now = new Date();
console.log(now);

  2. Date() 构造函数的参数
    可以写成new Date(‘2024-3-10’) 或者 new Date(‘2024/3/10’)

日期格式化
方法名说明代码
getFullYear()获取当年oObj.getFullYear()
getMonth()获取当月（0-11）oObj.getMunth()
getDate()获取当天日期oObj.getDate()
getDay()获取星期几（周日0到周六6）oObj.getDay()
getHours()获取当前小时oObj.getHours()
getMinutes()获取当前分钟oObj.getMinutes()
getSeconds()获取当前秒钟oObj.getSeconds()
获取日期的总的毫秒数（时间戳）

形式

  1. 通过 valueOf() / getTime()

    var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());

  2. 简单的写法（最常用的写法）

    var date1 = +new Date();
console.log(date1);

  3. H5 新增的 获得总的毫秒数

    console.log(Date.now());
案例 —— 倒计时
function conutDown(time) {
   var nowTime = +new Date();
   var inputTime = +new Date(time);
   var times = (inputTime - nowTime) / 1000; // times 是剩余时间的秒数
   var d = parseInt(times / 60 / 60 / 24);
   var h = parseInt(times / 60 / 60 % 24);
   var m = parseInt(times / 60 % 60);
   var s = parseInt(times % 60);
   return d + '天' + h + '时' + m + '分' + s + '秒'；
}
console.log(countDown('2025-01-01 23:00:00'));

3、数组对象

数组对象的创建
  1. 利用数组字面量
  2. 利用 new Array()
检测是否为数组

  1. instanceof 运算符 用来检测是否为数组

    var arr[];
console.log(arr instanceof Array);

  2. Array.isArray(参数); H5新增的方法 ie9以上版本支持

    console.log(Array.isArray(arr));
添加删除数组元素的方法

  1. push() 在数组末尾添加一个或者多个数组元素

    var arr = [1, 2, 3];
arr.push(4, 'Hello');
console.log(arr);

  2. unshift() 在数组开头添加一个或者多个数组元素

    arr.unshift('A', 'B');
console.log(arr);

  3. pop() 删除数组的最后一个元素

    console.log(arr.pop());
console.log(arr);

  4. shift() 删除数组的第一个元素

    console.log(arr.shift());
console.log(arr);
数组排序
方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序该方法会改变原来数组 返回新数组
sort()对数组的元素进行排序该方法会改变原来数组 返回新数组

  1. 翻转数组

    var arr = [1, 25, 5];
arr.reverse();
console.log(arr);

  2. 数组排序（冒泡排序）

    var arr = [13, 4, 77, 1, 7];
arr.sort(function(a,b) {
   return a - b; // 升序
   // return b - a; // 降序
});
console.log(arr);
数组索引方法
方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号 如果不存在，则返回-1
lastIndexOf()在数组中的最后一个的索引如果存在返回索引号 如果不存在，则返回-1
数组转换为字符串
方法名说明返回值
toString()把数组转换成字符串，逗号分隔每一项返回一个字符串
join(‘分隔符’)方法用于把数组中的所有元素转换为一个字符串返回一个字符串

4、字符串对象

基本包装类型

  1. 把简单数据类型包装为复杂数据类型

    var temp = new String('Bob');

  2. 把临时变量的值给 str

    str = temp;

  3. 销毁这个临时变量

    temp = null;
字符串的不可变

字符串的值不可变，改变的实际上时地址变化，在内存中开辟了一个新的内存空间。

根据位置返回字符
方法名说明使用
charAt(index)返回指定位置的字符(index 字符串的索引号)str.charAt(0)
charCodeAt(index)获取指定位置处字符的ASCII码(index索引号)str.charCodeAt(0)
str[index]获取指定位置处字符HTML5, IE8+支持 和charAt()等效
字符串操作方法
方法名说明
concat(str1,str2,str3…)concat() 方法用于连接两个或多个字符串，等效于+，+更常用
substr(start, length)从start位置开始（索引号），length 取的个数
slice(start, end)从start位置开始，截取到end位置，end取不到
substring(start, end)从start位置开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值

八、简单类型与复杂类型

1、简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型 ，复杂类型又叫做引用类型。

  • 值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身。
    string , number , boolean , undefined , null
  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用）。
    通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2、堆和栈

  1. 简单数据类型存放到栈里面
  2. 复杂数据类型存放到堆里面

JavaScript没有堆栈的概念。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1521760.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode 面试经典150题 26.删除有序数组中的重复项

LeetCode 面试经典150题 26.删除有序数组中的重复项

题目&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量…
阅读更多...
Java-并发编程--ThreadLocal、InheritableThreadLocal

Java-并发编程--ThreadLocal、InheritableThreadLocal

1.ThreadLocal 作用 作用&#xff1a;为变量在线程中都创建副本&#xff0c;线程可访问自己内部的副本变量。该类提供了线程局部 (thread-local) 变量&#xff0c;访问这个变量&#xff08;通过其 get 或 set 方法&#xff09;的每个线程都有自己的局部变量&#xff0c;它独立…
阅读更多...
深度强化学习(六)(改进价值学习)

深度强化学习(六)(改进价值学习)

深度强化学习(六)(改进价值学习) 一.经验回放 把智能体与环境交互的记录(即经验)储存到 一个数组里&#xff0c;事后反复利用这些经验训练智能体。这个数组被称为经验回放数组&#xff08;replay buffer&#xff09;。 具体来说, 把智能体的轨迹划分成 ( s t , a t , r t ,…
阅读更多...
C#，深度好文，精致好码，文本对比（Text Compare）算法与源代码

C#，深度好文，精致好码，文本对比（Text Compare）算法与源代码

Vladimir I. Levenshtein 一、文本对比的列文斯坦距离（编辑距离）算法 在日常应用中，文本比较是一个比较常见的问题。文本比较算法也是一个老生常谈的话题。 文本比较的核心就是比较两个给定的文本（可以是字节流等）之间的差异。目前，主流的比较文本之间的差异主要有两大类…
阅读更多...
力扣112、113、101--树

力扣112、113、101--树

112. 路径总和 题目描述&#xff1a; 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。 判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。 如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c…
阅读更多...
海豚调度系列之：任务类型——SPARK节点

海豚调度系列之：任务类型——SPARK节点

海豚调度系列之&#xff1a;任务类型——SPARK节点 一、SPARK节点二、创建任务三、任务参数四、任务样例1.spark submit2.spark sql 五、注意事项&#xff1a; 一、SPARK节点 Spark 任务类型用于执行 Spark 应用。对于 Spark 节点&#xff0c;worker 支持两个不同类型的 spark…
阅读更多...
TinTin Web3 动态精选：以太坊坎昆升级利好 Layer2，比特币减半进入倒计时

TinTin Web3 动态精选：以太坊坎昆升级利好 Layer2，比特币减半进入倒计时

TinTin 快讯由 TinTinLand 开发者技术社区打造&#xff0c;旨在为开发者提供最新的 Web3 新闻、市场时讯和技术更新。TinTin 快讯将以周为单位&#xff0c; 汇集当周内的行业热点并以快讯的形式排列成文。掌握一手的技术资讯和市场动态&#xff0c;将有助于 TinTinLand 社区的开…
阅读更多...
【SpringBoot3】整合Druid数据源和Mybatis 项目打包和运行

【SpringBoot3】整合Druid数据源和Mybatis 项目打包和运行

文章目录 一、整合Druid数据源二、整合Mybatis2.1 MyBatis整合步骤2.1 Mybatis整合实践2.1 声明式事务整合配置2.1 AOP整合配置 三、项目打包和运行命令启动和参数说明 总结web 与 springboot 打包区别JDK8的编译环境 执行17高版本jar 一、整合Druid数据源 创建模块 &#xff1…
阅读更多...
2024年【天津市安全员C证】考试资料及天津市安全员C证考试试题

2024年【天津市安全员C证】考试资料及天津市安全员C证考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员C证考试资料根据新天津市安全员C证考试大纲要求&#xff0c;安全生产模拟考试一点通将天津市安全员C证模拟考试试题进行汇编&#xff0c;组成一套天津市安全员C证全真模拟考试试题&#xff0c;学员可通过…
阅读更多...
微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

老规矩先上效果图: 1 、在pages文件夹下新建image文件夹用来存放标记的图片。 2、代码片段 也可以参考小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html index.wxml代码 <mapid="map"style="width: 100%; height:100%;&…
阅读更多...
2024批量导出公众号所有文章生成目录，这下方便找文章了

2024批量导出公众号所有文章生成目录，这下方便找文章了

公众号历史文章太多&#xff0c;手机上翻起来太费劲&#xff0c;怎么快速找到某一天的文章呢&#xff1f;比如深圳卫健委这个号从2014到2024发布近万篇文章。 公众号历史文章太多&#xff0c;手机上翻起来太费劲&#xff0c;怎么快速找到某一天的文章&#xff1f; 如果要找2020…
阅读更多...
【中等】保研/考研408机试-二叉树相关

【中等】保研/考研408机试-二叉树相关

目录 一、基本二叉树 1.1结构 1.2前序遍历&#xff08;注意三种遍历中Visit所在的位置&#xff09; 1.2中序遍历 1.3后序遍历 二、真题实战 2.1KY11 二叉树遍历&#xff08;清华大学复试上机题&#xff09;【较难】 2.2KY212 二叉树遍历二叉树遍历&#xff08;华中科技大…
阅读更多...
印度交易所股票行情数据API接口

印度交易所股票行情数据API接口

1. 历史日线 # Restful API https://tsanghi.com/api/fin/stock/XNSE/daily?token{token}&ticker{ticker}默认返回全部历史数据&#xff0c;也可以使用参数start_date和end_date选择特定时间段。 更新时间&#xff1a;收盘后3~4小时。 更新周期&#xff1a;每天。 请求方式…
阅读更多...
基于SSM SpringBoot vue办公自动化计划管理系统

基于SSM SpringBoot vue办公自动化计划管理系统

基于SSM SpringBoot vue办公自动化计划管理系统 系统功能 登录注册 个人中心 员工信息管理 部门信息管理 会议管理 计划管理 行程安排管理 行程进度管理 管理员管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: SSM(Spring SpringMVC Mybaits)或SpringBoot 前端…
阅读更多...
数字万用表 (Digital Multimeter)

数字万用表 (Digital Multimeter)

数字万用表 [Digital Multimeter] 1. Product parameters2. 交流频率测量3. 面板介绍4. 背光屏References 1. Product parameters 2. 交流频率测量 在交流 750V 档处按 HOLD 键切换到市电频率 3. 面板介绍 4. 背光屏 ​ References [1] Yongqiang Cheng, https://yongqiang…
阅读更多...
【打工日常】使用Docker部署团队协作文档工具

【打工日常】使用Docker部署团队协作文档工具

一、ShowDoc介绍 ​ShowDoc是一个适合IT团队共同协作API文档、技术文档的工具。通过showdoc&#xff0c;可以方便地使用markdown语法来书写出API文档、数据字典文档、技术文档、在线excel文档等等。 响应式网页设计&#xff1a;可将项目文档分享到电脑或移动设备查看。同时也可…
阅读更多...
easyExcel 导入、导出Excel 封装公共的方法

easyExcel 导入、导出Excel 封装公共的方法

文档包含三部分功能 1、easyExcel 公共导出list<对象>方法&#xff0c;可以自定义excel中第一行和样式 2、easyExcel 导入逻辑&#xff0c;结合spring Validator 验证导入数据是否符合规范 3、easyExcel 自定义导出 list<map> 、 list<对象> &#xff08;可…
阅读更多...
【论文阅读】IRNet:具有像素间关系的实例分割的弱监督学习

【论文阅读】IRNet:具有像素间关系的实例分割的弱监督学习

【论文阅读】IRNet:具有像素间关系的实例分割的弱监督学习 文章目录 【论文阅读】IRNet:具有像素间关系的实例分割的弱监督学习一、介绍二、联系工作三、方法四、实验结果 Weakly Supervised Learning of Instance Segmentation with Inter-pixel Relations 本文提出了一种以图…
阅读更多...
2024043期传足14场胜负前瞻

2024043期传足14场胜负前瞻

2024043期售止时间为3月17日&#xff08;周日&#xff09;21点30分&#xff0c;敬请留意&#xff1a; 本期深盘多&#xff0c;1.5以下赔率1场&#xff0c;1.5-2.0赔率7场&#xff0c;其他场次是平半盘、平盘。本期14场整体难度中等偏上。以下为基础盘前瞻&#xff0c;大家可根据…
阅读更多...
Java后端面试经验分享，~纯分享

Java后端面试经验分享，~纯分享

本文将从面试、工作、学习三个方面分享最近面试的一些心得以及以后发展的一些规划&#xff0c;仅供参考&#xff0c;哈哈&#xff0c;毕竟本人也很菜&#xff0c;因为菜才要多学习。一会儿也会分享两本Java面试题库&#xff08;题库是b站大学找的&#xff0c;一会儿我也会分享出…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023