js基础day06笔记

《部分案例代码下载》

学习目标（全天模式）

• 能够说出数组对象的3-4个方法
• 能够说出数组对象的增删操作
• 能够使用数组的排序和翻转操作
• 能够说出什么是基本包装类型
• 能够说出字符串对象的3-4个方法

。。。。。。

理解上课的知识点……

Date对象

• 时间戳

  一般日期打印出来，是字符串的形式

  时间戳则是日期的数字形式，可以运算

  时间戳：表示距离1970年01月01日00时00分00秒起，过去的总毫秒数

  作用： 用来计算时间差

  代码： var date = +new Date();

  • 可以统计代码执行的时间

    // ------------------------获取开始的时间
    var begin = +new Date(); 
    var sum = 0;
    for (var i = 1; i <= 100000000; i++) {
        sum += i;
    }
    console.log(sum);
    // -------------------------------获取结束的时间
    var end = +new Date();  
    console.log(end - begin);  // 计算时间差，可以得出代码的执行时间毫秒数

  • 倒计时（距离下课的时间）

    // -----------------------------------当前时间
    var now = new Date();
    // ----------------------------------将来需要倒计时的时间
    var future = new Date('2019-5-20 12:00:00'); 
    
    // ------------------------------得到时间差——》转换成秒数（小数后忽略）
    var time = parseInt((future - now) / 1000);  
    
    // --------------------------------秒数中获取时——》1小时=3600秒
    var hours = parseInt(time / 3600);
    
    // --------秒数中获取分——》1分钟=60秒, 对所有的分钟数, 对60求余数即可(超过60的进位到小时中了）
    var minutes = parseInt(time / 60) % 60;
    
    // ---------获取秒数，对秒数求60的余数（超过60的部分进位到分钟去了)
    var seconds = time % 60;
    
    var str = "距离下课还有: " + hours + '小时' + minutes + '分钟' + seconds + '秒';
    document.write(str);

Array对象

js中内置了一个Array构造函数，可以用来创建数组对象（万物皆对象），每个对象中也有对应的方法

• 数组转换成字符串：arr.join(字符串分隔符)

  作用：将数组中的每一项拼接成字符串

  // 语法：arr.join(分隔符)
  var arr = ['张三','李四','王五','赵六'];
  var str = arr.join();  // 不传参数，默认每一项之间以 逗号 进行拼接
  var str = arr.join("-");//按 - 进行拼接
  var str = arr.join("");//分隔符为空串，中间就没有分隔符

————————

• 数组的增删操作：push、pop、unshift、shift

  // --------------------在数组的最后，添加一个或多个项，返回添加后数组的length
  array.push();
  // -------------------在数组的最后，删除一项，返回删除的项
  array.pop();
  // --------------------在数组的最前面，添加一个或多个项，返回添加后数组的length
  array.unshift();
  // ---------------------在数组的最前面，删除一项，返回删除的项
  array.shift();

  ---

  ヾ(๑╹◡╹)ﾉ” 数组的增删操作练习

  //练习1
  var arr = ["刘备"];
  //添加数据后变成：["赵云","马超","刘备","关羽","张飞"]
  
  //接着删除数据后变成：["关羽","张飞"]
  
  console.log(arr);
  
  //练习2
  var arr = ["赵云","马超","刘备","关羽","张飞"];
  //把数组的最后一个元素变成数组的第一个元素
  
  //把数组的第一个元素变成数组的最后一个元素
  
  console.log(arr);

---

• 数组的翻转与排序：reverse、sort

  //------------------让当前数组反转
  arr.reverse();
  //-------------------让当前数组排序，默认按照首字符排序
  arr.sort();
  
  //--------------sort方法可以传递一个函数作为参数，设置是升序还是降序排序
  arr.sort(function(a, b){
    // a表示前一项，b表示后一项
    // 如果返回值 >0,则交换位置
    // --------------从小到大升序排列
    return a - b;
    //---------------从大到小降序排列
    return b - a;
  });

  ---

  ヾ(๑╹◡╹)ﾉ” 数组的排序练习

  //1、将[3, 6, 1, 5, 10, 2,11]从小到大排列
  
  //2、将字符串数组按照字符长度从小到大排列——》比较的a.length和b.age
  var arr = ['bb', 'a', 'dddd', 'ccc'];
  
  //3、将学生数组按照年龄从小到大排列——》比较的a.age和b.age
  var arr = [
      {name: 'zs', age: 18, score: 100},
      {name: 'ls', age: 38, score: 120},
      {name: 'ww', age: 28, score: 20},
      {name: 'zl', age: 16, score: 15},
  ];

