前端JS02

1.1   复习       

JS为什么要分数据类型

开房, 正规的开房

如果来一个老师到上海出差,   开一个房   开一个单间

如果来两个老师    两个男老师   开两个房间

如果是两个老师,夫妻        肯定一个房间,大床间

就像数据一样,不同的数据类型,开辟的空间是不一样的,运算的方式和效率也是不一样的。

1.1.1  变量的重复赋值      

变量中的,如果是数字的话,可以重复的赋值,会将原值覆盖掉。

如果是字符串的话,就不一样的,字符串比较特殊,具有不可变性。如果重复的操作一块内存空间的话,一定要注意一个效率的问题。

1.2  If  else-if   

If(判断条件){  一般是boolean类型的值或是关系表达式或是逻辑表达式

要执行的代码;

}else if(判断条件){

要执行的代码;

}else if(判断条件){

要执行的代码;

}...else {

要执行的代码;

}

执行过程:

程序首先运行到if处,先进入小括号中,判断条件是否成立,如果成立,也就是小括号里面返回true,则进入大括号执行里面的代码,如果条件不成立,也就是返回false,则依次的判断下面的else if对应的小括号中的条件是否成立,也就是返回true,如果成立则进入对应的大括号里面执行代码,如果都不成立,也就是返回False,则要看最后有没有else,如果有else,则进入else里面的大括号执行里面的代码,否则退出程序,执行后面的代码。

是多用来做区间的判断情况的。

1.3  三元运算符  

表达式1(关系表达式或是逻辑表达式)? 表达式2:表达式3;

如果表达式1成立,也就是最终求解出一个True的结果或是 表达式1返回true,则表达式2的值是整个表达式的值,如果表达式1不成立,也就是求解出的结果是false,则表达式3是整个表达式的值。

一般多用于两种情况的语境。

var sex = 1;
//    if(sex == 1) {
//        console.log("男");
//    }else{
//        console.log("女");
//    }

var a = sex == 1?"男":"女";
    console.log(a);

var str = prompt("请输入两个人名中的一个,‘秦桧’,‘岳飞’");
//    if(str =="岳飞"){
//        console.log("忠臣");
//    }else {
//        console.log("奸臣");
//    }
    var s =   str =="岳飞"?"忠臣":"奸臣";
    console.log(s);

表达式:  就是一个可以计算出结果的式子

var a = 100;

比如说: a=1, “abc”, 100>20; a;

1.4  Switch-case  

switch(值){ 一般是一个变量或是计算后的定值

case 值1:

要执行的代码;

break;

case 值2:

要执行的代码;

Break;

Case 值3:

要执行的代码;

Break;

Case 值4:

要执行的代码;

Break;

...

Default:

要执行的代码;

Break;

}

执行过程:

当程序执行到switch处,先进入小括号,计算里面值,然后拿着这个定值依次和大括号中case里面的值进行匹配,如果匹配成功,则执行对应的case中的代码,遇到break,则跳出当前swicth-case结构,如果匹配都不成功,则要看结构是否有default,如果有,则执行default中的代码,遇到break跳出结构,如果没有default,则直接跳出swicth-case结构,执行后面的代码。

多用于多条件的定值判断 。

注意:case中的值的数据类型一定要与switch小括号中的值的数据类型一致。

1.5  If-elseif  与switch-case的区别

相同点:都可以实现多分支结构

不同点:

if-else if:可以处理区间范围

switch:一般 只能用于定值比较

三者的区别:

if有条件的执行一条语句     一种情况

if-else有条件的执行一条或另一条语句    两种情况中的一种

switch有条件的执行一组语句中的一条语句   多种情况中的一种

1.6  短路运算

转换为boolean类型的值后为false的情况:

0,NaN, “”, null,undefined

&&         || 

//    var a = 100;
//    var b = 20;
//    var c = a+b>100 && a-b <50;
//    console.log(c);

//   var d =  true && false;
//    console.log(d);

