前端基础之JavaScript

news2024/11/30 6:50:54

JavaScript是一种能够在网页上添加交互效果的脚本语言,也被称为客户端语言。它可以在网页中操作HTML元素、改变CSS样式,以及处理用户的交互事件等。

以下是JavaScript的常见基础知识点:

  1. 变量和数据类型:JavaScript中的变量可以存储各种数据类型,包括字符串、数字、布尔值、数组、对象等。

  2. 运算符:JavaScript提供了各种运算符,包括加、减、乘、除等基本算术运算符,还有比较运算符、逻辑运算符等。

  3. 流程控制语句:JavaScript提供了if-else语句、switch语句、while循环、do-while循环、for循环等控制程序流程的语句。

  4. 函数:JavaScript中的函数可以封装一段代码块,方便程序的重复使用和维护。

  5. 对象:JavaScript中的对象可以包含多个属性和方法,是一种非常重要的数据类型。

  6. 事件:JavaScript可以通过事件来响应用户的交互行为,例如单击、双击、鼠标移动等事件。

  7. DOM操作:JavaScript可以通过DOM(文档对象模型)来操作HTML元素,例如获取元素、修改元素属性等。

以上是JavaScript的基础知识点,掌握它们可以帮助你更好地理解和编写JavaScript代码。


JavaScript引入方式

Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

引入额外的JS文件

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

JavaScript语言规范

注释(注释是代码之母)

// 这是单行注释

/*
这是
多行注释
*/

结束符

JavaScript中的语句要以分号(;)为结束符。

JavaScript语言基础

变量声明

  1. JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
  2. 声明变量使用 var 变量名; 的格式来进行声明
var name = "Alex";
var age = 18;

注意:

变量名是区分大小写的。

推荐使用驼峰式命名规则。

保留字不能用做变量名。

补充:

ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用来声明常量。一旦声明,其值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

再次补充:

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

JavaScript数据类型

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值(Number)

JavaScript不区分整型和浮点型,就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN,表示不是一个数字(Not a Number)。

常用方法:

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法:

方法

说明

.length

返回长度

.trim()

移除空白

.trimLeft()

移除左边的空白

.trimRight()

移除右边的空白

.charAt(n)

返回第n个字符

.concat(value, ...)

拼接

.indexOf(substring, start)

子序列位置

.substring(from, to)

根据索引获取子序列

.slice(start, end)

切片

.toLowerCase()

小写

.toUpperCase()

大写

.split(delimiter, limit)

分割

拼接字符串一般使用“+”

slice和substring的区别

string.slice(start, stop)和string.substring(start, stop):

两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换

silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

补充:

