第二天

作者: 晚月川 | 来源:发表于2020-03-06 08:49 被阅读0次

JS中常用的输出方式 (3种)

console
- console.log() 控制台输出日志
  
  在控制台输出，特点是：输出任意数据类型的数据，控制台展示的也是对应的数据类型
```
  ```
    console.log({
    name: '嘿嘿'
    });
  ```
```
- console.dir() 控制台详细输出
  
  输出一个对象的值得详细信息；console.log可以一次性输出多个值，但是dir不可以
  function func() {} console.log(func, 100, 300); console.dir(func);
  + console.warn 以警告的方式输出
  > 输出警告信息
```
  ```
        console.warn('当前操作不规范!');
  ```
```
- console.table() 把数据以表格的形式输出在控制台
  
  把多维的JSON数据以表格形式输出
```
  ```
    let arr = [{
        id: 1,
        name: 'XXX'
    }, {
        id: 2,
        name: '张三'
    }];
    console.table(arr);
  ```
```
- console.time() / timeEnd()
  
  计算出time/timeEnd中间所有程序执行所消耗的时间（预估时间：受到当前电脑性能的影响）
```
  ```
    console.time('AA');
    for (let i = 0; i < 99999999; i++) {}
    console.timeEnd('AA'); //=>AA: 218.3701171875ms
  ```
```
- ......

window提示框
- alert() 提示框
  - alert是在浏览器窗口中弹出一个提示框，提示框中输出指定的信息
    - 需要等到alert弹出框，点击确定关闭后，后面的代码才会继续执行（alert会阻碍主线程的渲染）
    - alert弹出的内容都会默认转换为字符串（toString）
```
alert('今天大家都很帅！');
console.log(100);
alert([10, 20, 30]); //=>数组转换为字符串的结果 "10,20,30"
alert({name:'嘿嘿'}); //=>普通对象转换为字符串的结果 "[object Object]"
```
- confirm() 确认取消提示框
  
  confirm相对于alert来说，给用户提供了确定和取消两种选择
  创建一个变量，用来接收用户选择的结果 true点击的是确定 false点击的是取消
```
  ```
    let flag = confirm('今天大家都好好学了吗？');
    console.log(flag);
  ```
```
- prompt() 在confirm的基础上多加一个原因
  
  prompt在confirm的基础上给用户提供书写操作的原因等信息
  点击的是取消，返回结果是null；点击的是确定，会把用户输入的原因信息返回；
```
  ```
        let reason = prompt('确定要删除此信息吗？');
        console.log(reason);
  ```
```
向页面指定容器中插入内容
- document.write 向页面中输入内容
  
  把内容写入到页面中：和alert一样，写入的内容最后都会转换为字符串，然后在写入
  + innerHTML / innerText 向页面指定容器中输入内容
  > innerHTML/innerText：向指定容器中插入内容（插入的信息也会变为字符串再插入）
  + 基于这两种方式会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式
  + innerHTML能够把标签文本进行识别和渲染，而innerText会把所有内容都当做普通的文本
  + value 向页面表单元素中输入内容
  >给页面中的文本框赋值
  + ...
想要操作哪个元素，就先获取到哪个元素：我们可以根据元素的ID获取到这个元素对象
document.getElementById：document限定在整个文档中（上下文） get获取 Element元素 By通过（在整个文档中，基于元素的ID获取到这个元素）

number数据类型

正数、零、负数、小数
NaN
- NaN和任何值都不相等（包括自己本身）
- not a number 不是一个有效数字，但是属于number类型的
Infinity：无穷大的值，也是number类型的

isNaN 验证是否为非有效数字

想要验证一下n是不是有效数字：isNaN 验证一个值是否为非有效数字，如果是有效数字，则返回false，如果不是有效数字，则返回true

