admin管理员组文章数量:1588164
文章目录
- JavaScriptjs资源
- 初识JavaScript
-
- 1. 历史
- 2. JavaScript是什么
- 3. JavaScript使用
- 4. html/css/js关系
- 5. 浏览器执行js介绍
- 6. JS组成
- 7. JS三种书写位置
- 8. JS注释
- 9. JS输入输出语句
- 阻止链接跳转
- 变量
-
- 1. 什么是变量
- 2. 变量在内存中的存储
- 3. 变量的使用
- 4. 变量语法扩展
-
-
- 01-更新变量
- 02-同时声明多个变量
- 03-声明变量特殊情况
-
- 5. 变量命名规范
- 数据类型
-
- 1. 数据类型简介
- 2. 数字型number
-
-
- 01-数值进制
- 02-数字型范围
- 03-数字型三个特殊值
- 04-isNaN
-
- 2.字符串string
-
-
- 01-定义
- 02-转义
- 03-字符串长度
- 04-字符串拼接
-
- 3. boolean型
- 4. null 和 undefined
- 获取数据类型
-
- 1. typeof运算符
- 2. 字面量
- 数据类型转换
-
- 1. 转换为字符串
- 2. 转换成数字型(重点)
- 3. 转换为布尔型
- 4. 标志符、关键字、保留字
- 运算符
-
- 1. 算术运算符
-
-
- 01-表达式和返回值
-
- 2. 自增和自减运算符
- 3. 比较运算符
- 4. 逻辑运算符
- 5. 赋值运算符
- 6. 运算符优先级和左右结合
- 流程控制-分支
-
- 1. 流程控制
- 2. 顺序流程控制
- 3. 分支流程控制
-
-
- 01-分支结构
- 02-if语句
- 03-switch语句
- 04-switch和if else区别
-
- 循环
-
- 1. 循环目的
- 2. js中的循环
- 3. for循环
-
-
- 01-断点调试
- 02-双层for循环
-
- 4. while语句
- 5. do while语句
- 6. continue break
-
-
- 01-break 语句
- 02-continue 语句
-
- 规范
-
- 1. 标识符命名规范
- 2. 操作符语法规范
- 3. 单行注释规范
- 数组array
-
- 1. 数组的概念
- 2. 数组创建方法
- 3. 访问数组元素
- 4. 数组长度
- 5. 数组新增元素
- 函数
-
- 1. 函数的使用
- 2. 函数的参数
- 3. 函数的返回值
- 4. arguments的使用
- 5. 函数的两种声明
- 作用域
-
- 1. 什么是作用域
- 2. 变量作用域
- 3. 作用域链
- JS预解析
- 对象
-
- 1. 对象是什么
- 2. 创建对象的三种方法
-
-
- 01-字面量创建对象
- 02-利用new Object创建对象
- 03-利用构造函数创建对象
- 04-构造函数和对象
-
- 3. new关键字
- 4. 对象遍历
- 内置对象
-
- 1. 什么是内置对象
- 2. 查文档
- 3. Math对象(不是函数对象)
- 4. Date日期对象
-
-
- 01-获取年、月、日、时、分、秒
- 02-获取毫秒数
-
- 5. Array数组对象
-
-
- 01-数组对象的创建
- 02-检测是否为数组的两种方式
- 03-添加删除数组元素方法
- 04-数组排序
- 05-数组索引方法
- 06-数组转换成字符串
- 07-截取、连接数组
-
- 6. String字符串对象
-
-
- 01-字符串不会变
- 02-根据字符返回位置
- 03-根据位置返回字符(重点)
- 04-拼接以及截取字符串
- 05-其他方法
-
- 简单数据类型和复杂数据类型
-
- 1. 简单类型和复杂类型
- 2. 堆和栈
- 3. 简单类型的内存分配
- 4. 简单类型传参
- 5. 复杂类型传参
- 6. 小结
- Web APIs
-
- 1. Web APIs组成
- 2. API和Web APIs
- DOM
-
- 1. 什么是DOM
- 2. DOM树
- 3. 获取元素
-
-
- 01-如何获取页面元素
- 02-根据ID获取
- 03-根据标签名获取
- 04-通过HTML5新增方法获取
- 05-获取特殊元素(body、html)
-
- 4. 事件基础
-
-
- 01-事件概述
- 02-事件三要素
- 03-事件
-
- 5. 操作元素
-
-
- 01-改变元素内容
- 02-常见元素的属性操作
- 03-表单元素的属性操作
- 04-样式属性操作
- 05-排他思想
- 06-自定义属性操作
- 07-H5自定义属性
-
- 6. 节点操作
-
-
- 01-为什么学节点操作
- 02-节点概述
- 03-节点层级
- 04-创建和添加节点
- 05-删除节点
- 06-复制节点
- 07-三种动态创建元素
-
- 7. DOM核心(总结)
-
-
- 01-创建
- 02-增
- 03-删
- 04-改
- 05-查
- 06-属性操作
- 07-事件操作
-
- 事件高级
-
- 1. 注册事件
-
-
- 01-传统注册方式
- 02-方法监听注册方式
- 03-事件监听方式
-
- 2. 删除事件(解绑事件)
-
-
- 01-传统方式
- 02-方法监听注册方式
-
- 3. DOM事件流
- 4. 事件对象
-
-
- 01-事件对象属性
- 02-事件对象方法
-
- 5. 阻止冒泡方法
- 6. 事件委托(代理、委派)
- 7. 常用的鼠标事件
-
-
- 01-禁止鼠标右键菜单
- 02-禁止鼠标选中
- 03- 鼠标事件对象
-
- 8. 常用的键盘事件
-
-
- 01-常用键盘事件
- 02-键盘事件对象
-
- BOM
-
- 1. BOM概述
-
-
- 01-概述
- 02-BOM构成
-
- 2. window对象的常见事件
-
-
- 01-窗口加载事件
- 02-调整窗口大小事件
-
- 3. 定时器
-
-
- 01-两种定时器
- 02-setTimeout()定时器
- 03-setInterval()定时器
- 04-this
-
- 4. JS执行队列
-
-
- 01-js是单线程
- 02-同步与异步
-
- 5. location对象
- 6. URL
- 7. navigator对象
- 8. history对象
- PC端页面特效
-
- 1. 元素偏移量offset
- 2. 元素可视区client
- 3. 立即执行函数
- 4. 元素滚动scroll
- 5. 三大系列总结
- 6. mouseover和mouseenter区别
- 7. 动画函数封装
-
-
- 01-动画实现原理
- 02-简单动画函数封装
- 03-给不同元素记录不同定时器
- 04-缓动效果原理
- 05-动画函数添加回调函数
- 06-封装单独js文件里面
-
- 8. 节流阀
- 9. 带有动画的返回顶部
- 10. 筋斗云案例
- 移动端网页特效
-
- 1. 触屏事件
-
-
- 01-触屏touch事件
- 02-触摸对象
- 03-移动端拖动元素
-
- 2. 移动端常见特效
-
-
- 01-classList属性
- 02-click延时解决方案
-
- 3. 常用移动端开发插件
-
-
- 01-fastclick插件使用
- 02-Swiper插件的使用
- 03-移动端其他插件的方法
- 04-视频插件
-
- 4. 移动端常用开发框架
- 本地存储
-
- 1. 本地存储特性
- 2. window.sessionStorage
- 3. window.localStorage
- jQuery
-
- 1. jQuery概述
-
-
- 01-JS库
- 02-jQuery概念
- 03-jQuery入口函数
- 04-jQuery顶级对象$
- 05-jQuery对象和DOM对象
-
- 2. jQuery常用API
-
-
- 01-jQuery选择器
- 02-隐式迭代(重要)
- 03-jQuery筛选选择器
- 04-jQuery排他思想
- 05-链式编程
-
- 3. jQuery样式操作
-
-
- 01-操作css方法
- 02-设置类样式方法
-
- 4. jQuery效果
-
-
- 01-显示隐藏效果
- 02-滑动效果与事件切换
- 03-动画队列及停止排队方法
- 04-淡入淡出效果
- 05-自定义动画animate
-
- 5. jQuery属性操作
-
-
- 01-设置或获取元素固有属性
- 02-设置或获取元素自定义属性值
- 03-数据缓存
-
- 6. jQuery内容文本值
-
-
- 01-普通元素的内容html()
- 02-普通元素文本内容text()
- 03-获取表单里的值val
-
- 7. jQuery元素操作
-
-
- 01-遍历元素
- 02-创建元素
- 03-添加元素
- 04-删除元素
-
- 8. jQuery尺寸操作
- 9. jQuery位置
-
-
- 01-offset
-
- 10. jQuery事件
-
-
- 01-事件注册
- 02-事件处理on()绑定事件
- 03-事件处理off()解绑事件
- 04-事件处理one()执行一次事件
- 05-事件处理trigger()自动触发事件
- 06-事件对象
-
- 11. jQuery其他方法
-
-
- 01-对象拷贝
- 02-多库共存
- 03-jQuery插件
- 04-图片懒加载技术
- 05-全屏滚动(fullpage.js)
- 06-Bootstrap Js插件
-
- 数据可视化
-
- 1. 什么是数据可视化
-
-
- 01-数据可视化
- 02-数据可视化场景
- 03-常见的数据可视化库
-
- 2. 数据可视化项目
-
-
- 01-项目目的
- 02-项目技术
-
- 3. ECharts简介
- 4. ECharts使用
- 5. ECharts相关配置
- 5. ECharts相关配置
JavaScriptjs资源
网址:https://www.wangdoc/
初识JavaScript
1. 历史
JavaScript 和 Java 的关系。它们是两种不一样的语言,但是彼此存在联系。
Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言。Brendan Eich 有很强的函数式编程背景,希望以 Scheme 语言(函数式语言鼻祖 LISP 语言的一种方言)为蓝本,实现这种新语言。
2. JavaScript是什么
- JavaScript是世界上最流行语言之一。是一种运行在客户端的脚本语言(Script是脚本的意思)
- 脚本语言(高级语言):不需要编译,运行由js解释器(js引擎)逐行来进行解释并执行
- 也可以基于Node.js技术进行服务器端编程
3. JavaScript使用
- 表单动态校验(密码强度检测)(JS产生最初的目的)
- 网页特效
- 服务器开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
4. html/css/js关系
html:决定网页结构和内容,相当于人的身体
css:决定网页呈现给用户的模样,相当于给人穿衣服、化妆
js:实现业务逻辑和页面控制(决定功能)相当于人的各种动作
5. 浏览器执行js介绍
浏览器分为两部分:渲染引擎和js引擎
渲染引擎:解析html和css,俗称内核
js引擎:js解释器,用来读取网页中的JavaScript代码,对其处理后运行
浏览器本身不会执行js代码,而是通过内置JavaScript引擎来执行js代码,逐行执行
6. JS组成
组成:
- ECMAScript:JavaScript语法
- DOM:页面文档对象模型
- BOM:浏览器对象模型
**ECMAScript:**是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。
文档对象模型:(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
BOM:(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
7. JS三种书写位置
-
行内式js 直接写到元素的内部
<!--行内式js 直接写到元素的内部--> <input type="button" value="唐伯虎" οnclick="alert('秋香姐')">
注意:
- html使用双引号,js中推荐使用单引号
- 可以将单行或者少量js代码写在html标签的事件属性中
- 可读性差
- 引号易错,引号多层嵌套匹配时,容易错
-
内嵌式js
<script> alert("沙漠骆驼"); </script>
-
外部式
<script src="my.js"></script>
注意:
- 引用外部js文件的script标签中间不可以写代码
- 适合于js代码量比较大的情况
8. JS注释
单行注释://
快捷键:ctrl+/
多行注释:/**/
快捷键:ctrl + alt + /
9. JS输入输出语句
方法 | 说明 |
---|---|
alert() | 弹窗输出警示框 |
prompt() | 弹窗输入 |
console.log(); | 浏览器控制台打印。 |
阻止链接跳转
在a标签href里添加 :javascript:;
变量
1. 什么是变量
通俗:变量是用于存放数据的容器,通过变量名获取数据
2. 变量在内存中的存储
本质:变量是程序在内存中申请一块用来存放数据的空间
3. 变量的使用
分为两步:声明和赋值
-
声明变量var
//声明变量 var age;
-
赋值
将值放入变量中,通过变量名
// 赋值 age = 18;
-
变量初始化
//初始化 var myname = 'giao';
4. 变量语法扩展
01-更新变量
一个变量被重新赋值后,原来的值会被覆盖,以最后一次赋的值为准
02-同时声明多个变量
// 同时声明多个变变量
var age = 18,
address = '火影村',
gz = '2000';
03-声明变量特殊情况
// 1.只声明不复制,结果是? 结果是undefined 未定义的
var sex;
console.log(sex); //undefined
// 2.不声明不复制,直接报错
console.log(tel);
// 3.不声明直接复制使用
qq = 110;
console.log(qq); //可以直接使用,但不推荐这样使用
5. 变量命名规范
- 由字母、数字、下划线、美元符号$组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字,如:var,for,while
- 变量名必须有意义
- 遵循驼峰命名法,首字母小写,后面单词的首字母大写
- 推荐翻译网站,有道
数据类型
1. 数据类型简介
JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值,本教程不涉及。)【简单数据类型】
- 数值(number):整数和小数(比如
1
和3.14
)。默认:0 - 字符串(string):文本(比如
Hello World
)。默认:“” - 布尔值(boolean):表示真伪的两个特殊值,即
true
(真)和false
(假)。默认:false undefined
:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值。默认:undefinednull
:表示空值,即此处的值为空。默认:null- 对象(object):各种值组成的集合。
对象是最复杂的数据类型,又可以分成三个子类型。【复杂数据类型】
- 狭义的对象(object)
- 数组(array)
- 函数(function)
js的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
js拥有动态类型,同时也意味着相同的变量可用作不同的类型
2. 数字型number
01-数值进制
使用字面量直接表示一个数值时,JavaScript 对整数提供四种进制的表示方法:十进制、十六进制、八进制、二进制。
- 十进制:没有前导0的数值。
- 八进制:有前缀
0o
或0O
的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。 - 十六进制:有前缀
0x
或0X
的数值。 - 二进制:有前缀
0b
或0B
的数值。
// 八进制 前面加0o或0O
var num1 = 0o10;
console.log(num1);
// 十六进制
var num2 = 0x1f;
console.log(num2);
02-数字型范围
JavaScript 提供Number
对象的MAX_VALUE
和MIN_VALUE
属性,返回可以表示的具体的最大值和最小值。
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
console.log(Number.MIN_VALUE);//5e-324
03-数字型三个特殊值
Infinity,代表无穷大,大于任何数值
-Infinity,代表无穷小,小于任何数值
NaN,not a number,代表一个非数值
NaN
是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。
Infinity
大于一切数值(除了NaN
),-Infinity
小于一切数值(除了NaN
)。
Infinity
与NaN
比较,总是返回false
。
//无穷大
console.log(Number.MAX_VALUE * 2);
//无穷小
console.log(-Number.MAX_VALUE * 2);
04-isNaN
isNaN
方法可以用来判断一个值是否为NaN
。
isNaN(NaN) // true
isNaN(123) // false
isNaN
只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN
,所以最后返回true
,也就是说,isNaN
为true
的值,有可能不是NaN
,而是一个字符串。
2.字符串string
01-定义
-
字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。
'abc' "abc"
-
单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。最好用单引号
'key = "value"' "It's a long journey"
-
如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。
-
字符串默认只能写在一行内,分成多行将会报错。
02-转义
反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。
需要用反斜杠转义的特殊字符,主要有下面这些。
\0
:null(\u0000
)\b
:后退键(\u0008
)\f
:换页符(\u000C
)\n
:换行符(\u000A
)\r
:回车键(\u000D
)\t
:制表符(\u0009
)\v
:垂直制表符(\u000B
)\'
:单引号(\u0027
)\"
:双引号(\u0022
)\\
:反斜杠(\u005C
)
03-字符串长度
length
属性返回字符串的长度。
var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5
上面代码表示字符串的length
属性无法改变,但是不会报错。
04-字符串拼接
连接运算符(+
)可以连接多个单行字符串,将长字符串拆成多行书写,输出的时候也是单行。
字符串 + 任何类型 = 拼接之后的新字符串
//拼接
console.log('沙漠' + '骆驼');
console.log('12' + 12);//结果:'1212'
var name = '张三';
console.log('我叫' + name + ',你好');//我叫张三,你好
+号总口诀:数值相加,字符相连
3. boolean型
布尔类型有两个值true (1)和false (0),true表示真,false表示假
布尔型参与计算true相当于1,false相当于0
下列运算符会返回布尔值:
- 前置逻辑运算符:
!
(Not) - 相等运算符:
===
,!==
,==
,!=
- 比较运算符:
>
,>=
,<
,<=
isFinite
方法返回一个布尔值,表示某个值是否为正常的数值。
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true
除了Infinity
、-Infinity
、NaN
和undefined
这几个值会返回false
,isFinite
对于其他的数值都会返回true
。
4. null 和 undefined
null
与undefined
都可以表示“没有”,含义非常相似。将一个变量赋值为undefined
或null
,语法效果几乎没区别。
var a = undefined;
// 或者
var a = null;
在if
语句中,它们都会被自动转为false
,相等运算符(==
)甚至直接报告两者相等。
null
可以自动转为0
。
Number(null) // 0
undefined与数字相加,结果为NaN
null与数字相加,结果为数字,null自动转换为0
获取数据类型
1. typeof运算符
JavaScript 有三种方法,可以确定一个值到底是什么类型。
typeof
运算符instanceof
运算符Object.prototype.toString
方法
typeof
运算符可以返回一个值的数据类型。
数值、字符串、布尔值分别返回number
、string
、boolean
,函数返回function
,undefined
返回undefined
,对象返回object
,null
返回object
。
2. 字面量
字面量是在源代码中一个固定值得表示法,通俗来说,就是字面量表示如何表达这个值
- 数字字面量:8,9,10
- 字符串字面量:“朱元璋”,‘人物’
- 布尔字面量:true,false
数据类型转换
把一个数据类型的变量转换成两外一种数据类型
通常实现3种方式的转换
- 转换为字符串型
- 转换成数字型
- 转换成布尔型
1. 转换为字符串
方法 | 说明 |
---|---|
toString() | 转换成字符串 |
String()强制转换 | 转换成字符串 |
加号拼接字符串 隐式转换(重点) | 和字符串拼接结果都是字符串 |
2. 转换成数字型(重点)
方法 | 说明 |
---|---|
parseInt(string)函数 | 将字符串转为整数。 |
parseFloat(string)函数 | 将一个字符串转为浮点数。 |
Number()强制转换函数 | 将字符串转为数值型。 |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 |
parseInt进制转换
parseInt
方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt
的第二个参数为10,即默认是十进制转十进制。
parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000
下面是转换指定进制的数的例子
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
如果第二个参数不是数值,会被自动转为一个整数。这个整数只有在2到36之间,才能得到有意义的结果,超出这个范围,则返回NaN
。如果第二个参数是0
、undefined
和null
,则直接忽略。
parseFloat
如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN
。
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN
3. 转换为布尔型
方法 | 说明 |
---|---|
Boolean()函数 | 其他类型转换成布尔值 |
代表空、否定的值会转换为false,如:0、NaN、null、undefined
其余值都会转换成true
4. 标志符、关键字、保留字
- 标志符:开发人员为变量、属性、函数、参数取的名字,不能是关键字或保留字
- 关键字:js本身使用了的字,不能再用他们充当变量名、方法名
eg:break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。
- 保留字:js同样保留了一些关键字,这些关键字在当前语言版本中并没有用到,但在未来版本中可能会用到。
eg:class const enum export extends import super implements let private public yield 2 interface package protected static
运算符
也称操作符,用于实现赋值、比较和执行算术运算功能的符号
js中有
- 算术运算符
- 递增递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
1. 算术运算符
JavaScript 共提供10个算术运算符,用来完成基本的算术运算。
- 加法运算符:
x + y
- 减法运算符:
x - y
- 乘法运算符:
x * y
- 除法运算符:
x / y
- 指数运算符:
x ** y
- 余数运算符:
x % y
- 自增运算符:
++x
或者x++
- 自减运算符:
--x
或者x--
- 数值运算符:
+x
- 负数值运算符:
-x
注意:
- 浮点数算数运算里面会有问题
- 不能直接拿着浮点数进行相比较
01-表达式和返回值
表达式:由数字、运算符、变量等组成的式子
表达式最终会有一个结果,称为返回值
2. 自增和自减运算符
自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为数值,然后加上1或者减去1。它们会修改原始变量。
自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作,称为后置;放在变量之前,会先进行自增/自减操作,再返回变量操作后的值,称为前置。
3. 比较运算符
JavaScript 一共提供了8个比较运算符。
>
大于运算符<
小于运算符<=
小于或等于运算符>=
大于或等于运算符==
相等运算符===
严格相等运算符!=
不相等运算符!==
严格不相等运算符
JavaScript 提供两种相等运算符:==
和===
。
- 简单说,它们的区别是相等运算符(
==
)比较两个值是否相等,严格相等运算符(===
)比较它们是否为“同一个值”。如果两个值不是同一类型,严格相等运算符(===
)直接返回false
,而相等运算符(==
)会将它们转换成同一个类型,再用严格相等运算符进行比较。 - 需要注意的是,
NaN
与任何值都不相等(包括自身)。另外,正0
等于负0
。 - 严格相等运算符有一个对应的“严格不相等运算符”(
!==
),它的算法就是先求严格相等运算符的结果,然后返回相反值。
4. 逻辑运算符
布尔运算符用于将表达式转为布尔值,一共包含四个运算符。
- 取反运算符:
!
- 且运算符:
&&
- 或运算符:
||
- 三元运算符:
?:
三元条件运算符由问号(?)和冒号(:)组成,分隔三个表达式。它是 JavaScript 语言唯一一个需要三个运算子的运算符。如果第一个表达式的布尔值为true
,则返回第二个表达式的值,否则返回第三个表达式的值。
't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"
上面代码的t
和0
的布尔值分别为true
和false
,所以分别返回第二个和第三个表达式的值。
对于非布尔值,取反运算符会将其转为布尔值。可以这样记忆,以下六个值取反后为true
,其他值都为false
。
undefined
null
false
0
NaN
- 空字符串(
''
)
逻辑中断(短路运算)
当有多个表达式时,左边的表达式值可以确定结果时,就不在运算右边表达式的值
-
逻辑与
语法:表达式1 && 表达式2
如果第一个表达式值为真,则返回表达式2
如果第一个表达式值为假,则返回表达式1
-
逻辑或
语法:表达式1 || 表达式2
如果第一个表达式值为真,则返回表达式1
如果第一个表达式值为假,则返回表达式2
5. 赋值运算符
概念:用来把数据赋值给变量的运算符
赋值运算符 | 说明 |
---|---|
= | 直接复制 |
+=、-= | 加、减一个数 后再赋值 |
*=、/=、%= | 乘、除、取模 后在赋值 |
6. 运算符优先级和左右结合
JS运算符优先级(从高到低列出)
运算符 | 描述 |
---|---|
. [] () | 字段访问、数组下标、函数调用以及表达式分组 |
++ – - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<< >> >>> | 移位 |
< <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 条件 |
= oP= | 赋值、运算赋值 |
, | 多重求值 |
少数运算符是“右结合”,其中最主要的是赋值运算符(=
)和三元条件运算符(?:
),指数运算符(**
)也是右结合。
流程控制-分支
1. 流程控制
流程控制主要有三种结构:顺序结构、分支结构、循环结构,这三种结构代表三种代码执行顺序
2. 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,没有特定语法结构,程序会按照代码的先后顺序,依次执行
3. 分支流程控制
01-分支结构
由上向下执行代码过程中,根据不同条件,执行不同的路径代码,得到不同结果
两种分支结构
- if语句
- switch语句
02-if语句
语法:
if ( 条件表达式 ) {
//条件成立执行语句
}
//if else双支
if ( 条件表达式 ) {
//执行语句
}else {
//执行语句
}
//多分支语句
if ( 条件表达式 ) {
//执行语句
}else if ( 条件表达式 ){
//执行语句
}else {
//执行语句
}
03-switch语句
语法:
switch (表达式) {
case value1:
执行语句;
break;
case value2:
执行语句;
break;
...
default:
执行最后的语句;
}
switch注意事项
- 表达式常写成变量
- 表达式与value值必须是全等,值和数据类型都得一致
- break 如果当前case里面没有break,则不会退出switch,继续执行下一个case
04-switch和if else区别
- 一般情况下,它俩是可以互相替换
- switch通常处理一些比较确定值得情况,而if else更加灵活,常用语范围判断
- switch语句进行条件判断后直接执行到程序的条件语句,效率更高,if语句几个条件,就得判断多少次
- 分支较少时,if效率会比switch高
循环
1. 循环目的
规律性的重复执行,用循环来重复执行某些语句
2. js中的循环
js中有三种循环
for循环
while循环
do…while循环
3. for循环
语法
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for-in—循环遍历对象的属性
用 for-in 来遍历一遍数组的内容,代码如下:
const arr = [1, 2, 3];
let index;
for(index in arr) {
console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
for-in 并不适合用来遍历 Array 中的元素,其更适合遍历对象中的属性
forEach–引入新循环
forEach 方法为数组中含有有效值的每一项执行一次 callback 函数,那些已删除(使用 delete 方法等情况)或者从未赋值的项将被跳过(不包括那些值为 undefined 或 null 的项)。 callback 函数会被依次传入三个参数:
- 数组当前项的值;
- 数组当前项的索引;
- 数组对象本身;
const arr = [1, 2, 3];
arr.forEach((data) => {
console.log(data);
});
// 输出结果如下
// 1
// 2
// 3
添加数组当前项的索引参数,注意callback 函数中的三个参数顺序是固定的,不可以调整。
const arr = [1, 2, 3];
arr.forEach((data,index,arr) => {
console.log("arr[" + index + "] = " + data);
});
// 输出结果如下
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
需要注意的是,forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。
const arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr.name = "Hello world";
arr.forEach((data, index, array) => {
console.log(data, index, array);
});
运行结果:
a 0 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
b 3 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
c 10 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
01-断点调试
首先是普通调试,又叫单步调试。F12找到Sources后,在左侧文件夹中找到你想运行的文件,然后点击pause script execution按钮再刷新页面(F5),就可以进入单步调试,点击Step over next function call就是程序逐步调试,每点击一次,就会按照代码执行顺序,向下执行一句代码。
02-双层for循环
for (语句 1; 语句 2; 语句 3)
{
for (语句 4; 语句 5; 语句 6)
{
被执行的代码块;
}
}
4. while语句
语法:
while (条件)
{
需要执行的代码;
结束条件;
}
注意:如果忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。
5. do while语句
语法:
do
{
需要执行的代码;
}
while (条件);
该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行
6. continue break
01-break 语句
break 语句:它用于跳出 switch() 语句。
break 语句:也可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码
02-continue 语句
continue 语句:断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
规范
1. 标识符命名规范
变量、函数的命名必须有意义
变量一般用名词
函数一般用动词
2. 操作符语法规范
操作符的左右两侧各保留一个空格
3. 单行注释规范
单行注释前有个空格
数组array
1. 数组的概念
数组对象是使用单独的变量名来存储一系列的值。
数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。
2. 数组创建方法
创建一个数组,有三种方法。
下面的代码定义了一个名为 myCars的数组对象:
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
4: 数组元素类型
数组中可以存放任意类型的数据,如字符串,数字,布尔值等
3. 访问数组元素
通过指定数组名以及索引号码,你可以访问某个特定的元素。
可以访问myCars数组的第一个值:
var name=myCars[0];
可以修改数组 myCars 的第一个元素:
myCars[0]="Opel";
索引(下标):用来访问数组元素的序号。
注意:[0] 是数组的第一个元素。[1] 是数组的第二个元素。
遍历数组:for循环,下标0开头
4. 数组长度
.length:获取数组长度,一般在遍历数组时会用到。
var array3 = [10,11,12,13,14,"15","abc"];
console.log(array3.length);
数组转换成字符串:遍历之后用空字符串相连
5. 数组新增元素
-
通过内置函数BIF添加
// push:在数组末尾添加成员
// pop:把末尾成员删除
// shift删除并返回第一个成员
// unshift 在数组头部添加成员,返回新数组的长度
var array4 = [10,11,12,13,14,“15”,“abc”];
array4.push(“def”);
console.log(array4);array4.pop();
console.log(array4);var ary = array4.shift();
console.log(array4);
console.log(ary);var ary2 = array4.unshift(“abc”);
console.log(array4);
console.log(ary2); -
新增数组元素,修改索引号,追加数组元素
不能直接给已存在的索引号赋值,否则会覆盖掉以前的数据
函数
JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义,也可以是一个表达式。
函数就是封装了一段可以被重复执行调用的代码块,目的:让大量代码重复使用
1. 函数的使用
函数声明
函数声明的语法 :
function 函数名(参数) {
执行的代码 // 函数体
}
注意:
- function 声明函数的关键字,全部小写
- 函数名一般为动词
- 函数不调用不执行
调用函数
函数名();
2. 函数的参数
//声明函数
function 函数名(形参1,形参2...) {// 声明函数小括号里面的是形参,用逗号隔开
函数体
}
函数名(实参1,实参2...);// 函数调用小括号里面的是 实参
3. 函数的返回值
return语句:可以实现函数的返回
function 函数名() {
return 需要返回的结果;
}
- 函数只是实现某种功能,结果需要返回给函数的调用这,通过return 实现
- 只要函数遇到return 就把后面的结果返回给调用者 函数名() = return后面结果
return也可以终止函数 ,return之后代码不被执行
return只能返回一个值。如果想返回多个值,用数组
return如果有返回值,则返回return后面的值,没有则返回undefined
4. arguments的使用
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
arguments展示形式是一个伪数组,可以进行遍历
- 具有length属性
- 按索引方式储存数据
- 不具有数组push,pop等方法
5. 函数的两种声明
- 利用函数关键字自定义函数
//声明函数
function 函数名(形参1,形参2...) {// 声明函数小括号里面的是形参,用逗号隔开
函数体
}
- 函数表达式
//声明函数
var 变量名 = function(){};
//调用函数
变量名();
- fun是变量名,不是函数名
- 函数表达是声明方式跟声明变量差不多,只不过变量里面存的是值而函数表达是里面存的是函数
作用域
1. 什么是作用域
它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的.
表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境。
Javascript的作用域只有两种(es6之前):全局作用域和局部作用域,局部作用域是按照函数来区分的。
2. 变量作用域
变量作用域:根据作用域不同分为全局变量和局部变量
全局变量:在全局作用域下的变量,在全局下都可以使用
局部变量:在局部作用域下的变量,或者说是函数内部的变量就是局部变量,只能在函数内部使用
注意:如果在函数内部,乜有声明直接赋值的变量也是全局变量
从执行效率上看全局变量和局部变量
- 全局变量只有浏览器关闭的时候才会销毁,比较占资源
- 局部变量:当程序执行完毕就会销毁,节约内存资源
3. 作用域链
内部函数访问外部函数的变量,采取的是脸是查找的方式来决定取那个值,这种结构称为作用域链(就近原则)
JS预解析
js代码分为两步:预解析和代码执行
- 预解析:js引擎会把js里面所有var 和 function 提升到当前作用域在前面
- 代码执行:按照代码书写的顺序从上到下执行
预解析分为变量预解析(变量提升) 和 函数预解析(函数提升)
- 变量提升:把所有变量声明提升到当前作用域最前面,不提升赋值操作
- 函数提升:把所有函数声明提升到当前作用域最前面,不提升调用
对象
1. 对象是什么
对象是一个具体的事务
对象由属性和方法组成的
- 属性:事物的特征
- 方法:事务的特征
2. 创建对象的三种方法
01-字面量创建对象
用花括号来创建对象
var obj = {};// 创建一个空对象
//eg
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue",
sayHi: function() {
console.log('hi~');
}};
- 里面的属性或方法采用键值对的形式,键:属性名;值:属性值
- 多个属性或方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
访问对象
- 调用对象的属性:对象名.属性名
person.lastName;
- 第二种调用舒兴国的方法:对象[‘属性名’]
person["lastName"];
- 调用对象方法:对象名.方法名
02-利用new Object创建对象
语法:
var obj = new Object(); // 创建一个空的对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function () {
console.log('hi~');
}
- 利用等号 = 赋值来添加对象和方法
- 每个属性和方法之间用分号隔开
03-利用构造函数创建对象
构造函数
- 定义:通过 new 函数名 来实例化对象的函数叫构造函数。
- 任何的函数都可以作为构造函数存在。
- 之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要 功能为 初始化对象,特点是和new 一起使用。
- new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。
- 构造函数定义时首字母大写。
语法格式
function 构造函数名() {
this.属性 = 值;
this.方法 = function () {};
}
new 构造函数名();
//eg
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
console.log(ldh.age, ldh.name, ldh.sex);
ldh.sing('冰雨');
- 构造函数里面不需要return 就可以返回结果
- 调用构造函数必须使用new
04-构造函数和对象
- 构造函数:构造名(); 泛指的某一大类,类似于java的class
- 创建对象:new 对象名(); 特指某一个,通过new创建,称对象实例化
3. new关键字
- new构造函数可以再内存中创建一个空的对象
- this 会指向刚才创建的空对象
- 执行构造函数里面的代码,给空对相关添加属性和方法
- 返回对象
4. 对象遍历
for… in 语句用于对数组或者对象的属性进行循环操作。(最好是对对象进行操作)
语法:
for (变量 in 对象) {
}
// eg
for (var k in ldh) {
console.log(k); // k 变量输出可以得到属性名
console.log(ldh[k]);// obj[k]得到属性值
}
内置对象
1. 什么是内置对象
JS对象分为三种:自定义对象、内置对象、浏览器对象
前两种对象是js基础内容
第三种是属于js独有,在JS API
内置对象:就是js语言自带的一些对象,由开发者提供,并提供了一些常用的或是最基本而必要的功能(属性和方法)
内置对象有点:帮助快速开发
内置对象有:Math、Date、Array、String等
2. 查文档
学习一个内置对象的使用,可以通过文档学习,通过MDN/W3c来查询
MDN:https://developer.mozilla/zh-CN/docs/Web/JavaScript
3. Math对象(不是函数对象)
Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math
不是一个函数对象。
不是构造函数,不用new调用,可以直接使用
console.log(Math.PI); //3.141592653589793
console.log(Math.max(1,2,3,34,124.23)); //124.23
常用方法
Math.abs(x)
函数返回指定数字 “x“ 的绝对值
Math.PI
表示一个圆的周长与直径的比例,约为 3.14159:
Math.ceil()
函数返回大于或等于一个给定数字的最小整数。向上取值
Math.floor()
返回小于或等于一个给定数字的最大整数。向下取整
Math.round()
函数返回一个数字四舍五入后最接近的整数。
Math.random()
函数返回一个浮点数, 伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括 1(排除1),然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
Math.sqrt()
函数返回一个数的平方根
4. Date日期对象
Date是一个构造函数,需要实例化,用来处理事件
语法:
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
创建一个新Date
对象的唯一方法是通过new
操作符,例如:let now = new Date();
若将它作为常规函数调用(即不加
本文标签: JsStudy
版权声明:本文标题:Js_Study 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728025205a1142603.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论