运算符

1.算数运算符

运算符 描述
+
-
*
/
% 取余(保留整数)
++ 递加
- - 递减
**

var x=10;

var res1=x++; '先赋值后自增1' 10

var res2=++x; '先自增1后赋值' 12

2.赋值运算符

运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

3、比较运算符

运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符

弱等于:自动转换类型

'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'

强等于:不转换类型

'5' === 5 '结果是false'

4、逻辑运算符

运算符 描述
&& 逻辑与
|| 逻辑或
! 逻辑非

5、类型运算符

运算符 描述
typeof 返回变量的类型
instanceof 返回 true,如果对象是对象类型的实例

流程控制

if语句

JS语言提供了俩种分支结构语句1.if语句 2.switch语句

if 语法结构

    <script>
// 1.if的语法结构 if如果的意思
if (条件表达式 返回的值是布尔值 ) {
// 执行语句
}
2.执行思路:如果if条件表达式为 真 则执行大括号里面的语句 如果if条件表达式为 假 则不
执行里面语句直接跳过,执行if下面语句。这里的语句可以理解为一个行为把就是做了什么事情,可以做很多很多行为
</script>

if else (双分支语句)语法结构

    <script>
// 1.语法结构 if 如果 else 否则
if (条件表达式) {
// 满足条件时,执行的语句
} else {
// 不满足条件时,执行的语句
}
// 2.执行思路 如果 if 条件表达式为真则执行语句1 否则语句2
// if里面的语句1 和else里面的语句2 最终只能执行一个语句
// 3.注意else后面不跟小括号
</script>

if else if else(多分支语句)语法结构

    <script>
// 1.多分支语句 就是用来利用多个条件来选择不同的z语句执行 得到的结果不同 实现多选一的过程
// if else if 语法结构
if (条件表达式1) {
// 执行语句1
} else if (条件表达式2) {
// 执行语句2
} else if (条件表达式3) {
// 执行语句3
} else {
// 最后的语句
}
// 2.执行思路 如果条件表达式 1 满足条件 就执行 语句1 执行完毕后,退出整个if语句
// 如果条件表达式1 不满足条件 就执行条件表达式2 满足的话 就执行语句2.然后退出整个if语句
// 如果都不满足则执行最后else的语句
// 注意点 里面的表达式条件可为多个 是多选一的过程
</script>

分支流程控制switch语句

switch也是多分支语句 它用于基于不同的条件来执行不同的代码,当要针对变量设置一系列特定值的选项
时,就可以使用switch。 <script>
// 1.switch 语句 也是实现多选一的过程
// 语法结构
switch (表达式) {
case value1:
// 执行语句1
break;
case value2:
// 执行语句2
break;
case value3:
// 执行语句3
break;
default:
// 执行最后的语句
}
// 2.执行思路 利用我们表达式的值 和case 后面的选项值相匹配 如果匹配上,就执行case里面的语句 如果都没有匹配上 就执行default里面的语句
// 注意:最后的双逗号别忘记写了
// 3.举个例子
var num = 3
switch (num) {
case 1:
break;
case 2:
break;
case 3:
break;
default:
// 如果都没有执行这里面的
}
// 4.switch注意点
// 我们经常吧switch里面的表达式写出变量形式
// num里面的值和case后面的值必须是全等关系 也包括数据类型也要一致 如num===3 严格判断的
// break(结束的意思) 如果当前的case里面没有break 则不会退出 switch继续执行下一个case 直到遇见了break才会退出
</script>

switch语句和if else if语句区别

    一般情况下他们俩是可以互相替换的
switch…case语句通常处理case比较确定值得情况下,而if…else…语句更加灵活一些,常用于范围判断(大于、等与蒙个范围)
switch语句进行条件判断后是直接跳到相对应执行语句上的效率高一些,而if…else是一条一条进行判断的
当分支比较少时,if…else语句的执行效率比switch语句高
当分支比较多时,switch语句的执行效率比较高,而且结果更清晰

for循环

for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
//比如:输出10句“我想吃泡面”
// 基本写法
for(var i = 1; i <= 10; i++){
console.log('我想吃泡面~');
}
// 用户输入次数
var num = prompt('请输入次数:');
for ( var i = 1 ; i <= num; i++) {
console.log('我想吃泡面~');
}

双重for循环

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
} //打印五行五列星星
var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 3个星星 就 加一次换行
star += '\n'
}
console.log(star);
//核心逻辑:
//1.内层循环负责一行打印五个星星
//2.外层循环负责打印五行

for 循环小结

    1.for 循环可以重复执行某些相同代码
2.for 循环可以重复执行些许不同的代码,因为我们有计数器
3.for 循环可以重复执行某些操作,比如算术运算符加法操作
4.随着需求增加,双重for循环可以做更多、更好看的效果
5.双重 for 循环,外层循环一次,内层 for 循环全部执行
6.for 循环是循环条件和数字直接相关的循环