```
    console.log(isNaN(1));   //=>false
    console.log(isNaN(NaN));  //=>true
    console.log(isNaN(Infinity)); //=>false
    console.log(isNaN('AA'));  //=>true
    console.log(isNaN('12.5'));  //=>false
    console.log(isNaN('12.5px')); //=>true
    console.log(isNaN([])); //=>false
    console.log(isNaN([10])); //=>false
    console.log(isNaN([10, 20])); //=>true
    console.log(isNaN({})); //=>true
    console.log(isNaN(null)); //=>false
    console.log(isNaN(undefined)); //=>true
    console.log(isNaN(Symbol(1))); //=>报错
```

在使用isNaN进行检测的时候，如果检测的值是非数字类型的值，则需要先把其转换为数字类型，然后在进行检测
- Number([value]) 而isNaN在检测的时候，使用的就是这种方式转换为数字类型的
  
  Number是JS内置的转换方法，可以把其它数据类型“强制”转换为数字类型
  - 把字符串转换为数字：一但字符串中出现非有效数字字符，则结果为NaN，只有都是有效数字字符，才能转换为具体的数字，空字符串会转换为0
  - 把布尔转换为数字：true转换为1 false转换为0
  - 把空转换为数字：null转换为0 undefined转换为NaN
  - 不能把Symbol类型转换为数字，否则会报错
  console.log(Number('12')); //=>12 console.log(Number('12.5')); //=>12.5 console.log(Number('12px')); //=>NaN console.log(Number('12.5.0')); //=>NaN console.log(Number(true)); //=>1 console.log(Number(false)); //=>0 console.log(Number(null)); //=>0 console.log(Number(undefined)); //=>NaN console.log(Number(Symbol(13))); //=>Cannot convert a Symbol value to a number
  - 对象转换为数字：先把对象转换为字符串，再把字符串转为数字
  > 先把obj转化为字符串 "[object Object]" ;把字符串转换为数字 Number("[object Object]")
  - 普通对象
  let obj={x:100}; console.log(Number(obj)); //=>NaN
  - 数组对象
  let arr = ["10"]; console.log(Number(arr)); //=>10
  arr = ["10", "20"]; console.log(Number(arr)); //=>NaN
  console.log(Number([])); //=> []->'' Number('')->0
  console.log(Number(['AA'])); //=> ['AA']=>'AA' Number('AA')=>NaN
  - 其余对象格式基本上都会变为数字NaN
  - 函数转换为数字：结果都是NaN
  - parseInt([value])
  - parseFloat([value])
  > parseInt / parseFloat：也是把其它数据类型转换为number类型的 ; 处理原理和Number不一样，他们是把字符串转换为数字类型（如果处理的值不是字符串，需要先转换为字符串然后在去转换为number类型的）; 从字符串最左边开始查找，把找到的有效数字字符转换为数字，一直遇到一个非有效数字字符为止，则结束查找
```
    console.log(Number('12px')); //=>NaN
    console.log(parseInt('12px')); //=>12
    console.log(parseInt('12px24')); //=>12
    console.log(parseInt('width:12px')); //=>NaN
    console.log(parseInt('12.5px')); //=>12
    console.log(parseFloat('12.5px')); //=>12.5  parseFloat比parseInt多识别一个小数点
```
```
    console.log(Number(true)); //=>1
    console.log(parseInt(true)); //=>先把TRUE转换为字符串"TRUE"  parseInt('true') =>NaN
    console.log(parseInt(NaN)); //=>NaN
    console.log(Number(null)); //=>0
    console.log(parseInt(null)); //=> parseInt('null') =>NaN
    console.log(isNaN(Number(parseInt("0.8")))); //=>parseInt("0.8")->0   Number(0)->0  isNaN(0)->false
    console.log(Number('')); //=>0
    console.log(parseInt('')); //=>NaN
```
- toFixed：保留小数点后面N位（最后的结果是一个字符串）
```
let n = 3.1415926;
console.log(n.toFixed(2)); //=>"3.14"
```
```
    console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 
```
  - 最大安全数（JS能够有效识别的最大整数）
```
    console.log(9007199254740992 == 9007199254740993); //=>true  应该是不一样的，但是超过了最大数值，JS无法精准计算
```
  - ES6中提供了一个新的基本数据类型 BigInt：管理超过安全数值的数字
