[JavaScript知识库]JavaScript基础（一）

1.0变量与常量

变量的概念：变量用于存储编程所使用的数据和方法。

声明一般变量关键字：var，?let，?const。其中let和const是es6的语法。

声明其他特殊变量关键字：function，class，import等

声明变量：

<script>
//声明一个变量
let x;
//声明多个变量
let x,y;
</script>

?

变量用于存储数据，因此可以把变量当成是一个"容器"

存储在变量中的数据，叫做"变量的值"

如何给变量存储数据？

给变量存储数据的过程，叫"赋值"，符号是?"="

变量赋值

<script>
//声明一个变量并赋值
let x = 10;
//声明多个变量并赋值
let x = 10,
	y = 20;
</script>

请注意：这里的“=”并不是数学上的“=”，而是称为赋值

<script>
// 意思是把10装进x里。或者理解为把x变成10;
// 不是x等于10的意思
x = 10;

// 数学上 a = b 和 b=a 是一个意思，但是在编程世界中不是这样。
// 把b装进a中（把a变成b）
a = b

// 把a装进b中（把b变成a）
b = a
</script>

请注意：

变量必须声明后才可以使用，否则报错：x?is?not?defined?(x未定义,未声明)。

例如：企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误。

2.0常量

• 常量，意思就是值不能修改的数据。
• 常量的值就是常量本身。
• 例如：10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成11.
• ES6使用const声明一个常量。
• const声明常量时必须同时赋值，并且后续不可再修改。

?2.1const

<script>

    // let var

    // let 不能重复声明
    // var 可以重复声明.

    // 会报错
    let x = 10;
    let x = 20;

    // 不会报错
    var y = 30;
    var y = 40;

    // const声明.=> 声明常量.

    const x = 10;
    // const声明的x是不能再通过=修改.
    x = 20;

    // x的值 => 变量是容器,容器里面放的东西就是值.

    // 值有可能会变,用let.永远不变,用const

  </script>

3.0标识符命名规则

标识符：编程中的各种名字，例如变量名，属性名，函数名，方法名，数组名，对象名等等。

1. 编程中起名字（标识符命名）的规则：
2. 由数字和英文组成，但是不能以数字开头
3. 特殊字符(除了英文和数字之外的字符)只能包含_和$
4. 不能和关键字保留字冲突
5. 区分大小写。

<script>


   // 错,不能数字开头
    let 1x = 10;
    let x1 = 20;

    let x$ = 30;
    // 特殊字符不能有*
    let x* = 40;
    // 不能是-
    let margin-left = 100;
    // _可以.
    let margin_left = 100;

    // 关键字不能做标识符
    let let = 10;
    let var = 10;

    // 可以 LET和let不是相同的标识符
    let LET = 20;

    let a = 10;
    // 报错,因为声明时是小写的a
    console.log(A);

    // ------------------------------
    // 驼峰命名:如果一个标识符是多个单词组成,习惯首个单词的首字母小写,其他字母的首字母大写

    let margin_left = 100;
    let marginLeft = 100;
    let getElementById = '获取id';

  </script>

标识符命名习惯：

1：数据类型+单词。例如：oDiv。表示oDiv的数据类型是对象，它的值是一个div标签。

2：驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写，后续单词首字母大写。

例如：getElementsByTagName

4.0数据类型

顾名思义，数据类型就是数据的种类。不同数据拥有不同的作用.

数据类型 => 数据种类

数据总共?=>?ES5有6种,ES6新增了一种.

ES5的这6种:

1：number（数字）

2：string（字符串）

3：boolean（布尔值）（用于表示true 和 false）

4：undefined?（空的值）（用于表示空的值）

5：null（不存在的对象）（用于描述一个不存在的对象）

6：object（对象）（描述一组数据）

其中object细分，又分为数组（array），函数（function）和纯对象（plain?object）3种。

number(数字类型)

<script>

// 声明一个num变量,赋值10.这个num变量是数字类型.
    // 一个变量是什么数据类型,只看它的值是什么.
    let num = 10;
    // 检查一个变量的数据类型.
    console.log(typeof num);

</script>

string(字符串)

<script>

// 字符串 (文字)
    let str = '你好';
    // 字符串.string
    console.log(typeof str);