while循环

while (条件表达式) {
// 循环体代码
} //使用while循环,完成从盒子里取球的动作,每次取一个,共6个球。
var i=1 ;
while(i<=6){
console.log('这是去除的第'+i+'球');
i++;
}

do...while

do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式); //使用do…while语句,输出1-6这6个数字。
var i=1 ;
do{
console.log('这是去除的第'+i+'球');
i++;
}while(i<=6)

三元表达式

python中的三元运算
res = 11 if 1 > 2 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
res = 1 > 2 ? 11 : 22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!

函数

function 函数名 () {
函数体..
}

1.无参函数

function f1(){console.log(111)}
f1()

2.有参函数

function f2(a, b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用
f2(1,2) # 可以调用
f2(1,2,3,4,5) # 可以调用 '''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}

3.返回值参数

function f3(){return 111}
f3()
return不支持返回多个数据

4.匿名函数

  使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数
function (a, b) {
console.log(a + b);
}

函数表达式

  使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式。

  函数也是一种数据类型, 属于Object对象类型中的一种
var fun = function(a, b) { // 匿名函数
console.log(a + b);
};
fun(12, 13);

5.箭头函数

    箭头函数是ES6新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。

完整写法

完整写法类似于匿名函数,省略了function关键字。
var s = (a,b) => {
console.log(a, b); // 1 2
return a + b;
}
s(1,2); // 相当于
var s = function(a,b) {
console.log(a, b); // 1 2
return a + b;
}
s(1,2);

省略小括号

当参数只有1个时,可以省略小括号,当没有参数或者两个以上的参时不能省略小括号。
var s = a => {
console.log(a); // 1
return a + a;
}
s(1); // 相当于
var s = function(a) {
console.log(a); // 1
return a + a;
}
s(1);

省略大括号

当函数体只有一行语句时,可以省略{},并且会自动return这条语句的返回值。

var cmp = (a, b) => a - b;

// 相当于
var cmp = function(a, b) { return a - b; };

省略小括号与大括号

当满足上述两个条件时,小括号与大括号可以全部省略。
var s = a => a * 2;
console.log(s(1)); // 2 // 相当于
var s = function(a) { return a * 2; }
console.log(s(1)); // 2

自定义对象

方式1:定义了person对象(有参)

function Person(name,age){//this代表person对象
//追加属性
this.name = name;
this.age = age;
//追加方法
this.say = function(){
alert("调用了say方法");
}
} //创建对象
var p = new Person( "eric",20);

方式2:定义了person对象(无参)

function Person(){
} //创建对象
var p =new Person();
//追加属性
p.name ="张三";
p.age = 20;
//追加方法
p.say = function(){
alert("调用了张三的say功能");
}

方式3:创建Object对象:在js中object对象代表了所有对象,是一个模板对象

var p = new Object();
//追加属性
p.name ="李四";
p.age=20;
//追加方法
p.say = function(){
alert("调用了李四的say功能");
}

json方式

var p = {
//追加属性
"name" :"王五",
"age": 25,
//追加方法
"say" :function(){
alert("调用了王五的say方法");
}
};

内置对象

Date对象

var date1 = new Date()
date1.toLocaleString() '2022/4/28 下午4:18:13'
date1.toLocaleDateString() '2022/4/28'
date1.toLocaleTimeString() '下午4:18:13' //getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)

JSON对象

JSON.parse()

JSON.parse()方法

    作用:用于将一个 JSON 字符串转换为JavaScript 对象。

    要求:字符串满足JSON字符串,否则就会转换失败。

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text);

JSON.stringify()

JSON.stringify()方法

    作用:将 JavaScript 值转换为 JSON 字符串。

var test = {"nihao":"123"};
JSON.stringify(test);

正则对象

# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化) reg2.test('abc123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true 全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
修饰符 含义
g 表示全文搜索匹配,不添加,搜索到第一个匹配停止
i 表示忽略大小写进行匹配,默认大小写敏感
m 表示进行多行搜索匹配

常用正则表达式

验证字母:/^[a-zA-Z]+$/
验证长度为3的字符:/^.{3}$/
验证由26个英文字母组成的字符串:/^[A-Za-z]+$/
验证日期YYYY-MM-DD:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
验证邮编:/^\d{6}$/
验证日期格式YYYY-MM-DD hh:mm:ss:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
验证整数:/^[-+]?\d*$/
验证小数:/^[-\+]?\d+(\.\d+)?$/
验证中文:/^[\u0391-\uFFE5]+$/
验证邮箱:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
验证手机号:/^1[3456789]\d{9}$/
验证身份证:/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/

BOM操作

BOM对象

window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性:
document 对象,文档对象;
location 对象,浏览器当前URL信息;
navigator 对象,浏览器本身信息;
screen 对象,客户端屏幕信息;
history 对象,浏览器访问历史信息;

window对象常用的方法