```
 console.log(BigInt(9007199254740992), BigInt(9007199254740993));
```

string 字符串

在JS中用单引号/双引号/反引号包起来的都是字符串

把其它数据类型转换为字符串类型

String([value])
[value].toString()
普通对象转换为字符串都是 "[object Object]"，数组对象转换为字符串是 "第一项,第二项..."（逗号分隔数组中的每一项）

在JS中常用的数学运算

数学运算：+ - * / 加减乘除 %（膜）取余数

除了加法以外，其余的情况都是数学运算（如果遇到非数字类型，需要基于Number把其强制转换为数字类型，然后在进行运算的）；加号在JS中既有数学运算，也有字符串拼接的意思（只要加号两边的任意一边出现字符串，则变为字符串拼接）

```
    console.log(3 - "3px"); //=>NaN
    console.log(3 + "3px"); //=>"33px"  字符串拼接
    console.log(1 + "1"); //=>"11" 字符串拼接
    console.log(1 + {}); //=>"1[object Object]"  在把{}转换为数字过程中，先把他转换为字符串"[object Object]"，此时右侧出现了字符串，则不再是数学运算，而是字符串拼接了
    console.log(1 + []); //=>'1'
    console.log([10] + true); //=>"10true"  在转换[10]到数字的过程中，先把其转换为字符串"10"，此时操作变为字符串拼接(和数学运算没关系了)
    console.log(true + [10]); //=>"true10"
    console.log(1 + true); //=>2
```
```
console.log(7 / 3); //=>除  2.3333333333333335
console.log(7 % 3); //=>取余  1
```
```
console.log(10 - null); //=>10
console.log(3 * undefined); //=>NaN
console.log(true - "12"); //=>1-12 =>-11
```
```
console.log(100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false);
     100 + true => 101
     101 + 21.2 => 122.2
     122.2 + null => 122.2
     122.2 + undefined => NaN 
     NaN + "Tencent" => "NaNTencent"  字符串拼接（以后都是字符串拼接）
     "NaNTencent" + [] => "NaNTencent"
     "NaNTencent" + null => "NaNTencentnull"
     "NaNTencentnull" + 9 => "NaNTencentnull9"
     "NaNTencentnull9" + false => "NaNTencentnull9false"
```

传统的拼接方式，我们需要在字符串中基于 "++" 或者 '++' 的方式把变量拼接到字符串中（这种方式涉及很多恶心的规则，一不留神就容易拼错）

ES6中的模板字符串就是为了解决传统字符串拼接中的问题（反引号 TAB上面的撇）： ${}中存放变量或者其它的JS表达式即可，很简单的完成字符串拼接 ``` // 真实项目中经常把一些变量的值拼接到指定的字符串中 // 完成字符串拼接处理：2020年03月03日 12:00:00 let year = '2020'; let month = '03'; let day = '03'; let hours = '12'; let minutes = '00'; let seconds = '00'; let result = `$ {year}年 ${month}月$ {day}日 ${hours}:$ {minutes}:${seconds}`;
console.log(result);
```

boolean 布尔

如何把其它数据类型转换为布尔类型？

Boolean([value])
![value] 把指定的值转换为布尔类型后取反
!![value] 取反再取反，相当于没有取反，只是把它转换为布尔类型值

规则：只有 “0/NaN/null/undefined/空字符串” 最后是false，其余的都是true

```
console.log(!!1); //=>true
console.log(!1); //=>false
console.log(!!-1); //=>true
console.log(!!0); //=>false
console.log(!!undefined); //=>false
console.log(!!Number('12px')); //=>Number('12px')=>NaN  false
console.log(!![]); //=>true
console.log(!!''); //=>false
console.log(!!{}); //=>true
/* 条件判断中，每一个条件最后一定是true/false */
```

```
if (1 == 1) {}
    if (1) {
        //=>写一个值，也是要把这个值转换为布尔，然后校验程序的真假
    }
    if (3 + '3px') {} //=>3 + '3px' =>'33px'  真
    if (3 - '3px') {} //=>3 - '3px' =>NaN   假
```

object 引用数据类型

