数组

• 什么是数组？

• 字面理解就是 数字的组合

• 其实不太准确，准确的来说数组是一个 数据的集合

• 也就是我们把一些数据放在一个盒子里面，按照顺序排好

  [1, 2, 3, 'hello', true, false]
  

• 这个东西就是一个数组，存储着一些数据的集合

数据类型分类

• number / string / boolean / undefined / null / object / function / array / …

• 数组也是数据类型中的一种（对象）

• 我们简单的把所有数据类型分为两个大类 基本数据类型 和 复杂数据类型

• 基本数据类型： number / string / boolean / undefined / null

• 复杂数据类型： object / function / array / …

创建一个数组

• 数组就是一个 []
• 在 [] 里面存储着各种各样的数据，按照顺序依次排好

字面量创建一个数组

• 直接使用 [] 的方式创建一个数组

  // 创建一个空数组
  var arr1 = []
  
  // 创建一个有内容的数组
  var arr2 = [1, 2, 3]
  

内置构造函数创建数组

• 使用 js 的内置构造函数 Array 创建一个数组

  // 创建一个空数组
  var arr1 = new Array()
  
  // 创建一个长度为 10 的数组
  var arr2 = new Array(10)
  
  // 创建一个有内容的数组
  var arr3 = new Array(1, 2, 3)
  

数组的 length

• length: 长度的意思

• length 就是表示数组的长度，数组里面有多少个成员，length 就是多少

  // 创建一个数组
  var arr = [1, 2, 3]
  
  console.log(arr.length) // 3
  

数组的索引

• 索引，也叫做下标，是指一个数据在数组里面排在第几个的位置

• 注意： 在所有的语言里面，索引都是从 0 开始的

• 在 js 里面也一样，数组的索引从 0 开始

  // 创建一个数组
  var arr = ['hello', 'world']
  

• 上面这个数组中，第 0 个 数据就是字符串 hello，第 1 个 数据就是字符串 world

• 想获取数组中的第几个就使用 数组[索引] 来获取

  var arr = ['hello', 'world']
  
  console.log(arr[0]) // hello
  console.log(arr[1]) // world
  

for 循环遍历数组

• 因为数组的索引就可以获取数组中的内容

• 数组的索引又是按照 0 ～ n 顺序排列

• 我们就可以使用 for 循环来循环数组，因为 for 循环我们也可以设置成 0 ～ n 顺序增加

• 我们把这个行为叫做 遍历

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 for 循环遍历数组
  for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
  }
  
  // 会在控制台依次打印出 1， 2， 3， 4， 5
  

  • i < arr.length 因为 length 就是数组的长度，是一个数字，所以我们可以直接用它来决定循环次数
  • console.log(arr[i]) 因为随着循环，i 的值会从 0 开始依次增加
  • 所以我们实际上就相当于在打印 arr[0] / arr[1] / …

数组的常用方法

• 数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了

• 比如我们想改变一个数组

  // 创建一个数组
  var arr = [1, 2, 3]
  
  // 我们想把数组变成只有 1 和 2
  arr = [1, 2]
  

  • 这样肯定是不合理，因为这样不是在改变之前的数组
  • 相当于心弄了一个数组给到 arr 这个变量了
  • 相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
  • 所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了

数组常用方法之 push***

• push 是用来在数组的末尾追加一个元素,返回添加以后的长度

  var arr = [1, 2, 3]
  
  // 使用 push 方法追加一个元素在末尾
  arr.push(4)
  
  console.log(arr) // [1, 2, 3, 4]
  
  var res = arr.push(1,2,3,34);
  
  res//8  
  
  
  

数组常用方法之 pop

• pop 是用来删除数组末尾的一个元素,返回删除的元素

  var arr = [1, 2, 3]
  
  // 使用 pop 方法删除末尾的一个元素
  var res = arr.pop()
  
  console.log(arr) // [1, 2]
  

数组常用方法之 unshift

• unshift 是在数组的最前面添加一个元素

  var arr = [1, 2, 3]
  
  // 使用 unshift 方法想数组的最前面添加一个元素
  arr.unshift(4)
  
  console.log(arr) // [4, 1, 2, 3]
  

数组常用方法之 shift

• shift 是删除数组最前面的一个元素

  var arr = [1, 2, 3]
  
  // 使用 shift 方法删除数组最前面的一个元素
  arr.shift()
  
  console.log(arr) // [2, 3]
  

