js基础

js初体验

• 轻量级脚本编程语言
• js作用：与用户交流互动 简称交互

js引入方式

• 内嵌式：demo学习阶段
• 外链式：工作使用
• 行内：一般不用

js注释

// ctrl+/ 单行注释 ，一般做简单的说明 说明；

/* ctrl+shift+/  多行注释
可以回车
写很多的注释
函数、功能：介绍用多行注释；
*/

js输入输出

//输入信息(带有引导信息) 小括号内用单引号或双引号，只能用一种
prompt("请输入***");

//输出
alert("这是个弹窗");//警告，不点击后面的代码不会执行
console.log("控制台输出");//调试用  控制台输出
	//可以输出字符串和数字
	//可以多个输出，用,隔开
document.write("<h1>HTML</h1>");//在HTML页面输出  可识别html标签

js变量

定义变量

• var a=10;

• 语法规则：关键字 var 变量名

• =：赋值运算符，规则：把右侧的值存入左侧的变量里

命名

• 范围：字母、数字、下划线、$符号，不能数字开头；
• 不能使用关键字和保留字；
• 市场上一般用驼峰命名法(第二个单词开头大写)；
  • userName
• 根据公司需要，变量用英文

js数据类型

5种数据类型

• number 数字
  • 阿拉伯数字
  • NaN 不是某个数，泛指，不确定
• string 字符串
  • 规则：只要两边有单双引号的一种，这个就是String 类型，就是个字符串；
  • 转译字符：把“ 转译为 \“
• boolean 布尔值
  • true
  • false
• Null
• Undefined
• object 复杂数据类型 对象
• function 复杂数据类型 函数
  • var a; JS 会给默认值；undefined

检查数据类型

var a=10;
var aType = typeof(a);
// var aType = typeof a;
typeof typeof 1;// 结果为string
typeof object//function 构造函数
typeof object()//object

转换数据类型

• 转换为number
  • number()
  • parseInt() 整数
    • 只能传入数字部分在前的字符串，否则为NaN
  • parseFloat() 浮点数
    • 只能传入数字部分在前的字符串，否则为NaN
• 转换为字符串类型
  • 方法内部相当于给你要转的这个数据左右两边加单双引号；
  • string()
  • .tostring()
    • null和undefined不能使用 报错
• 转换为布尔类型
  • Boolean()
    • 转false情况
      • 空字符串：“”
      • 数字：0、NaN；
      • null、undefined
      • false

操作符

算术操作符

• 常规需要number类型进行运算
• 规则：字符串遇见+使临近的其他类型 隐式转化为字符串 进行拼接（隐式转化：我们看不到的转化 但转化已经发生）
• -*/%计算中 有一个是数字类型 非数字类型的隐式转换为数字类型 隐式转换默认为number();
• 操作符
  • ±*/
  • %求余
  • ++自增
    • 规则：如果遇见++写在a的后面，先把自己的数推到位置上，在进行a++运算（运算后结果不推到位置上）++a 先自增 后运算
    • 规则：如果遇见++写在a前面，++a先算，计算后的结果，再往位置上提供数据；a++ 先运算 后自增
  • –自减

比较运算符

• 常规：两边都需要是number类型
• 操作符
  • < > >= <=
• 非常规操作：规则：非Number类型要和Number类型比较的话，非Number类型就要隐式转换为Number类型
• ==
  • 如果两边的数据类型不同，非Number类型转Number类型，看值是否相同；
  • 如果两边的数据类型相同，看值是否相等；
• === (严格，没有隐式转化)
  • 直接先看数据类型，如果数据类型不同，直接返回false;
  • 如果两边的数据类型相同，看值是否相等；

逻辑运算符

• && 且 全部满足
  • 两个条件返回布尔值 true或者false 都满足则返回最后成立的结果 一个不成立 后续不执行 直接返回不成立的结果
• || 或
  • 只要满足一个条件即可 返回：满足条件的结果 隐式转换为布尔值 但只进行比较 不进行返回 两个都满足 则返回最后一个
• ! 取反
  • !a

赋值运算符

• = 赋值 把右边的值赋值给左边的变量
• = %= *= /= += 简写

操作符优先级

• 第一优先级()
• 第二优先级 ++ – ！
• 第三优先级 * / %
• 第四优先级 + -
• 第五优先级 > >= < <=
• 第六优先级 == != === !==
• 第七优先级 &&
• 第八优先级 ||
• 第九优先级 = += -+ *= /= %=

流程控制-三个名词

• 表达式：有返回结果
  • 在浏览器console后台可以直接敲JS ，回车返回的就是该表达式的结果；
• 语句：升级版表达式
• 结构：
  • 分支：不同的情况，走不同的分支；
  • 循环：重复 有规律的变化;

