前端之javaScript
JavaScript
- html ：展示文档内容的
- css：控制文档的显示效果
- js：控制文档的交互效果
- 是脚本语言
- 一种轻量级的编程语言
- 可插入html页面的编程代码
js导入方式
直接用Script标签内些代码
<script> // 在这里写你的JS代码 </script>
引入额外的js文件
<script src="myscript.js"></script>
js语法基础
- 语句以；结束，不讲究缩进
- 变量声明要加var关键字
- $可以作为变量名
js中的数据类型
数字（number）
- NaN
- parseInt
- parseFloat
字符串（string）
字符串常用方法
-
方法 说明 .length 返回长度 .trim() 移除空白 .trimLeft() 移除左边的空白 .trimRight() 移除右边的空白 .charAt(n) 返回第n个字符 .concat(value, ...) 拼接 .indexOf(substring, start) 子序列位置 .substring(from, to) 根据索引获取子序列 .slice(start, end) 切片 .toLowerCase() 小写 .toUpperCase() 大写 .split(delimiter, limit) 分割
-
字符串拼接一般使用+号进行连接
boolean（布尔值）
- 0，‘’，null，undefined，NaN都是false
null
- 表示值为空，多为手动将一个变量置为空
undefined
- 表示变量只声明，单没有赋值
- 函数没有明确指定返回值，默认返回的就是undefined
object
数组（Array）类似Python中的列表
var a1 = [11, 22, 33] console.log(a[1]);//输出22常用方法
-
方法 说明 .length 数组的大小 .push(ele) 尾部追加元素 .pop() 获取尾部的元素 .unshift(ele) 头部插入元素 .shift() 头部移除元素 .slice(start, end) 切片 .reverse() 反转 .join(seq) 将数组元素连接成字符串 .concat(val, ...) 连接数组 .sort() 排序 .forEach() 将数组的每个元素传递给回调函数 .splice() 删除元素，并向数组添加新元素。 .map() 返回一个数组元素调用函数处理后的值的新数组
自定义对象（类似Python中的字典）
var o = {'name': '王帅', 'age': 18}
typeof（检测类型）
- typeof 变量名
运算符
算术运算符
- +、-、*、%、++指加1、--指-1、
比较运算符
>、<、!=、== 弱等于指只判断值是不是相等，与类型无关
2 == '2'//ture
=== 强等于 即判断值也判断类型
逻辑运算
- && 与、|| 或，！非
- Python中的非为not
赋值运算
- =、+=、-=、*=、/=
js流程控制
if-else、if-else if-else
var a = 10; if (a > 5){ console.log("yes");//类似print输出 }else { console.log("no"); }
for
for (var i=0;i<10;i++) { console.log(i); } //下列为死循环，了解 for (;;){ console.log("死循环"); }
while
var i = 0; while (i < 10) { console.log(i); i++; }
switch
var day = new Date().getDay();//导入时间模块 switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
三元运算
var a = 1; var b = 2; var c = a > b ? a : b
js函数
基本函数的定义
- 注意事项：
- 参数：传多，传少都不会报错，没有传值相当于传了undefined
- 返回值：如果返回有多个值，默认返回最后一个
- 注意事项：
定义一个函数
//定义一个函数 function f1() { console.log("Hello world!"); } //执行这个函数 f1()
带返回值的函数
function sum(a, b){ return a + b; } sum(1, 2); // 调用函数
匿名函数
var sum = function(a, b){ return a + b; } sum(1, 2);
立即执行函数
(function(a, b){ return a + b; })(1, 2);
js内置对象和方法
创建对象
var person=new Object(); // 创建一个person对象 person.name="Alex"; // person对象的name属性 person.age=18; // person对象的age属性
date 时间
//方法1：不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2：参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); //方法3：参数为毫秒数 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //方法4：参数为年月日小时分钟秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒并不直接显示 var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
json对象 与Python中类似
var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
RegExp正则对象
注意事项：
- 正则表达式不能有空格
- 匹配模式，常用g（全局匹配，找到所以的匹配，而不是只找一个）和i模式（忽略大小写）
//RegExp对象 //创建正则对象方式1 // 参数1 正则表达式(不能有空格) // 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写) // 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。 // 创建RegExp对象方式（逗号后面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{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 // String对象与正则结合的4个方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置 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()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。 // 注意事项2(说出来你可能不信系列)： // 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true
Math对象（理解）
调用方式
- Math.abs(-5) 来调用
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。