Js笔记-b站珠峰版

链接：20-数据类型的区别（堆栈底层机制）_哔哩哔哩_bilibili

  ### 常用浏览器

  QQ浏览器 百度 谷歌 火狐 IE(6-8 9-11 Edge) 360 UC Safari Opera 搜狗 猎狐 好123 2345

### 浏览器内核

  - wenkit内核（V8引擎）

    + 谷歌chrome

    + safari

    + opera>= V14

    + 国产浏览器

    + 手机浏览器

    + ....

  - Gecko

    +火狐 firefox

  - Presto

    + Opera < V14

  - Trident

    + IE

    + IE Edge开始采用双内核（其中包括Chrome迷你版）

  + P.普通版多为wenkit内核 极速版多为IE内核

  ### 控制台

  + 谷歌浏览器的控制台（F12/Fn+F12）

    - Elements：查看结构样式，可以修改这些内容

    - Console：查看输出结果和报错信息 是js调试的利器

    - Source：查看项目源码

    - Network：查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）、加载事件等（根据加载时间可进行项目优化）

    - Application：查看当前网站的数据存储和资源文件（可以盗图）

  ### JS做客户端语言

    >按照相关的JS语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能

-  ECMAScript3/4/5/6/...：JS的语法规范（变量、数据类型、操作语句等）

-  DOM（document object model）：文档对象模型，提供一些JS的属性和方法，用来操作页面中的DOM元素

-  BOM（browser object model）：浏览器对象模型，提供一些JS的属性和方法，用来操作浏览器

  ### JS中的变量 variable

  > 变量：可变的量，在编程语言中变量其实就是一个名字，用了存储和代表不同值的东西

  ```

  //ES3

    var a = 12;

    console.log(a); // 输出的是a代表的值是12

    a = 13;

    console.log(a); // 输出的是a代表的最新的值是13

  //ES6

  let b = 100;

  b = 200 ;

  const c = 1000;

  c = 2000;       //const创建的变量，存储的值不允许更改，发生报错（可以理解为叫做常量）

  //创建函数也相当于在创建变量

  function fn(){}

  //创建类也相当于创建变量

  class A{}

  //ES6的模块导入也可以创建变量

  import B from './A.js';

  //Symbol创建唯一值

  let n = symbol(100);

  let m = symbol(100);

  n==m //提示false

  ```

### JS中的命名规范

- 严格区分大小写

  ```

    let Test = 100;

    console.log(test); //无法输出，因为大小写不同

  ```

- 使用数字、字母、下划线、$ 进行命名 （数字不能用作开头）

  ```

  let $box; //一般JQuary获取的以$开头

  let _box; //一般全局变量、公共变量以_开头

  let 1box; //错误不识别 数字不能作为开头

  let box1; //数字可以构成开头的一部分

  ```

- 使用驼峰命名法：首字母小写，其余每一个有意义单词的首字母大写（命名尽可能语义化明显，使用英文单词）

  ```

  let studentInformation; //创建一个学生信息

  let stuInfo;//创建一个学生信息 缩写版

  //常用缩写：add/insert/create/new(新增)、update(修改)、delete/del/remove/rm（删除）、sel/select/query/get（查询）、info(信息)...

  //不正确写法

  let xueshengInfo; //一点鄙视

  let xueshengxinxi;  //鄙视

  let xsxx; //必挨揍

  ```

- 不能使用关键字和保留字

  >当下又特殊含义的是关键字，未来可能会成为关键字的叫保留字

```

abstract、arguments、boolean、break、byte、case、catch、char、class*、const、continue debugger、default、delete、do、double、else、enum*、eval、export*、extends*、false、final、finally、float、for、function、goto、if、implements、import*、in、instanceof、int、interface、let、long、native、new、null、package、private、protected、public、return、short、static、super*、switch、synchronized、this、throw、throws、transient、true、try、typeof、var 、void、volatile、while、with、yield  

// 代码强迫症（代码洁癖）：良好的编程习惯、极客精神

```

### JS中常用的数据类型

- 基本数据类型

    + 数字number

        - 常规数字和NaN

    + 字符串String

        - 所有用单引号、双引号、反引号包括住的都是字符串

        ```

        10 数字

        '10' 字符串

        'class' 字符串

        '{name:10}' 字符串

        ```

    + 布尔boolean

        - true/false

    + 空对象指针null

    + 未定义undefined

- 引用数据类型

    + 对象数据类型object

        + {} 普通对象

        + [] 数组对象

        + /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/ 正则对象(/  /中间包含的是正则对象)

        + Math 数学函数对象

        + 日期对象

        + ...

    + 函数数据类型function