ES6中引入了模板字符串。模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串!`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

注意:

如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。

JSHint启用ES6语法支持:/* jshint esversion: 6 */

布尔值(Boolean)

区别于Python,true和false都是小写。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

  • null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
  • undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。

null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。

还不明白,上图吧!

对象(Object)

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

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

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

数组

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法:

方法

说明

.length

数组的大小

.push(ele)

尾部追加元素

.pop()

获取尾部的元素

.unshift(ele)

头部插入元素

.shift()

头部移除元素

.slice(start, end)

切片

.reverse()

反转

.join(seq)

将数组元素连接成字符串

.concat(val, ...)

连接数组

.sort()

排序

.forEach()

将数组的每个元素传递给回调函数

.splice()

删除元素,并向数组添加新元素。

.map()

返回一个数组元素调用函数处理后的值的新数组

forEach()

语法:

forEach(function(currentValue, index, arr), thisValue)

参数:

参数

描述

function(currentValue, index, arr)

必需。 数组中每个元素需要调用的函数。
函数参数:

参数

描述

currentValue

必需。当前元素

index

可选。当前元素的索引值。

arr

可选。当前元素所属的数组对象。

thisValue

可选。传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值

splice()

语法:

splice(index,howmany,item1,.....,itemX)

参数:

参数

描述

index

必需。规定从何处添加/删除元素。
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。

howmany

必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

item1, ..., itemX

可选。要添加到数组的新元素

map()

语法:

map(function(currentValue,index,arr), thisValue)

参数:

参数

描述

function(currentValue, index,arr)

必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数

描述

currentValue

必须。当前元素的值

index

可选。当期元素的索引值

arr

可选。当期元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

注意:

关于sort()需要注意:

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

可以使用以下方式遍历数组中的元素:

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

补充:

ES6新引入了一种新的原始数据类型(Symbol),表示独一无二的值。它是JavaScript语言的第7种数据类型。

类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一:

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的

运算符

算数运算符

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!

比较运算符

> >= < <= != == === !==

注意:

1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

 

函数

函数定义

JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

补充:

ES6中允许使用“箭头”(=>)定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
 console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}

add(1,2)

输出:

3
2
1

注意:

函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。

函数的全局变量和局部变量

局部变量

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!

几个例子:

1.

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是?

2.

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是?

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

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

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

相关文章

YOLOv7优化:独家创新(Partial_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

💡💡💡本文独家改进:独家创新(Partial_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐 SC_C_Detect | 亲测在多个数据集能够实现大幅涨点 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI0c ✨✨✨前沿最新计算机顶会复现 🚀🚀🚀YOLO…

【实现多个接口的使用】

文章目录 前言实现多个接口接口间的继承接口使用实例给对象数组排序创建一个比较器 总结 前言 实现多个接口 Java中不支持多继承&#xff0c;但是一个类可以实现多个接口 下面是自己反复理了很久才敲出来的&#xff0c;涉及到之前学的很多知识点 如果哪看不懂&#xff0c;真…

基于向量数据库的文档检索实战

推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 在过去的六个月里&#xff0c;我一直在 A 系列初创公司 Voxel51 工作&#xff0c;该公司是开源计算机视觉工具包 FiftyOne 的创建者。 作为一名机器学习工程师和开发人员布道者&#xff0c;我的工作是倾听我们的开源社区的…

LabVIEW开发双目立体系统猪重估算

LabVIEW开发双目立体系统猪重估算 动物的活重是各种研究中的重要参考&#xff0c;例如动物生长&#xff0c;饲料转化率&#xff0c;健康状况和疾病发生。生长中的动物的体重为保持它们处于适当的营养和环境水平提供了一个有价值的参数或指标。动物的利润通常与收入和成本之间的…

Sci Immunol丨Tim-3 适配器蛋白 Bat3 是耐受性树突状细胞

今天和大家分享一篇发表于2022年3月的文章&#xff0c;题目为“Tim-3 adapter protein Bat3 acts as an endogenous regulator of tolerogenic dendritic cell function”&#xff0c;发表在《Sci Immunol》杂志上。文章主要研究了Tim-3和其适配蛋白Bat3在调节免疫应答中的作用…

2023年【R1快开门式压力容器操作】最新解析及R1快开门式压力容器操作复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R1快开门式压力容器操作最新解析是安全生产模拟考试一点通生成的&#xff0c;R1快开门式压力容器操作证模拟考试题库是根据R1快开门式压力容器操作最新版教材汇编出R1快开门式压力容器操作仿真模拟考试。2023年【R1快…

linux 安装 elasticsearch 全教程

一、去 elasticsearch官网找到Linux版本的下载链接 地址https://www.elastic.co/cn/downloads/elasticsearch 二、在linux 中用wget下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.10.4-linux-x86_64.tar.gz三、下载成功后解压文件 tar -x…

Unity中Shader自定义cginc文件

文章目录 前言我们在使用如下场景中的小球来进行自己的 GI Shader测试一、先找到Unity自带的 cginc 库二、仿照 Unity 的 cginc 文件&#xff0c;写一个我们自己的 cginc 文件1、我们新建一个文件&#xff0c;在资源管理器中把 文件后缀名修改成 .cginc2、我们打开Unity自己的c…

【Linux】安装使用Nginx负载均衡,并且部署前端项目

目录 一、Nginx概述 1. 什么 2. 背景 3. 作用 二、Nginx负载均衡 1. 讲述 2. 使用 1. 下载 2. 安装 3. 负载均衡 三、前端部署 1. 准备 2. 部署 一、Nginx概述 1. 什么 Nginx是一个高性能的开源Web服务器和反向代理服务器。它具有轻量级、高并发、低内存消耗的…

让你笑到不行的笑话短视频接口,快来试试!

11在当今这个快节奏的社会中&#xff0c;笑话成为了许多人调节情绪的有效方法。如今&#xff0c;短视频平台已经成为了最受欢迎的娱乐方式之一&#xff0c;因此&#xff0c;将笑话和短视频结合起来&#xff0c;成为了一种很有趣的方式来带给我们欢乐。今天我们要介绍的是挖数据…

【电路笔记】-正弦波形

正弦波 文章目录 正弦波1、概述2、波形产生3、总结 在 19 世纪末的 10 年间&#xff0c;许多技术成就使得交流电的使用得以扩展&#xff0c;并克服了直流电向公众供电的局限性。 1882 年&#xff0c;法国发明了变压器&#xff0c;它简化了交流电的分配&#xff0c;正如我们将在…

【免费活动】11月4日敏捷武林上海站 | Scrum.org CEO 亲临现场

活动介绍 过去的几年里&#xff0c;外界的风云变幻为我们的生活增添了一些不一样的色彩。在VUCA世界的浪潮里&#xff0c;每一个人都成为自己生活里的冒险家。面对每一次的变化&#xff0c;勇于探索未知&#xff0c;迎接挑战&#xff0c;努力追逐更好的自己。 七月&#xff0…

gcc/g++使用格式+各种选项,预处理/编译(分析树,编译优化,生成目标代码)/汇编/链接过程(函数库,动态链接)

目录 gcc/g--编译器 介绍 使用格式 通用选项 编译选项 链接选项 程序编译过程 预处理(宏替换) 编译 (生成汇编) 分析树(parse tree) 编译优化 删除死代码 寄存器分配和调度 强度削弱 内联函数 生成目标代码 汇编 (生成二进制代码) 链接(生成可执行文件) 函…

跨境电商怎么做?欲善其事,先利其器!

当前&#xff0c;跨境电商正在以飞速的发展趋势推进&#xff0c;在未来将会朝向成熟系统化的方向发展&#xff0c;对于跨境电商从业者来说既是机遇&#xff0c;也是挑战。不少想转行的朋友对于跨境行业早已“跃跃欲试”&#xff0c;但是不了解跨境电商却又久久不敢冒险......那…

Javassist讲解1(介绍,读写字节码)

Javassist讲解1&#xff08;介绍&#xff0c;读写字节码&#xff09; 介绍一、读写字节码1.如何创建新的类2.类冻结 介绍 javassist 使Java字节码操作变得简单&#xff0c;它是一个用于在Java中编辑字节码的类库&#xff1b; 它使Java程序能够在运行时定义一个新类&#xff0c;…

JS(JavaScript) 实现延迟等待(sleep方法)

起因&#xff1a; 只使用 setTimeout 会产生嵌套等方面的问题&#xff0c;达不到想要的效果。 解决方法&#xff1a; 使用 async/await 还有 Promise 相结合的方式来解决问题。 直接上代码&#xff1a; function sleep(time) {return new Promise((resolve) > setTimeout…

基于深度学习的植物识别算法 - cnn opencv python 计算机竞赛

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 MobileNetV2网络4 损失函数softmax 交叉熵4.1 softmax函数4.2 交叉熵损失函数 5 优化器SGD6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的植物识别算法 ** …

交叉编译tslib

交叉编译tslib 环境&#xff1a; ubuntu16.04(虚拟机) tslib 版本&#xff1a;1.4.0 交叉编译器&#xff1a;gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf 目标架构&#xff1a;ARM 野火imx6ull pro开发板 tslib的下载 tslib的下载地址 https://github.com/Mic…

Python数据分析(四)-- 操作Excel文件

1 操作Excel文件-多种实现方式 在实际生产中&#xff0c;经常会用到excel来处理数据&#xff0c;虽然excel有强大的公式&#xff0c;但是很多工作也只能半自动化&#xff0c;配合Python使用可以自动化部分日常工作&#xff0c;大大提升工作效率。 openpyxl&#xff1a;只允许读…

第一章 引言 【数据结构与算法】【精致版】

第一章 引言 【数据结构与算法】【精致版】 前言版权第一章 引言三个问题超市商品问题人机对弈问题多岔路口交通灯的管理问题 1.1 数据结构的概念1.2 数据结构的内容1.2.1 数据的逻辑结构1.2.2 数据的存储结构 1.3 算法1.3.1 算法的概念1.3.2 算法的评价标准1.3.3 算法的描述1.…