JS基础知识（上）（变量，条件判断语句，循环语句,函数，对象，数组）

JS基础知识（上）（变量，条件判断语句，循环语句,函数，对象，数组）

• 引入js文件使用script标签，src属性用于书写引用的地址
• javaScript会把页面上所有的元素标签看成对象
  基于对象和事件驱动且相对安全的客户端使用的脚本语言。
  使用javaScript的方式： 确定对象，确定属性、确定事件、用js实现功能

变量

• 变量的作用：存储数据（数据分为两种：固定数据和临时数据）
  
  • 固定数据：保存在硬盘中的数据
  • 临时数据：保存在内存中的数据
• 变量的使用：数据是保存在内存中的某一区域的，每个区域对应一个内存地址，我们想要使用某个区域中的数据时，就需要找到指定的地址，很不方便，
  所有可以使用变量，变量实际上保存的是某个数据的地址，我们使用变量实际上就是使用变量中保存的地址当中的数据。
• 变量的声明：var let const 变量 的类型不定，可变
• 变量的特点：1、一个变量只能存储一个数 2、变量存储的数据是可以改变的
• 变量的命名规则：
  
  1. 不能使用关键字和保留字
  2. 开头可以使用_$英文字母
  3. 除了开头以外可以使用数字
  4. 不能包含空格
  5. 严格区分大小写
• 变量的赋值和初始化：
  
  • 初始化：在变量声明同时进行赋值 var num = 100;
    赋值： var num = 100; num = 10; 由于js是弱类型，保存数值型的变量也可以保存其他类型数据。但是我们不推荐这样做，可能会对使用造成不良影响。
• 变量的类型：
  
  • 基本数据类型：number boolean null string undefined
    
    • string:使用成对的双引号或者单引号进行包裹，任何字符串的长度都可以通过访问length属性获得
    • number：0-9 0.1 NAN(not a number 不是一个数据类型) isNAN(是不是不是数，如果判断的数据类型不是数据则返回true)
      Infinity 表示无穷大，超出了js能承受的最大值 -Infinity 表示无穷小
    • boolean: true or false
    • undefined: defined 未定义
    • 出现undefined的情况：
      
      1. 已声明未赋值的变量
      2. 获取对象不存在的属性
      3. 无返回值的函数的执行结果
      4. 函数的参数没有传入
    • null:空
    • 数据类型判断 typeof
  • 复杂数据类型（引用数据类型） object
  • 基本数据类型保存在栈中，复杂数据类型保存在堆中，对于复杂的数据类型可为其添加属性和方法，也可删除其属性和方法。基本数据类型的变量 直接存储的数据本身 而引用数据类型变量存放的是对象的内存地址。
• 变量的类型转换
  
  • 转字符串
  • 强制转换： 变量.toString() String().变量 注：undefined和null不支持.toString()的转法
  • 隐式转换： +” （通过任意类型+任意字符串操作可以将其他类型转换为字符串类型 ，
    在使用+操作的时候为了不改变数据的原有内容，使用空字符串 空字符串中不能有任何内容）
  • 基本类型值的不可变性 ：通过类型转换或者重新赋值都无法修改基本类型的原有值。
  • 转数字
  • 强制转换：Number()只能转换数值型的字符串 parseIt()可以转换前半部分为数字的字符串，转换结果为整数 parseFloat()可以为小数
  • 隐式转换：-*/% 可以进行转换
  • 转bool
  • 强制转换：Boolean() 为false的情况有0 undefined null “” NaN 为true的情况有有值的字符串和有值的数字
  • 隐式转换：!!
  • undefined和null 只有一个值，不需要转换
• 运算符：
  
  • 算数运算符：+-*/%
  • 一元运算符：一元指的是操作的个数+ -
    
    • 前置和后置不同：前置是先自增（减）然后在进行计算，后置是先进行计算再自增（减）
  • 逻辑运算符：&& || ！ 且或非
    
    • && 且：两个操作数都是true
      true && true –> true
      true && false –>false
      false && true –> false
      false && false –> false
    • || 或：有一个true则true
      true || true –> true
      true || false –> true
      false || true –> true
      false || false –> false
    • ！ 非：取反
  • 比较运算符：< > <= >= != !== 返回结果都是bool类型
  • 赋值运算符：= += -= *= /= %=
  • 相等运算符： ==（相等） ===（全等）
  • 三元运算符：bool表达式？表达式1：表达式2； bool表达式为真，执行表达式1否则执行表达式二
  • 运算符的优先级：
  • 连接符：“+”除了求和之外还有连接作用
    例：var a = 6; var s = “hello” alert(s+a+a); –>显示的是hello66 alert(a+a+s); –>显示的是12hello
    注意： 字符串类型和任何类型数据相连接，最终都是字符串。

条件判断语句

• if(){} if(){} else{} if(){} elseif(){} else{}
• switch case
  比较时是全等比較
switch(传入值){
case 值:
执行内部代码；
break;
case 值:
执行内部代码；
break;
default:
所有人都没执行，执行我}"
• 通常使用ifelse进行范围比较，switch case 进行单值比较

循环语句:

