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

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

2. ES6

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

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

function fn() {}

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

import B from './b.js'

6. 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

2. 引用数据类型

对象 数据类型object

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

函数数据类型function

1. number数字数据类型详解

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

1. NaN

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

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

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]"

2. 字符串拼接

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

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

2. 设置属性名属性值

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

3. 删除属性名

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

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)

如想了解更多，请关注公众号