## number数字类型

> 包括：常规数字 NaN

### NaN

> not a number:不是一个数，但隶属于数字类型

> NaN和任何值（包括自己本身）都不想等：NaN!=NaN,所以不能利用与NaN相等来判断是否为有效数字

```

 console.log('AA' == NaN);

 // false

 console.log(10 == NaN);

 // false

 console.log(NaN == NaN);

 // false

```

### isNaN

+ 检测一个值是否为非有效数字，如果不是有效数字返回True，反之如果是有效数字返回false

+  isNaN检测时首先会验证检测值是否为数字类型，如果不是会先基于number（）方法，把值先转换为数字类型再进行检测

```

// isNaN([val])

console.log(isNaN(10)); // False

console.log(isNaN('AA')); // True

    /* Number('AA') => NaN

    isNaN(NaN) =>True

    */

console.log(isNaN('10')); // False

    /* Number('10') => 10

    isNaN(10) =>False

    */

```

### 把其他类型值转换为数字类型

- Number([val])

  >把字符串转换为数字，只要字符串包含任意一个非有效数字（第一个点除外）的话，结果均为NaN，空字符串会变为数字0

  ```

    console.log(Number('12.5')); //=>12.5

    console.log(Number('12.5px')); //=>NaN

    console.log(Number('12.5.5')); //=>NaN

    console.log(Number('')); //=>0

    console.log(Number(true)); //=>1

    console.log(Number(false)); //=>0

    console.log(isNaN(true)); //=>false

    console.log(isNaN(false)); //=>false

    console.log(Number(null)); //=>0

    console.log(Number(undefined)); //=>NaN

  ```

 > 把引用数字类型转换为数字，是先把它基于toString方法转换为字符串，再把字符串转换为数字

 ```

    console.log(Number({name:'10'})); //NaN

    console.log(Number({})); //NaN

    console.log(Number([])); //0

    // [].toString =>''

    console.log(Number([12])); //12

    // [12].toString =>'12'

    console.log(Number([12,13])); //NaN

    // [12,23].toString =>''

```

- parseInt/parseFloat([val],[进制])：也是转换为数字的方法，对于字符串来说从左到右依次查找有效数字字符，直到遇到非有效字符，停止查找，不敢之后是否还有数字都不再查找，后将找到的数字返回。

```

    let str = '12.5px'

    console.log(Number(str)); //=>NaN

    console.log(parseInt(str)); //=>12

    console.log(parseFloat(str)); // =>12.5

    console.log(parseFloat('width:12.5px')); // =>NaN

    ///parsefloat处理机制

    parseFloat(true); //=>NaN

        => parseFloat('true')

```

## String字符串数据类型

> 所有用单引号、双引号、反引号（``）包起来的都是字符串

 

### 把其他类型值转换为字符串

- [val].toString()

```

let a = 12;

console.log(a.toString()) //=>'12'

console.log((NaN).toString()) //=>'NaN'

console.log((true).toString()) //=>'true'

```

    -null和undefined是禁止直接toString的,(null).toString() =>报错,(undefined).toString() =>报错,但是和undefined一样转换为字符串的结果就'null'/'undefined'

    ```

    console.log([].toString()) //=>""

    console.log([12,23].toString()) //=>"12,23"

    console.log(/^$/.toString()) //=>"/^$/"

    console.log(({name:'xxx'}).toString()) //=>"[object object]"

    ```

    -普通对象.toString()的结果是"[object object]"

- 字符串拼接

  > 四则运算法则中，除加法之外，其余都是数学计算，只有加法可能存在字符串拼接（一旦遇到字符串，则不是数学运算，而是字符串拼接）

  ```

    console.log('10'+10) //=>'1010'

    console.log('10'-10) //=>0

    console.log('10px'-10) //=>NaN

  ```

  面试题：let a = 10+null+true+[]+undefined+'珠峰'+null+[]+10+false;

        console.log(a);

```

    undefined = NaN

    Null = 0

    10+NaN = NaN

 

        10+null -> 10+0 ->10

        10+true -> 10+1 ->11

        11+[]   -> 11+' ' -> '11' 空数组变为数字，先要经历变为空字符串，11与字符串相加变为字符串拼接

        '11'+ undefined -> '11undefined'

        '11undefined'+ 珠峰 -> '11undefined珠峰'

        '11undefined珠峰'+null -> '11undefined珠峰null'

        '11undefined珠峰null'+[] -> '11undefined珠峰null'+ ' ' ->'11undefined珠峰null'

        '11undefined珠峰null'+10 -> '11undefined珠峰null'+'10'->'11undefined珠峰null10'

        '11undefined珠峰null10'+false -> '11undefined珠峰null10false'

```