for(1循环变量初始化; 2循环条件; 4循环变量增减){3循环内的代码}

• break 在循环内表示跳出
  continue表示结束本次循环，进入下一次循环
• while循环和dowhile循环

• for循环和while和do..while可以互换使用的
  while(循环的条件){
  需要重复执行的语句；
  }
  工作原理：先判断条件是否为真，如果条件为真，则执行循环体一次，然后再判断条件是否为真，如果为真则再执行循环体，如此反复，直到条件为假时循环结束，循环结束会继续执行下边的语句。

  do{循环体；
  }while(循环条件);
  工作原理：先执行循环体一次，然后判断条件，如果条件为真则再执行循环体，然后再判断条件，条件为真则再执行循环体，如此反复直到条件为假循环结束。

  • flag标记：
    flag:

for(var = 1;i<=5;i++){
    for(var j=1;j<=5;j++){
        if( j % 2 == 0)
            continue flag;//结束的是外部循环
           break flag;
}
document.write(i);
}

函数

• 就是用来解决相同的功能不用重复写多次的问题，用function来指明定义函数。(具备特定功能的一段独立的代码段)(函数即对象)
• 函数的几种定义方式：
  
  • 匿名函数的声明和使用（函数表达式，又叫函数字面量）(有三种写法)
    
    1. 声明一个匿名函数，直接赋值给某一个事件；
       window.onload=function(){
alert('123')
}
    2. 使用匿名函数表达式。将匿名函数，赋值给一个变量。
       var func=function(){
alert(123);
}
func();
       声明：var func=function(){ }
       调用：func();
       注意：使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！！！（与普通函数的区别）
    3. 自执行函数
       1)可以使用多种运算符开头但一般用！
       ！function(形参列表){}(实参列表)
       2)使用()将函数及函数后的括号包裹
       (function(){}());
       3)使用()值包裹函数值
       (function(){})();
       三种写法特点：
       1)使用！开头，结构清晰，不容易混乱，推荐使用；
       2)能够将匿名函数与调用的()为一个整体，官方推荐使用；
       3)无法表明函数与之后的()的整体性，不推荐使用。
  • 普通函数的声明和使用
    
    1. 函数的声明格式：
       function 函数名(参数1，参数2，.....){
//函数体代码
return 返回值;
}
    2. 函数的调用
       1)直接调用：函数名(参数1的值，参数2的值，……);
       2)事件调用：在HTML标签中，使用事件名=”函数名()”
       
    3. 函数的注意事项：
       1)函数名必须要符合小驼峰法则，首字母小写，之后每隔单词首字母大写；
       2)函数名后面的括号中，可以有参数，也可以没有参数，分别称为有参函数和无参函数；
       3)声明函数时的参数列表，称为形参列表，形式参数。（变量的名字）
       function sayHi(xingcan1,xingcan2){} //xingcan1,xingcan2为形参
调用时 sayHi('haha','heihei'); //haha，heihei为实参
       4)函数的形参列表个数，与实参列表的个数，没有实际关联关系。
       函数参数的个数，取决于实参列表。
       如果实参列表的个数<形参列表，则未赋值的形参，将为undefined。
       5)函数可以有返回值，使用return返回结果
       调用函数时，可以使用一个变量接收函数的返回结果。如果函数没有返回值，则接收的返回值为undefined。
       function func(){
return '哈哈哈哈'
}
var num = func(); //console.log(num) 哈哈哈哈

       6)函数中变量的作用域：
       在函数中使用var声明的变量为局部变量，只能在函数内部访问，不用var声明的变量为全部变量，在函数外面也能访问。函数的形参列表默认为函数的局部变量，只能在函数的内部使用。
       7)函数的声明与函数的调用没用先后之分。即，可以在声明函数前，调用函数。
  • 函数构造法，参数必须加引号(不推荐使用)
    var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5
