[前端开发] JavaScript基础知识 [下]

文章总览：YuanDaiMa2048博客文章总览

---

上篇：JavaScript基础知识 [上]

字符串

• 字符串语法规则：单引号、双引号和反引号的使用
  • 利用双引号"或者单引号'所括起来
  • 双引号中不能嵌套双引号,单引号中不能嵌套单引号
  • 如果要在双引号中嵌套双引号或者再单引号中嵌套单引号,需要用转义字符\

    'Did he say \'hi\'?'
    "Did he say \"hi\"?"
    

    • 字符串默认是在一行
    • 如果要将长字符串分成多行, 可以在每一行的尾部使用反斜杠\

    var longstring = 'Hello, nice \
    to meet you!'
    

• 字符串方法：常用的字符串操作方法

  • .charAt() 返回指定位置的字符, 参数从0开始编号

    var name = new String('english');
    name.charAt(0)// "e"
    

    • 如果参数为负数,或大于等于字符串长度,.charAt() 返回空字符串 ""

  • .concat() 连接两个字符串,返回一个新字符串,不改变原字符串

    var name1 = 'english';
    var name2 = 'math';
    
    name1.concat(name2);//"englishmath"
    

    • .concat() 可以接受多个参数

      'he'.concat('ll', 'o'); //"hello"
      

      • 如果参数不是字符串,那么此方法会先将其转为字符串,再进行连接
      • 如果不用此方式,也可以用 + 连接对各字符串, 但是加号如果遇到两个非字符串则会计算, 但是使用 concat 不管怎样都是不计算转字符串

  • .substring() 从原字符串取出子字符串并返回, 第一个参数表示子字符串的开始位置, 第二个参数表示结束位置(返回结果不包含该位置)

    var name1 = 'english';
    
    name1.substring(0,2);//"en"
    
    //省略第二个参数, 则表示子字符串一直到原字符串的结束
    name1.substring(2);//"glish"
    
    //如果第一个参数大于第二个参数, 则会自动更换两个参数位置
    name1.substring(2, 0);//"en"
    
    //如果参数是负数, 会自动将负数转为0
    name1.substring(-2, 2);//"en"
    

  • .substr() 从原字符串取出子字符串并返回, 第一个参数表示子字符串的开始位置, 第二个参数表示子字符串的长度(和.substring()不同点)

    • 省略第二个参数, 则表示子字符串一直到原字符串的结束
    • 如果第一个参数是负数, 表示倒数计算的字符位置(从-1开始)
    • 如果第二个参数是负数, 会自动将负数转为0

  • .indexOf() 用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是最开始匹配的位置. 如果返回-1表示不匹配

    'english'.indexOf('n');//1
    

    • 如果接受第二个参数,则 表示从该位置开始向后匹配

  • .trim（）用于去除字符串两端的空格，返回新字符串

    " hello world！ ".trim // "hello world！"
    

    • 不仅去除空格，还去除制表符 \t 、\v， 换行符 \n 和回车符 \r.

  • ES6扩展方法

    • 去除前面空格：.trimStart()

    • 去除后面空格：.trimEnd()

    • .split() 按照给定的规则分割字符串,返回一個由分割出來的字符串组成的数组

      'hello.nice.to.meet.you'.split('.')//["hello","nice","to","meet","you"]
      

      • 如果分割规则是空字符串，则返回是原字符串的每一个字符组成的一个数组
      • 参数省略则数组只包含一个成员，即原字符串
      • 该方法接收两个参数是，第一个参数是分割规则，第二个参数是返回的数组最大成员数

数组

• 数组遍历：for循环、forEach方法、for…of语句的使用

  //利用for或者wihle循环
  for(var i in array）{
  语句；
  }
  

  • 计算数组长度: array.length()

• 数组方法：常用的数组操作方法

  • Array.is Array(数组名称)返回一个布尔值，表示参数是否为数组，可以弥补typeof运算符的不足(typeof返回是object，没有Array这个表示)

  • .push("a",….,"n")在数组末端添加一个或者多个元素，并且返回添加新元素后的数组长度（该方法会改变原数组）

  • 可以添加多条数据，中间用逗号分开

  • .pop() 用于删除数组的最后一个元素，并且返回被删除的元素（该方法会改变原数组）

  • .shift() 用于删除数组的第一个元素, 返回的是被删除的元素

  //可以采用以下方法清空数组
  while(item=array.shift());
  

  • .unshift() 向数组头部添加一个元素，可以添加多个，返回添加完新元素的数组长度

  • .join("分隔符",…,"分隔符") 以指定参数作为分隔符，将所有数组成员连接为一个字符串返回，如果不提供参数，默认用逗号分隔。

    • 如果数组成员是undefined或null或空位，则会返回一个空字符串
    • join和split可以实现数组和字符串的相互转换(数组 arr ;字符串 str)

      //将数组转为字符串
      str = arr.join("");
      

      //将字符串转换为数组
      arr = str.split("");
      

  • .concat()用于多个数组的合并，将新数组的成员添加到原数组成员的后部，然后返回一个新数组，原数组不变。

    • 数组1.concat(数组2,…,数组n)

  • .reverse() 用于颠倒排列的数组元素，返回改变后的数组，该方法将改变原数组。

    // 字符串反转排列
    str.split("").reverse().join("");
    

  • .indexOf() 返回给定元素在数组中第一次出现的位置（由0开始），没有则返回-1

    • 可以接受两个参数，第二个参数为开始搜索的位置

函数

• 函数声明：函数的定义、调用和传参

  • function 命令： function命令声明的代码区块，就是一个函数。

    function 函数名(参数){
      函数体；
    }
    

• 函数名的提升：函数名作用域和提升的规则

  • Javascript引擎将函数名视同变量名，因此在声明函数时，整个函数会像变量声明一样被提升到代码头部。

对象

• 是一组键值对 key-value 的集合， 是一种无序的复合数据集合。
• 每一个键名被称为属性，键值可以是任何类型，若键值为函数则把这个键值对应的属性称为方法。
• JavaScript对象：对象的创建、属性和方法的访问

  • Math 对象

    • js原生对象，用于提供各种数学功能

    Math.abs(num)   //取绝对值
    
    Math.max(1,2,3) //3 如果参数为空返回- infinity
    
    Math.min(1,2,3) //1 如果参数为空返回infinity
    
    Math.floor(num) //向下取整
    
    Math.ceil(num) //向上取整
    
    Math.random()  //取随机数（0<=random<1) 返回0到1之间的一个伪随机数
    

  • Date 对象

    • js原生时间库，以 1970年1月1日00:00:00 作为时间的零点，可以表示的时间范围是前后各1亿天（单位是毫秒 ms）

    • 时间戳:格林威治时间起至现在的总秒数

    • 格林威治时间: 1970年1月1日00:00:00

    • 北京时间: 1970年1月1日08:00:00

    • 格林威治和北京时间就是时区的不同

      Date.now(): 返回当前时间距离时间零点的毫秒数
      

    • Date中的 get 方法：获取实例对象某方面的值

      getTime(): 返回距格林威治时间的毫秒数
      
      getDate():返回对应每月的几号
      
      getDay():返回星期几（星期日为0，星期一为1，….）
      
      getYear():返回距离1900年的年数
      
      getFullYear():返回四位的年份
      
      getMonth():返回月份（0表示1月）
      
      getHours():返回小时（0-23）
      
      getMilliseconds():返回毫秒（0-999）
      
      getMinutes():返回分钟（0-59）
      
      getSeconds():返回秒（0-59）