新手学前端之基础知识（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_15706743/article/details/80133376

JavaScript

JavaScript三部分组成：

• ECMAScript(定义了JS的基本语法,命名规范,操作语句,变量,数据类型等最基础最核心的知识)
• DOM(document object model 文档对象模型) 提供了JS操作页面上元素的常用属性和方法
• BOM(browser object model 浏览器对象模型) 提供了JS操作浏览器的常用属性和方法

1. 命名规范

1.严格区分大小写

        var test = "你好";
          console.log(test);
          console.log(Test);
          //Uncaught ReferenceError: Test is not defined

2.使用驼峰命名法

• 第一个单词的首字母小写,其余每一个有意义的单词的首字母都要大写

• 只能使用数字、字母、下划线命名

• 数字不能作为名字第一位
  例如：

  studentInfo1
  student_info
  1student_info (NO)

3.不能使用关键字和保留字

• 关键字就是在JS中有特殊含义的;保留字是未来可能会成为关键字的;
  在真实项目中我们一些约定俗称的规范
• 命名不要用拼音,不要缩减的太短,因为这两类名字别人是很难看懂的
• 对于复杂的名字建议使用多个英文单词拼接的方式留

前缀

get/query 获取
set/insert/add 增加插入
update/replace 修改替换
remove/del 删除

后缀

Info 信息
Import 重要

2、变量

1.变量:一个可变的量,它其实就是一个名字,它的作用是用来存储值的,但是一个变量存储的值可以发生改变.

2.常量:就是一个具体的固定的值,不会改变的 13、”你好”

       var 名字=值;//->JS中的定义变量并且赋值
       var num = 13;
       num = 12;
       console.log(num);

JS中的变量没有什么实际的意义,只是用来存储值和代表值的,例如:num=12就是在给num这个变量存储值,console.log(num)就是把num代表的值12在控制台输出

       var num1 = 12;
       var num2 = num1;
       //->把num1这个变量存储的值赋值给num2这个变量，
       //"="在JS中的作用是赋值，“=”左边是变量名字，
       //“=”右边是给这个变量赋的值

JS中的变量有一个特点：它是松散类型的
因为只需要通过var来定义变量,变量存储的值可以是任何的数据类型的

       var num = 12;
       num = "nihao";
       num = true;
       num = null;
       num = {name: "肖广华", age: 49};
       num = [12, 23, 34];
       num = /^[+-]?(\d|([1-9]\d+))(\.\d+)?%/;
       num = function () {
           };
    [后台]
    int num=12;
    String num="nihao";

---

3.数据类型

1.基本数据类型/值类型

number(数字)、string(字符串)、boolean(布尔 true/false)、null、undefined

2.引用数据类型

object(对象):{}对象、[]数组、/^$/正则 date function(函数)

3.JS中数据类型检测的方式

typeof:用来检测数据类型的运算符

语法: typeof value;
返回值:首先是一个字符串,其次字符串中的内容才包含了对应的数据类型信息
“number”、”string”、”boolean”、”undefined”、”object”、”function”
**局限性:**typeof null; 是”object”, 但是null不是对象数据类型的

不能具体检测出是数组还是正则还是对象,因为typeof检测对象数据类型那几个细分的值,返回的结果都是“object

例如：

       console.log(typeof 12);//->"number"
       var str = "你好呀";
       console.log(typeof str);//->"string"

总结：

1. instanceof:用来检测某一个实例是否属于这个类
2. constructor:利用原型构造器的方式检测数据类型
3. Object.prototype.toString.call( ):借用内置类Object原型上的toString方法实现数据类型检测

腾讯面试题:

    console.log(typeof typeof typeof [12, 23]); //->"string"
    typeof [12, 23] ->"object"
    typeof "object" ->"string"
    typeof "string" ->"string"

由于typeof返回的结果首先是一个字符串,所以当连续出现两个及以上typeof同时检测的时候,最后的结果都是”string”

