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

我会带着你远行 2022-04-25 06:00 177阅读 0赞

### 文章目录 ###

*  数据类型
 *   *  数值number
     *   *  常用数值操作
     *  字符串string
     *   *  属性与方法
     *  布尔值boolean
     *  空null
     *  未定义undefined
     *  数组Array
     *   *  属性与方法
     *  对象object
 *  语句结构
 *   *  条件
     *   *  if...else
         *  if...else if
         *  switch...case
         *  三目运算
         *  拓展小技巧
     *  循环
     *   *  for 、for...in、for...of、forEach
         *  while 和 do...while
         *  filter
         *  map

# 数据类型 #

## 数值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]