前端基础之JavaScript

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.1415PI = 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.mzph.cn/news/126845.shtml

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

相关文章

如何使用查看器筛选、搜索功能进行数据定位?

前言 我们曾探讨过观测云如何通过将内置视图与查看器相联结&#xff0c;实现更全面的数据关联分析。&#xff08;参见《内置视图联动查看器&#xff0c;实现数据关联分析》&#xff09;这里提到的查看器&#xff0c;实际是一个功能全面且强大的数据查看分析工具。其提供多种搜…

软考中项集成如何画图?计算题怎么考的?

2023下半年软考集成一共考6个批次&#xff0c;10月28日、29日软考集成考了第一、二、三、四批次&#xff0c;11月4日软考集成再考第五批和第六批。 先说一下通过10.28-29得出的软考机考注意事项&#xff1a; 1、草稿纸不能自带&#xff0c;考试现场会发放草稿纸&#xff0c;草…

python的pytorch和torchvision利用wheel文件安装

python的pytorch和torchvision利用wheel文件安装 在做人工智能的时候&#xff0c;我们需要下载pytorch和torchvision&#xff0c;那么如何下载呢。利用wheel文件pip安装 下载 首先要看你的python版本&#xff0c;打开命令行&#xff0c;输入&#xff1a; python -V就可以看…

回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测

回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测 目录 回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.WOA-CNN-SVM鲸鱼算法…

UML类图关系

1.依赖 依赖关系由箭头表示&#xff0c;含义为A类在类中用到了B类&#xff0c;如B类作为A类的属性、参数、返回值等都属于依赖关系。 2.泛化&#xff08;继承&#xff09; 泛化用三角箭头和直线表示&#xff0c;extend。 3.实现 实现用三角箭头和虚线表示&#xff0c;在…

智能井盖传感器有哪些?万宾科技智能井盖效果

在城市治理过程之中&#xff0c;小小的井盖却成为影响民生的一个重要方面&#xff0c;因为井盖一旦出现问题&#xff0c;会严重影响市民的生命安全&#xff0c;并且传统的井盖一般都会采用人工巡检的方式&#xff0c;这就导致了巡检的难度较大&#xff0c;从而不能对城市各个角…

CSS3媒体查询与页面自适应

2017年9月&#xff0c;W3C发布媒体查询(Media Query Level 4)候选推荐标准规范&#xff0c;它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则&#xff0c;可以为文档设定特定条件的样式&#xff0c;也可以用于HTML、JavaScript等语言。 1、媒体查询基础 媒体查询…

兴业银行养老金拉新项目上线啦,地推百搭项目

兴业银行养老金就在 ”聚量推客“ 申请开通 今年最火的银行拉新项目就是养老金的 单价高 数据好 目前开通养老金的银行有 兴业银行养老金拉新 交通银行养老金拉新 工商银行养老金拉新 招商银行养老金拉新 浦发银行养老金拉新 广发银行养老金拉新等。。还有很多都开通了…

Youtube DNN:Deep Neural Networks for YouTube Recommendations

1.介绍 本文主要解决的三个挑战&#xff1a; 大规模的推荐场景&#xff0c;能够支持分布式训练和提供有效率的服务。不断更新的新物料。稀疏的用户行为&#xff0c;包含大量的噪声。 2.推荐系统 文章包含推荐系统的两阶段模型&#xff1a;召回和排序。 召回网络根据用户的历…

三国杀中的概率学问题2——神郭嘉

前言 四年前&#xff0c;我写过一篇博客三国杀中的概率学问题。当时有一条评论&#xff0c;让我算一算神郭嘉慧识的摸牌数。这也是我写这篇博客的动力来源。相比起四年前&#xff0c;我的数学水平渐长&#xff0c;于是想做一些更深入的数学问题。这篇文章将从更加理论的角度来…

密码学基础

密码学总览 信息安全面临的危险与应对这些威胁的密码技术&#xff1a; 关于上图中的威胁&#xff0c;这里在简单的说明&#xff1a; 窃听&#xff1a;指的是需要保密的消息被第三方获取。篡改&#xff1a;指的是消息的内容被第三方修改&#xff0c;达到欺骗的效果。伪装&…

Window下SRS服务器的搭建

---2023.7.23 准备材料 srs下载&#xff1a;GitHub - ossrs/srs at 3.0release 目前srs release到5.0版本。 srs官方文档&#xff1a;Introduction | SRS (ossrs.net) Docker下载&#xff1a;Download Docker Desktop | Docker 进入docker官网选择window版本直接下载。由…

7.多线程之单例模式

单例模式 文章目录 单例模式1. 什么是单例模式2. 饿汉模式3. 懒汉模式3.1 单线程版&#xff1a;3.2 多线程版 1. 什么是单例模式 单例模式是一种设计模式&#xff0c;常见的设计模式还有工厂模式、建造者模式等。 设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码…

Vue3前端100个必要的知识点

为什么是必要的&#xff0c;就是这100个知识点学完后&#xff0c;能独立完成一个小项目。最终能得到一个解决方案。也算是前端知识的积累。如果后面有需要的地方可以回来查。100个其实比较多&#xff0c;我会按新手老鸟&#xff0c;大神来分成3个等级&#xff0c;话不多说&…

SQLyog连接数据库报plugin caching_sha2_password could not be loaded......解决方案

问题描述 问题分析 因为MySQL新版默认使用caching_sha2_password作为身份验证的插件&#xff0c;而旧版本使用的是mysql_native_password。当出现plugin caching_sha2_password could not be loaded报错&#xff0c;我们更换为旧版本 如何解决 先使用cmd命令登录MySQL&a…

【IDEA】设置sql提示

第一步&#xff1a;注入SQL语言 1.首先选择任意一条sql语句&#xff0c;右击&#xff0c;选择 ‘显示上下文操作’ 2.选择 ‘注入语言或引用’ 3. 往下翻&#xff0c;找到MySQL 第二步&#xff1a;配置MySQL数据库连接 1.首先点击侧边的数据库&#xff0c;再点击上面的加号 2…

蓝桥杯刷题

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; &#x1f449;&#x1f3fb;最大降雨量 原题链接&#xff1…

前端移动高级web详细解析五

响应式布局方案 媒体查询 Bootstrap框架 01-媒体查询 基本写法 max-width&#xff1a;最大宽度&#xff08;小于等于&#xff09; min-width&#xff1a;最小宽度&#xff08;大于等于&#xff09; 书写顺序 min-width&#xff08;从小到大&#xff09; max-width&…

MySQL数据库入门到精通——运维篇(1)

MySQL数据库入门到精通——运维篇&#xff08;1&#xff09; 1. 日志1.1 错误日志1.2 二进制日志1.3 查询日志1.4 慢查询日志 2. 主从复制2.1 主从复制的概述2.2 主从复制的原理2.3 主从复制的搭建2.3.1 服务器准备2.3.2 主库配置2.3.3 从库配置2.3.4 测试 1. 日志 在任何一种…

python实现MC协议(SLMP 3E帧)的TCP服务端(篇一)

python实现MC协议&#xff08;SLMP 3E帧&#xff09;的TCP服务端是一件稍微麻烦点的事情。它不像modbusTCP那样&#xff0c;可以使用现成的pymodbus模块去实现。但是&#xff0c;我们可以根据协议帧进行组包&#xff0c;自己去实现帧的格式&#xff0c;而这一切可以基于socket模…