javascript基础系列：javascript中的变量和数据类型（一）

落日映苍穹つ 2023-03-04 09:16 38阅读 0赞

# javascript基础系列：javascript中的变量和数据类型（一） #

> 今天开始去重新系统温习一遍js基础，并作下记录

javascript是由三部分组成：

1.  ECMASCRIPT(ES): 描述了该语言的语法和基本对象
2.  DOM: 文档对象模型，描述处理网页内容的方法和接口
3.  BOM:浏览器对象模型，描述与浏览器进行交互的方法和接口

### js做客户端语言 ###

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

1.  ECMAScript3/5/6,js的语法规范（变量、数据类型、操作语句等等）
2.  DOM(document object model):文档对象模型，提供一些js的属性和方法，用来操作页面中的DOM元素
3.  BOM(browser object model): 浏览器对象模型，提供一些js的属性和方法，用来操作浏览器的

### 变量和数据类型（variable && data type） ###

变量：  
多种定义方式：var/let/const/function/import/class  
严谨的命名规范：区分大小写/驼峰命名/关键字保留字  
数据类型  
基本数据类型：number、string、boolean、null、undefined  
引用数据类型：object(数组、对象、正则）、function  
Symbol: 唯一值

### js中的变量 variable ###

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

#### 创建变量的几种方式： ####

1.  ES3

var a = 12
    a = 13
    console.log(a) // 输出的是a代表的值13

1.  ES6

let b = 100
    b = 200
    const c = 1000
    c=2000 // 报错，const创建的变量，储存的值不能被修改（常量 ）

1.  创建函数也相当于在创建变量

function fn() { }

1.  ES6中创建类也相当于创建变量
2.  ES6的模块导入也可以创建变量

import B from './b.js'

1.  Symbol

#### js命名规范 ####

*  严格区分大小写
 *  使用数字、字母、下划线、$,数字不能作为开头

let $box ; // 一般用jQ获取的以$开头
    let _box ; // 一般公共变量都是_开头
    let 2box; //不可以，但是可以写成box2

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

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

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

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

1.  基本数据类型

*  数字number ：常规数字和NaN
 *  字符串string: 所有用 单引号、双引号、反引号包起来的都是字符串
 *  布尔boolean：true/false
 *  空对象指针null
 *  未定义undefined

1.  引用数据类型

对象 数据类型object

*  \{\}普通对象
 *  \[\]数组对象
 *  正则对象

函数数据类型function

##### 1. number数字数据类型详解 #####

number数字类型：包含：常规 数字、NaN

1.  NaN

NaN：not a number :不是一个数，但 它率属于数字类型  
NaN和任何值（包括自己）都不想等，所以我们不能用想等的方式判断是否为有效数字  
isNaN：检测一个值是否 为非有效数字，如果不是有效数字返回true,反之是有效数字返回false  
在使用isNaN进行检测的时候，首先会验证检测的值是否为数字l类型，如果不是，先基于Number（）这个方法，把值转换为数字类型，然后再检测

1.  把其它类型值转换为数字类型

Number(\[val\])  
parseInt/parseFloat(\[val\],\[进制\]）  
Number(val): 把字符串转换为数字，只要字符串中包含任意一个 非有效数字字符（第一个点除外），结果都是NaN,空字符串会变为数字0  
把引用数据类型转换为数字，是先基于toString方法转换为字符串，然后再转换为数字  
parseInt/parseFloat(\[val\],\[进制\]）：也是转换为数字的方法，对于字符串来说，它是从左到右依次查找有效数字字符，直到遇到非有效数字字符，停止查找（不管后面是否还有数字，都不再找了），把找到的当做数字返回

console.log(Number(true)) // 1
    console.log(Number(false)) // 0
    console.log(Number(null)) // 0
    console.log(Number(undefined))NaN
    console.log(Number({ age: 10})) // NaN {} .toString() => "[object Object]" => NaN
    console.log(Number({ })) // NaN
    console.log(Number([])) // [].toString() => "" => 0
    console.log(Number([12])) // 12
    console.log(Number([12,13])) // NaN
    console.log(parseInt('12.5px')) // 12
    console.log(parseFloat('12.5px')) // 12.5
    console.log(parseFloat(true)) // NaN

##### 2. string字符串数据类型 #####

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

1.  把其它类型转换成字符串

\[val\].tostring()  
null 和undefined是禁止直接toString的，  
普通对象.toString()的结果是 “\[object Object\]” 原因：Object.prototype.toString方法不是转换为字符串的，而是用来检测数据类型的

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

1.  字符串拼接

四则运算法则中，除加法之外，其余都是数学计算，只有加法可能存在字符串拼接

let a = 10 + null + true + [] +undefined + "岚枫" + null + [] + 10 + false 
    connsole.log(a) // 11undefined岚枫null10false
    /* * 10 + null => 10 + 0 => 10 * 10 + true => 10 + 1 => 11 * 11 + [] => 11 + '' => '11' 空数组变为数字，先要经历变为空字符串，遇到字符串，直接变为字符串拼接了 * ‘11’ + undefined => '11undefined' * .... * 11undefined岚枫null10false */

##### 3. boolean布尔类型 #####

只有两个值true/false

1.  把其它类型值转换为布尔类型

只有0、NaN、’’、null、undefined五个值转换为false, 其余的都转换为true(而且没有任何的特殊情况)

*  Boolean(\[val\])
 *  !/!!
 *  条件判断

// ！：取反（先转为布尔，然后取反）
    // !!: 取反再取反，相当于只转换为布尔
    console.log(!1)  // false
    console.log(!!1)   // true

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

if('3px' - 3) {  //'3px' - 3 => NaN-3 => NaN => false
     ...
    }

##### 5. null/undefined #####

null和undefined都是代表的是没有

*  null:意料之中（一般都是开始不知道值，我们手动先设置为null,后期再给赋值操作）

let num = null //=> let num=0; 一般最好用nul作为初始的空值，因为零不是空值，它在栈内存中有自己的存储空间（占了位置）
    num = 12

*  undefined:意料之外

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

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

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

*  对象.属性名
 *  对象\[属性名\], 属性名是数字或者字符串 或者变量
 *  如果当前属性名不存在，默认的属性值是undefined
 *  如果属性名是数字，则不能使用点的方式获取属性值

let person = { 
    	name: 'lanfeng',
      age: 23,
      height: '185cm',
      weight: '80kg',
      1: 100
    }
    //获取属性名对应的属性值
    // =》 对象.属性名
    console.log(person.name)
     // =》 对象[属性名], 属性名是数字或者字符串 或者变量
    console.log(person['age'])
    console.log(person.sex) // undefined
    console.log(person.1)  //SyntaxError: missing ) after argument list

1.  设置属性名属性值

属性名不能重复，如果属性名已经存在，不属于新增属于修改属性值

1.  删除属性名

真删除：把属性彻底干掉  
假删除： 属性还在，值为空

let person = { 
    	name: 'lanfeng',
      age: 23,
      height: '185cm',
      weight: '80kg',
      1: 100
    }
    // 假的删除
    person.weight = null
    console.log(person)
    
    // 真删除
    delete person[1]

#### 7. 数组是特殊的对象类型 ####

1.  我们设置的是属性值，属性名是默认生成的数字，从零开始递增，而且这个数字代表每一项的位置，我们把其称为“索引”，从零开始，连续递增，代表每一项的位置的数字属性名
2.  默认一个属性名length,存储数组长度

let arr = [12, '哈哈', true, 13]
    console.log(arr.length)
    console.log(arr[length])
    // 第一项索引 0， 最后一项索引 arr.length - 1
    console.log(arr[0])
    console.log(arr[length-1])
    
    // 向数组末尾追加内容
    arr[arr.length] = 100
    console.log(arr)

如想了解更多，请关注公众号  
![qrcode\_for\_gh\_4d3763fa9780\_258 (1).jpg][qrcode_for_gh_4d3763fa9780_258 _1_.jpg]

[qrcode_for_gh_4d3763fa9780_258 _1_.jpg]: /images/20230208/1b60efad42474ed89fa6dec74f258b74.png