数组常用方法之 splice

• splice 是截取数组中的某些内容，按照数组的索引来截取

• 语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 splice 方法截取数组
  var res = arr.splice(1, 2)
  
  console.log(arr) // [1, 4, 5]
  console.log(res)//[2,3]  返回被删除的元素
  

  
  - `arr.splice(1, 2)` 表示从索引 1 开始截取 2 个内容
- 第三个参数没有写，就是没有新内容替换掉截取位置
  
  ```javascript
  var arr = [1, 2, 3, 4, 5]
  
  // 使用 splice 方法截取数组
  arr.splice(1, 2, '我是新内容')
  
  console.log(arr) // [1, '我是新内容', 4, 5]

• arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
• 然后用第三个参数把截取完空出来的位置填充

数组常用方法之 reverse

• reverse 是用来反转数组使用的

  var arr = [1, 2, 3]
  
  // 使用 reverse 方法来反转数组
  arr.reverse()
  
  console.log(arr) // [3, 2, 1]
  

数组常用方法之 sort

• sort 是用来给数组排序的（默认按照字典排序 先按照第一位排序-如果第一位相等就按照第二位）

  var arr = [2, 3, 1]
  
  // 使用 sort 方法给数组排序
  arr.sort()
  
  console.log(arr) // [1, 2, 3]
  

  • 这个只是一个基本的简单用法

  // 升序
          arr4.sort(function (a, b) {
              return a - b
          })
  // 降序
          arr4.sort(function (a, b) {
              return b - a
          })
  

          let arr5 = [{
                  username: 'zhangsan',
                  age: 19
              },
              {
                  username: 'lisi',
                  age: 10
              },
          ]
          // 按照对象的年龄 降序  
          // a ，b  数组的元素
          arr5.sort(function (a, b) {
              return b.age - a.age
          })
  

数组常用方法之 concat

• concat 是把多个数组进行拼接

• 和之前的方法有一些不一样的地方，就是 concat 不会改变原始数组，而是返回一个新的数组

  var arr = [1, 2, 3]
  
  // 使用 concat 方法拼接数组
  var newArr = arr.concat([4, 5, 6],[1,58,3],10)
  
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [1, 2, 3, 4, 5, 6,1,58,3,10]
  

  • 注意： concat 方法不会改变原始数组

数组常用方法之 join

• join 是把数组里面的每一项内容链接起来，变成一个字符串

• 可以自己定义每一项之间链接的内容 join(要以什么内容链接)

• 不会改变原始数组，而是把链接好的字符串返回

  var arr = [1, 2, 3]
  
  // 使用 join 链接数组
  var str = arr.join('-')
  
  console.log(arr) // [1, 2, 3]
  console.log(str) // 1-2-3
  

  • 注意： join 方法不会改变原始数组，而是返回链接好的字符串

slice 复制数组的一部分

       
			var arr9 = [9,8,7,6,5,4,3,2];
			// 参数 两个  开始位置  结束位置,不包含结束位置,不改变原数组
			var res9 = arr9.slice(1,3)
			console.log(res9)//[8, 7]
			
			// 第二个参数不传入,复制到最后
			console.log(arr9.slice(1))//[8, 7, 6, 5, 4, 3, 2]
			
			// 如果传入负数,倒着数位置,最后一个是 -1
			console.log(arr9.slice(1,-2))// [8, 7, 6, 5, 4]
			
			
			
			// indexOf  查找元素的第一次出现的下标 ,如果找到返回下标,找不到返回 -1  
			
			console.log(arr9.indexOf(100))//-1
			console.log(arr9.indexOf(5))//4 

练习1

1. 山上有一口缸可以装50升水，现在有15升水。老和尚叫小和尚下山挑水，每次可以挑5升。问：小和尚要挑几次水才可以把水缸挑满？通过编程解决这个问题。

2. 定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。

   var arr = [2, 4, 6, 8, ..., 60]
   
   // 结果是一个新的数组
   // [6, 16, 26, 36, 46, 56]
   

3. 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。试编程。

   // 结果
   [
     [1, 2, 3, 4, 5],//1+5*0  2+5*0  3+5*0
     [6, 7, 8, 9, 10],//1 +5*1   2+5*1 3+5*1
     [11, 12, 13, 14, 15],//1+5*2  2+5*2
     [16, 17, 18, 19, 20],//1+5*3
     [21, 22, 23, 24, 25]
   ]
   

for of / in 循环遍历数组

for(var value of arr){
	//value  数组中元素 
	console.log(value)
}

for(var i in arr){
	console.log(i)//下标,字符串类型 
	console.log(arr[i])//数组中元素
}

• 因为 对象 是没有索引的，所以我们没有办法使用 for 循环来遍历

• 这里我们使用 for in 循环来遍历对象

• 先来看一段代码

  var obj = {
    name: 'Jack',
    age: 18
  }
  
  for (var key in obj) {
    console.log(key)
    console.log(obj[key])
  }
  
  // 第一行，会在控制台打印两次内容，分别是 name 和 age
  // 第二行，会在控制台打印两次内容，分别是 jack 和 18
  

  • for in 循环的遍历是按照对象中有多少成员来决定了
  • 有多少成员，就会执行多少次
  • key 是我们自己定义的一个变量，就和 for 循环的时候我们定义的 i 一个道理
  • 在每次循环的过程中，key 就代表着对象中某一个成员的 属性名 , obj[key] 就代表着对象中某一个成员的 属性值

数组的排序

• 排序，就是把一个乱序的数组，通过我们的处理，让他变成一个有序的数组
• 今天我们讲解两种方式来排序一个数组 冒泡排序 和 选择排序

冒泡排序

• 先遍历数组，让挨着的两个进行比较，如果前一个比后一个大，那么就把两个换个位置

• 数组遍历一遍以后，那么最后一个数字就是最大的那个了

• 然后进行第二遍的遍历，还是按照之前的规则，第二大的数字就会跑到倒数第二的位置

• 以此类推，最后就会按照顺序把数组排好了

  1. 我们先来准备一个乱序的数组

     var arr = [3, 1, 5, 4, 6, 7, 2, 8, 9]
     

     • 接下来我们就会用代码让数组排序

  2. 先不着急循环，先来看数组里面内容换个位置

     // 假定我现在要让数组中的第 0 项和第 1 项换个位置
     // 需要借助第三个变量
     var tmp = arr[0]   //3
     arr[0] = arr[1]
     arr[1] = tmp
     

  3. 第一次遍历数组，把最大的放到最后面去

     for (var i = 0; i < arr.length-1; i++) {
       // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
       if (arr[i] > arr[i + 1]) {
         var tmp = arr[i]
         arr[i] = arr[i + 1]
         arr[i + 1] = tmp
       }
     }
     
     // 遍历完毕以后，数组就会变成 [3, 1, 5, 6, 4, 7, 2, 8, 9]
     

     • 第一次结束以后，数组中的最后一个，就会是最大的那个数字
     • 然后我们把上面的这段代码执行多次。数组有多少项就执行多少次

  4. 按照数组的长度来遍历多少次

     for (var j = 0; j < arr.length; j++) {
       for (var i = 0; i < arr.length-1; i++) {
         // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
         if (arr[i] > arr[i + 1]) {
           var tmp = arr[i]
           arr[i] = arr[i + 1]
           arr[i + 1] = tmp
         }
       }
     }
     
     // 结束以后，数组就排序好了
     

  5. 给一些优化

     • 想象一个问题，假设数组长度是 9，第八次排完以后

     • 后面八个数字已经按照顺序排列好了，剩下的那个最小的一定是在最前面

     • 那么第九次就已经没有意义了，因为最小的已经在最前面了，不会再有任何换位置出现了

     • 那么我们第九次遍历就不需要了，所以我们可以减少一次

       for (var j = 0; j < arr.length - 1; j++) {
         for (var i = 0; i < arr.length; i++) {
           // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
           if (arr[i] > arr[i + 1]) {
             var tmp = arr[i]
             arr[i] = arr[i + 1]
             arr[i + 1] = tmp
           }
         }
       }
       

     • 第二个问题，第一次的时候，已经把最大的数字放在最后面了

     • 那么第二次的时候，其实倒数第二个和最后一个就不用比了

     • 因为我们就是要把倒数第二大的放在倒数第二的位置，即使比较了，也不会换位置

     • 第三次就要倒数第三个数字就不用再和后两个比较了

     • 以此类推，那么其实每次遍历的时候，就遍历 当前次数 - 1 次

       for (var j = 0; j < arr.length - 1; j++) {
         for (var i = 0; i < arr.length - 1 - j; i++) {
           // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
           if (arr[i] > arr[i + 1]) {
             var tmp = arr[i]
             arr[i] = arr[i + 1]
             arr[i + 1] = tmp
           }
         }
       }
       

  6. 至此，一个冒泡排序就完成了

选择排序

• 先假定数组中的第 0 个就是最小的数字的索引

• 然后遍历数组，只要有一个数字比我小，那么就替换之前记录的索引

• 知道数组遍历结束后，就能找到最小的那个索引，然后让最小的索引换到第 0 个的位置

• 再来第二趟遍历，假定第 1 个是最小的数字的索引

• 在遍历一次数组，找到比我小的那个数字的索引

• 遍历结束后换个位置

• 依次类推，也可以把数组排序好

  1. 准备一个数组

     var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]
     

  2. 假定数组中的第 0 个是最小数字的索引

     var minIndex = 0
     

  3. 遍历数组，判断，只要数字比我小，那么就替换掉原先记录的索引

     var minIndex = 0
     for (var i = 0; i < arr.length; i++) {
       if (arr[i] < arr[minIndex]) {
         minIndex = i
       }
     }
     
     // 遍历结束后找到最小的索引
     // 让第 minIndex 个和第 0 个交换
     var temp = arr[minIndex]
     arr[minIndex] = arr[0]
     arr[0] = temp
     

  4. 按照数组的长度重复执行上面的代码

     for (var j = 0; j < arr.length; j++) {
       // 因为第一遍的时候假定第 0 个，第二遍的时候假定第 1 个
       // 所以我们要假定第 j 个就行
       var minIndex = j
       
       // 因为之前已经把最小的放在最前面了，后面的循环就不需要判断前面的了
       // 直接从 j + 1 开始
       for (var i = j + 1; i < arr.length; i++) {
         if (arr[i] < arr[minIndex]) {
           minIndex = i
         }
       }
     
       // 遍历结束后找到最小的索引
       // 第一堂的时候是和第 0 个交换，第二趟的时候是和第 1 个交换
       // 我们直接和第 j 个交换就行
       var tmp = arr[minIndex]
       arr[minIndex] = arr[j]
       arr[j] = tmp
     }
     

  5. 一些优化

     • 和之前一样，倒数第二次排序完毕以后，就已经排好了，最后一次没有必要了

       for (var j = 0; j < arr.length - 1; j++) {
         var minIndex = j
         
         for (var i = j + 1; i < arr.length; i++) {
           if (arr[i] < arr[minIndex]) {
             minIndex = i
           }
         }
       
         var tmp = arr[minIndex]
         arr[minIndex] = arr[j]
         arr[j] = tmp
       }
       

     • 在交换变量之前，可以判断一下，如果我们遍历后得到的索引和当前的索引一致

     • 那么就证明当前这个就是目前最小的，那么就没有必要交换

     • 做一我们要判断，最小作引和当前作引不一样的时候，才交换

       for (var j = 0; j < arr.length - 1; j++) {
         var minIndex = j
         
         for (var i = j + 1; i < arr.length; i++) {
           if (arr[i] < arr[minIndex]) {
             minIndex = i
           }
         }
       
         if (minIndex !== j) {
           var tmp = arr[minIndex]
           arr[minIndex] = arr[j]
           arr[j] = tmp   
         }
       }
       

  6. 至此，选择排序完成

函数参数传递基本数据类型和复杂数据类型的区别

• 之前我们知道了，基本数据类型和复杂数据类型在存储上是有区别的

• 那么他们在赋值之间也是有区别的

• 基本数据类型之间的赋值

  var num = 10
  var num2 = num
  
  num2 = 200
  
  console.log(num) // 10
  console.log(num2) // 200
  

  • 相当于是把 num 的值复制了一份一摸一样的给了 num2 变量
  • 赋值以后两个在没有关系

• 复杂数据类型之间的赋值

  var obj = {
    name: 'Jack'
  }
  var obj2 = obj
  
  obj2.name = 'Rose'
  
  console.log(obj.name) // Rose
  console.log(obj2.name) // Rose
  

  • 因为复杂数据类型，变量存储的是地址，真实内容在 堆空间 内存储
  • 所以赋值的时候相当于把 obj 存储的那个地址复制了一份给到了 obj2 变量
  • 现在 obj 和 obj2 两个变量存储的地址一样，指向一个内存空间
  • 所以使用 obj2 这个变量修改空间内的内容，obj 指向的空间也会跟着改变了

数据类型之间存储的区别（重点）

• 既然我们区分了基本数据类型和复杂数据类型
• 那么他们之间就一定会存在一些区别
• 他们最大的区别就是在存储上的区别
• 我们的存储空间分成两种 栈 和 堆
• 栈： 主要存储基本数据类型的内容
• 堆： 主要存储复杂数据类型的内容

基本数据类型在内存中的存储情况

• var num = 100，在内存中的存储情况

• 

• 直接在 栈空间 内有存储一个数据

复杂数据类型在内存中的存储情况

• 下面这个 对象 的存储

  var obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
  }
  

• 

• 复杂数据类型的存储

  1. 在堆里面开辟一个存储空间
  2. 把数据存储到存储空间内
  3. 把存储空间的地址赋值给栈里面的变量

• 这就是数据类型之间存储的区别

数据类型之间的比较

• 基本数据类型是 值 之间的比较

  var num = 1
  var str = '1'
  
  console.log(num == str) // true
  

  • 复杂数据类型是 地址 之间的比较

  var obj = { name: 'Jack' }
  var obj2 = { name: 'Jack' }
  
  console.log(obj == obj2) // false
  

  • 因为我们创建了两个对象，那么就会在 堆空间 里面开辟两个存储空间存储数据（两个地址）
  • 虽然存储的内容是一样的，那么也是两个存储空间，两个地址
  • 复杂数据类型之间就是地址的比较，所以 obj 和 obj2 两个变量的地址不一样
  • 所以我们得到的就是 false

函数的参数

• 函数的参数也是赋值的之中，在函数调用的时候，实参给行参赋值

• 和之前变量赋值的规则是一样的

• 函数传递基本数据类型

  function fn(n) {
    n = 200
    console.log(n) // 200
  }
  
  var num = 100
  fn(num)
  console.log(num) // 100
  

  • 和之前变量赋值的时候一样，在把 num 的值复制了一份一摸一样的给到了函数内部的行参 n
  • 两个之间在没有任何关系了

• 函数传递复杂数据类型

  function fn(o) {
    o.name = 'Rose'
    console.log(o.name) // Rose
  }
  
  var obj = {
    name: 'Jack'
  }
  fn(obj)
  console.log(obj.name) // Rose
  

  • 和之前变量赋值的时候一样，把 obj 内存储的地址复制了一份一摸一样的给到函数内部的行参 o
  • 函数外部的 obj 和函数内部的行参 o，存储的是一个地址，指向的是一个存储空间
  • 所以两个变量操作的是一个存储空间
  • 在函数内部改变了空间内的数据
  • obj 看到的也是改变以后的内容

练习2

2. 数组的冒泡排序

3. 数组的选择排序

4. 编写函数map(arr) 把数组中的每一位数字都增加30%，并返回一个新数组

   var arr = [10, 100, 1000]
   
   function map() {
     // code in here ...
   }
   
   console.log(map(arr)) // [13, 130, 1300]
   

5. 编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型

   var arr = [1, 2, 3, 60]
   var arr2 = [1, 2, 3]
   
   function has() {
     // code in here ...
   }
   
   console.log(has(arr, 60)) // true
   console.log(has(arr2, 60)) // false
   

练习3

1. 编写函数norepeat(arr) 将数组的重复元素去掉，并返回新的数组

   var arr = [1, 1, 2, 3, 4, 4, 2, 1, 3, 5]
   
   function norepeat() {
     // code in here ...
   }
   
   console.log(norepeat(arr)) // [1, 2, 3, 4, 5]
   

2. 有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中。

3. 创建一个对象，该对象存储一个学生的信息，该对象包含学号、身份证、年龄、性别、所学专业等属性信息，同时该对象包含一个自我介绍的方法，用来输出该对象的所有信息；

ES5/String

严格模式（了解）

• 我们都知道 js 是一个相对不很严谨的语言
• 而且开发的时候，一些代码也不是很严格要求
• 而严格模式就是对开发的时候写的一些内容做了要求

开启严格模式

• 想开启严格模式，直接在代码最开始的位置写上字符串 use strict

  <script>
  	'use strict'
  	// 下面代码书写就要按照严格模式来书写
  </script>
  

严格模式的规则

1. 声明变量必须有 var 关键字

   'use strict'
   
   var num = 100
   num2 = 200 // 这个就会报错
   

   • 之前了解过，在声明变量的时候，如果没有 var 关键字，那么按照作用域的规则会自动定义成全局变量
   • 严格模式下不可以，会报错

2. 函数的行参不可以重复

   'use strict'
   
   function fn(p1, p1) {} // 直接就会报错
   

   • 在非严格模式下，函数两个行参一样，是不会报错的，只不过就是相当于在函数内部只有一个变量了
   • 但是在严格模式下会报错

3. 声明式函数调用的时候函数内部没有 this

   'use strict'
   
   function fn() {
     console.log(this) // undefined
   }
   fn()
   

   • 本身，全局声明式函数在调用的时候，函数内部的 this 是指向 window 的
   • 在严格模式下，是没有 this 的

ES5 中常见的数组常用方法

• 之前我们讲过的数组常用方法都是 ES3 的方法
• 今天来说一些 ES5 中的方法

indexOf

• indexOf 用来找到数组中某一项的索引

• 语法： indexOf(你要找的数组中的项)

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(3)
  
  console.log(index) // 2
  

  • 我们要找的是数组中值为 3 的那一项
  • 返回的就是值为 3 的那一项在该数组中的索引

• 如果你要找的内容在数组中没有，那么就会返回 -1

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(10)
  
  console.log(index) // -1
  

  • 你要找的值在数组中不存在，那么就会返回 -1

forEach

• 和 for 循环一个作用，就是用来遍历数组的

• 语法：arr.forEach(function (item, index, arr) {})

  var arr = [1, 2, 3]
  
  // 使用 forEach 遍历数组
  arr.forEach(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是'+arr)
  })
  

  • forEach() 的时候传递的那个函数，会根据数组的长度执行
  • 数组的长度是多少，这个函数就会执行多少回

map

• 和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

  var arr = [1, 2, 3]
  
  // 使用 map 遍历数组
  var newArr = arr.map(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item + 10
  })
  
  console.log(newArr) // [11, 12, 13]
  

filter

• 和 map 的使用方式类似，按照我们的条件来筛选数组

• 把原始数组中满足条件的筛选出来，组成一个新的数组返回

  var arr = [1, 2, 3]
  
  // 使用 filter 过滤数组
  var newArr = arr.filter(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item > 1
  })
  
  console.log(newArr) // [2, 3]
  

  • 我们设置的条件就是 > 1
  • 返回的新数组就会是原始数组中所有 > 1 的项

  every

  判断 是否数组所有的元素都满足条件

  let flag =  arr.every(function(item,index,arr){
   		return 条件
   })
   
   
   let res4 = arr4.every(function (v) {
              return v >= 18
    })
   console.log(res4);
  

some

判断是否数组有一些元素满足条件

let flag =  arr.some(function(item,index,arr){
 		return 条件
 })
 
 let res5 = arr4.some(function (v) {
            return v >= 18
        })
        console.log(res5);//true

find

查找数组中第一个满足条件的元素

		var arr6 = [10, 19, 17, 20];
        let res6 = arr6.find(function (v, i) {
            return v === 19
        })
        console.log(res6);

        var arr7 = [{ id: 1, name: 'zs' }, { id: 2, name: 'lisi' }];

        var obj = arr7.find(function (v) {
            return v.id == 2
        })
        console.log(obj);
        console.log(obj.name);

findIndex

查找数组中第一个满足条件的元素的下标

var res7 = arr7.findIndex(function (v) {
            return v.id == 2
 })
 console.log(res7);

reduce

let res8 = arr8.reduce(function (a, b) {
            console.log(a, b);
            //a 第一次是 数组中第一个元素 
            //10+19 =29 

            // 然后几次 就是前面 数字的和

            //a = 29  
            // b 17  
            return a + b;
        })
        console.log(res8);

        let res9 = arr8.reduce(function (a, b) {
            console.log(a, b);
            //a 是累积变量  ，1000就是累积变量的初始值
            // b 是数组的元素
            return a + b;
        }, 1000)
        console.log(res9);

创建字符串（了解）

• 我们创建字符串也分为两种方法 字面量 和 构造函数

• 字面量：

  var str = 'hello'
  

• 构造函数创建

  var str = new String('hello')
  

ASCII (American Standard Code for Information Interchange): 美国信息交换标准代码字符集（了解）

• 我们都知道，计算机只能存储 0101010 这样的二进制数字

• 那么我们的 a ~ z / A ~ Z / $ / @ /… 之类的内容也有由二进制数字组成的

• 我们可以简单的理解为， a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号在解析成我们要看到的内容给我们看到

• 上面的就是 ASCII 对照表，我们只需要知道他是这么存储的就好

• http://ascii.911cha.com/

gbk gb2312 utf-8

97 a

98 a

unicode 编码（万国码）

• 我们看到了，ASCII 只有这 128 个字符的编码结构
• 但是因为 ASCII 出现的比较早，而且是美国发明的，早先时候这些内容就够用了
• 因为存储一些英文的内容，传递一些英文的文章什么的都够用了
• 那么对于这个世界来说肯定是不够用的
• 因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储
• 所以就出现了 unicode 编码，也叫（万国码，统一码）
• unicode 对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多
• 而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照 unicode 编码转换成数字进行存储
• 我们的 UTF-8 就是一种 8 位的 unicode 字符集

字符串的常用方法

• 我们操作字符串，也有一堆的方法来帮助我们操作
• 字符串和数组有一个一样的地方，也是按照索引来排列的

charAt

• charAt(索引) 是找到字符串中指定索引位置的内容返回

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charAt(2)
  
  console.log(index) // c
  

  • 因为字符串也是按照索引进行排列的，也是同样从 0 开始
  • 所以索引 2 的位置就是 c

• 如果没有对应的索引，那么就会返回 空字符串

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charAt(10)
  
  console.log(index) // ''
  

  • 这个字符串根本没有索引 10 的位置
  • 所以就会返回一个空字符串 ''

charCodeAt

• charCodeAt(索引) 就是返回对应索引位置的 unicode 编码

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charCodeAt(0)
  
  console.log(index) // 74
  

  • 因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

indexOf

• indexOf 就是按照字符找到对应的索引

  var str = 'Jack'
  
  // 使用 indexOf 找到对应的索引
  var index = str.indexOf('J')
  
  console.log(index) // 0
  

  • 因为字符 J 在字符串 Jack 中的索引位置是 0，找不到返回-1
  • 所以会返回 0

substring（slice）

• substring 是用来截取字符串使用的

• 语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引

  var str = 'hello'
  //         01234
  
  // 使用 substring 截取字符串
  var newStr = str.substring(1, 3)
  
  console.log(newStr) // el
  

  • 从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引
  • 所以返回的是 el

substr

• substr 也是用来截取字符串的

• 语法：substr(从哪个索引开始，截取多少个)

  var str = 'hello'
  //         01234
  
  // 使用 substr 截取字符串
  var newStr = str.substr(1, 3)
  
  console.log(newStr) // ell
  

  • 这个方法和 substring 不一样的是，第二个参数是截取多少个
  • 从索引 1 开始，截取 3 个，所以得到的是 ell

toLowerCase 和 toUpperCase

• 这两个方法分别使用用来给字符串转成 小写字母 和 大写字母 的

  var str = hello
  
  // 使用 toUpperCase 转换成大写
  var upper = str.toUpperCase()
  
  console.log(upper) // HELLO
  
  // 使用 toLowerCase 转换成小写
  var lower = upper.toLowerCase()
  
  console.log(lower) // hello
  
  
  
  

// 替换 
        // 使用* 替换 abc  只能替换第一个
        // 返回替换后的结果
        let res = str.replace('abc', '*')
        console.log(str);
        console.log(res);


        // 把操作的结果 赋值给  str  ，字符串就会变化
        str = str.replace('abc', '*')
        console.log(str);
        
        
        
        // 参数去分割字符串，分割结果是 数组
        let resArr = str2.split('-');
        console.log(resArr);//["a", "b", "c", "d"]

练习

1.随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么

提示：随机数*100000 -》 数字–》字符串

2.敏感词过滤

// 比如我要过滤 "SM"
var arr  = ['SM','垃圾']

var str = 'asdasdSMasdasdasdSMsdasdasdSMsadasd'

// 需要结果
// asdasd**asdasdasd**sdasdasd**

3.数字字母混合6位验证码 ‘1234567890qwertyuiopasdfghjklzxcvbnm’

4.已知字符串“a,a,b,c,c,d”，统计每个字符出现的次数，结果显示 a 2、b 1、c 2、d1。

去掉重复的字符，abcd （字符串去重 -》数组 split（‘’） 数组去重）

a出现的次数 在（a,a,b,c,c,d）里出现的次数

b出现的次数 在（a,a,b,c,c,d）里出现的次数

c出现的次数 在（a,a,b,c,c,d）里出现的次数