</script>

boolean（布尔值）

<script>

     let flag = true;
    console.log(typeof flag);

</script>

undefined

<script>
    let flag;
    // 声明了没有赋值,数据类型就是undefined
    console.log(typeof flag);
</script>

object(对象)

<script>
// object类型分三小类
   //  function(函数), array(数组), plain object(纯对象)

     alert('你好');
    function
     console.log(typeof alert);

     const arr = [11, 22, 33];
     object
     console.log(typeof arr);

     const obj = { name: '幂幂' };
     object
     console.log(typeof obj);

     const obj = null;
     object
     console.log(typeof obj);

    // typeof 检查数组,纯对象还有null的时候,结果都是object.(typeof 的确定就是这样)
</script>

其中：

number，string，boolean，undefined，null为基本类型（简单类型）。（不是对象，理论不能添加属性）

object（包括array，function，plain?object以及其他对象）为引用类型（复杂类型）。（是对象，可添加属性）

NaN

<script>

    // NaN => not a number => 不是一个数字
     let num = NaN;
    // num的数据类型是number.
     console.log( typeof num );

    // NaN表示没有具体值的数字.
    
    // 注意,NaN不是无穷大的意思.

    // 无穷大是Infinity;
    let n = Infinity;
    // number
    console.log( typeof n );
</script>

字符串

• 字符串用于在编程中描述文字。
• 字符串需要使用引号括起。单引号双引号都可以，但是不能混用。
• ES6中也可以使用字符串模板来表示字符串。符号是反引号?``.

关于反引号的操作：

<script>

    // 字符串 => 文字
    // 文字都需要加引号.单引号双引号,反引号都可以.


    // 反引号。(英文输入状态下的波浪按键)
    let msg = `你好`;
    console.log(typeof msg);

    // 什么时候用单引号，双引号，反引号？
    // 字符串容本身就带双引号,则字符串需要单引号
    let str = '小李最帅"不接受反驳"';

    // 字符串容本身就带单引号,则字符串需要双引号
    let str = "小李最帅'不接受反驳'";
    console.log(str);

    // 不管字符串内容本身有没有引号,最外面都可以使用反引号
    let str = `小李最帅'开挂了'`;
    let str = `小李最帅"不接受反驳"`;

  </script>

字符串拼接：

两个字符都可以通过 + 拼接连城一个新的字符串

<script>
  // 拼接两个字符串常量
let x = '你' + '好';

// 拼接两个字符串变量
let str1 = '你';
let str2 = '好';
let word = str1 + str2;

// 在字符串常量中拼接变量
let word = str1 + str2 + '吗？';
let word = '现在' + str1 + str2 + '吗？';

// 使用ES6的字符串模板拼接字符串常量和变量
let word = `现在${str1}${str2}吗？`;      
</script>

难点：

1：要不要写引号.

2：字符串拼接如果使用es5的?+?进行拼接，如何写?+?和?''.

空字符串

<script>

    // NaN => 没有具体值的数字。
    // '' => 空字符串 => 没有字符的字符串

    // 初始化一个不知道具体字符的字符串.
    // let str = '';
    // console.log(typeof str);

    // 通过拼接空字符串,可以把一个数组转换为字符串.
    let num = 100 + '';
    // string
    console.log(typeof num);

    // 1:怎么写字符串.(用什么引号)
    // 2:字符串拼接.(+或者${})
    // 3:空字符串.

    // 难点: 要不要加引号.
    let str = '你好';
    // 写什么弹什么
    alert('str');
    // 弹一个变量str的值.
    alert(str);

  </script>

undefined

• 表示没有值的默认值。
• 一个变量声明后没有赋值，这时候这个变量中的值是什么呢？
• 这时候这个变量没有值，那如何表示这个没有值的状态呢？使用undefined表示

<script>
 // 声明变量 => 增
    let x;
    // 赋值 => 改
    // x = 10;
    // 查找x的值.
    // 一个变量没有赋值,则它默认的值就是undefined
    console.log(x);
</script>

其实很多时候，本该有值的地方没有值，都显示undefined。

null

