第二天

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

自律第二天
浑噩
等春暖花开
国庆第二天
陪考的日子这样走过（二）
特种兵训练成长日记
Day 2
分手第二天
学习笔记之 “初级会计职称，考试突击”（2）
线条练习

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']);
```

自律第二天
坚持写作第二天坚持早起第二天坚持听书第二天坚持阅读第二天坚持录制演讲视频第二天坚持关注创业项目知识第二天...
浑噩
不愿见人第二天不愿出门第二天抗拒任何交谈第二天浑浑噩噩第二天
等春暖花开
第二天，在阳台晒太阳的第二天。在阳台看楼下小盆友脚踏车的第二天。听Aloha的第二天。几天前和朋友倾诉，羡慕外面...
国庆第二天
国庆第二天，山间水边，悠然自得，美好假期第二天
陪考的日子这样走过（二）
第二天陪考第一天，太忙碌。这第二天，比较悠闲，闺女已经适应考试，不紧张了，而且这第二天...
特种兵训练成长日记
-----------特种兵第二天--------------------- 今天，我们轻松地进入了特训第二天，今...
Day 2
假期第二天画画第二天在医院陪弟弟希望弟弟早日康复
分手第二天
第二天
学习笔记之 “初级会计职称，考试突击”（2）
第二天
线条练习
第二天

第二天

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

number数据类型

isNaN 验证是否为非有效数字

string 字符串

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

在JS中常用的数学运算

boolean 布尔

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

object 引用数据类型

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

对象属性名

数组是特殊的对象:

相关文章

自律第二天

浑噩

等春暖花开

国庆第二天

陪考的日子这样走过（二）

特种兵训练成长日记

Day 2

分手第二天

学习笔记之 “初级会计职称，考试突击”（2）

线条练习

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读