---

4.JS中等号的三种情况:

1. “=”赋值
2. “==”是判断左右两边的值是否相等

console.log(12 == "12");//->true

在”==”等于号进行比较的时候,我们发现左右两边的数据类型是不一样的,浏览器会默认的把它们先转换为一样的(在这里是把”12”通过Number(“12”)先强制转换为了数字12),然后在比较值是否相等

1. “===”是判断左右两边的值是否绝对相等

console.log(12 === "12");//->false

”===”绝对相等,不仅仅值要一样,而且数据类型也要一样,不能像”==”那样,不一样数据类型会转换,“===”是不会转换的

5.number：正数、负数、零、小数、NaN

NaN: not a number 不是一个数,但是属于number数据类型的
typeof NaN : "number"
NaN==NaN : false
因为我们也不知道每一边的NaN到底是啥，NaN和任何的值都不相等

1.严格的转换:Number()

           console.log(Number(true));//->1
           console.log(Number(false));//->0
           console.log(Number(null));//->0
           console.log(Number(""));//->0
           console.log(Number(undefined));//->NaN

把undefined是不能转换为有效数字的

console.log(Number("12"));//->12
console.log(Number("12px"));//->NaN

如果是把一个字符串转换为数字,只有字符串中的每一个字符都是有效的数字字符,才可以正常转换,相反只要有一个不是有效的数字字符,最后的结果就是NaN

2.非严格转换:parseInt / parseFloat

从左到右一次查找,把有效的数字字符转换为数字,但是一但遇到一个非有效的数字字符,立即停止查找(不管后面是否还有都不在查找了)

    console.log(parseInt("12px"));   ->12
    console.log(parseInt("12px13"));  ->12
    console.log(parseInt("px13"));    ->NaN
    console.log(parseInt("13.5px"));  ->13
    console.log(parseFloat("13.5px"));    ->13.5

3.数字的常用方法toFixed(n):保留小数点后面n位

var num = 3.141592654;
console.log(num.toFixed(2));//->3.14

4、检测是否为有效的数字

isNaN( )用来检测是否为有效数字的方法,如果当前的值是有效数字返回的结果是false,如果不是有效>数字,返回的结果是true

       console.log(isNaN(12));//->false
       console.log(isNaN("nihao"));//->true
       console.log(isNaN("12"));//->false

说明”12”也是有效数字
如果检测的值不是number类型的,浏览器会默认先通过Number把它强制转换为number类型,然后在检测是否为有效的数字
console.log(isNaN("12px"));//->true

NaN和

腾讯面试题：

    var num = parseFloat("px12.5");//->num=NaN
    if (num == 12.5) {//->NaN==12.5
        console.log(12.5);
    } else if (num == NaN) {//->NaN==NaN
        console.log(NaN);
    } else if (typeof num === "number") {//typeof NaN="number" ->"number"==="number"
        console.log("number");
    } else {
        console.log("no");
    }

6.boolean

1、boolean:true/false

• ! 先把值转换为布尔类型,然后在取反
• !! 把值转换为布尔类型 ==>> Boolean()

2、把其他的数据类型转换为布尔类型

只有五个值(“”、0、NaN、null、undefined)转换为布尔类型会变为false,其余的都是true

3、都什么情况下会把其他的值转换为布尔类型?

!、!!、Boolean
if(1){}

如果条件判断中只有一个单独的值,那它的任意是：首先把这个值转换为布尔类型,然后看是真还是假,是真的话条件成立,反之条件不成立.

4、字符串:在JS中用””包起来的都是字符串

var str = "welcome to c~~";

一个字符串中的字符是以数字作为索引,索引从0开始,索引0代表第一个字符

console.log(str[0]);
    console.log(str[1]);
    console.log(str.length);//->获取字符串一共有多少个字符 21
    console.log(str[str.length - 1]);//->获取最后一个字符