//var e = "abc"&&"amn";
    // &&找假 先看第一个表达式的值,如果第一个表达式不是boolean类型的话,会先将此值进行隐式转换,转换成boolean的值,如果转换后的值为true,则直接返回第二个值,不管第二值是真还是假,如果第一个数据为假,则直接返第一个数, 不管第二个数是真不是假。
    //console.log(e);

var f = NaN && "aaa";
    console.log(f);

//&& 操作数两边如果都不是布尔类型,会先把操作数转换成布尔类型,返回,值是false的那个操作数
//&& 如果两边都是false返回第一个操作数

|| 找真的

var n = "abc" || "kkk";
console.log(n);
// 找真的 ,如果两个值不是boolean类型的话,是先将当前的对象转换成对应的boolean类型的值,如果第一个值转换后为True,则直接返回,如果转换后,第一个值为false,则返回第二值。

逻辑非  !        !对象

如果操作数是对象,返回false

如果操作数是空字符串,返回true

如果操作数是非空字符串,返回false

如果操作数是0,返回true

如果操作数是任意非0值,返回false

如果操作数是null,undefined,NaN,返回true

上面的规则可以简化成

转换为false的值:false、""、0和NaN、null、undefined

!!"abc"结果是什么

1.7  While

循环: 所谓循环就是重复的做同一件事情

while 循环

while(循环条件){

循环体(要执行的代码);

}

执行过程:

当程序 运行到while处,首先进入小括号判断循环条件是否成立,如果成立,也就是值为true,则进入大括号执行里面的循环体,执行完毕之后,再次回到小括号中判断 循环条件是否成立,如果成立则再次进入大括号执行里面的循环体,往复循环。只要是循环,肯定会有一行代码能够改变循环条件,如果没有代码改变循环条件,我们称这样的循环叫死循环。

while(true){

循环体;

}

1.8  Do- while  

Just   do   IT

Do{

循环体;

} while(循环条件)

执行过程:

程序执行到do处,先进入大括号执行里面的循环体,然后带着执行结果到达while的小括号,判断里面的循环条件是否成立,如果成立,则再次进入大括号执行里面的循环体,如果不成立,则跳出当前do-while循环。

特点,至少执行一次循环体,然后再判断 循环条件。

While的特点:

先判断循环条件,再执行循环体,有可能 一次循环体都不执行。

1.9  For循环

一般多用于已知次数的循环

for(表达式1;表达式2;表达式3){

循环体;

}

执行过程:

程序运行到for处,进入小括号中,先执行表达式1,声明变量,并赋初值,然后执行表达式2,判断循环条件是否成立,如果条件成立,则进入大括号执行里面的循环体,第一次循环的时候,并不执行表达式3,第一次循环执行完毕之后,执行表达式3,改变循环条件,然后再执行表达式2,判断循环条件是否成立,如果成立,则再次执行循环体,如果不成立,则跳出循环。

1.10  循环的嵌套

一个循环里面包含着另一个的循环

对于循环的嵌套来说,外面的循环循环一次,里面的循环循环N次

for(var i=0;i<6;i++){
     for(var j=0;j<10;j++){
         console.log("循环嵌套");
    }
}

1.11  break  

两种用法 :

第一种用在swicth-case 用于跳出当前程序

第二种,是用在循环当中,一般是用while或是for循环当中,与if搭配使用,作用就是立即跳出当前循环,后面的代码都不再执行。

也常见用于死循环的跳出。

While(true){

}

1.12  continue    继续的意思

一般也是用于循环当中,当遇到continue关键字的时候,立马停止本次循环,然后回到循环条件处,判断 循环条件是否成立,如果成立则继续下一次循环,如果不成立,则退出当前循环。

只结束当前本次循环,continue后面的代码都不再执行。

1.13  数组

数组 就是数据的有序列表。存储的是一组数据,这组数据可以是任意类型,而且数组中的元素可以随时的动态添加。

1.13.1 使用构造函数创建数组

// 第一种,用构造函数的方式创建 数组
 var  arr = new Array();// 创建了一个空数组,长度为0