————————

• 数组的合并和截取：concat、slice

  数组的合并

  //-----------------合并数组，不会改变原数组，会返回一个新的拼接好的数组
  var newArr = arr.concat(arr2);

  数组的截取

  var arr = ["赵云","马超","刘备","关羽","张飞"];
    //--------------------------数组的截取，从数组中截取一部分，不会改变原数组，返回截取的新数组
    var newArr = arr.slice();// 不传参——》从开始截取到最后，截取整个数组——》相当于复制一份
    var newArr = arr.slice(begin);// 从begin（下标）开始，截取到最后，包括begin！！
    var newArr = arr.slice(begin,end);// 从begin开始，截取到end，包括begin，不包括end！！！

---

• 数组的删除、添加、替换：splice

  splice可以在数组的任意位置，添加或者删除任意项，会改变原数组

  //------------------splice 方法可以在数组的任意位置，添加或者删除任一项（会改变原数组）
  arr.splice(从哪开始删除，删除几个，添加的项1，添加的项2，......)
  arr.splice(begin,deleteCount,item1,item2,...)
  
  var arr = ["赵云","马超","刘备","关羽","张飞"];           
             
  //删除--------------------从下标为1开始删除，删除两项
  arr.splice(1,2);// 删除
  
  //添加--------------------把第一项、第二项添加到下标2的位置
  arr.splice(2,0,'第一项','第二项');// 添加
  
  //替换--------------------把下标2这一项替换成新项（先删除，再添加）
    arr.splice(2,1,'新项');// 替换

---

ヾ(๑╹◡╹)ﾉ” 数组的截取与添加练习

//练习：
var arr = ["赵云","马超","刘备","关羽","张飞"];
//1、截取["刘备","关羽"]
//2、在马超后面增加 马腾
//3、删除关羽

增删操作，都会改变原数组！！

---

• 数组查找元素：indexOf、lastIndexOf

  查找值在数组中某元素的下标

  //------------indexOf()——》查找数组中元素第一次出现的下标——》如果找不到，返回-1
  var arr = [1,2,3,4,5,4,3,2,1];
  console.log(arr.indexOf(2));// 查找2在数组中第一次出现的下标
  console.log(arr.indexOf(100));// 数组中不存在的值，返回-1
  
  // 需求: 判断 arr 中是否有 赵六
  var arr = ['张三', '田七', '李四', '王五'];
  var index = arr.indexOf('赵六');
  if (index === -1) {
      console.log('没有');
  }
  else {
      console.log('有赵六, 下标是' + index);
  }
  
  //-------------lastIndexOf()——》查找数组中元素最后一次出现的下标——》如果找不到，返回-1
  var arr = [1,2,3,4,5,4,3,2,1];
  console.log(arr.lastIndexOf(2));// 查找2在数组中第一次出现的下标
  console.log(arr.lastIndexOf(100));// 数组中不存在的值，返回-1

---

• 清空数组

    var arr = [1,2,3,4,5];
    
    // 1、------------------将数组赋值为一个空数组，推荐
    arr = [];
    
    // 2、-----------------直接修改数组的长度为0
    arr.length = 0;
    
    // 3、-------------------删除数组中的所有元素
  arr.splice(0,arr.length);// 从下标0开始，删除arr.length个元素

---

ヾ(๑╹◡╹)ﾉ” 数组的综合练习

var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"]
//1. 找到数组中第一个a出现的位置
//2. 找到数组中最后一个a出现的位置
//3. 找到数组中每一个a出现的位置(遍历——》打印下标)
//4. 数组去重，返回一个新数组
//   1、遍历原数组
//   2、看arr[i] 在 newArr中是否存在，不存在就加入newArr，如果存在，就不加。

————————

基本包装类型

简单数据类型是没有任何属性和方法的。

但是为了方便操作基本数据类型，js中还提供了三个特殊的复杂类型：String、Number、Boolean对象。可以使用其中的方法：

Number： var num = new Number(123);

String： var str = new String('abc');

Boolean： var flag = new Boolean(true);

基本包装类型：把基本类型包装成复杂类型

//-------------------------简单数据类型没有任何的属性和方法
var str = “abc”;
//---但是却可以直接使用.length方法——》原因是底层浏览器默认把简单数据类型包装成复杂类型，就可以调用方法了
console.log(str.length);

基本包装类型的步骤：

