js基础总结(上)

一.js的几种常用的输出方式：

1.alert(内容) 在浏览器弹出一个窗口，输出我们的内容 。在真实项目中，如果有一个提示层，我们基本上不用alert，而是自己用js写一套插件来实现 ;

2.confirm("我们是好好学呢，还是好好学呢？");确定和取消两个按钮，浏览器自带的提示选择弹出层

3.①console.log(内容) 在控制台输出我们的内容,所有浏览器按F12打开控制台(推荐大家安装谷歌浏览器)，找到console这个页卡，我们输出的内容在那里可以看到

② console.dir();在控制台输出内容 比log输出的详细一些

③console.table();在控制台以表格的形式输出内容

4.document.write(内容) 在页面中输出内容 做广告的插入例：document.write("哈哈哈哈哈！");

5.innerHTML/innerText 把内容添加到指定的元素之中,项目中我们通常使用innerHTML，因为innerHTML不仅仅可以添加文字，而且在添加内容的时候，如果遇到内容中包含html标签，innerHTML可以把标签进行有效的识别,而innerText不能识别标签。

二.js的组成

javascript是一门轻量级的脚本编程语言，它是由三部分组成的:
ECMAScript：规定了js的基本语法、命名规范、数据类型、操作语句等等...是js的基本核心
DOM：document object model 文档对象模型，提供了让我们能操作html标签的属性和方法
BOM：browser object model 浏览器对象模型，提供了让我们操作浏览器的相关的属性和方法

ECMAScript

Ⅰ.js的命名规范

①.js中是严格区分大小写的,test和Test是两个名字.

②.使用驼峰命名法 ,第一个首字母小写，其余每一个有意义的单词的首字母都要大写例：学生信息 studentInfo studentInfo(ps:这一条是用来约束自己，大家最好这样写，不是js命名规范里必须的)

③.可以使用字母、数字、下划线、$命名，但是数字不能作为开头。例：人员的重要信息 personImportInfo， $person：通常项目中这种名字代表的是jQuery专用的名字

④.不能使用关键字和保留字。关键字：js中具有特殊意义的词，我们不能随便拿来命名；保留字：未来可能会成为关键字的。http://www.php100.com/html/webkaifa/javascript/2008/1105/1566.html

Ⅱjs中的变量及数据类型

①变量：可变的量 js中的变量是用来存储值和代表值的

var 变量名;

var num = 12;定义一个变量num，并且给这个变量赋值12，那我们说num存储了一个12的值
，console.log(num);num在这里代表了12这个值 在控制台输出num这个变量所代表的值 (在js中 "=" 是赋值：=左边是变量 =右边是值(哪怕看上去不是值，也是代表一个值的，例如：右边是一个变量的话，意思是把变量代表的值赋值给我们的左边))var num1 = 12;
//var num2 = num1;//把num1这个变量所代表的值赋值给我们的num2这个变量,

js中的变量存在一个特点：是松散类型的，因为它可以存储任何的数据类型值

var num = 12;//数字
//

var str = "珠峰培训";//字符串 用""或者‘‘包起来的都是字符串

// var boo = true;//布尔类型值 true/false
//

var n = null;//null

var u = undefined;//undefined

var obj = {name: "珠峰"};//对象数据类型的值

var ary = [12, 23, 34];//数组

var reg = /^[+-]?(?:\d|[1-9]\d+)(\.\d+)?$/;//正则

var fn=function(){//函数
//
// }

js中的数据类型：

1、基本数据类型(值类型) 看上去数据结构比较的简单
//数字(number) 字符串(string) 布尔(boolean) null undefined

2、引用数据类型 看上去数据结构相对复杂的
//对象数据类型(object)：{}对象 []数组 /^$/正则 时间(Date) .....  函数数据类型(function)

这么多数据类型，浏览器如何的去分辨呢? -->js中检测数据类型的方式：

A、typeof 检测数据类型的运算符，返回的结果：首先是一个字符串，字符串中包含了当前值的数据类型，例如："number"、"string"、"boolean"、"undefined"、"object"、"function"

1)typeof null ==> "object"

2)局限性：不能够具体的检测对象数据类型的详细分类，例如：typeof [12,13] ==> "object" typeof /^$/ ==>"object" ...

var num = 12;
//console.log(typeof num); //==> "number"

腾讯公司关于typeof的一个面试题：
//console.log(typeof typeof typeof typeof [12, 23, 34]);// "string"

