js变量

一、 声明变量

首先认识两个名称:

变量(variable): 比喻为一个箱子,这个箱子的标签就是该变量的名字

值(value):比喻为箱子当中所装的东西

  • 用关键保留字 var 进行 变量的声明 就是告诉解析器,我要创建一个箱子出来装东西
var name //一次定义一个变量,但如果没有初始赋值,则会显示undefined
var age, job //一次定义多个变量,用逗号隔开
var message = 'hello world!',
  name = 'bgg',
  age = '18' //也可以在声明变量的同时,进行初始赋值,简称初始化变量

同时,你会注意到变量的声明时,并没有指定变量类型,是的,的确没有,因为 Javascript 就是一种弱类型语言,没有任何约束。

  • 一定要保证使用变量前进行有效的变量声明 如果当你使用一个变量却没有声明
var a = 10
b = 20 //这里并没有在使用变量b前进行变量声明
a + b //但依然可以正常运行

虽然不影响程序运行,是因为解析器会自动把变量 b 转化为全局变量(任意地方可以访问的变量),这在以后的编程当中是不利于去维护代码的,所以是极度不推荐这样做。
在 ES6 的严格模式中,这种做法是报错的,一定要注意

二、 命名规则

  1. 尽可能语义化

  2. 第一个字符必须是字母、下划线(_)、或美元符号 ($);

  3. 变量名中不能包含空格或标点符号(下划线(_) 和$ 除外);

  4. 变量名区分大小写;

  5. 不能使用保留字、关键字,例如var,let,const,delete,if,fortop;

  6. 命名的风格推荐以下几种:

  • 驼峰命名法(Camel Case) :StudentName
  • 小写的驼峰命名法(Mixed Case)(开头小写):studentName
  • 巴斯卡命名法(也称下划线命名法) :student_name
  • 常量使用大写 :MAX_COUNT = 100
  1. 不成文规定,除非变量本身含义是一种水果,否则不要尝试用 apple、banana、orange

三、 变量的类型

箱子也分不同的种类,例如纸箱、木箱、塑料箱等等。
变量也分为两大数据类型

1. 基本类型

类型 说明
String 字符串
Number 数字
Boolean 布尔值
undefined 未定义
null 空值

(1). 数字类型 Number

JavaScript 只有一个数字类型 number,无论是十进制,十六进制,浮点等等都用 number处理.

十进制:

var num1 = 10, //表示整数
  num2 = 0.3, //表示浮点数
  num3 = 10e10 //表示指数计数

十六进制:

var num4 = 0xff0000 //以0x或0X开头,后面跟上十六进制数值

js 精度丢失问题,如下:

0.3 -
  0.2(
    //得出结果为.099999999....
    //解决的思路就是把运算数统一转换为整数,再进行计算。
    0.3 * 10 - 0.2 * 10
  ) /
    10 //得到结果为0.1

(2). 字符串 String

凡是用双引号单引号反单引号(es6 语法)所包裹的内容,称之为字符串

'' //空字符串,包含0个字符
'allen' //包含5个字符
`allen` //反单引号,键盘tap上方的按键
;('3.14') //包含4个字符
;('name="allen"') //可以包含引号,取决于外围的引号是单引还是双引
字符串拼接符

使用 + 号可以把字符串和变量拼接在一起

var name = 'allen'
var string = '我的名字叫:' + name

(3). 布尔值类型 boolean

布尔类型的变量只有两个值,分别是保留字truefalse

布尔值无处不在 其实,在 javascript 的世界里,无所不在的变量的值都可以表示为真或假。
除了以下指的值会被转换成false, 其余的都为true

undefined
null
0 - 0
NaN
;('') //空字符串

(4). undefined 类型

在 JavaScript 中,undefined 是一个没有设置值的变量

var a = undefined //显示赋值为undefined
var b //定义,但不赋值,结果为undefined

(5). null 类型

在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。

var person = null //你可以设置变量值为 null 来销毁该变量

(6). undefined 和 null 的区别

typeof undefined // =>undefined
typeof null // =>object
undefined == undefined //=>true
null == null //=>true
null === undefined // =>false
null == undefined // =>true

观察可以发现:null 和 undefined 两者相等,但是当两者做全等比较时,两者又不等。

原因:

  • null: Null 类型,代表“空值”,代表一个空对象指针,使用 typeof 运算得到 “object”,所以你可以认为它是一个特殊的对象值。
  • undefined: Undefined 类型,当一个声明了一个变量未初始化时,得到的就是 undefined。

