标签：语句 function DOM 对象 JS 运算符 window var else

运算符

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   上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法

标签：语句,function,DOM,对象,JS,运算符,window,var,else
来源： https://www.cnblogs.com/chunyouqudongwuyuan/p/16203565.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。