1. 在js中为了操作方便，如果是简单数据类型要获取方法时——》默认转换成复杂数据类型
2. 变成复杂数据类型之后——》调用其方法，得出结果
3. 结束时，在还原成简单数据类型

Number对象

Number对象是数字的包装类型，数字可以直接使用这些方法

var num = 11.111111;
//------------------保留几位小数
console.log(num.toFixed(2));
//--------------------转成字符串
console.log(num.toString(2));

Boolean对象

Boolean对象是布尔类型的包装类型。

var flag = true;
//-------------------转成字符串
console.log(flag.toString();)//底层先转成基本包装类型——》使用方法得到字符串——》还原成简单数据类型

undefined和null没有包装类型！！！所以没有方法！！

---

String对象

字符串可以类似于看做是一个数组（不是真的数组——》伪数组）

• 字符串可以遍历——》字符串不是数组，不是真的数组

  var str = 'abcdefg';
  // 底层会默认转换成 String对象，var str = new String('abcdefg');
  //----------------------打印字符串中下标为0的字符
  console.log(str[0]);
  //-----------------------字符串的遍历（类似于数组）
  for (var i = 0; i < str.length; i++) {
      console.log(str[i]);
  }

• 查找指定字符的位置：indexOf、lastIndexOf

  //------------indexOf()——》查找字符第一次出现的下标——》如果找不到，返回-1
  var str = "abdedba";
  console.log(str.indexOf(a));// 查找a在str中第一次出现的下标
  
  //-------------lastIndexOf()——》查找字符最后一次出现的下标——》如果找不到，返回-1
  var str = "abdedba";
  console.log(str.lastIndexOf(a));// 查找a在str中最后一次出现的下标

• 去除字符串首尾的空格：trim

  var str = '      hello world      ';
  //----------------------------去除字符串首尾的空格，中间的不管
  str = str.trim();// 返回去除首尾空格之后的字符串，重新赋值给str
  console.log(str);

• 字母大小写转换：toUpperCase、toLowerCase

  var myName = 'ZhangSan';
  //-----------------------------------每个英文字母转换成大写
  console.log(myName.toUpperCase());
  //-----------------------------------每个英文字母转换成小写
  console.log(myName.toLowerCase());

---

• 字符串拼接与截取：concat、slice、substring、substr

  拼接——》+用的最多

  var str1 = 'abc';
  var str2 = 'def';
  //----------------------拼接+用的最多
  console.log(str1 + str2);
  //------------------------拼接字符串（不用）会返回一个新字符串
  var newStr = str1.concat(str2);
  console.log(newStr);

  字符串的截取

  var str = 'abcdefg';
  //-----------------------slice(begin,end)——》从begin开始，截取到end（有始无终）
  console.log(str.slice(1, 3)); 
  //-------------------------subString(begin,end)——》从begin开始，截取到end（有始无终）
  console.log(str.substring(1, 3)); 
  //------------------------subStr(begin,length)——》从begin开始，截取length个，包括begin
  console.log(str.substr(1, 3));  // bcd

---

• 将字符串分割成一个数组：split

  和arr.join（）正好相反

  // join 将数组的值拼接成一个字符串
  // split('分割符') 将字符串分割成一个数组, 返回值, 就是分割后得到的数组
  
  var str = 'a|b|c|d';
  //-----------------split('分割符'): 将字符串通过分隔符分割成一个数组, 返回分割后得到的数组
  var arr = str.split('|');
  console.log(arr);  // ["a", "b", "c", "d"]

————————

---

• 字符串替换：replace

  可以把字符串中特定字符替换掉

  var words = '大菜鸡, 真坑啊!!! 大菜鸡, 大菜鸡';
  //-----------------------str.replace('aa','bb'):将str中的第一个aa替换成bb——》返回替换后的结果
  words = words.replace('菜鸡', '***');
  console.log(words);
  
  //--------------------------------------（拓展）替换所有的需要使用后面讲的正则——》g：全局
  words = words.replace(/你妹的/g, '***')
  console.log(words);

---

ヾ(๑╹◡╹)ﾉ”字符串小练习

//1. 截取字符串"我爱中华人民共和国"，中的"中华"
//2. "abcoefoxyozzopp"查找字符串中所有o出现的位置
//3. 把字符串中所有的o替换成!
//4. 把一个字符串中所有的空格全部去掉

ヾ(๑╹◡╹)ﾉ”字符串大练习

// var str = 'my_name_is_jim_green';
// 需求: 变成驼峰命名  myNameIsJimGreen