typeof [12, 23, 34] ==> "object"

分析：typeof "object" ==> "string";typeof "string" ==> "string";typeof "string" ==> "string";因为typeof返回的首先是一个字符串，所以出现两个及以上的typeof同时使用的时候，最终结果一定是"string"

B、instanceof

C、constructor

D、Object.prototype.toString.call()

基本数据类型与引用数据类型的区别：
 var num1 = 12; var num2 = num1; num2++;//num2+=1 num2=num2+1 自身的值累加1
// num2-->13;console.log(num1);//12

基本数据类型：是直接按照值来操作的;1、定义一个变量num1，然后把值12直接的给了我们的num1

2、定义一个变量num2，把num1的值12赋值给了num2，此时num2=12

3、num2++，自身加1后num2=13
//

4、上述三个步骤，num2的值改变了，但是并没有改变num1的值，所以num1还是12

var obj1 = {name: "沈杨", age: 28};

var obj2 = obj1;

obj2.age = 27; //obj2.age --> 27

console.log(obj1.age);//27

引用数据类型：操作的是对空间的一个引用的地址

1、首先开辟一个新的内存空间(地址:xxxfff000)，然后把对象中的属性名和属性值存储到这个空间中

2、把地址给我们的obj1这个变量 obj1=xxxfff000

3、定义变量obj2=obj1存储的值，也就是 obj2=xxxfff000，此时我们的obj1和obj2都是通过一个地址操作相同的内存空间

4、obj2.age=27 obj2通过xxxfff000这个地址，把空间中的age改成了27

5、obj1.age=? obj1通过地址访问空间，找到的age已经变成了27了

思考题：

var obj1 = {name: "张三", age: 19};

var obj2 = obj1;
var obj3 = obj2;

obj3.age = 24;

obj2 = {name: "李四", age: 20};

console.log(obj1.age);

console.log(obj2.age);

console.log(obj3.age);

结果：

20

24

20

number数据类型详细解读

number数据类型中都包含哪些值?正数、负数、零、小数 NaN //NaN:not a number 不是一个有效的数字，但是它属于number类型的

console.log(typeof NaN);//"number"

什么情况下出现我们的NaN?
     1、数字+undefined
     2、将其他的数据类型转换为number类型的时候，有可能会出现NaN --> 如何的将其他的数据类型转换为number类型?
         Number(); 强制转换，例如：将字符串转换为number类型的，如果字符串中有一个字符不是数字，那么就不能转换，返回的结果是我们的NaN
         console.log(Number("123"));//将字符串"123"变成数字123
         console.log(Number(true));//true-->1 false-->0
         console.log(Number("12px")); //NaN
     parseInt和parseFloat：非强制转换
    从左到右查找，把有效的数字字符转化为数字，当遇到一个非有效数字字符，我们查找停止(不管后面是否还存在有效的数字都不在找了)
           console.log(parseInt("12px"));//12
           console.log(parseInt("12p13"));//12
           console.log(parseInt("aa12"));//NaN
           console.log(parseInt("12.5px"));//12 parseInt不能识别小数点的
           console.log(parseFloat("12.5.3px"));//12.5 parseFloat相对于parseInt可以识别第一个小数点

isNaN()：用来检测某个值是否为有效的数字，如果是有效的数字返回false，相反不是有效的数字才返回true
      当用isNaN检测值的时候，我们发现这个值不是number类型的，浏览器会默认的使用Number()先将值转换为number类型，然后在检测是否为有效的数字
               console.log(isNaN(12));//false
               console.log(isNaN(NaN));//true
               console.log(isNaN("12"));//false Number("12")-->12 isNaN(12)-->false
               console.log(isNaN("12px"));//true Number("12px")-->NaN isNaN(NaN)-->true

boolean数据类型详细解读

布尔类型中只有 true/false

!:首先将其他的数据类型转换为boolean类型，然后在把得到的布尔值取反

!!:将其他数据类型转换为布尔类型 和我们的Boolean()效果一样

将其他的数据类型转化为布尔类型，遵循下面的这个规律:只有0、NaN、空字符串、null、undefined 转换为false，其余的任何值都是truestring数据类型详细解读

string数据类型详细解读

js中用‘‘或""包起来的叫字符串

js中用来操作字符串的常用的11种方法(ps:后面还会继续补充)
               var str = "zhufengpeixun2015yangfanqihang";
                  字符串也是存在索引和length的
                  str.length 获取字符串的长度(字符的个数)
                  第一个字符的索引是0，第二个字符的索引是1...
                  console.log(str[2]);

