js基础语法

1.初识javascript

JS的组成:
ECMAScript: javascript语法
DOM: 页面文档对象模型(API)
BOM: 浏览器对象模型(API)

2.变量

2.1 声明变量 赋值 初始化

var age;       //声明变量
age = 10;      //赋值
var age = 10;  //初始化

2.2 变量语法 更新值(同一个变量名赋值，以最后一个为准)

 age = 18;  
 var age = 18,myname = 'hu';//声明多个变量

2.3 声明变量特殊情况

  只声明 不赋值            undefined
  不声明 不赋值 直接用     报错
  不声明 只赋值            默认可以 不提倡 

3.数据类型

3.1 变量的数据类型

JS的变量类型只有在程序运行时，根据等号右边的值来确定，且变量的数据类型是可以改变的。

3.2 数据类型的分类

简单数据类型：
  Number(蓝色)：数字型，默认0         isNaN(age) 判断是不是非数字。是数字false, 反之true
  String(黑色)：字符串型，默认""
  Boolean(深蓝)：布尔值，默认false
  Undefined(浅灰)：未定义，默认undefined
  Null(浅灰)：空值，默认null
复杂是数据类型：
  Object：

3.3 获取数据类型typeof

  typeof age

3.4 数据类型的转换

转换为字符串型：
  num.toString()
  String(num)，强制转换
  num + 字符串，也称隐式转换
转换为数字型(重点)：
  parseInt(string)：重点,取整（不四舍五入）,能去除px等单位
  parseFloat(string)：转换为浮点型,重点,,能去除px等单位
  Number(string)：强制转换
  '-''*''/'运算：隐式转换  '12' - 10
转换为布尔型：
  Boolean()：代表否定、空的值会被转换为false,
  如 '', NaN, 0, null, undefined;其他转换为true;

4.JavaScript运算符

4.1 算数运算符

+ 、 - 、* 、/ 、 %(取余or取模);

4.2 递增(递减)运算符

前置递增(递减)运算符 ++num(--num)
  先加加, 后返回值
后置递增(递减)运算符 num++(num--)
  先返回值, 后加加

4.3 比较运算符

> < >= <= !=  !==(不全等)
==(值相等即可, 会把字符串转化为数字) 
===(全等 要求:值与数据类型 完全一致) 

4.4 逻辑运算符

&& :逻辑与 
|| :逻辑或
!  :逻辑非 
中断:如果忘了就去搜搜。(返回表达式1还是表达式2, 
    中断了后续表达式就不继续进行了)
4.5 运算符优先级

5. 流程控制

5.1 顺序结构
5.2 分支结构(同C语言)

   (1) if语句
   (2) if else
   (3) if    else if     else
   (4) switch  case  default
   switch(表达式){
      case value1:
          执行语句1;
          break;
      case value2:
          执行语句2;
          break;
      ...
      default:
          最后的语句;
   }

5.3 三元运算符

条件表达式 ？表达式1 : 表达式2
条件表达式true: 返回表达式1
条件表达式false: 返回表达式2

5.4 循环((同C语言))

(1) for循环
(2) while循环
(3) do while循环
(4) continue 跳出本次循环   不执行此次语句,直接i++
(5) break 跳出整个循环   跳出一层for

6. 数组

6.1 创建数组

(1) 利用new创建数组
   var arr = new Array()//空数组
(2) 利用数组字面量创建数组
   var arr =  []     //空数组
   var arr = [1, 2, 3, 'hujinlong'] //数组的初始化,元素可以是任意类型

6.2 获取数组元素

arr[0]

6.3 遍历数组(同C语言)

for循环

6.4 数组的长度

arr.length

6.5 新增数组元素

原arr.length = 3
(1) 通过修改数组length长度
   arr.length = 5;
(2) 通过修改数组索引新增数组元素(追加)
   arr[3] = 36;
(3) 切记不要直接给数组名直接赋值，否则数组清空，只有一个元素
   例如：arr = 'hu';//只有 'hu' 了

6.6 删除数组元素’

也叫过滤数组，使用一个新数组，遍历存入

7. 函数

7.1 声明函数

(1) 命名函数
  function 函数名(参数){     参数可以为空
   函数体
}

function sum(m , n){
  var sum = 0;
  for(i = m; i <= n; i++){
    sum = sum + i;
  }
}

(2) 匿名函数
   var fun = function(){
     函数体;
   }
   调用：fun();

7.2 调用函数

函数名(参数);  无参数时, ()不能省
sum(10,50);

7.3 函数的返回值

return value;

7.4 arguments的使用(当数组用,注意又有点不同)

当我们不确定有多少个参数传递的时候，可以用arguments来获取
当前函数的一个内置对象，arguments对象中存储了传递的所有实参，只有函数有
返回值是一个伪数组，并不是真正意义上的数组
(1) 具有length属性
(2) 按照索引的方式来存储,可以遍历
(3) 没有真正数组的一些方法 例如：pop() push()

8.预解析

8.1 js引擎运行js 分为两步： 预解析 代码执行

(1) 预解析 
    js引擎会把js 里面的所有var还有function提升到当前作用域的最前面
    代码执行：按照代码书写的顺序从上往下执行
    
(2) 预解析分为:
   变量预解析(变量提升)：就是把所有的变量声明提升到当前作用域最前面
                      不提升赋值操作;
   函数预解析(函数提升)：就是函数声明提升到最前面;

9.对象

9.1 对象是由属性和方法组成的

