javascript介绍
Web前端有三层：javascript
-
HTML：从语义的角度，描述页面结构css
-
CSS：从审美的角度，描述样式（美化页面）html
-
JavaScript：从交互的角度，描述行为（提高用户体验）前端
其中JavaScript基础又分为三个部分：java
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。python
JavaScript历史背景介绍
布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。web
一开始JavaScript叫作LiveScript，可是因为当时Java这个语言特别火，因此为了傍大牌，就更名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。面试
同时期还有其余的网页语言，好比VBScript、JScript等等，可是后来都被JavaScript战胜了，因此如今的浏览器中，只运行一种脚本语言就是JavaScript
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。
JavaScript是由公司开发而成的，问题是不便于其余的公司拓展和使用。因此欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来讲，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就垂手可得了。
ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了不少新特性）。可是，浏览器的厂商不能那么快去追上这个标准。
JavaScript的发展：蒸蒸日上
http://2004.sina.com.cn/ http://2008.sina.com.cn/ http://2012.sina.com.cn/
上面三个网站能够感觉一下网页技术的发展。
2003年以前，JavaScript被认为“牛皮鲜”，用来制做页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。因此浏览器就推出了屏蔽广告功能。 2004年，JavaScript命运开始改变，那一年，谷歌公司开始带头使用Ajax技术，Ajax技术就是JavaScript的一个应用。而且，那时候人们逐渐开始提高用户体验了。Ajax有一些应用场景。好比，当咱们在百度搜索框搜文字时，输入框下方的智能提示，能够经过Ajax实现。好比，当咱们注册网易邮箱时，可以及时发现用户名是否被占用，而不用调到另一个页面。 2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。 JavaScript在移动页面中，也是不可或缺的。而且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript愈来愈被重视。 2010年，人们更加了解HTML5技术，HTML5推出了一个东西叫作Canvas（画布），工程师能够在Canvas上进行游戏制做，利用的就是JavaScript。 2011年，Node.js诞生，使JavaScript可以开发服务器程序了。 现在，WebApp已经很是流行，就是用网页技术开发手机应用。手机系统有iOS、安卓。好比公司要开发一个“携程网”App，就须要招聘三队人马，好比iOS工程师10人，安卓工程师10人，前端工程师10人。共30人，开发成本大；并且若是要改版，要改3个版本。如今，假设公司都用web技术，用html+css+javascript技术就能够开发App。也易于迭代（网页一改变，全部的终端都变了）。 虽然目前WebApp在功能和性能上的体验远不如Native App，可是“WebApp慢慢取代Native App”颇有多是将来的趋势。
JavaScript入门易学性
-
JavaScript对初学者比较友好。
-
JavaScript是有界面效果的（好比C语言只有白底黑字）。
-
JavaScript是弱变量类型的语言，变量只须要用var来声明。而Java中变量的声明，要根据变量的类型来定义。
JavaScript的组成
JavaScript基础分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：操做网页上的元素的API。好比让盒子移动、变色、轮播图等。
-
BOM：操做浏览器部分功能的API。好比让浏览器自动滚动。
PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
JavaScript的特色
（1）简单易用：可使用任何文本编辑工具编写，只须要浏览器就能够执行程序。
（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。
（3）基于对象：内置大量现成对象，编写少许程序能够完成目标
javascript语法
学习程序，是有规律可循的，就是程序是有相同的部分，这些部分就是一种规定，不能更改，咱们成为：语法。
（1）JavaScript对换行、缩进、空格不敏感。
备注：每一条语句末尾要加上分号，虽然分号不是必须加的，可是为了程序从此要压缩，若是不加分号，压缩以后将不能运行。
（2）全部的符号，都是英语的。好比括号、引号、分号。
js代码的引入
在页面中，咱们能够在body标签中放入<script type=”text/javascript”></script>标签对儿，<script type=”text/javascript”></script>标签对儿
<script type="text/javascript"> </script>
变量和赋值
变量
var a = 100; //变量的定义和赋值
var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，
定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面必定要有空格隔开。
变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
变量名：咱们能够给变量任意的取名字。
PS：在JavaScript中，永远都是用var来定义变量，这和C、Java等语言不一样
变量名有命名规范：只能由英语字母、数字、下划线、美圆符号$构成，且不能以数字开头，而且不能是JavaScript保留字，变量区分大小写也就是说A和a是两个变量。
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
赋值
将等号右边的值，赋给左边的变量；等号右边的变量，值不变。
var a = "3"; var b = 2; a = b console.log(a) console.log(b)
注释
// 我是单行注释
/*
多行注释1
多行注释2
*/
备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。
输入输出信息
弹出警告框：alert语句
<script type="text/javascript"> alert("小马哥"); </script>
控制台输出console.log("") 和输入框prompt()
console.log("")
表示在控制台中输出。console表示“控制台”，log表示“输出”。
控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员常用这条语句输出一些东西，来测试程序是否正确。
prompt()
其实是一个输入框，就是专门用来弹出可以让用户输入的对话框。prompt()语句中，用户无论输入什么内容，都是字符串。
alert("从前有座山"); //直接使用，不须要变量
var a = prompt("请输入一个数字"); // 须要用变量，才能接收用户输入的值
示例：
alert("从前有座山"); //直接使用，不须要变量
var a = prompt("请输入一个数字"); // 必须用一个变量，来接收用户输入的值
代码示例：
<script type="text/javascript">
var a = prompt('今天是什么天气？');
console.log(a);
</script>
上方代码中，用户输入的内容，将被传递到变量 a 里面。效果以下：
基础数据类型
变量里面可以存储数字、字符串等。和 python同样，js中定义变量的时候没必要指定类型，变量会自动的根据存储内容的类型不一样，来决定本身的类型。查看类型使用typeof方法。
数值类型：number
在JavaScript中，只要是数，就是数值型(number)的。不管整浮、浮点数（即小数）、不管大小、不管正负，都是number类型的。
var a = 100; //定义了一个变量a，而且赋值100 console.log(typeof a); //输出a变量的类型 console.log(typeof(a)); //输出a变量的类型
var num = 2.379 var newNum = num.toFixed(2) console.log(newNum)
字符串类型：string
1.定义
var a = "abcde"; var b = '路飞'; //不区分单双引号 console.log(typeof a); console.log(typeof b);
2.经常使用方法
| 方法 | 说明 |
| .length #不加括号的是属性 | 返回长度 |
| .trim() #获得一个新值 | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .concat(value, ...) #s1='hello';s.concat('xx');获得helloxx | 拼接 |
| .charAt(n) #n相似索引，从0开始，超过最大值返回''空字符串 | 返回第n个字符 |
| .indexOf(substring, start) #这个start是从索引几开始找，没有返回-1 | 子序列位置 |
| .substring(from, to) #不支持负数，因此通常都不用它，了解一下就好了 | 根据索引获取子序列 |
| .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它 | 切片 |
| .toLowerCase() #所有变小写 | 小写 |
| .toUpperCase() #所有变大写 | 大写 |
| .split(delimiter, limit)#分隔,s1.splite(' '),后面还能够加参数s1.split(' '，2),返回切割后的元素个数 | 分割 |
var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l
var str1 = 'alex'; var str2 = 'sb'; console.log(str1.concat(str2,str2));//alexsbsb
var a = 'hello,world' var r = a.match("world") console.log(r) var r = a.match("World") console.log(r) // 正则 var a = 'abcd,dcba' var r = a.match(/\w+/) console.log(r) // g表示匹配屡次 var r = a.match(/\w+/g) console.log(r)
var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755
var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1 console.log(str.search('e'));//2 console.log(str.search('p'));//-1
var str = '小马哥'; console.log(str.slice(1,2));//马
var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(0,4));//个人天呢 var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(9,6)); var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(-3,3));
若是 indexStart 等于 indexEnd，substring 返回一个空字符串。 若是省略 indexEnd，substring 提取字符一直到字符串末尾。 若是任一参数小于 0 或为 NaN，则被看成 0。 若是任一参数大于 stringName.length，则被看成 stringName.length。 若是 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了同样
var str = '个人天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.split('a'));//["个人天呢,", "是嘛,你在说什么呢?", "哈哈哈"] 若是第二个参数没写，表示返回整个数组 console.log(str.split('a',2));//["个人天呢,", "是嘛,你在说什么呢?"] 若是定义了个数，则返回数组的最大长度
var str = 'EVA'; console.log(str.toLowerCase())；//eva
var str = 'xiaomage'; console.log(str.toUpperCase());
var str = ' 个人天呢 '; console.log(str.trim());//个人天呢
布尔值：boolean
var b1 = false; console.log(typeof b1)
空元素：null
var c1 = null;//空对象. object console.log(c1)
未定义：undefined
var d1; //表示变量未定义 console.log(typeof d1)
内置对象类型
数组：Array
1.数组的建立
var colors = ['red','color','yellow']; //字面量方式建立（推荐） var colors2 = new Array();//使用构造函数（后面会讲）的方式建立 使用new关键词对构造函数进行建立对象
2.数组的赋值
var arr = []; //经过下标进行一一赋值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿'
3.数组的经常使用方法
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() #在原数组上改的 | 反转 |
| .join(seq)#a1.join('+')，seq是链接符 | 将数组元素链接成字符串 |
| .concat(val, ...) #连个数组合并,获得一个新数组，原数组不变 | 链接数组 |
| .sort() | 排序 |
| .forEach() #讲了函数再说 | 将数组的每一个元素传递给回调函数 |
| .splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) | 删除元素，并向数组添加新元素。 |
| .map() #讲了函数再说 | 返回一个数组元素调用函数处理后的值的新数组 |
var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity)
var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|0
var score = [98,78,76,100,0]; //toString() 直接转换为字符串 每一个元素之间使用逗号隔开 var str = score.toString(); console.log(str);//98,78,76,100,0
var arr = ['张三','李四','王文','赵六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]
var arr = ['张三','李四','王文','赵六']; var item = arr.pop(); console.log(arr);//["张三", "李四"，"王文"] console.log(item);//赵六
var arr = ['张三','李四','王文','赵六']; var newLength= arr.push('小马哥');//能够添加多个，以逗号隔开 console.log(newLength);//5 console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
var names = ['alex','xiaoma','tanhuang','angle']; names.reverse(); console.log(names);
var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
布尔类型值 = Array.isArray(被检测的值) ;
var arr = [1,2,3] var n = arr.shift() console.log(arr) console.log(n)
var arr = [1,2,3] var n = arr.unshift(0) console.log(arr) console.log(n) var arr = [1,2,3] var n = arr.unshift('alex','wahaha') console.log(arr) console.log(n)
var array = [1,2,3,4,5,6]; array.splice(0); //方式1：删除数组中全部项目 array.length = 0; //方式1：length属性能够赋值，在其它语言中length是只读 array = []; //方式3：推荐
关于sort()须要注意： 若是调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（若有必要），以便进行比较。 若是想按照其余标准进行排序，就须要提供比较函数，也就是本身提供一个函数提供排序规则，该函数要比较两个值，而后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具备两个参数 a 和 b，其返回值以下： 若 a 小于 b，在排序后的数组中 a 应该出如今 b 以前，则返回一个小于 0 的值。 若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。 示例： function sortNumber(a,b){ return a - b } var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber)
var arr = ['alex','wusir'] arr.forEach(fn) function fn(item,index){ console.log(index,item) }
var arr = ['alex','wusir'] var ret = arr.map(fn) function fn(name,index) { console.log(index,name) return name+'sb' } console.log(ret)
JSON对象
var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
遍历对象中的内容：
var a = {"name": "Alex", "age": 18}; for (var i in a){ console.log(i, a[i]); }
日期：Date
1.定义
建立日期对象只有构造函数一种方式,使用new关键字
var myDate = new Date(); //建立了一个date对象
2.经常使用方法
//建立日期对象 var myDate=new Date(); //获取一个月中的某一天 console.log(myDate.getDate()); //返回本地时间 console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
注意：以上getxxx的方法都是对时间的获取，若是要设置时间，使用setxxx,请参考连接：http://www.runoob.com/jsref/jsref-obj-date.html
RegExp对象
RegExp相关：用的比较多
//RegExp对象 //建立正则对象方式1 // 参数1 正则表达式(不能有空格) // 参数2 匹配模式：经常使用g(全局匹配;找到全部匹配，而不是在第一个匹配后中止)和i(忽略大小写) // 用户名只能是英文字母、数字和_，而且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。 // 建立RegExp对象方式（逗号后面不要加空格），假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //注意，写规则的时候，里面千万不能有空格，否则匹配不出来你想要的内容，除非你想要的内容自己就想要空格，好比最后这个{5,11},里面不能有空格 // 匹配响应的字符串 var s1 = "bc123"; //RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。 reg1.test(s1); // true // 建立方式2，简写的方式 // /填写正则表达式/匹配模式（逗号后面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true 注意，此处有坑：若是你直接写一个reg2.test()，test里面啥也不传，直接执行，会返回一个true，用其余的正则规则，可能会返回false，是由于，test里面什么也不传，默认传的是一个undefined，而且给你变成字符串undefined，因此可以匹配undefined的规则，就能返回true，否则返回false // String对象与正则结合的4个方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配全部的o, s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同 s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割，获得一个新值，原数据不变 s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换 // 关于匹配模式：g和i的简单示例 var s1 = "name:Alex age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写 // 注意事项1： // 若是regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。 // 该属性值默认为0，因此第一次仍然是从字符串的开头查找。 // 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改成字符串中本次匹配内容的最后一个字符的下一个索引位置。 // 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。 // 所以，当咱们使用test()函数执行了一次匹配以后，若是想要从新使用test()函数从头开始查找，则须要手动将regExpObject.lastIndex的值重置为 0。 // 若是test()函数再也找不到能够匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。 var reg3 = /foo/g; // 此时 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此时 regex.lastIndex=3 reg3.test('xxxfoo'); // 仍是返回true // 因此咱们在使用test()方法校验一个字符串是否彻底匹配时，必定要加上^和$符号，把匹配规则写的肯定一些，尽可能不用上面这种的写法/xxx/。 // 注意事项2(说出来你可能不信系列)： // 当咱们不加参数调用RegExpObj.test()方法时, 至关于执行RegExpObj.test(undefined)，而后将这个undefined又转为字符串"undefined",去进行匹配了, 而且/undefined/.test()默认返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true
数学相关：Math
1.经常使用方法
Math.abs(x) 返回数的绝对值。
pow(x,y) 返回 x 的 y 次幂。
round(x) 把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
exp(x) 返回 e 的指数。
log(x) 返回数的天然对数（底为e）。
sin(x) 返回数的正弦。
tan(x) 返回角的正切。
var x = 1.234; //天花板函数 表示大于等于 x，而且与它最接近的整数是2 var a = Math.ceil(x); console.log(a);//2
var x = 1.234; // 小于等于 x，而且与它最接近的整数 1 var b = Math.floor(x); console.log(b);//1
console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2
var ran = Math.random(); console.log(ran);[0,1) 若是让你取100-200之间的随机数，怎么作？ 公式：min - max之间的随机数： min+Math.random()*(max-min)
以上是我们介绍的JS经常使用对象的方法，若是想参考更多内容，请参考连接：http://www.runoob.com/jsref/jsref-tutorial.html
数据类型之间的转换
parseInt() ：字符串转数字
var a = '5' var a = parseInt(a); console.log(typeof(a)) //带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。 console.log(parseInt("2018你真帅！！")); //自动带有截断小数的功能：取整，不四舍五入。 var a = parseInt(5.8) + parseInt(4.7); console.log(a); var a = parseInt(5.8 + 4.7); console.log(a);
parseFloat() : 字符串转小数
var a = parseFloat('5.8')+ parseFloat('4.7'); console.log(a); var a = parseFloat('5.8' + '4.7'); console.log(a);
String()和.toString：转字符串
var n1 = 123; var str1 = String(n1); console.log(typeof str1); var num = 234; console.log(num.toString())
Boolean()：任何数据类型均可以转成布尔值
var b1 = '123'; // true var b3 = -123; // true var b4 = Infinity; //表示正无穷大 true var b2 = 0; // false var b5 = NaN; //false var b6; //表示undefined //false var b7 = null; //false
运算符
赋值运算符
以var x = 12,y=5来演示示例|
比较运算符
var x = 5;
算数运算符
var a = 5,b=2
'+': 字符串可相加，数字也可相加，字符串和数字也能够相加。值得注意的是，若是字符串和数字相加会自动把结果转换成字符串。以下：
console.log('吃了'+'么') //'吃了么'
console.log(12+3) //15
console.log('吃了'+3) //'吃了3'
'-':字符串 - 数值 = 数值
var a = "3";
var b = 2; console.log(a-b) //1 console.log(b-a) //-1 字符串与数字之间相减的结果是数字
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非
sum = 500 math = 98 console.log(sum>400 && math>90) //true sum = 400 math = 98 console.log(sum>400 && math>90) //false
sum = 500 math = 98 console.log(sum>400 || math>90) //true sum = 400 math = 98 console.log(sum>400 || math>90) //true
sum = 500 console.log(!(sum>400)) //false math = 88 console.log(!(math>90)) //true
//1.模拟 若是总分 >400 而且数学成绩 >89分 被清华大学录入 //逻辑与&& 两个条件都成立的时候 才成立 if(sum>400 && math>90){ console.log('清华大学录入成功') }else{ alert('高考失利') } //2.模拟 若是总分>400 或者你英语大于85 被复旦大学录入 //逻辑或 只要有一个条件成立的时候 就成立 if(sum){ alert('被复旦大学录入') }else{ alert('高考又失利了') } //3.逻辑非 true变false，false变true var sum = 0 if(!sum){ alert('居然考了个0分'); } else{ alert('好歹有个成绩'); };
流程控制
var ji = 20; if(ji >= 20){ console.log('恭喜你，吃鸡成功，大吉大利') } alert('alex');//下面的代码还会执行
var ji = 20; if(ji>=20){ console.log('恭喜你，吃鸡成功，大吉大利') }else{ console.log('很遗憾 下次继续努力')
if (true) { //执行操做 }else if(true){ //知足条件执行 }else if(true){ //知足条件执行 }else{ //知足条件执行 }
var gameScore = 'better'; switch(gameScore){ //case表示一个条件 知足这个条件就会走进来 遇到break跳出。若是某个条件中不写 break，那么直到该程序遇到下一个break中止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') }
var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 }
//无论有没有知足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件
for(var i = 1;i<=10;i++){ console.log(i) } var arr = [1,2,3,4,5] for (n in arr){ console.log(n) }
var a = 1 var b =2 var c = a>b ? a:b //若是a>b成立返回a，不然返回b console.log(c)
函数
函数的定义
function 函数名字(){
}
function：是一个关键字。中文是“函数”、“功能”。 函数名字：命名规定和变量的命名规定同样。只能是字母、数字、下划线、美圆符号，不能以数字开头。 参数：后面有一对小括号，里面是放参数用的。 大括号里面，是这个函数的语句。
函数的调用
函数名字();
函数的参数和返回值：形参和实参
注意：实际参数和形式参数的个数，要相同。
注意：函数只能返回一个值，若是要返回多个值，只能将其放在数组或对象中返回。
console.log(sum(3, 4)); //函数：求和 function sum(a, b) { return a + b; }
伪数组：arguments
arguments表明的是实参。有个讲究的地方是：arguments只在函数中使用。
（1）返回函数实参的个数：arguments.length
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------"); }
结果：
（2）之因此说arguments是伪数组，是由于：arguments能够修改元素，但不能改变数组的长短。举例：
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b) { arguments[0] = 99; //将实参的第一个数改成99 arguments.push(8); //此方法不经过，由于没法增长元素 }
// 匿名函数方式，多和其余函数配合使用，后面咱们就会用到了 var sum = function(a, b){ //在es6中，使用var，可能会飘黄，是由于在es6中，建议你使用let来定义变量，不过不影响你使用 return a + b; } sum(1, 2);
// 当即执行函数，页面加载到这里，这个函数就直接执行了，不须要被调用执行 (function(a, b){ return a + b; })(1, 2); //python中写能够这么写：ret=(lambda x,y:x+y)(10,20) 而后print(ret)
函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，因此只能在函数内部访问它（该变量的做用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的全部脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行之后被删除。全局变量会在页面关闭后被删除。
做用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
几个例子：
var city = "BeiJing"; function f() { var city = "ShangHai"; function inner(){ var city = "ShenZhen"; console.log(city); } inner(); } f(); //输出结果是？ ---> ShenZhen
var city = "BeiJing"; function Bar() { console.log(city); } function f() { var city = "ShangHai"; return Bar; } var ret = f(); ret(); // 打印结果是？---> BeiJing
var city = "BeiJing"; function f(){ var city = "ShangHai"; function inner(){ console.log(city); } return inner; } var ret = f(); ret(); ---> ShangHai
面向对象（了解）
建立对象的几种经常使用方式：
1.使用Object或对象字面量建立对象
2.工厂模式建立对象
3.构造函数模式建立对象
4.原型模式建立对象
使用Object或对象字面量建立对象
JS中最基本建立对象的方式：
var student = new Object(); student.name = "easy"; student.age = "20";
这样，一个student对象就建立完毕，拥有2个属性name以及age，分别赋值为"easy"和20。
若是你嫌这种方法有一种封装性不良的感受。来一个对象字面量方式建立对象。
var sutdent = {
name : "easy",
age : 20
};
这样看起来彷佛就完美了。可是立刻咱们就会发现一个十分尖锐的问题：当咱们要建立同类的student1，student2，…，studentn时，咱们不得不将以上的代码重复n次....
var sutdent1 = { name : "easy1", age : 20 }; var sutdent2 = { name : "easy2", age : 20 }; ... var sutdentn = { name : "easyn", age : 20 };
有个问题？能不能像工厂车间那样，有一个车床就不断生产出对象呢？咱们看”工厂模式”。
工厂模式建立对象
JS中没有类的概念，那么咱们不妨就使用一种函数将以上对象建立过程封装起来以便于重复调用，同时能够给出特定接口来初始化对象
function createStudent(name, age) { var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);
这样一来咱们就能够经过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了，但贪婪的人类总有不知足于现状的天性：咱们不只但愿”产品”的生产能够像工厂车间通常源源不断，咱们还想知道生产的产品到底是哪种类型的。
好比说，咱们同时又定义了”生产”水果对象的createFruit()函数：
function createFruit(name, color) { var obj = new Object(); obj.name = name; obj.color = color; return obj; } var v1 = createStudent("easy1", 20); var v2 = createFruit("apple", "green");
对于以上代码建立的对象v一、v2，咱们用instanceof操做符去检测，他们通通都是Object类型。咱们的固然不知足于此，咱们但愿v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，咱们能够用自定义构造函数的方法来建立对象
构造函数模式建立对象
在上面建立Object这样的原生对象的时候，咱们就使用过其构造函数：
var obj = new Object();
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数建立对象以前，咱们首先了解一下构造函数和普通函数有什么区别。
一、实际上并不存在建立构造函数的特殊语法，其与普通函数惟一的区别在于调用方法。对于任意函数，使用new操做符调用，那么它就是构造函数；不使用new操做符调用，那么它就是普通函数。
二、按照惯例，咱们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分两者。例如上面的new Array()，new Object()。
三、使用new操做符调用构造函数时，会经历(1)建立一个新对象；(2)将构造函数做用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
ok，了解了构造函数和普通函数的区别以后，咱们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
function Student(name, age) { this.name = name; this.age = age; this.alertName = function(){ alert(this.name) }; } function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; }
这样咱们再分别建立Student和Fruit的对象：
var v1 = new Student("easy", 20); var v2 = new Fruit("apple", "green");
alert(v1 instanceof Student); //true alert(v2 instanceof Student); //false alert(v1 instanceof Fruit); //false alert(v2 instanceof Fruit); //true alert(v1 instanceof Object); //true 任何对象均继承自Object alert(v2 instanceof Object); //true 任何对象均继承自Object
这样咱们就解决了工厂模式没法区分对象类型的尴尬。那么使用构造方法来建立对象是否已经完美了呢？使用构造器函数一般在js中咱们来建立对象。
咱们会发现Student和Fruit对象中共有一样的方法，当咱们进行调用的时候这无疑是内存的消耗。
咱们彻底能够在执行该函数的时候再这样作，办法是将对象方法移到构造函数外部：
function Student(name, age) { this.name = name; this.age = age; this.alertName = alertName; } function alertName() { alert(this.name); } var stu1 = new Student("easy1", 20); var stu2 = new Student("easy2", 20);
在调用stu1.alertName()时，this对象才被绑定到stu1上。
咱们经过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题
可是，经过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。若是这样定义的全局函数多了，咱们想要将自定义对象封装的初衷便几乎没法实现了。更好的方案是经过原型对象模式来解决。
原型的模式建立对象
原型链甚至原型继承，是整个JS中最难的一部分也是最很差理解的一部分，在这里因为咱们课程定位的缘由，若是对js有兴趣的同窗，能够去查阅一下相关JS原型的一些知识点。更加有助于你之后前端JS的面试。
function Student() { this.name = 'easy'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 两者共享同一函数