javascript入门篇（1） 数据类型 条件与循环

数据类型

数值number

整数：123456
浮点数： 12.34
负数： -99
不是一个数值：NaN
无限大： Infinity

10 + 2; // 12
(3 + 2) * 5 / 2; // 12.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

常用数值操作

toString转化为字符串，parseFloat将字符串转化为浮点数，parseInt将字符串转化为整数，Math.round四舍五入取整，Math.ceil向上取整，Math.floor向下取整，Math.random()随机数0-1

var num = 1234567.89;
var numStr = '1234567.89';
console.log(num.toString()); // '1234567.89' 字符串
console.log(parseFloat(numStr)); // 1234567.89 数值
console.log(parseInt(numStr)); // 1234568
console.log(Math.round(numStr)); // 1234568
console.log(Math.ceil(numStr)); // 1234568
console.log(Math.floor(numStr)); // 1234567
console.log(Math.random()); // 0.42029674729461663 随机数（0-1）

字符串string

js中用’'或""括起来的字符表示字符串。
特殊符号转义，可以使用\进行转义

'I\'m Tom'

表示的内容是

I’m Tom

ASCII字符使用\x##的十六进制形式表示，如：

'\x41' // 等同于 'A'

Unicode字符可以使用\u####表示，如：

'\u4e2d\u6587'; // 完全等同于 '中文'

多行字符串可以采用如下形式表示，如：

`测试
一下
就好`

连接多个字符串，可以使用+号连接，如下：

var name = 'menphis';
var age = 27;
var msg = '我的名字叫'+name+',今年'+age+'岁'
console.log(msg) // 我的名字叫menphis,今年27岁

ES6新增了一种模板字符串，可以自动替换字符串中的变量，如：

var name = 'menphis';
var age = 27;
var msg = `我的名字叫${name},今年${age}岁`
console.log(msg) // 我的名字叫menphis,今年27岁

属性与方法

length 字符串的长度

var s = 'hello world';
console.log(s.length) // 11 注意空格也算一个字符串长度

可以通过索引获取某个位置的字符，如：

var s = 'hello world';
console.log(s[0]) // h
console.log(s[2]) // l
console.log(s[5]) //  空格
console.log(s[6]) // w

注意字符串是不变的，只能被赋予新的值，如：

var s = 'hello world';
s[5] = ','
console.log(s[5]) //  空格
console.log(s) // hello world
s = 'hello'
console.log(s) // hello

方法toUpperCase大写、toLowerCase小写、indexOf查找并返回索引、substring截取、split拆分为数组，如：

var s = 'hello world';
console.log(s.toUpperCase()) // HELLO WORLD
console.log(s.toLowerCase()) // hello world
console.log(s.indexOf('d'))  // 10
console.log(s.indexOf('a')) // -1
console.log(s.substring(0,5)) // hello
console.log(s.split(' ')) // ["hello", "world"]
console.log(s) // 字符串是不变的，不影响s

布尔值boolean

布尔值有两种，一种是true,一种是false，true可转化为数值1，false可转化为数值0

• 且、或、非运算，如：

console.log(true && false) // false
console.log(true || false) // true
console.log(!true) // false

• 比较运算符
  注意，== 自动转换类型比较，=== 要求类型一致，否则返回false。

console.log(2>5) // false
console.log(2<=5) // true
console.log(2<5) // true
console.log(0 == false) // true
console.log(0 == '0') // true
console.log(0 === false) // false
console.log(0 === '0') // false

空null

null 表示一个“空”的值。

未定义undefined

undefined 表示值未定义，通过来说，用于判断对象中是否有对应属性值存在，和参数是否传递。

数组Array

使用单独的变量名来存储一系列的值，如：

var arr = [] // 空数组，数组初始化
var arr1 = [1,2,3,4]  // 一维数组
var arr2 = [[1,2],[3,4]] // 多维数组

属性与方法

length 数组的长度。

var arr = [11,22,33,44];
console.log(arr.length) // 4

Array.isArray() 判断是否是一个数组

var arr = [11,22,33,44];
var obj = {};
console.log(Array.isArray(arr)) // true
console.log(Array.isArray(obj)) // false

使用索引访问数组，或赋值

var arr = [11,22,33,44];
console.log(arr[1]) // 22
console.log(arr[3]) // 44
console.log(arr[4]) // undefined
arr[4] = 55;
console.log(arr) // [11, 22, 33, 44, 55]
// 超过索引赋值，则中间部分填空
arr[10] = 111;
console.log(arr) // [11, 22, 33, 44, 55, empty × 5, 111]

indexOf查找元素并返回元素索引，slice截取，push尾部添加，pop尾部删除，unshift首部添加，shift首部删除，sort排序，reverse反转数组，splice万能方法，concat连接，join将所有元素凭接成字符串。