## boolean布尔数据类型

> 只有两个值 true/false

### 把其他类型值转换为布尔类型

> 只有0、NaN、''、Null、undefined 五个值能转换为false，其余都转换为true（没有其他特殊情况）

- Boolean([val])

  ```

    console.log(Boolean(0)); =>false

    console.log(Boolean(''));=>false

    console.log(Boolean(' '));=>true

    console.log(Boolean(null));=>false

    console.log(Boolean(undefined));=>false

    console.log(Boolean([]));=>true

    console.log(Boolean([12]));=>true

  ```

- !/!!

    + !：取反（先转为布尔，然后取反）

    + !!:取反再取反（只相当于转换为布尔，等价于boolean

    ```

    console.log(!(1)); =>false

    console.log(!！(1)); =>true

    ```

- 条件判断

    + 如果条件只是一个值，不是==/===/！=/>=等这些比较，则要先把这个值转变为布尔类型，然后验证真假

  ```

    if(1){

        console.log('1成立');

    }

    //输出 1成立

    if('3px'+3){

        console.log('2成立'); // =>'3px3'

    }

    //输出 2成立

    if('3px'-3){

        console.log('3成立'); //=>NaN-3 =>NaN =>false

    }

    //无输出该式不成立

  ```

## null ＆ undefined

> null和undefined都代表的是没有

> null一般是意料之中（一般是开始不知道值，我们手动设置为null，后期再进行赋值操作）

```

let num = null; // 也可能会使用 let num = 0;

//一般最好用null作为初值的空值，因为0不是空值，它在栈内存中有自己的存储空间（占据了位置）

...

num = 12;

```

> undefined多为意料之外 指不是程序员可以决定的，多为默认机制

```

let num; //=>创建一个变量没有赋值，默认值是undefined

...

num = 12;

```

## object对象数据类型-普通对象

> {[key]:[value],...} 任何一个对象都是由零到多组键值对（属性名：属性值）组成的，且属性名（键值对）不能重复

  - 获取属性名对应的属性值（属性名是数字或字符串格式）

    - 对象.属性名 或 对象[属性名]

    - 如果当前属性名不存在，则默认的属性值为undefined

    - 注：如果属性名是数字，则不能使用点的方式获取属性值

```

let person ={

    name:'yyqx',

    age:40,

    height:'185cm',

    weight:'80kg',

    1:100

};

// 获取属性名对应的属性值（属性名是数字或字符串格式）

// => 对象.属性名

// => 对象[属性名](可用性更强，更好用)

console.log(person.name);  // => yyqx

console.log(person['age']); // => 40

console.log(person.sex); // => undefined

//注：如果属性名是数字，则不能使用点的方式获取属性值

console.log(person[1]); // => 100

console.log(person.1); // => SyntaxError 语法错误

```

  - 设置属性名的属性值

    - 属性名不能重复，如果属性名已存在，则不新增属性名而是修改已有的属性名

```

let person ={

    name:'yyqx',

    age:40,

    height:'185cm',

    weight:'80kg',

    1:100

};

// 属性名不能重复，如果属性名已存在，则不新增属性名而是修改已有的属性名

person.GF = '圆圆';

person.name = '李易峰';

console.log(person['GF']); // => 圆圆

console.log(person['name']); // => 李易峰

```

  - 删除属性

    - 真删除：把属性彻底删除

```

let person ={

    name:'yyqx',

    weight:'80kg',

    1:100

};

delete person [1];

```

    - 假删除：属性还在，值为空

```

let person ={

    name:'yyqx',

    weight:'80kg',

    1:100

};

person.weight = null;

console.log(person);

```

> 数组是特殊的对象数据类型

  - 在中括号中设置的是属性值，其属性名是默认生成的数字，从0开始依次递增，且这个数字代表每一项的位置，将其称之为“索引”。

    > 从零开始连续递增，代表每一项位置的数字属性名称为索引。

  - 会默认生成一个属性名length，存储数组的长度

  - 第一项索引为0，最后一项索引为length-1

```

let ary = [12,'哈哈',true,13];

console.log(ary);  

console.log(ary.length);   // =>4

console.log(ary['length']);  // =>4

console.log(ary[1]);  // =>哈哈

console.log(ary[0]);  // =>12

console.log(ary[ary.length-1]);  // =>13

```

  - 数组也可以根据基础操作进行增删改查

```

//向数组末尾追加内容

ary[ary.length] = 100;

console.log(ary);  

console.log(ary.length);   // =>5

console.log(ary[ary.length-1]);  // =>100

```