属性：事物的特征
方法：事物的行为

9.2 创建对象的三种方式

(1) 利用字面量创建对象
    var obj = {};//空对象
    var obj = {
      name = '张三丰',
      age = 18,
      sex = '男',
      sayHai: function(){
        console.log('hi');
      }
    }
    调用对象属性：obj.name    obj['name']
    调用对象行为：obj.sayHai()
(2) 利用new object创建对象
    var obj = new Object();
    obj.name = '张三丰';
    obj.sayHai = function(){
      console.log('hi');
    }
(3) 利用构造函数创建对象
   a. 构造函数
      就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面（复用）
   b. 语法格式：
     声明：
        function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){

            };
        }
     使用：
       var obj = new 构造函数名();//实例化

9.3 遍历对象

//for in遍历对象
for(k in obj){ //变量k只是提取属性名，也即key,提取属性值，还需要obj.k或obj[k]
  console.log(k)//属性名
  console.log(obj[k])//属性值
}

9.4 变量 属性 函数 方法的区别

(1) 变量 属性
   相同点：都是存储数据的
   不同点：变量 单独声明并赋值 使用时直接写变量名 单独存在
          属性 在对象里面的不需要声明 使用时必须是 对象名.属性
(2) 函数 方法
   相同点；都是实现某种功能 做某件事
   不同点：函数单独声明 并且调用 函数名()
          方法 在对象里面 调用的时候 对象.方法()

10.内置对象

此部分要学会自己查阅MDN/W3C文档，并会使用
10.1 Math

(1) 最大值 Math.max()
(2) 向下取整 Math.floor()
(3) 向上取整 Math.ceil()
(4) 四舍五入 Math.round() .5不入
(5) 绝对值 Math.abs()
(6) 随机数 Math.random()

10.2 Date 构造函数，需要new

(1) var date = new Date();
  无参数时，默认当前时间传建一个对象
  参数格式：
    数字型 2019 10 1或者 字符串'2019-10-1 8:8:8'
    注意：数字型月份会+1
(2) 日期格式化
  获取年月日啥的，再拼接
(3) 获取总的毫秒数(时间戳) 1970.1.1
   date.valueOf();
   date.getTime();
   最常用的写法
    var date1 = +new Date(time);
 h5新增(注意兼容性)
    Date.now()

10.3 Array 构造函数，需要new

(1) 数组创建的两种方式
   var arr = [];
   var arr = new Array(n);一个参数，表示长度
   var arr = new Array(m,n);多个参数表示存入数据   [m,n]
(2) 检测是否为数组
  a.
   instanceof 运算符 他可以用来检测是否为数组
   var arr = [];
   arr instanceof Array;
  b. 
   Array.isArray(arr);
(3) 添加数组元素的方法(修改原数组)
  push(参数1...) 末尾添加一个或多个元素 并返回新的长度
  unshift(参数1...) 开头添加一个或多个元素 并返回新的长度
  
(4) 删除数组元素的方法(修改原数组)
  pop() 删除数组最后一个元素，数组长度-1，返回删除的元素值
  shift() 删除数组第一个元素，数组长度-1，返回删除的元素值
  
(5) 数组排序(修改原数组)
  reverse() 颠倒数组中的元素的顺序，无参数，返回新数组
  sort() 对数组进行排序，返回新数组
  注意有固定的写法
  var arr = [5,77,6,1];
  arr.sort(function(a, b){
    return a - b;//升序
    return b - a;//降序
  })
  
(6) 数组索引方法
  indexOf(参数) 数组中查询给定元素的第一个索引，不存在返回-1
  lastindexOf(参数) 数组中的最后一个索引，不存在返回-1
  
(7) 数组转化为字符串
 toString() 用逗号隔开
 join(分隔符) 默认用逗号隔开,但可自定义分隔符
 
(8) 连接两个数组，截取数组，删除数组局部
 concat() 连接两个数组，返回一个新数组
 slice(begin，end) 截取数组局部，返回被截取的部分，[begin,end),原数组不改变
 splice(第几个元素开始，删除个数) 返回删除的部分 原数组会受到影响

10.4 String(不可变)

(1) 基本包装类型
   将简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法,
   js提供了三个特殊的引用类型:String 、 Number 、Boolean;
   
(2) 根据字符返回索引
  indexOf(要查找的字符串[，起始位置])
  lastindexOf  
  
(3) 根据索引返回字符
  charAt(索引号) 返回字符
  charCodeAt(index) 返回相应索引号的字符ASCLL码 目的：判断用户按下了哪个键
  str[index] h5新增
  
(4) 连接与截取
  concat(str1 ,str2 ,str...)连接多个字符串
  substr(start, length)截取
  slice(start, end)截取，不包含end
  substring(start,end)截取，不包含end,不接受负值
  
(5) 替换字符串以及转化为数组
  replace(被替换的字符, 替换成啥字符);一次只能替换一个字符
  split(分隔符);
  
(6) toUpperCase() 全部转换为大写
    toLowerCase() 全部转化为小写

11.简单数据类型与复杂数据类型的详细讲解

11.1 简单数据类型与复杂数据类型

 简单数据类型又叫基本数据类型或者值数据类型, 复杂数据类型又叫引用数据类型
 值数据类型：存储时变量存储的是值本身
 引用数据类型：存储时变量存储的是地址，通过new关键字创建的对象

11.2 堆与栈

 简单数据类型放在栈里
 复杂数据类型放在堆里