var arr = [11,22,33,44,55];
console.log(arr.indexOf(11)) // 0 如果没找到则返回-1；
console.log(arr.slice(1,3)) // [22, 33] 第一个参数是开始索引，第二个是截止索引
console.log(arr) // [11, 22, 33, 44, 55] slice方法不改变原数组
console.log(arr.push(66)) // 6 push方法返回新的长度
console.log(arr) // [11, 22, 33, 44, 55, 66] push方法改变原数组，新增66元素成功
console.log(arr.pop()) // 66 pop方法返回被删除元素，所以是66
console.log(arr) // [11,22,33,44,55] pop方法改变原数组，删除元素66成功
console.log(arr.unshift(0)) // 6 unshift方法返回新的长度
console.log(arr) // [0,11,22,33,44,55]  unshift方法改变原数组,新增0成功
console.log(arr.shift()) // 0 shift方法返回被删除的元素
console.log(arr) // [11, 22, 33, 44, 55] shift方法改变原数组
console.log(arr.sort(function(a,b){return b-a})) // [55, 44, 33, 22, 11] 修改数组排序
console.log(arr) // [55, 44, 33, 22, 11] sort改变原数组
console.log(arr.reverse()) // [11, 22, 33, 44, 55] 反转数组
console.log(arr) // [11, 22, 33, 44, 55] reverse方法修改原数组
console.log(arr.splice(1,2)) // [22, 33] splice方法返回被操作区间的元素，索引1-2
console.log(arr) // [11, 44, 55] splice方法修改原数组
console.log(arr.splice(1,2,88)) // [44, 55] splice方法返回被操作区间的元素，索引1-2，替换成88
console.log(arr) // [11, 88] splice方法修改原数组
console.log(arr.concat([99,100])) // [11, 88, 99, 100] 凭接两个数组
console.log(arr) // [11, 88] concat方法不修改原数组
console.log(arr.join('-')) // 11-88 
console.log(arr) // [11, 88] join方法不修改原数组

综上，得知，slice，concat，join方法不会修改原数组。

对象object

对象是一组由键-值组成的无序集合，对象中，键都是字符串类型，值可以为任意类型。如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing'
};

语句结构

条件

if…else

通常用于条件判断，如果-则-否则

var person = 'boy'
if(person == 'boy'){
	console.log("男孩")
}else{
	console.log("不是男孩")
}

if…else if

通常用于条件判断，如果-则-如果-则…否则

var age = 60
if(age < 13){
	console.log("儿童")
}else if(age >= 13 && age <18 ){
	console.log("青少年")
}else if(age > 18 && age < 60 ){
	console.log("中年人")
}else{
	console.log("老年人")
}

switch…case

通常用于条件判断，有几种情况，情况1–则，情况2–则，如果都不是，则默认default
注意，每一个case，执行完语句后都需要有个break，否则会执行下一个case。

var day=new Date().getDay();
switch (day)
{
case 0:
  console.log("今天是周日");
  break;
case 6:
   console.log("今天是周六");
  break;
default:
   console.log('今天是工作日')
}

三目运算

三目运算，通常用于，条件 ? 表达式2 : 表达式3
如果条件为true，则执行表达式2，否则执行表达式3，如下：

var obj = {name:'Tom'};
console.log(obj.name==='Tom'?'是Tom本人':'不是Tom') // 是Tom本人

拓展小技巧

使用 || 用于给予变量默认值。
比如：

var obj = {};
var num = obj.num || 0;
console.log(num) // 0    当obj.num未定义时候，可以赋予默认值0

循环

for 、for…in、for…of、forEach

常用的循环通常的格式：
for只支持循环遍历数组，如：

var arr = [11,22,33,44,55];
for(var i=0;i<arr.length;i++){
	console.log(i) // 索引
	console.log(arr[i])  // 每一个元素
}

for…in支持循环遍历对象，如：

var obj = {age:16,name:'tom'};
for(var i in obj){
	console.log(i) // 键
	console.log(obj[i])  // 值
}

for…in 有个弊端，遍历数组时，会把原型中或继承的属性也遍历出来，如：

var arr = [11,22,33,44,55];
arr.sex = 'boy';
for(var i in arr){
	console.log(i) // 索引
	console.log(arr[i]) // 元素
}

使用 for…of 只遍历属于集合自己的值，也可以遍历map，set新的ES6数据类型。如：

var arr = [11,22,33,44,55];
arr.sex = 'boy';
for(var i of arr){
	console.log(i) // 索引
	console.log(arr[i]) // 元素
}

forEach一般用于遍历数组。

var arr = [11,22,33,44,55];
arr.forEach(function(ele,index){
	console.log(ele) // 元素
	console.log(index) // 索引
})

while 和 do…while

while 用作循环，通常可以用于遍历长度未知的集合。
while与do…while，的区别在于，while是当条件成立的时候才执行，而do…while则是，执行一遍后，再判断。
避免死循环，在判断条件部分一定得做好！！！如下遍历数组：

var arr = [11,22,33,44,55];
var i = 0;
while(i<arr.length){
	console.log(i)
	console.log(arr[i])
	i++;
}

do…while就算最终发现条件不成立也执行了一遍。如：

var arr = [11,22,33,44,55];
var i = 0;
do{
	console.log(i)
	console.log(arr[i])
}while(false)

filter

通常用于过滤数组，不改变原数组，返回一个新数组。

var arr = [11,22,33,44,55];
// 过滤掉小于等于30的元素
var newArr = arr.filter(function(ele){
	return ele>30
})
console.log(arr) // [11, 22, 33, 44, 55]
console.log(newArr) // [33, 44, 55]

map

通常用于对数组的每一个元素，进行统一操作，不改变原数组，返回一个新数组。

var arr = [11,22,33,44,55];
// 对每一个元素乘以2
var newArr = arr.map(function(ele){
	return ele*2
})
console.log(arr) // [11, 22, 33, 44, 55]
console.log(newArr) // [22, 44, 66, 88, 110]