所有的对象都应该具备以下特点:
- 用键值对(key:value 俗称属性名和属性值) 来描述一个对象的特征（每一个对象都是综合体，存在零到多组键值对）
- { key:value , ...} 每一组键值对是 key:value 的格式，多组键值对用逗号分隔
key不能是引用数据类型的，value可以是任何的数据类型
```
let obj = {
        name: '张三',
        age: 25,
        sex: '男',
        score: [100, 98, 89],
        fn: function () {}
    };
    console.log(obj);
```

关于对象中键值对的增删改查

新增或者修改属性和属性值
- 对象的属性名（键）是不允许重复的，之前没有这个属性则为新增，之前有这个属性，则是修改对应的属性值
  - 操作属性的两种方式：
    - 对象.属性名 = 属性值 .在这里可以理解为“的”
    - 对象[属性名] = 属性值
- 获取对象中的属性名和属性值
  - 获取指定属性名的属性值
  - 如果指定的属性不存在，获取到的属性值是undefined（不会报错）
  - 获取当前对象中所有的属性名：返回结果是包含所有属性名的数组
- 删除对象中指定的属性
  - 假删除：当前属性还存在，只不过属性值赋值为空
  - 真删除：彻底把属性从对象中移除掉

对象属性名

对象的属性名不能是引用数据类型值

基于对象[属性名] 的方式操作，需要保证属性名是一个值（字符串/数字/布尔等都可以），如果不是值而是一个变量，它会把变量存储的值作为对象的属性名进行操作
基于对象.属性名的方式操作，属性名就是点后面的（基于点的方式操作有自己的局限性，属性名不能是数字的，不能对象.数字属性，此时只能用对象[数字属性]）
其它非字符串格式作为属性名和字符串格式没啥区别

    let n = 100;
    let obj = {
        1: 100
    };
    // console.log(obj[1]);
    // console.log(obj.1); //=>Uncaught SyntaxError: missing ) after argument list 基于点的方式操作有自己的局限性，属性名不能是数字的，不能 对象.数字属性，此时只能用 对象[数字属性]

    // console.log(obj[1]);
    // console.log(obj['1']); //=>其它非字符串格式作为属性名和字符串格式没啥区别

    // obj.n = 200; //=> {n:200}  n是属性名（数据格式是字符串）
    // obj['n'] = 200; //=> {n:200} 和上面的情况一样
    // obj[n] = 200; //=> {100:200} => obj[100]=200   n本身是一个变量（n和'n'的区别：前者是一个变量，后者是一个字符串的值），它代表的是所存储的值100（是一个数字格式）
    // obj[m] = 200; //=>Uncaught ReferenceError: m is not defined m这个变量没有被定义
    // obj[true] = 300; //=>{true:300}
    // obj[undefined] = 400; //=>{undefined:400}

    console.log(obj);
    ```

    ```
    let n = {
        x: 100
    };
    let m = [100, 200];
    let obj = {};
    obj[n] = "珠峰"; //=>obj[{x:100}] 但是对象不能作为属性名，需要把其转换为字符串 =>{"[object Object]":"珠峰" }
    obj[m] = "培训"; //=>obj[[100,200]] =>{ "100,200":"培训" }
    console.log(obj); 
    ```

如果非要让属性名是个对象，只能基于ES6中的新数据结构 Map 处理

数组是特殊的对象:

它的属性名是数字，数字从零开始，逐级递增，每一个数字代表着当前项的位置 =>我们把这种数字属性名叫做“索引” ; 默认有一个length属性存储数组的长度

```
let arr = [10, 20, 30];
    console.log(arr[0], arr[1], arr[2]);
    console.log(arr.length);
    console.log(arr['length']);
```

第二天

JS中常用的输出方式 (3种)

number数据类型

isNaN 验证是否为非有效数字

string 字符串

把其它数据类型转换为字符串类型

在JS中常用的数学运算

boolean 布尔

如何把其它数据类型转换为布尔类型？

object 引用数据类型

关于对象中键值对的增删改查

对象属性名

数组是特殊的对象:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读