1、charAt(index)：通过索引index获取指定位置的字符
                console.log(str.charAt(3)); -->"f"
                charCodeAt(index)：通过索引index获取指定位置的字符对应的Unicode编码值
                console.log(str.charCodeAt(3)); -->"f"对应的Unicode值102

var str = "zhufengpeixun2015yangfanqihang";
            2、截取字符串
                 substr(n,m)：从索引n开始截取m个字符
                 console.log(str.substr(3,10)); -->"fengpeixun"
                 substring(n,m)：从索引n开始截取到索引m处(不包含m)
                 console.log(str.substring(3,10)); -->"fengpei"

slice(n,m)：从索引n开始截取到索引m处(不包含m)
                 console.log(str.slice(3,10)); -->"fengpei"如果只写n不写m，从索引n开始找到末尾

slice支持负数作为索引
                   console.log(str.slice(-4));//index=str.length-4
                   console.log(str.substring(-4));

var str = "zhufengpeixun2015yangfanqihang";
               3、通过制定的字符获取索引
                    str.indexOf("字符") 获取字符在字符串中第一次出现位置的索引
                    str.lastIndexOf("字符") 获取字符在字符串中最后一次出现位置的索引
                    console.log(str.indexOf("h")); -->1
                    console.log(str.lastIndexOf("h")); -->26
                    console.log(str.indexOf("2015")); -->13
                    特殊作用：可以判断字符串中是否包含某一个字符，包含返回索引，不包含返回-1
                      if(str.indexOf("2015")>-1){
                               包含
                      }else{
                              不包含
                      }

var str = "zhufengpeixun2015yangfanqihang";
                 4、大小写转换
                     console.log(str.toUpperCase());//字母转大写
                     console.log(str.toLowerCase());//字母转小写
                   var str = "zhu feng pei xun 2015 yang fan qi hang";

5、和数组中join对应的方法-->split：按照指定的字符，把字符串拆分成数组
                      console.log(str.split(" "));//["zhu", "feng", "pei", "xun", "2015", "yang", "fan", "qi", "hang"]
                      var str = "珠峰培训";//“zhufeng”
                  6、replace(old,new)：将老字符替换成新的字符
                       console.log(str.replace("珠峰","zhufeng")); -->"zhufeng培训"
                       在不使用正则的情况下，一次replace执行只能替换一次
                       var str = "13/01/25"
                       console.log(str.replace("/",":").replace("/",":"));
                       console.log(str.replace(/\//g, ":")); //正则方式

console.dir(String.prototype);//可查看字符串下所有方法

字符串的简单应用

var timeStr = "2015-8-2 14:41:2";将timeStr 变成"2015年08月02日 14时41分02秒"的形式

    var ary = timeStr.split(" ")；

var s1 = ary[0];

var s2 = ary[1];
    var ary1 = s1.split("-");
    var ary2 = s2.split(":");
    var str = ary1[0] + "年" + addZero(ary1[1]) + "月" + addZero(ary1[2]) + "日 " + addZero(ary2[0]) + "时" + addZero(ary2[1]) + "分" + addZero(ary2[2]) + "秒";
    console.log(str);

//补充0，如果字符串的长度小于2补充0，否则不用管
     function addZero(val) {
           return val.length < 2 ? "0" + val : val;
     }

引用数据类型下节继续，先说一下数据类型直接的转换

两个值用==比较的时候，左右两边的数据类型不同，浏览器会默认的先进行数据类型转换
           ①对象 == 对象 ：肯定不相等,因为不是同一个内存地址 例如：[]==[] false
           ②对象 == 字符串：将对象转换为字符串(toString) 例如: []=="" true
           ③对象 == 布尔：都转换为数字 Number(对象.toString()) true-->1 false-->0 例如:[]==false Number("")-->0 true
           ④对象 == 数字：对象转化为数字 例如：[]==1 false
           ⑤字符串 == 布尔：都转化为数字 字符串调用Number转换为数字
           ⑥字符串 == 数字：字符串转换为数字
           ⑦布尔 == 数字：布尔转换为数字
           ⑧数字 == 数字：NaN==NaN 是false
           ⑨null==undefined -->true
           ⑩null和undefined和其他任何的一个数据类型比较都是false

"5"+3 --> "53" “+”不只是数学运算，还是字符串的拼接
            "5"-3 --> 2 “- * /”只有数学运算