从无到有的学习JavaScript——第一篇（基础篇）

1. JavaScript的变量

1.1 变量定义

一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；后续的字符也可以是数字（0-9），因为 JavaScript 语言是区分大小写的，所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。

a = 100

var b = 200  // 变量定义时初始化

let c = 'abc'

console.log(d)   // 不会报错，直接打印undefined

var d  // 变量申明，可以申明提升

let f   // 变量申明，ES6新增的关键字

d = 500  // 变量赋值,相当于定义全局变量

 

const g = 600  // 常量定义，常量必须申明时赋值，之后不能再改变
 

// 明天会更好

var a 
let b
console.log(1, a, b)
// 1 undefined undefined
a = 100
b = 'a string'
console.log(2, a, b)
// 2 100 'a string'

// 常量必须声明时赋值，之后不能在改
const c = 100
console.log(c)
// c = 200  // 会报错，常量不允许修改

var y  // 只是声明，y值为undefined 
var x = 5  // 规范的声明并初始化，声明全局变量或局部变量

z = 6  
/* 不规范的初始化，不推荐，在严格模式下回产生异常，在赋值之前不能引用，
   因为它没有申明。一旦这样赋值，就是全局作用域。
*/


function hello()
{
    var m  // 只是申明，m为undefined，作用域在函数中
    m = 100  // m为局部变量
}

// console.log(m)  // 未申明变量m，异常

var申明一个变量，会把变量提升到当前全局或函数作用域。let申明一个语句块作用域中的局部变量，const申明一个常量。JS中的变量申明和初始化时可以分开的。如果明确知道一个标识符定义后不再修改，应该尽量申明成const常量，减少被 修改的风险，减少bug。

1.2 变量提升

JavaScript变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升；Javascript变量感觉上是被提升或 移到了函数或语句的最前面，但是提升后的变量将返回undefined值。因此在使用或引用某个变量之后进行申明和初始化操作，这个被提升的变量将返回undefined值。

  console.log(x === undefined)  //true 
  var x = 5

var myvar = 'my value'

function a(){
    console.log(myvar)  // undefined
    var myvar = 'local value'
}

a()

// 上面的函数等价于下面的函数
function a(){
    var myvar
    console.log(myvar)
    myvar = 'local value'
}

a()

函数提升：对于函数来说，只有函数申明会被提升到顶部，而函数表达式不会提升。

foo()  // bar

function foo(){
    console.log('bar')
}

baz()  // 类型错误：baz不是一个函数，只是一个函数表达式

var baz = function(){
    console.log('bar2')
}

2. 数据类型

 

ES是动态语言，弱类型语言。虽然先申明了变量，但是变量可以重新赋值任何类型。

2.1 数据类型测试

// 类型转换
// 弱类型语言

console.log("============string===============")
console.log(a = 3 + 'sun', typeof(a))
console.log(a = null + 'sun', typeof(a))
console.log(a = undefined + 'sun', typeof(a))
console.log(a = true + 'sun', typeof(a))
/* 
============string===============
3sun string
nullsun string
undefinedsun string
truesun string
*/

// number
console.log('==========number===============')
console.log(a = null + 8, typeof(a))
console.log(a = undefined + 8, typeof(a))  // undefined没法转换成一个对应的数字
console.log(a = true + 8, typeof(a))
console.log(a = false + 8, typeof(a))
/*
==========number===============
8 'number'
NaN 'number'  // NaN not a number
9 'number'
8 'number'
*/

// boolean
console.log('===========bool===========')
console.log(a = null + true, typeof(a))
console.log(a = null + false, typeof(a))
console.log(a = undefined + true, typeof(a))  // undefined无法转换成一个对应的数字
console.log(a = undefined + false, typeof(a))
console.log(a = null & true, typeof(a))
console.log(a = undefined & true, typeof(a))  // 0
// 短路
console.log(a = null && true, typeof(a))  // 逻辑运算符null直接就是false短路
console.log(a = false && null, typeof(a))  // 逻辑运算符，false短路直接返回false
console.log(a = false && 'sun', typeof(a))
console.log(a = true && 'sun', typeof(a))
console.log(a = true && '', typeof(a))  // 结果a为空字符串
console.log(a = {} && 'sun', typeof(a))
console.log(a = [] && 'sun', typeof(a))
// 注意[], {}与python中不同，在JS中，对象等价于true
/* 
===========bool===========
1 'number'
0 'number'
NaN 'number'
NaN 'number'
0 'number'
0 'number'
null 'object'
false 'boolean'
false 'boolean'
sun string
 string
sun string
sun string
*/

// null
console.log('=========null============')
console.log(a = null + undefined, typeof(a))
// NaN 'number'

弱类型，不需要强制类型转换，会隐式类型转换。NaN，即not a number,转换数字失败，它和任何值都不等，和自己也不等，只能使用Number.isNaN(NaN).

总结：遇到字符串，加号就是拼接字符串，所有非字符串隐式转换为字符串，如果没有字符串，加号把其他所有类型都当数字处理，非数字类型隐式转换成数字。undefined特殊，因为它没有定义值，所以转换成数字失败得到一个特殊值NaN。如果运算符是逻辑运算符，短路符，返回就是短路时的类型。没有隐式转换。除非你十分明确确，否则不要依赖隐式转换，写代码的时候，往往为了程序的健壮，请显示转换。

2.2 字符串

将一个值使用单引号或者双引号引用起来就是字符串。ES6提供了反引号定义一个字符串，就可以支持多行，还支持插值。

let a = 'abc'
let b = "123"
let c = `line
    line2
    line3
`  // 支持多行
console.log(c)
/*
line
    line2
    line3

*/

// 字符串插值，要求在反引号字符串中，python3.6支持
let name = "tom", age = 19
console.log(`Hi, my name is ${name}. I am ${age}`)
// Hi, my name is tom. I am 19

2.3 转义字符

2.4 字符串操作方法

字符串方法很多，跟python类似。

let school = 'magedu'

console.log(school.charAt(2))  // g,字符串下标从0开始
console.log(school[2])  // g
console.log(school.toLocaleUpperCase())  // MAGEDU
console.log(school.concat('.com'))  // 连接
console.log(school.slice(3))  //切片，支持负索引
console.log(school.slice(3, 5))  // ed 前包后不包，跟python切片是一样的
console.log(school.slice(-2, -1))  // d
console.log(school.slice(-3))  // 后三个

let url = "www.magedu.com"
console.log(url.split('.'))  // 结果是列表，跟python是一样的
console.log(url.substr(4, 6))  // 返回子串从何处开始，取多长，注意下从0开始
// magedu
console.log(url.substring(7, 10))  // 返回子串从何处开始，到什么为止
// 注意是前包后不包

let s = 'magedu.edu'
console.log(s.indexOf('ed'))  // 3
console.log(s.indexOf('ed', 4))  // 7
console.log(s.replace('.edu', '.com'))
// magedu.com
s = ' \tmag edu \r\n'
console.log(s.trim())  // 去除两端的空白字符，trimleft、trimright是非标函数，少用
// mag edu