学了几天javascript,现总结一下原生javascript的基本知识点。
一、javascript基本知识
变量
- 定义:
- var a = 123;
- var b = 'abc';
- //连写
- var a = 123,b=456;
注意:js为弱类型的解释型脚本语言,使用var关键字定义一个变量,数据类型自动判断。
注意:每句代码后可以不写分号,换行即可,习惯上最好加上,增强可读性。
- 变量类型:
- number:数字类型
- string:字符串类型
- boolean:布尔类型
- undefined:未定义类型
- null:空类型
- object:复合类型,一般用来接收标签。
- 命名规则:
- 区分大小写;
- 第一个字符必须是字母、下划线(_)或者美元符号($),不能输数字;
- 其他字符可以是字母、下划线、美元符或数字;
- 不能使用js的关键字或保留字。
- 多个单词变量的命名使用小驼峰或单词加下划线。
- 对于object对象一般使用匈牙利命名风格。
- //小驼峰命名法
- var getMyClass = "abc";
- //字母加下划线
- var get_my_name = "abc";
- //匈牙利命名风格
- object: oDiv = document.getElementById('div1');
- string: sMyName = "abc" //根据数据类型的第一个字母为开头的小驼峰命名法。
获取属性
- <script>
- window.onload = function() {
- //获取标签,通过id
- var oDiv = document.getElementById('div');
- //获取标签,通过class属性
- var oDiv = document.getElementByClassName('div');
- // 获取标签,写法和CSS一样
- var oDiv = document.querySlector("#id"); //如果有多个,获取到第一个
- var oDiv = document.querySlectorAll() //获取所有,得到选择集
- // 读取属性值
- var name = oDiv.className;
- var oId = oDiv.id;
- // 写(设置)属性
- oDiv.style.color = 'red';
- oDiv.style.fontSize = "20px";
- // 写属性值第二种
- var cor = oDiv.style.color;
- var oDiv.style[cor] = "red"; //自己命名的属性需要通过[]方式
- var oDiv.style.cor = ""; //这种是无效的
- }
- </script>
注意1:代码需要写在window.onload =function(){};中,使得html和css加载完毕后才执行,防止报错。
注意2:如果style中的属性不是行内式,而是由css设置的,那么js第一次是获取不到的,但可以直接设置。
注意3:js代码需要用script标签包裹,可以放置在html代码的任何位置,但css嵌入式只能放在头部。
书写方法:
- 一般行内的属性写法一样;
- “class” 属性写成 “className”;
- “style” 属性里面的属性,有横杠的改成驼峰式,如:“font-size”,改成”style.fontSize”;
获取标签包裹的内容
- //读取
- var txt = oDiv.innerHTML;
- //写入
- oDiv.innerHTML = '<a href="">哈哈哈哈哈<a/>';
说明:写入的标签会被解析,从而可以动态添加标签;标签的属性可以在css中写,有效。
运算符
- 算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余);;
- 赋值运算符:=、 +=、 -=、 *=、 /=、 %=;
- 条件运算符:= =、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否);
- 自加、自减:i++, i--;
==和===的区别:==不会判断数据的类型,直接比较值;=== 会先判断数据的类型,不是同一种类型则不相等。
- if (3 == "3") {
- alert("true") //判断为真
- }
- if (3 === "3") {
- alert("true") //判断为假
- }
条件语句
- if; if else; if else if else; 和java的写法一样;
- switch:选择语句,和java写法一样。
- var a = 2;
- switch (a) {
- case 1:
- alert('1');
- break;
- case 2:
- alert('2');
- break;
- default:
- alert("else");
数组和操作数组
- 定义方法:
- //实例创建,和java相似
- var aList = new Array(1, 2, 3);
- //直接创建,内部数据可以是不同的类型;
- var aList2 = [1, 2, 3, 'asd',true,null];
- // 多维数组
- var aList = [[1, 2, 3], ['a', 'b', 'c']];
- 操作方法:
- var aList = [1, 2, 3, 4];
- var n1 = aList.length; //获取数组的长度,n1=4;
- var n2 = aList[0]; // 下标获取数据,n2 = 1;
- var n3 = (aList.join('-')) // 数组成员通过分隔符拼接成字符串,n3="1-2-3-4";
- var n4 = aList.push(5); //数组后面追加成员
- var n5 = aList.pop(); //数组后删除成员
- var n6 = aList.unshift(5); //数组前面增加成员
- var n7 = aList.shift();; //数组前面面删除成员
- var n8 = aList.reverse(); //数组翻转
- var n9 = aList.indexOf(1); //返回元素1在数组中第一次出现的索引,没有则返回-1;
- var n10 = aList.splice(2, 1, 7, 8, 9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
注意点:
- aList.join("") // 快速拼接成字符串;
- aList.push(5,6,9); // 一次性添加多个成员
- aList.pop(2); // 2是没有作用的,里面的任何参数都不会起作用,但不会报错;
- aList.unshift(5,8,9);// 在前面一次性增加多个数据
- aList.shift(5); //没有效果,这里没有参数,但不会报错。
- aList.splice(2); //一个参数时,删除角标2后面的所有元素,包括角标2的元素;
- aList.splice(2,1); //两个参数代表从角标2后(包括角标)删除1个元素;
字符串处理
- 相关方法:
- var sName = "abcdfg";
- var iNmr = "123456";
- var s1 = sName + "dfgh"; //字符串合并操作:“ + ”
- var sx = sName[0]; //获取字符串角标为0的字符
- var s2 = parseInt(iNmr) //将数字字符串转化为整数,得到新的数据
- var s3 = parseFloat(iNmr) //将数字字符串转化为小数
- var s4 = sName.split() //把一个字符串分隔成字符串组成的数组
- var s5 = sName.charAt(3) //获取字符串中角标为3的字符
- var s6 = sName.indexOf("g") //查找字符串是否含有某字符,如果没有就返回-1,有返回第一次出现的角标
- var s7 = sName.substring() //截取字符串
- var s8 = sName.toUpperCase() // 字符串转大写
- var s9 = sName.toLowerCase() // 字符串转小写
- 方法扩展:
- var sName = "abcdfg";
- var s4 = sName.split() //参数为空时返回数组["abcdfg"]
- var s4 = sName.split("") //参数为空字符返回数组["a","b","c","d","f","g"];
- var s3 = parseFloat("5.6") // s3=5.59999999995,该方法转换数据时存在一定的精度问题
- var s3 = parseFloat("5.6")*100/100; // s3 = 5.6
- var s7 = sName.substring(start,end)// start为开始的字符串下标,end为结束下标,新的字符串包含start不包含end。
- var s7 = sName.substring(start,)
- var s7 = sName.substring(start) //以上两种写法可获取从start角标到最后的所有字符;
- 重要应用:字符串翻转
- var str = 'abcdefg';
- //先切割成数组,翻转后拼接成字符串。
- var str2 = str.split('').reverse().join('');
循环
- for循环:和java一样的使用方式
- for(var i=0;i<length;i++)
- {
- ......
- }
- while循环:
- while(i<length){
- ......
- i++;
- }
一个扩展应用:数组去重
- var aList = [1, 2, 3, 4, 4, 3, 2, 1, 2, 3, 4, 5, 6, 5, 5, 3, 3, 4, 2, 1];
- var aList2 = [];
- for (var i = 0; i < aList.length; i++) {
- if (aList2.indexOf(aList[i]) == -1) {
- aList2.push(aList[i]);
- }
- } //对数组进行遍历,如果数据在新的数组中不存在就加入。
数据类型转换
- 直接转换
- alert('12'+7); //将7转换成"7",弹出127
- alert(parseInt('1') + 7 ); //转换后,弹出8
- alert(parseInt(5.6)); // 去掉小数部分,不是四舍五入,弹出5
- alert('5.6'+2.3); // 2.3转换成"2.3",弹出5.62.3
- alert(0.1+0.2); //弹出 0.3000000000000004,精度有问题
- alert((0.1*100+0.2*100)/100); //弹出0.3,需要计算处理一下
- 隐式转换
- "4" == 4; //判断为真,==将"4"转换成4;
- "3"-2; //结果1;
- var s1 = parseInt('123abc') //结果为123
- alert( parseInt('abc123') ); // 弹出NaN
- //说明:以数字开头的字符串通过函数可以转换其中的数字为整形,如果不是开头 则转换失败
- alert(isNaN(123abc)) //弹出true
- //isNAN(string):判断是否是纯数字,是返回false,不是返回true
- null==undefined:涉及隐式转换,null和undefind都被当做false处理,判断为真
- null===undefined:判断为flase,null为Object类型,undefined类型是其本身
- !(null):判断为真
- !(undefined):判断为真
- typeof():查看数据类型
- 程序调试方法
- alert("xxxx")//输出弹窗,但是阻止程序继续运行
- console.log()//在控制台输出内容
- document.title == "xxxx"//覆盖网页的标题,很少使用
- document.write("xxxx")//覆盖body的内容,很少使用
定时器
作用:制作动画和异步操作
- var time1 = setTimeout(function,1000) //只执行一次的定时器,第一个参数为函数,第二个参数为定时时间,单位ms
- clearTimeout(time1) //关闭只执行一次的定时器
- var time2 = setInterval(function,1000) // 反复执行的定时器
- clearInterval(time2) //关闭反复执行的定时器
注意:反复执行的定时器一旦开启就不会停止,相当于启动了一个线程,会一直消耗cup资源,所有很多时候需要手动关闭。
- var timer1 = setInterval(func1,2000);
- function funnc1(){
- console.log("hhhh");
- clearInterval(timer1); //关闭定时器在函数内部
- }
- //clearInterval(timer1);在外部是无效的
注意:关闭定时器的操作需要在定时器函数的内部执行,否则不会成功。
函数
- 命名函数
- function myalert() {
- alert('ok!'); //弹出OK的窗口
- }
说明:用function定义,其他的写法和java一样。
- 匿名函数:
- // 匿名函数赋值给绑定的事件
- oBtn.onclick = function (){
- alert('ok!');
- }
说明:匿名函数不能单独存在,必须用一个变量将其引用。
- 封闭函数:
定义:一个打开网页就立即执行的函数 。
作用:当需要在原来的代码基础上增加新的函数时,如果函数名相同,新的函数会覆盖原来的函数,为了避免覆盖,将后一个函数写成封闭函数,一开始就运行。
- //写法一
- (function() {......
- })();
- //写法二
- !
- function() {.....
- } ()
- //写法三
- ~
- function() {.....
- } ()
- 传参和返回值:和java一样。
- function myalert(a, b) {
- //return a+b;
- return [a, b]
- }
- myalert(1, 2);
说明:返回多个参数时需要使用一个数组,不可以直接写return a,b;否则报错!
说明:return关键字可以结束函数运行、阻止程序的默认行为。
闭包
- 定义:函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回
- function func1(i) {
- var a = 1;
- function func2(j) {
- i += a;
- j += a;
- console.log(i);
- console.log(j);
- }
- return func2;
- }
- var func2 = func1(2); //将闭包函数提取出来
- func2(3);
- 用法:私有变量计数器
- function func1(i) {
- var a = 0;
- function func2(j) {
- a++;
- i++;
- j++;
- console.log(a);
- console.log(i);
- console.log(j);
- }
- return func2;
- }
- var func2 = func1(0);
- for (var i, i < 10,
- i++) {
- func2(0);
- }
- //a和i都可以作为变量计数器,使得全局变量与闭包函数计数变量分开