总结一下原生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嵌入式只能放在头部。

书写方法：

1. 一般行内的属性写法一样；
2. “class” 属性写成 “className”；
3. “style” 属性里面的属性，有横杠的改成驼峰式，如：“font-size”，改成”style.fontSize”；

获取标签包裹的内容

    //读取

    var txt = oDiv.innerHTML;

    //写入

    oDiv.innerHTML = '<a href="">哈哈哈哈哈<a/>';

说明：写入的标签会被解析，从而可以动态添加标签；标签的属性可以在css中写，有效。

运算符

1. 算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余);;
2. 赋值运算符：=、 +=、 -=、 *=、 /=、 %=;
3. 条件运算符：= =、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否);
4. 自加、自减：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('');

循环

1. for循环:和java一样的使用方式

for(var i=0;i<length;i++)

{

    ......

}

1. 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都可以作为变量计数器，使得全局变量与闭包函数计数变量分开