弹框类的方法。前面省略window

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址",“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象
window.open('https://www.baidu.com','','width=400,height=400')
close() 关闭当前的网页。 注:存在兼容性问题 FF:禁止设置关闭浏览器的代码
Chrome:默认直接关闭
IE:询问用户 window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸 定时器,清除定时器。 setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行 clearTimeout/clearInterval(定时器名称) 清除定时器

location对象

window.location对象:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

window.location.href 获取页面的url地址
window.location.href = url # 跳转到指定页面
window.location.reload() # 刷新页面 hash 返回#号后面的字符串,不包含散列,则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回?号后面的所有值。
port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:

navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
userAgent是最常用的属性,用来完成浏览器判断。

screen对象

window.screen 对象包含有关用户屏幕的信息。

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。 document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

history对象

window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。
history.forward() - 加载历史列表中的下一个 URL。返回下一页。
history.go(“参数”) -1表示上一页,1表示下一页。 window.history.forward():返回下一页
window.history.back():返回上一页
window.history.go(-1/1):返回上一页或下一页、
window.history.go("www.baidu.com");

DOM操作

Document Object Model是指文档对象模型,通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签) '''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身 '''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法

JS运算符,流程控制,函数,内置对象,BOM与DOM的更多相关文章

  1. JS基础-语法+流程控制语句+函数+内置对象【数组】

    JS语法: Javascript基本数据类型:undefined/null/Boolean/number/string 复杂数据类型:object typeof用来检测变量的数据类型 typeof的使 ...

  2. awk(流程控制、内置变量、内置函数、数组)

    摘自:http://bbs.51cto.com/thread-883948-1-1.html awk(流程控制.内置变量.内置函数.数组) ... 参考其他的资料,给大家看看.一.awk流程控制语句 ...

  3. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  4. js 内置函数 内置对象

    1.内置函数 Object Array Boolean Number String Function Date RegExp Error 2.内置对象 Date JSON

  5. JS中一些常用的内置对象

    在JS中,经常会遇到明明知道一个对象有某个属性或方法,可是又不知道怎么写的情况.下面,我就罗列了一些JS中常用的内置对象的属性和方法. Math对象: Math对象的作用是执行常见的算术任务. 首先M ...

  6. 从零开始的JS生活(三)——内置对象

    咱们继续进行我们的正经的JS介绍.今天所要跟大家讲述的是JS中十分常用.十分常用.十分常用的内置对象. 一.世界上最熟悉的陌生就是,当你看着数组.而我看着你... - 数组对象 1.数组的概念 在内存 ...

  7. Js基础知识7-JavaScript所有内置对象属性和方法汇总

    对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...

  8. 一张图理清js原型链(通过内置对象的引用关系)

    很多同学估计写了几年js也没有搞清内置对象之间的原型链关系,鄙人抽空手绘了一张简图,以作参考: 简单说明一下,上图中annonymous()函数相当于是所有函数的根(它本身也是函数),他上面提供了一些 ...

  9. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  10. js常用内置对象及方法

    在js中万物皆对象:字符串,数组,数值,函数...... 内置对象都有自己的属性和方法,访问方法如下: 对象名.属性名称: 对象名.方法名称 1.Array数组对象 unshift( )    数组开 ...

随机推荐

  1. 学习openstack(八)

      一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初 ...

  2. Python - 函数的五大参数

    Python的函数参数挺重要的,总结一下: (1)位置参数:没啥好说的,就是普通的参数. (2)默认参数: 参数形式:def power(x, n = 3): (在函数定义时通过对一个形参赋值的形式, ...

  3. 12_非线性理论基础_Lyapunov直接方法

  4. H5打造3d场景不完全攻略(一): H5 3d表现形式

    前言 日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的 ...

  5. Nuxt.js服务端渲染实践,从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  6. ASP.NET WebAPI解决跨域问题

    跨域是个很蛋疼的问题...随笔记录一下... 一.安装nuget包:Microsoft.AspNet.WebApi.Core 二.在Application_Start方法中启用跨域 1 protect ...

  7. C++---继承和派生

    继承和派生 在C++中, 代码重用是通过继承机制来实现的 继承, 就是在一个已经存在的类的基础上, 再建议一个新类 从已经有的类派生出新的类, 派生类就继承了基类的特征, 包括成员和方法 继承可以完成 ...

  8. 【面试普通人VS高手系列】Fail-safe机制与Fail-fast机制分别有什么作用

    前段时间一个小伙伴去面试,遇到这样一个问题. "Fail-safe机制与Fail-fast机制分别有什么作用" 他说他听到这个问题的时候,脑子里满脸问号.那么今天我们来看一下,关于 ...

  9. vue 修改单页标题 --- document.title

    方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...

  10. style设置 三个 竖线隔得太近了,这个属性和值 设置让他们分开一点

    ||| // html letter-spacing: 0.2em; // css