分支

if else

• 作用：不同情况，走不同的分支；
• 特点：一组分支，只要进入其中一个分支，其他分支都不会执行
• ()：条件表达式，有个结果返回，if分支需要Boolean值，(返回的不是Boolean值，隐式转化)
• 返回的是true 执行{ js代码 }；返回false，不执行
• 多个分支情况，叫一组分支，只会执行一个分支；
• 两组分支：每组都会去过一次（每组的条件表达式进行判断）；
• 每个if else都相当于一个局部作用域

switch-case

• 场景：变量与多个固定值进行===比较判断

• 注意：(非常规操作) case里面的break不是必须的，但是如果没有break，会继续往下执行，直到遇到下一个break；

• ：不能省略

• break当前情况的结束

• defaule 所有情况都不满足时，执行default

  // switch (key) {
  //   case value:
  //     // JS代码；
  //     break;
  
  //   default:
  //     break;
  // }
  

三元表达式

if else 简写，有返回值

• 表达式1 ? 表达式2 : 表达式3;（三元表达式可以相互嵌套，如表达式2可以嵌套三元表达式）
• 如果表达式1 执行结果为true。执行表达式2，把表达式2的结果作为整个三元表达式的结果进行返回；
• max = a > b ? a : b;

顺序

循环

while

• 作用：有规律的变化，循环：重复；

• (condition)：条件表达式，返回Boolean值；不是个Boolean值，隐式转化为Boolean；

• 特点：条件表达式返回一直true，循环体每次到要执行；死循环；

• 语法：

  while (1 == 1) {
  //循环体；
  alert(“这是个病毒”);
  }

for循环

• ()：三个表达式；

• 先执行 初始化表达式 var num = 1; 在整个循环里面，只执行一次；

• 进入 条件表达式: num<=100;

• 返回true ,执行循环体； 返回fasle ,终止循环；

• 执行完循环体以后，才执行自增表达式: num++;

• 语法：

  for (var num = 1; num <= 3; num++) {
  // 循环体
  console.log(num);
  }

do while

• 条件表达式：位置上需要一个Boolean值，若不是Boolean，会隐式转化；

• 至少会执行一次；

• 语法：

  do {
  // 循环体
  alert(1)
  } while (false);

• while、do-while 循环不易看出循环的次数，一般用于未知次数的循环

• for循环明显看出循环的次数，一般用于已知次数的循环；使用最多是for；

• 执行特点：

  • while、for循环可能一次循环都不会执行
  • do-while 循环至少执行一次；

break

• 终止 当前 for 整体；

continue

• 作用：跳过 当次 循环，意味着写在 continue 本次后面的代码，都不会执行了；
• continue：本次不用执行了，继续往下一次执行；

数组

• 数据类型：有长度的数据集合；为了更好的管理数据；
• 索引：位置，下标，从0开始，能够通过索引获取或设置数组中的数据
• 声明：
  • 字面量声明：var arr=[];
  • 构造函数：var arr=new array();
• 数组方法
  • arr.concat(); 数组拼接
  • 字符串.split(分隔符)

遍历数组

• 数组的核心就是索引，有位置就能拿到数据
• for循环遍历数组
• 最大的索引比长度少1，因为索引是从0开始的

函数

• 作用：复用(将重复出现的代码封装起来，在需要的地方进行调用)
• 语法：
  • 声明：function 函数名 ( 形参 ) { }
  • 调用：函数名();

参数

• 把不同的主角传入同一个故事
• 定义：参数是函数内部的变量
• 内部的变量，参数，只能在函数内部使用
• 形参：内部定义的变量，只能在内部使用，和外面没有关系，外面的数据需要给内部加工，就配置形参
• 实参：外部调用函数的时候，传入的真实数据
• 形参与实参互不影响

arguments

• 参数个数不确定
• js内置的变量，不需要声明，也不需要写在小括号内
• 内部变量，只能在函数内部使用
• arguments把参数都传入值，生成一个伪数组
• 伪数组：和数组很像，但不是数组，有下标，有长度，可遍历

返回值

• 作用：把内部运算的结果，给外面
• 如果函数里面加工完的结果，外面需要，函数内部设置返回值 return 数据；
• 外面需要找个变量接收
• 函数内部出现return，return下面的代码不执行
• return后面没有任何数据或者变量，默认返回undefined
• 没有return，函数没有返回值，执行函数，默认返回undefined

函数表达式

函数表达式

• 函数表达式是另外一种声明的方式
• 语法：
  • var fn=funvtion () {}

匿名函数

• 函数没有名字
• 不能单独使用
• 使用情况
  • 函数表达式
  • 自调用(自执行)函数

