JavaScript学习（廖雪峰+黑马笔记）

前言

好久没来更新了，好不容易有了几天的闲暇时间，就学习了一下前端的知识，毕竟技多不压身，希望自己以后也有机会可以自己学习提高，而不是被导师牵着鼻子走。这篇是根据廖雪峰的JavaScript教程和黑马的前端视频整理的JavaScript基础语法部分，廖雪峰指路

基本

• 语法与java类似，都是 ； 结尾，用 {} 表示代码块

• 行注释与java不同，采用双斜线// ，块注释采用/**/

• 注意相等运算符要用 ===，它不会自动转换数据类型，如果数据类型不一致返回false，数据类型一致再比较

• NaN这个特殊的Number与所有其他值都不相等，包括它自己，唯一能判断NaN的方法是通过isNaN()函数，isNaN()也可以用来判断非数字，如果是数字返回false，如果不是数字返回true

  NaN == NaN //false
  isNaN（NaN）//true
  isNaN（12）//false
  isNaN（'猪'）//true
  

• 要显示变量内容，可以用 console.log()，打开chrome的控制台即可看到结果，而使用alert()则是网页弹出提示框的形式

• 变量连接

  var name = '小明';
  var age = 20;
  var message = `你好, ${name}, 你今年${age}岁了!`;
  alert(message);
  

• 字符串用toUpperCase()全变大写，用toLowerCase()全变小写，indexOf()搜索指定字符串出现的位置，substring()返回指定索引区间的字串

  var s = 'HelloWorld';
  s.toUpperCase();//返回 HELLOWORLD
  s.toLowerCase();//返回helloworld
  s.indexOf(world);//返回6
  s.indexOf(WOrld);//未找到返回-1
  s.substring(0,5);//从索引0开始到5（不包括5），返回hello
  s.substring(6);//从索引6开始到结束，返回world
  

• JavaScript的Array可以包含任意数据类型，与python的list类似，获取长度使用length属性，注意：给length赋值会改变Array的长度，通过索引赋值时索引超过范围也会引起Array长度的变化

  var arr = [1, 2, 3];
  arr.length; // 3
  arr.length = 6;
  arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
  arr.length = 2;
  arr; // arr变为[1, 2]
  
  var arr = [1, 2, 3];
  arr[5] = 'x';
  arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
  

• 使用slice()截取Array的部分元素，返回一个新的Array，若不传入参数则可以实现复制Array

  var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
  arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
  
  var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  var aCopy = arr.slice();
  aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  aCopy === arr; // false
  

• 转化为字符串类型

  方式	说明	案例
  toString()	转成字符串	var num = 1;alert(num.toString())
  String()强制转换	转成字符串	var num = 1;alert(String(num))
  加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1;alert(num+‘ ’)

• 转换为数字型

  方式	说明	案例
  parseInt(string)函数	将string型转换为整数数值型	parseInt(‘78’)
  parseFloat(string)函数	将string型转换为浮点数数值型	parseFloat(‘78.21’)
  Number()强制转换	将string型转换为数值型	Number(‘12’)
  js隐式转换	利用算数运算符隐式转换为数值型	‘12’-0

• 转换为布尔型

  方式	说明	案例
  Boolean()函数	其他类型转换为布尔型	Boolean(‘0’)

• push()向Array末尾添加若干元素，pop()将Array最后一个元素删除，unshift()往Array头部添加若干元素，shift()删除Array第一个元素，sort()对Array排序，reverse()将Array翻转，splice()从指定的索引开始删除若干元素，然后再从该位置添加若干元素，concat()把当前Array和另一个Array拼接返回一个新的Array，join()把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

  var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
  // 从索引2开始删除3个元素,然后再添加两个元素:
  arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
  arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  // 只删除,不添加:
  arr.splice(2, 2); // ['Google', 'Facebook']
  arr; // ['Microsoft', 'Apple', 'Oracle']
  // 只添加,不删除:
  arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
  arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  var arr = ['A', 'B', 'C', 1, 2, 3];
  arr.join('-'); // 'A-B-C-1-2-3'
  

• JavaScript允许给函数传入多于形参数量的实参，多的实参丢弃处理，函数若没有return语句则函数返回undefined，由于JavaScript可以传递进入多个参数，所以在函数使用过程中不确定究竟传入了多少参数，可以使用 Arguments 来获取，Arguments对象中存储了传递的所有实参。

  function fun1(){
      console.log(arguments);//里面存储了所有的实参变量，是一个伪数组的形式，具有length属性
      //不能使用push和pop方法
      console.log(arguments.length);
      console.log(arguments[0]);
  }
  fun1(1,2,3);     
  

• JavaScript解析器在运行JavaScript代码时分两步：预解析和代码执行。预解析指js引擎会把js里面所有的var和function提升到当前作用域的最前面，代码执行指按照代码书写顺序从上往下执行。预解析分为变量预解析（变量提升）和函数预解析（函数提升）。变量提升就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。

  //根据上面的解析可以解释以下四种现象。
  // 1问
  console.log(num);//num is not defined
  //2问
  console.log(num1);//undefined
  var num1 = 10;
  //3问
  fn();//正常运行
  function fn(){
      console.log(11);
  }
  //4问
  fun();//报错
  var fun = function(){
      console.log(22);
  }
  

• 对象的创建可以采用字面量的方法来创建，调用属性或方法可以有两种方法：（1）对象.属性（2）对象[‘属性’]。也可以采用new Object()的方法来创建对象。

• 可以采用构造函数的方法来创建对象

  function 构造函数名(){
    this.属性 = 值,
    this.方法 = function(){}
  }
  //调用
  new 构造函数名()；
  

• 遍历对象的属性，可以采用for…in…的形式

  var obj = {
    uname: '丛丽静',
    age: 20,
    sex: '女'
  }
  //遍历开始
  for (var k in obj){
    console.log(k);//输出属性名
    console.log(obj[k]);//输出属性值
  }
  

• JavaScript中对象分为三类：自定义对象、内置对象、浏览器对象。内置对象是指JS语言自带的对象，这些对象供开发者使用并提供了一些基本功能，常见的又Math,Date,Array,String等

• Date对象常用方法如下

  var date = new Date();
  console.log(date.getFullYear());//返回当前日期的年
  console.log(date.getMonth()+1);//返回当前日期的月(0-11)
  console.log(date.getDate());//返回当前日期的日
  console.log(date.getDay());//返回当前日期的星期（星期1-6正常，星期天返回0）
  var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
  console.log(arr[date.getDay()]);
  console.log(date.getHours());//小时
  console.log(date.getMinutes());//分钟
  console.log(date.getSeconds());//秒