• null和undefined很像。一般我们都只用null来表示一个暂时还不存在的对象。
• 例如：获取一个标签，这个标签在页面上不存在，如何描述这个不存在的标签呢？用null表示。

object

• ? ? 对象?=>?看得见摸得着的东西.
• ????面向对象?=>?把看不见摸不着的东西,也想象成看得见摸得着的东西.(抽象的过程).
• ????纯对象是一种无序的数据结构.
• ????纯对象都通过一个{}包裹
• ????{}内书写的都是对象的属性.
• ????属性由属性名和属性值组成.
• ????age:?35?=>?age是属性名,?35属性值.
• ????属性都是键值对(key-value).
• ????age:?35?=>?age是key(键),?35就是value(值)
• ????多个属性之间,用,隔开.
• ????属性名和属性值之间是:链接.不是=

<script>
let obj = {
      cname: '李唐',
      ename: 'Li Tan，tang',
      nickName: '赵五、王六、顺溜',
      age: 35,
      height: '166.5 cm',
    }

     console.log(obj);
     // . => 对象的属性访问操作符.(的)
    // 打印obj对象的age属性值。
    console.log(obj.age);
    // 修改obj的age属性值。
    obj.age = 100;
    console.log(obj.age);

    // 删除age属性。
    delete obj.age;
    console.log(obj);

    // 新增一个一开始不存在的属性country。
    obj.country = '中国';
    console.log(obj);
</script>

对象里面的对象（Object）

<script>

    // 一个对象的属性可以是别的对象
    // oYm的exhusband属性就是另一个对象.
    let oYm = {
      cname: '杨幂',
      age: 35,
      // 前夫
      exhusband: {
        name: '凯威',
        age: 42,
        brother: {
          name: '开挂'
        }
      }
    }

    // 打印oYm的exhusband属性的name属性
    console.log(oYm.exhusband.name);
    // 删除凯威的age
    delete oYm.exhusband.age
    // 新增属性
    oYm.exhusband.height = '170cm';

  </script>

Object大括号嵌套

<script>

    // 1:属性在{}中药缩进一个制表符。
    // 2:同级属性要左对齐.
    // 3:属性: 后面要有空格.

    // BracketPair Colorizer 2 插件可以帮助我们识别匹配的{}

    let obj = {
      name: '小李',
      age: 32,
      exhusband: {
        name: '京京',
      },
    }

  </script>

Object里不存在的对象

<script>

    const oYm = {
      name: '幂幂',
    }
    
    // 访问一个不存在的属性,得到undefinded
    // console.log(oYm.age);

    // 不能读取undefined的x属性.
    // Cannot read property 'x' of undefined
    // console.log(oYm.age.x);

    // 不能修改undefined的x属性.
    // Cannot set property 'x' of undefined
    oYm.age.x = 100;

    // undefined和null后面是不能接.的.接了就报错

  </script>

• 注意：

万物皆对象。

• js的6种数据类型中，只有object类型才是对象，理论只有object类型才可以添加和访问属性。
• 但是js中，number,string以及boolean虽然不是object类型，但是他们可以访问属性，但是添加属性会失败。
• js中，唯一不能访问属性和添加属性的是undefined和null。

程序的步骤：

• ??程序后面的代码按照前面的代码来进行计算.
• ????如何分析程序的步骤,哪个步骤发送了什么事情,各种变量的值是什么,如何分析?
• ????如何调试代码?
• ????断点分析.(按步骤断点);
• ????2种断点.
• ????利用浏览器的功能来断点.
• ????利用debugger命令来断点.(运行到debugger时,程序会暂时停止)

<script>

    let num = 10;
    debugger;
    // num的值+1
    num = num + 1;// 11
    debugger;
    num = num + 1;// 12
    debugger;
    num = num + 1;// 13
    debugger;
    num = num + 1;// 14
    debugger;

    console.log(num);

  </script>

检测数据类型：

• 变量的数据类型，意即变量的值的类型。
• 如何检测变量的数据类型？使用typeof操作符。
• 注意，typeof检测数组，null和object对象时不准确。
• typeof检测一个函数，得到的结果是?function。
• typeof检测一个数组，得到结果是?object。
• typeof检测一个null，得到结果是?object。
• typeof检测一个对象，得到结果是object。