JavaScript基础
JavaScript组成
1,核心(ECMAScript)
2,文档对象模型(DOM)
3,浏览器对象模型(BOM)
JavaScript的引入方式
◇Script标签内写代码
<script>
// 在这里写你的JS代码
</script>
◇引入额外的JS文件
<script src="myscript.js"></script>
变量声明
1,JavaScript的变量名可以使用_,数字,字母,$组成
2,声明变量使用 var 变量名; 的格式来进行声明
var name = "Alex"; var age = 18;
数据类型
数值
不区分整形和浮点型,就只有一种数字类型
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
◇字符串
字符串拼接一般用"+"符号
常用方法
.length 返回长度 .trim() 移除空白 .trimLeft() 移除左边的空白 .trimRight() 移除右边的空白 .charAt(n) 返回第n个字符 .concat(value, ...) 拼接 .indexOf(substring, start) 子序列位置 .substring(from, to) 根据索引获取子序列 .slice(start, end) 切片 .toLowerCase() 小写 .toUpperCase() 大写 .split(delimiter, limit) 分割
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
两者的相同点: 如果start等于end,返回空字符串 如果stop参数省略,则取到字符串末 如果某个参数超过string的长度,这个参数会被替换为string的长度 substirng()的特点: 如果 start > stop ,start和stop将被交换 如果参数是负数或者不是数字,将会被0替换 silce()的特点: 如果 start > stop 不会交换两者 如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
◇布尔值
var a = true; true小写
var b = false; false大写
注意:(空字符串)、0、null、undefined、NaN都是false。
◇null和undefined
null 变量的值是空
undefined 1,声明了,没有赋值 2,没有定义
◇数组对象
var a1 = [1,2,3,4,5]
常用方法
.length 数组的大小 .push(ele) 尾部追加元素 .pop() 获取尾部的元素 .unshift(ele) 头部插入元素 .shift() 头部移除元素 .slice(start, end) 切片 .reverse() 反转 .join(seq) 将数组元素连接成字符串 .concat(val, ...) 连接数组 .sort() 排序 # 按照字符编码的顺序排顺序 .forEach() 将数组的每个元素传递给回调函数 .splice() 删除元素,并向数组添加新元素。 .map() 返回一个数组元素调用函数处理后的值的新数组
◇字典对象
var perison = {name:"sun",age:22,gender:"boy"}
两种取值方式
person.name person["name"]
类型查询
typeof 变量名
typeof是一个元运算符
运算符
◇算数运算符
+ - * / % ++ --
n++ ---> n = n + 1
◇比较运算符
> >= < <= != == === !==
注意
1 == “1” // true 弱等于 1 === "1" // false 强等于-->既判断值有判断数据类型 null == undefined // true null ===undefined // false
◇逻辑运算符
&& || !
◇赋值运算符
= += -= *= /=
n += 2 --> n = n + 2
流程控制
◇if - else
var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); }
◇if - else if - else
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
◇switch
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
◇for
for (var i=0;i<10;i++) { console.log(i); }
◇while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
◇三元运算
var a = 1; var b = 2; var c = a > b ? a : b
a是条件成立返回的
b是条件不成立返回的
函数
◇定义函数
定义函数的关键字: function
返回值: return
arguments对象:可以拿到所有的参数
普通函数
var bar = function(){...}
// 普通函数定义 function f1() { console.log("Hello world!"); } // 带参数的函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); console.log(a, b); } // 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 调用函数
匿名函数
var bar = function(){...}
var sum = function(a, b){ return a + b; } sum(1, 2);
立即执行函数
(function(a,b){...})(实参a,实参b)
(function(a, b){ return a + b; })(1, 2);
◇作用域
1,函数内部可以调用函数外部的变量
2,函数外部无法访问函数内部的变量
◇词法分析
1,先分析
1 函数参数 如果有,则将函数参数赋值给OA,且值为undefined.如果没有不做任何操作
2 函数局部变量 如果AO上有同名的变量,不做任何操作;没有就将变量赋值给AO,且值为undefined
3 函数定义 如果AO上有,则将OA上的覆盖,没有不做任何操作
(函数定义只在分析阶段完成)
2,再执行
就去激活对象(AO)上找
对象
◇自定义对象
创建对象
1, var obj = {...}
var a = {"name": "Alex", "age": 18};
2, var obj = new object()
var person=new Object(); // 创建一个person对象 person.name="Alex"; // person对象的name属性 person.age=18; // person对象的age属性 // ps: 第一种方式也可以这样定义属性
取值
1,obj.value
2,obj["value"]
3,for循环遍历
var a = {"name": "Alex", "age": 18}; console.log(a.name); // 1 console.log(a["age"]); // 2 for (var i in a){ // 3 console.log(i, a[i]); }
◇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()); //毫秒并不直接显示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.toLocaleString() 转成(本地格式的)字符串时间
.toUTCString() 转成(UTC格式的)字符串时间
.getDate() 获取日
.getDay() 获取星期
.getMonth() 获取月
.getFullYear() 获取完整的年
.getHour() 获取小时
.getMinutes() 获取分钟
.getSecond() 获取秒
.getTime() 获取时间戳
◇JSON对象
var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
字符串 --> JS对象
var obj = JSON.parse(str)
JS对象 --> 字符串
var str = JSON.stringify(obj)
◇Math对象
Math.abs(x) 返回数的绝对值。 Math.exp(x) 返回 e 的指数。 Math.floor(x) 对数进行下舍入。 Math.log(x) 返回数的自然对数(底为e)。 Math.max(x,y) 返回 x 和 y 中的最高值。 Math.min(x,y) 返回 x 和 y 中的最低值。 Math.pow(x,y) 返回 x 的 y 次幂。 Math.random() 返回 0 ~ 1 之间的随机数。 Math.round(x) 把数四舍五入为最接近的整数。 Math.sin(x) 返回数的正弦。 Math.sqrt(x) 返回数的平方根。 Math.tan(x) 返回角的正切。
◇RegExg对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//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 RegExp相关
创建RegExg对象
1, var reg1 = new RegExg("正则表达式")
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
2, var reg2 = /正则表达式/
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
方法
reg.test.("被检测的内容")
reg2.test(str);
匹配模式
g 表示全局
i 忽略大小写
// 方式一 reg1 = new RegExp("alex",'g') // 全局模式 reg2 = new RegExp("alex",'gi') // 全局和忽略大小写模式 // 方式二 reg2 = /alex/g // 全局模式 reg3 = /alex/gi // 全局和忽略大小写模式
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" 对字符串按照正则进行替换
注意事项
1,正则表达式中间不能有空格
2,.test()不传值就相当传了一个undefined进去,然后.test()会把这个undefined当成"undefined"来判断
3,如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。