《JavaScript学习笔记》 - 01.数据类型：字符串、数组、对象

1、数据类型

Array可以包含任意的数据类型

var arr = [1, 2, 3, 4, 5, 'a', null, true]

1.1 字符串

1. 正常字符串使用单引号或者双引号包裹

2. 转义字符 \

   > 'a\''
   "a'"
   > 'a \n b'
   "a 
    b"
   

3. 多行字符串编写

   <script>
       // tab健上方的点点``
       var msg = 
   	`hello
   	world`
   </script>
   

4. 模板字符串

   <script>
       let name = 'xianbei';
       let age = 3;
       let msg = '你好呀, ${name}'
       console.log(msg);
   </script>
   

5. 字符串长度

   > var str = 'student'
   > console.log(str.length)
   7
   

6. 字符串的可变性（不可变）

   > var str = 'student'
   > console.log(str[0])
    s
   > str[0]=1
    1
   > console.log(str)
    student
   

7. 大小写转化

   > r str = 'student'
   undefined
   > r.toUpperCase()  //全部大写
   "STUDENT"
   > r.toLowerCase()  //全部小写
   "student"
   

8. 获取指定下标

   // .indexOf()
   > str.indexOf('t')
   1
   

9. 截取字符串

   // .substring() 截取字符串
   > str.substring(1)     // 从第一个到最后一个
   "tudent"
   > str.substring(1,3)   // 第1，2个字符串 [1,3)
   "tu"
   

1.2 数组

作用：存储数据（如何存， 如何取）

1. 数组长度 （可变）

   // 注意：假如给 arr.length 赋值，数组大小就会发生变化
   > arr = [1, 2, 3, 4, 5, 6]
   > arr.length    //返回数组长度
   6
   > arr.length = 10   // 赋值较大，产生empty
   10
   > arr
   (10) [1, 2, 3, 4, 5, 6, empty × 4]
   > arr.length = 2    // 赋值过小，导致元素丢失
   2
   > arr
   (2) [1, 2]
   

2. 获得元素下标索引

   // .indexOf 
   > arr.indexOf(2)
   1
   > arr = [1, 2, 3, 4, 5, 6, '1', '2']
   > arr.indexOf(1)
   0
   > arr.indexOf('1')
   6
   

3. 截取数组

   // slice() 截取数组
   > arr.slice(3)   // 第三个最后
   (5) [4, 5, 6, "1", "2"]
   > arr.slice(1,5)   // 第1，2，3，4个 [1,5)
   (4) [2, 3, 4, 5]
   

4. push pop 数组尾部

> arr.push('a', 'b')      // 尾部压入元素
10
> arr
(10) [1, 2, 3, 4, 5, 6, "1", "2", "a", "b"]
> arr.pop()               // 尾部弹出一个元素
"b"
> arr  
(9) [1, 2, 3, 4, 5, 6, "1", "2", "a"]

5. unshift shift 数组头部

   > arr.unshift('a', 'b')    // 头部压入元素
   11
   > arr
   (11) ["a", "b", 1, 2, 3, 4, 5, 6, "1", "2", "a"]
   > arr.shift()              // 头部弹出一个元素
   "a"
   > arr
   (10) ["b", 1, 2, 3, 4, 5, 6, "1", "2", "a"]
   

6. 排序

   > arr.sort()
   (10) [1, "1", 2, "2", 3, 4, 5, 6, "a", "b"]
   

7. 元素反转

   > arr.reverse()
   (10) ["b", "a", 6, 5, 4, 3, "2", 2, "1", 1]
   

8. concat()

   > arr = ['a', 'b', 'c']
   undefined
   > arr.concat([1, 2, 3])
   (6) ["a", "b", "c", 1, 2, 3]
   > arr
   (3) ["a", "b", "c"]
   // 注意： concat() 并没有修改数组，只是返回一个新数组
   

补充：concat() 和 push() 的区别

• 对象不同，使用concat()的对象不一定是数组，也可以字符串，而使用push()的对象只能是数组
• 返回值不同，concat()返回一个数组，push()返回调用该方法的数组的长度
• 调用concat()的对象的值不会发生改变，而调用push()的数组会增加一个元素

9. 连接符

   作用： 打印拼接数组，使用特定的字符串连接

   > arr = ['a', 'b', 'c']
   (3) ["a", "b", "c"]
   > arr.join('-')
   "a-b-c"
   

10. 多维数组

    > arr = [[1, 2], ['a', 'b'], [3, 4]]
    (3) [Array(2), Array(2), Array(2)]
    > arr[0][0]
    1
    > arr[1][0]
    "a"
    

1.3 对象

对象由若干个键值对组成：

var 对象名 = {
    key1: value1;
    key2: value2;
    key3: value3    
}
// 实例
var person = {
        name: 'cianbei',
        age: 18,
        gender: 'male'
    }

JS中用 {...} 表示对象， 键值对描述属性，多个属性之间用逗号隔开，最后一个属性不加逗号。

1. 对象赋值

   > person.name = 'xianbei'
   "xianbei"
   > person.name
   "xianbei"
   

2. 使用一个不存在的对象属性，不会报错

   > person.sex
   undefined
   

3. 动态删减属性 delete

   > delete person.name
   true
   > person
   {age: 18, gender: "male"}
   

4. 动态添加

   直接给新的属性添加值即可

   > person.hh = 'hh'
   "hh"
   > person
   {age: 18, gender: "male", hh: "hh"}
   

5. 判断属性值是否在这个对象中！

   注： JavaScript 中所有键是字符串， 值是任意对象。

   > 'age' in person
   true
   > 'toString' in person   // 继承
   true
   

1.4 流程控制

1. if 判断

   var age = 18;
       if (age > 20){
           alert("wuwuwu")
       }else {
           alert("hhhhh")
       }
   

2. while 循环

   while (age < 100){
           age = age+1;
           console.log(age)
       }
   // 结果为19, ...,100
   

3. for 循环

   for (let i = 0; i<100; i++){
           console.log(i)
       }
   // 结果为 0-99
   

4. 数组循环

   • forEach 循环

     var arr = [1, 2, 3, 4, 5, 6]
         arr.forEach(function (value){
             console.log(value)
         })
     // 结果为1，2，3，4，5，6
     

   • for ... in 循环 （打印数组下标）

     for (var x in arr){
             console.log(x)
         }
     // 打印下标，结果为 0，1，2，3，4，5
     for (var x in arr){
             console.log(arr[x])
         }
     // 打印值，结果为 1，2，3，4，5，6
     

   • for ... of 循环（打印值）

     for (var x of arr){
             console.log(x)
         }
     // 打印值，结果为1，2，3，4，5，6
     

1.5 map 和 set（ES6）

• map 一一对应

  实例：学生姓名和学生成绩需要一一对应

  var map = new Map([['jackson', 90], ['mark', 88]]);
  // 获得学生jackson的成绩
  var name = map.get('jackson');
  // 插入新学生姓名和成绩
  map.set('bambam', 85);
  // 删除某个学术的成绩
  map.delete('mark')
  

• set 去重复

  var set = new Set([1, 3, 1, 2, 1])
  // 返回结果 [1，3，2]
  set.add(4)
  // 增加一个元素 4
  set.delete(3)
  // 删除元素 3
  set.has(3)
  // 判断是否包含某个元素