实际上,undefined值是派生自null值的,ECMAScript 标准规定对二者进行相等性测试要返回 true,

2、那到底什么时候是 null,什么时候是 undefined 呢?

  • null 表示"没有对象",即该处不应该有值。典型用法是:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

  • undefined 表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

(1)变量被声明了,但没有赋值时,就等于 undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于 undefined。

(3)对象没有赋值的属性,该属性的值为 undefined。

(4)函数没有返回值时,默认返回 undefined。

2. 复杂类型

也叫引用类型最大的特点就是"键/值"对,其实就是属性名,就是属性所对应的

函数function ,数组array ,属于object的分支;

复杂类型有:

类型 说明
Object 常规对象:键/值对的无序集合 (自由组合的大箱子,没有顺序可言)

对象(复杂)类型 Object

属性的集合体

var obj = new Object() //第一种创建方法:实例化一个Object类型实例
typeof obj //=> object

var obj2 = { name: 'bgg' } //第二种创建方法:用对象直接量(花括号包住的属性键值对)来创建
typeof obj2 //=> object

var obj3 = Object.create() //第三种创建方法:ES6新增方法,使用create方法创建

3. 各个类型之间的转换

  • 查看变量的类型,使用typeof()方法即可
var mod = 'happy'
alert(typeof mod) //可以不加括号,必须中间有空格隔开
var num = 100
alert(typeof num) //可以不加括号,必须中间有空格隔开

主要注意的是 null 类型的变量,typeof后的结果是object,具体原因是当年程序作者的手误(有兴趣的同学可以点击这里),所以如果要判断这个变量是否null类型,可以这样写:

var isNull = null
isNull === null // =>true (使用全等于运算符来判断即可)

(1). 隐式转换

  • javascript 会自动根据上下文进行类型的转换,我们称之为隐式转换,规则如下
//字符串转数字
var str = '1' //这个字符串'1'
var num = +'1' //用加号实现string->number的隐性转换

//数字转字符串
var num = 1 //这个数字1
var str = '' + 1 //用空字符串拼接数字实现转换

(2). 显性转换

  • 如果我们想按照自己的想法去转换,我们称之为显性转换
  1. 任意类型变量转换为字符串,使用toString()方法
var married = false
alert(married.toString()) // => "false"

var age = 25
alert(age.toString()) // => "25"

如果是数字转换为数字(常用于进制的转换)

var iNum = 10
alert(iNum.toString(2)) //=> "1010"        10进制转换为二进制
alert(iNum.toString(8)) //=> "12"
alert(iNum.toString(16)) //=> "A"

如果数字转换为字符串,常用的还有toFixed()方法
它会根据传入的参数,保留小数点后指定的位数的数字为字符串,有时候会适当做四舍五入。

var n = 123456.789
n.toFixed(0) //=>123457
n.toFixed(2) // =>"123456.79"
n.toFixed(5) // =>"123456.78900"
  1. 任意类型变量转换为数值,使用parseInt(),parseFloat(),Number()方法
var test = parseInt('blue') //=> NaN
var test = parseInt('1234blue') //=> 1234
var test = parseInt('22.5') //=> 22
var test = parseFloat('1234blue') //=> 1234
var test = parseFloat('22.5') //=> 22.5
var test = Number('22') //=> 22

这里还要注意一点,它们是有第二个参数的,控制是以什么进制来转换,有效参数是 2 至 32

parseInt('200', 10) //=>  200
parseInt('11', 2) //=>  3 相当于以二进制来解析11,结果为2+1
  1. 任意类型变量转换为布尔值,使用双感叹号(!!)的运算符
var arr = [1, 2, 3]
console.log(!!arr) //第一个感叹号取反,第二个再取反一次,负负得正
  1. 任意类型变量转换为对象类型变量,使用对应的包装对象
Number(' 3') // => 3
String(false) // => "false" 或使 用 false. toString()
Boolean([]) // => true
Object(3) // => new Number( 3)

4. 变量的声明提前

用了 var 定义的变量,都会被提前到脚本的顶部进行声明(但不涉及赋值,具体赋值还是需要运行到对应行数

console.log(scope) // =>undefined             输出"undefined",而不是"global"
var scope = 'global' // 变量在这里赋初始值,但变量本身在脚本内任何地方均是有定义的
console.log(scope) // =>"global"

我们称之为声明提前(hoisting)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容