• 函数的类型
  
  • 检测方式是type of 函数的类型是undefined
  • 函数注释的使用：在函数前输入/**点击回车，可以输入一些跟函数参数返回值相关的标注
• 递归（函数自己调用自己）
  
  • 函数在函数内调用自己，被称为递归

  function fun(){
    cosole.log("今天中午吃什么");
    fun();//在函数内调用自己，循环输出今天中午吃什么（递归）
    }
   fun();//在函数外调用时，输出今天中午吃什么，但使用递归的时候注意不要造成死循环（系统会崩掉）

return 结束函数的执行，直接返回到调用函数的位置
函数之间是可以相互调用的：每个函数都是独立的，平等的，
注意：
1、调用次数不要太多，否则会出现内存溢出现象（内存问题）
2、在使用递归时，一定要有让这个调用结束下来的条件（结束问题）

对象

• 生活中抽象和具体的关系，对象是一个具体的东西，每个对象都有自身的特征（属性）和行为（方法）
• 创建对象方式：var obj= {} 或 var obj=new Object()（单个对象的创建）
• 添加属性和方法通过 对象名.属性名 对象名.方法名

   obj.faceValue = “超高”; 
    方法跟属性的区别在于，方法中保存的是函数。 
    obj.sayHi = function(){ 
    alert(“你好”); 
    }; 

• 创建多个对象的方法：

  • 方法一：构造函数（有new，有this）

    • 在调用构造函数的时候，调用前加new,构造 函数的作用是创建对象，在构造函数内需要做的一件事情就是添加属相和方法，
      使用this,this就是代表创建出来的对象
    • 构造函数的名字，首字母要大写
      

       function Person(name,age){
          this.name=name;
          this.age=age;
          this.sayhi=function(){
              alert("大家号我是"+this.name)
          }
        }
        var wmy=new Person("小明",18);

  • 方法二：对象的字面量形式(最常用)

    • var obj={};对象的字面量，可以直接在{}内添加属性和方法，多个属性之间使用逗号分隔

    var obj={ 
    name:"小明", 
    age:"18", 
    sayhi:function(){} 
    }

• 对象属性的访问方式：obj.name 或 obj[“name”] 效果一样
• 获取对象中所有的值：对象是一种无序的数据存储方式，想要获取对象中的所有值使用for in
  
  • 方法：for… in
    
for(var key in obj){
key 在for in中表示某一个属性名，是字符串格式
obj[key] 表示obj中key属性的属性值
}


var obj={
name:"小明",
age:"18",
sayhi:function(){}
}
for(var k in obj){
console.log(obj[k]);
}

• json数据存储格式
  
var obj = {
“name”:”张三”
};

• 日期对象Date
  
  • var date= new Date()
  • 日期转换成毫秒

var date=+new Date();
var date1=Date.parse("2017-02-10");

• Date常用方法
  
date的方法，不用记
getTime() 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期几 0周日 6周6
getDate() 返回当前月的第几天
getMonth() 返回月份，从0开始
getFullYear() 返回4位的年份 如 2016


数组

• 属于引用类型 在js中已经定义好了这种类型：Array（内部定义了可以存储数据的变量，还有具备某些功能的函数）
• 创建数组方式：
  
  • 使用new创建数组：var arr = new Array();（arr是对象类型）（new可以省略）
    数组特点：
    1、数组的长度是可以改变的
    2、数组中可以存储不同类型数据
    3、在创建数组时new可以省略
  • 使用字面量方式创建数组（最常用）var arr3 =[ ];//空数组

• 数组的常用方法：
  var arr=[1,2,3,4]

  • arr.join()用于把数组中的所有元素放入一个字符串

    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    
    document.write(arr.join())//George,John,Thomas

  • arr.toString()把数组转换成字符串，不更改原数组

    var arr=[1,2,3,4];
    console.log(arr.tostring())//"1,2,3,4";
    console.log(arr.join("-"))//"1-2-3-4"

  • arr.push()可以项数组最后添加一个或多个新项，返回添加后的数组的元素个数。

  • arr.pop()从数组最后删除一个元素，并且返回删除的元素。
  • arr.unshift()从数组前面插入一个或多个元素，注意插入多个的顺序。 返回添加后的数组的元素个数

  • arr.shift()从数组前面删除一个 ，返回删除的元素

      var arr=[1,2,34];
    console.log(arr.push(1,2));//5,返回插入后数组的个数
    console.log(arr.pop());//2返回删除的元素
    console.log(arr.unshift("1", 2));//6返回数组的个数
    console.log(arr.shift());//"1"返回删除的元素

  • arr.reverse()翻转，可以将数组的所有元素翻转，改变原数组

  • arr.sort()排序，改变原数组对字符串排序是按照首字母排序。对数值排序也是按照第一位排序，想要正序或倒叙可以传入函数参数

    var arr=[1,2,34];
    arr.sort()//正序排序
    arr.sort(function(a,b){
        return b-a;
    })//倒序排序
    arr.sort(function(a,b){
        return a-b;
    })//正序排序

  • arr.slice(start,end)拷贝，接受两个参数 两个参数都是索引值，可以从arr中拷贝一部分元素，含start不含end。 返回拷贝的部分，不改变原数组

  • arr.splice(start,len,…)截取，start表示截取的起始位置，len表示要截取多少个元素，后面的所有参数是可选的，表示将后面的参数添加到删除掉的位置。返回删除的元素，改变原数组

  • arr.contact()复制，可以传入多个参数，连接在arr后，返回新数组，不改变原有数组。
    复制数组：arr.concat(); 如果不传参数，也会返回一个和原数组相同的新数组

    var arr1=[1,3,4,6];
    var arr2=[10,3,4,6];
    console.log(arr1.concat(arr2));//arr1和arr2连接
    arr1.concat(1,2);//
    arr1.concat()//相当于arr1的复制。

  • indexOf(参数1，参数2（可选）)

    • 参数1为要寻找的值，参数2可选，为寻找的起始位置。 返回找到的索引值（只能找到一个）。
      如果没找到，返回-1.ie6-ie8的不兼容
  • astIndexOf(参数1，参数2（可选）)
    
    • 使用方式与indexOf相同，不同点为从数组最后开始查找。ie6-ie8不兼容
• 清空数组的三种方式

arr.length = 0; 
arr.splice(0,arr.length); 
arr = [];