JavaScript | 前端三件套之JavaScript(二)

简介: JavaScript | 前端三件套之JavaScript(二)

3.5、运算符

JavaScript 提供了如下的运算符:(大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 == 和 ===)

一元运算符:++,--

算术运算符:+,-,*,/,%

赋值运算符:=,+=,-=…

关系运算符:>,<,>=,<=,!=,==,===…

逻辑运算符:&&,||,!

三元运算符:条件表达式 ? true_value : false_value

3.5.1、==和===

==:

1. 判断类型是否一样,如果不一样,则进行类型转换

2. 再去比较其值

===(js 中的全等于):

1. 判断类型是否一样,如果不一样,直接返回false

2. 再去比较其值

代码:

var age1 = 20;

var age2 = "20";

alert(age1 == age2);// true

alert(age1 === age2);// false

3.5.2、类型转换

在 == 运算符中,发现会进行类型转换。

JavaScript 中的类型转换:

①其他类型转为number

②其他类型转为boolean

3.5.2.1、其他类型转为number

string 转换为 number 类型:

①按照字符串的字面值,转为数字。

②如果字面值不是数字,则转为NaN

将 string 转换为 number 有两种方式:

①使用 + 正号运算符:

var str = +"20";

alert(str + 1) //21

②使用 parseInt() 函数(方法):

var str = "20";

alert(parseInt(str) + 1);

建议使用 parseInt() 函数进行转换

boolean 转换为 number 类型:true 转为1,false转为0

var flag = +false;

alert(flag); // 0

3.5.2.2、其他类型转为boolean

①number 类型转换为boolean:

0和NaN转为false

其他的数字转为true

②string 类型转换为boolean

空字符串转为false

其他的字符串转为true

③null类型转换为boolean:false

④undefined 转换为boolean:false

3.6、流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句,如下

if

switch

for

while

dowhile

3.7、函数

函数(就是Java中的方法)是被设计为执行特定任务的代码块;

JavaScript 函数通过 function 关键词进行定义。

3.7.1、定义格式

函数定义格式有两种:

方式一:

方式二:

3.7.2、函数调用

4、常用对象

JavaScript 提供了很多对象供使用者来使用。

这些对象总共分类三类:

基本对象

BOM对象(Browser Object Model)

DOM对象(Document Object Model)

4.1、基本对象

4.1.1、Arrary对象

JavaScript Array对象用于定义数组。

数组的定义格式有两种:

方式一:var 变量名 = new Array(元素列表);

方式二:var 变量名 = [元素列表];

注意:Java中的数组静态初始化用的是{}定义,而JavaScript中使用的是[]定义

元素访问:

访问数组中的元素和 Java 语言的一样,格式如下:arr[索引] = 值;

4.1.1.1、特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。

例如如下代码:

显示效果:

可以看到,因为可以任意边长,即直接赋值第十位的数据,但是前面并没有数据,所以前面的数据会自动转换为空值。

4.1.1.2、属性

Array 对象提供了很多属性,如下图是官方文档截取的

有了length属性,就可以动态获取数组的长度。

4.1.1.3、方法

Array 对象同样也提供了很多方法,如下图是官方文档截取的

下面着重说一下push函数和splice函数:

push 函数:给数组添加元素,也就是在数组的末尾添加元素。参数表示要添加的元素

splice 函数:删除元素

参数1:索引。表示从哪个索引位置删除

参数2:个数。表示删除几个元素

相关文章
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
524 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
8月前
|
JavaScript 前端开发 API
|
8月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
331 8
|
9月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
8473 23
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
307 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
211 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
464 5
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
505 1
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
314 5
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    601
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    250
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    233
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    185
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    293
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    423
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    182
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    124
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    196
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    272