// 数组就是数据的有序列表,这个顺序是按编号来的,默认以0开始,这个编号 叫做数组的索引或是下标
arr[0] = 100;
arr[1] = 99;
arr[2] = 98;
 arr[10]=96;
 console.log(arr.length);
 console.log(arr);// 直接打印数组 ,就可以看到数组里面的数据
 alert(arr);

var arr = new Array(6); //创建了一个长度为6的数组
arr[0]=100;
arr[7]=102;
console.log(arr.length);
console.log(arr);

JS的特性就是弱类型的动态语言,比如数组里面的元素是可以随时动态添加的,数组的长度会随着里面数据的变化而变化。

JS中的数组可以存储任何类型的数据,而且大小可以动态的改变,与PC中的内存大小相当。

1.13.2  使用字面量的方式创建数组

var arr = [100,98,96,99,93,95,97,69,89,58,87];
//console.log(arr[0]);
//console.log(arr[arr.length-1]);

for(var i=0;i<arr.length;i++){
    console.log(arr[i] +"===="+i);
}
 //console.log(arr.length);

时间: 2024-10-18 14:44:46

前端JS02的相关文章

前端自动化之webstrom

在刚接触前端的时候,使用的就一直是webstrom,版本是webstrom 8. 前端自动画使用的时候,因为webstrom 8版本是没有集成gulp的.所以每次使用都默默跑到Hbuild中使用. 实际最近在webstrom 12中找到了简单的方法,就连cmd都省了. 上图: 在gulp的gulpfile.js文件上右击,点击Show Gulp Tasks 会弹出gulp的控制窗口: 然后右键服务,点击run即可.

Day12 前端html

前端基础之HTML 老师博客: http://www.cnblogs.com/yuanchenqi/articles/6835654.html http://www.cnblogs.com/yuanchenqi/articles/6856399.html html:静态的内容都是一个html标签,是有一组组标签构成的文件 css:对一个个标签做渲染定位 js:所有页面的动态效果做渲染定位 当写一个简单服务端的时候,一般这样写: 主要的是这:conn.send=("HTTP/1.1 201 OK

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊. Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了

一个前端所需具备的PS能力

前端网页设计+静态实现案例 放一个2天半内给某公司完成的(设计 + 静态实现)的案例吧,静态阴影用CSS3实现的http://www.cnblogs.com/MuYunyun/p/5693615.html,我最开始设计的时候就想好要用什么实现,各个框的大小是多少(精确到1像素),以及颜色搭配等等. 还有很多素材我就不演示了,设计了好些网页模板,如果有大家想用PS进行网页制作,欢迎大家交流. 很多人做前端只是掌握了最基本的切图(甚至连切图都有不会的),就连小小改动都要麻烦设计师,这就大大浪费了时间

分享第二届中国前端开发者大会与会心得

第二届中国前端开发者大会(FDCon2017)是在上海举办的针对前端技术(HTML5,CSS,JS)的互联网开发者所举办的最盛大和权威的相关技术会议,由技术社区TopGeek主办.汇智Tek联合主办,致力于推动各类前端技术等在移动互联网领域的研发和应用. 随着新一代的前端技术的发展,给前端开发者带来巨大的创新应用实践机会,本大会以“高效前端开发实践和创新”为主题,内容涵盖电商.旅游.门户.搜索.分类广告.移动互联网等多种业态的技术经验分享,涉及各种WEB和APP前端开发技术和架构设计等方法论.

前端开发四

7.闭包问题 闭包:函数能被外部调用到,则该作用连上的所有变量都会被保存下来. 作用:①可以读取函数内部的变量:②相当于划出了一块私有作用域,避免数据污染:③让变量始终保存在内存中 使用全局变量被认为是不好的习惯,而且容易造成错误并且维护成本较高,所以js可以采用闭包的方式读取函数的内部变量.但是如果大量使用闭包就会造成过多的变量始终保存在内存中,会造成内存泄漏. 一个简单的闭包例子: function f1(){ var n=999; function f2(){ alert(n); } re