回调函数

• 传入的是函数，这个被传入的函数(参数)就叫做回调函数

• 语法

  function fn(a) {
  a();
  }

  function demo() {
    console.log("我是demo内的代码");
  }
  
  fn(demo);
  

作用域

• 作用域：变量、函数生效的范围
• 全局作用域：在script里声明的变量，可以在任何位置使用，包括局部作用域
• 局部作用域：函数内部声明的变量，只能在函数内部，外面不能访问
  • 规则：只能在函数内部使用

预解析

• 预解析，也叫变量提升，会把声明的变量和函数提升到当前作用域的最顶端，不执行，只是预解析，全部解析完毕，执行代码
• 注意：当前作用域是全局还是局部

作用域链

• 局部变量的寻找
  • 规则：现在当前自己的作用域中找有没有声明的变量，如果没有往上层作用域找，如果上层作用域也没有该变量，报错

对象

声明

• JS：万物皆对象；

• 对象：属性和方法的集合体；

• 语法：

  // 1.字面量
  var obj = {};
  console.log(obj);

  // 2.构造函数
  var obj_1 = new Object();
  console.log(obj_1);
  

添加属性

• 点方式添加：
  • 形式：对象.属性名 = 属性值
    • obj.name = “狗蛋”;
  • 形式：对象.方法名 = 匿名函数；
    • obj.say = function() {);
• 初始化是添加
  • 格式：名字：属性值 或者 匿名函数；
    • var obj = {
      name: “zhangsan”}
  • 注意:每组后面必须有逗号，最后一组可以不加；
• 键值对
  • 键：属性名或者方法名；
  • 值：属性值或匿名函数；
  • 格式：
    • obj[“name”] = “狗蛋”;
      • 属性名和方法名 必须是字符串
    • obj[a] = “狗蛋”
      • a为变量

获取及遍历属性

获取

• 点方式获取
  • obj.key
• 键值对 [] 方式
  • obj[“a”]

调用

• 调用方法
  • obj.key() 注意：考虑需不需要传入参数
• 调用属性
  • obj.key

遍历

• for in

• key：代表每一次循环的 名字（属性名和方法名）

• object: 遍历循环的对象 obj

• 语法：

  for (var key in obj) {
  // obj.key 从obj上找叫key,返回是undefined；
  console.log(key, obj[key]);
  }

• 简单类型与复杂类型

  • 内存上有两种空间，栈 堆； 只要var 变量，就要在栈上 开一个格子（栈空间）
  • 简单数据类型只能存入 栈上；
  • 复杂数据类型只能存入 堆上；

内置对象Date

• 创建方法：var date=new Date();
  • 构造函数
• date.getFullYear();年
• date.getMonth();月（从0开始 需要+1）
• date.getDate();日期
• date.getDay();星期（从星期日到星期六）
• date.getHours();
• date.getMinutes();
• date.getSeconds();
• date.getMilliseconds( );
• 时间戳
  • date.valueOf( );
  • date.getTime( );
  • 1*date;
  • Date.now( ); 多一毫秒
  • id 时间戳*随机数

比时间 比的是时间戳的大小 从1970年 1月1日开始计算

• 字符串拼接
  • var time = $nian-${yue}-${ri} $shi:${fen}😒{miao}

内置对象Match

• 不需要创建
• Math.random() 随机数
• Math.cfloor() 向下取整
• Math.ceil() 向上取整
• Math.round() 四舍五入
• Math.abs( );
• Math.max( ); /Math.min( );

案例 document.write(

)

• 获取随机数 封装

Array

• push 推
• pop 删除（后面）
• unshift 添加（前面）
• shift 删除（前面）
• splice( ) 对任何位置的增删除改
  • 删除：两个参数 第一个参数表示删除的开始索引 第二个参数表示需要删除的个数
  • 添加： 前面两个参数 一个表示开始索引 第二个表示需要删除的个数 后面的是添加的数组项 （除了0是从前面开始 其它都从后面加）
• join（数组变成字符串） / split（字符串变成数组）
• slice (截取) / concat (拼接）
• for eash 自调用函数 item index arrr
• filter 过滤
• indexOf 找字符串的位置 返回索引
• findindex 找符合条件的第一个字符串的 返回该字符串的索引

Object

• 循环 for in

String

• 不可变性 不可删除 游离
• split / join
• indexOf / lastIndexOf
• charAt( ) 指位置的字符串
• charCodeAt 获取指定字符的索引
• concat
• substring
• slice 同上
• substr
  // 这个方法用于获取字符串中的部分字符
  var str = ‘我爱中华人民共和国’;
  var res = str.substr(2,2);// 索引2开始，总共获取2个字符，第二个参数为个数