JS

1、js简介

JavaScript是一种基于对象的客户端的脚本语言

是一种弱类型的动态脚本语言

弱类型：对数据类型要求不严格，只有当执行到某一句代码的时候，才去确定这个变量里的数据是什么类型

动态语言：就是指在运行过程当中，可以动态地给对象添加属性和方法

js能做什么

• 网页特效
• 数据验证
• 游戏开发
• 与服务器交互
• 服务端开发

js的历史

1995年诞生，专用于客户端数据验证，叫LiveScript

当时Java很火，为了推广，更名Javascript

1996年，微软发布了自己的Javascript，叫JScript

1997年，ECMA组织规定了Javascript的标准，叫ECMAScript，约束了js的语法和功能

2003年，js被大量用于页面广告，被称为“牛皮癣”

2004年，Google公司推出Ajax技术，拯救了Js

2007年，移动端的出现让js更加得到重视

2010年，H5推出，Canvas和Javascript的结合使用，让js功能更加强大

2011年，nodejs的出现，让js前后端通吃

js的组成

ECMAScript 规定了js的语法规范和所具有的功能

DOM（document object model）文档对象模型：就是js操作页面结构的一套工具（方法）

BOM （browser object model）浏览器对象模型 ：操作浏览器部分功能的一套方法

如何使用js

• 内嵌式
• 外联式
• 行内式(了解)

JS语法

1、注释

让js解释器，忽略注释之后的内容

单行注释 //

多行注释 /* 需要注释的内容 */

作用：解释说明，文档注释

2、常用全局函数

• alert() 弹出一个提示框，警告框
• console.log() 在控制台中输出内容
• document.write() 在页面上输出内容

3、变量

什么是变量？简单的理解为：变量是用来存储数据的容器

深刻的理解变量：变量并不是真正保存数据的地方，真正保存数据的地方是内存，内存存在一个内存地址，变量负责保存内存地址，内存地址指向数据

4、变量的声明和赋值

var 变量名;

声明和赋值可以同时进行 var a = "张三";

声明和赋值可以分开：var a; a = "李四";

变量声明是可以一次声明多个: var a,b,c,d; or var c=1,d=2,e=3;

变量是可以重复赋值: var a = 10; a = 12;

5、变量命名规范

• 字母，下划线，数字，$ 这些可用的字符
• 不能用数字开头
• 不能使用关键字，保留字
• 严格区分大小写
• 建议变量的命名要有意义
• 建议使用驼峰命名法

驼峰命名法：第一个单词的首字母小写，第二个及以后的单词首字母大写

userNameOne

关键字和保留字：

image.png

保留字：现在还不是关键字，将来有可能成为关键字

image.png

注意：使用保留字为变量命名是不会报错，但是为了程序的安全性考虑，我们规定不能使用保留字作为变量名

1、js数据类型

基本类型：number数字，string字符串，布尔boolean，undefined，null

引用类型：object

number数字类型

包括所有的数字（浮点数，整数，正数，负数）和 NaN

NaN 表示某个结果不是一个数字，但是它归属于Number类型

isNaN() 判断某个数据是否不是一个数字，当数据是数字的时候，返回false，当数据不是数字的时候，返回true

数字的进制：

二进制 满二进一 0-1

八进制 满八进一 0-7

十进制 满十进一 0-9

十六进制 满十六进一 0-9a-f

String字符串类型

格式：使用双引号，或者单引号包起来

字符串不可变性: 在js当中，操作字符串的时候，并不是在原来的字符串上进行修改，而是重新开辟内存，生成新的字符串，把变量重新指向新的字符串，原来的字符串并不会马上消失，而是等待垃圾回收机制进行回收

Boolean布尔类型

只有两个值：ture，false 通常表示对和错，表示条件成立与否 比较运算符

null

空 只有一个值 null 表示不是一个对象

undefined

未定义

只有一个值 undefined

声明变量的时候，如果没有赋值，默认就是赋值为undefined

2、运算符

比较运算符

< >= <= == != 不严格等于: 比较的是内容（值）

=== !== 严格等于: 比较的是内容（值）和类型

算术运算符

• 二元算术运算符 + - * / %

+ ：运算

数字相加：得到数字

数字和非数字内容的字符串相加：字符串

数字和数字内容的字符串相加：字符串

-，*，/，% : 运算

数字相运算得到数字

数字和数字内容的字符串运算：得到数字

数字和非数字内容的字符串运算：NaN

• 一元算术运算符++，--

前++（--） ++a：先对a进行自增或者是自减，然后以新的值参与运算

后++（--）a++：先以a的值进行运算，然后再进行自增或者自减

逻辑运算符

&& 与 两个条件都是true的时候为true

|| 或 两个条件都是false的时候为false

! 非 颠倒是非

短路运算

&& 短路： 当&&左边为true的时候，结果就跟左边没有关系了，直接得到&&的右边（执行结果）

|| 短路： 当||的左边为false，结果就跟false没关系，直接得到||右边的执行结果

赋值运算符

= ：最简单的赋值运算

复杂：+=，-=，*=，/=, %=

运算符的优先级

image.png

3、类型转换

• 将字符串转换为数字

  Number()
  只能转换数字为内容的字符串，否则得到NaN
  可以转换浮点数
  
  parseInt()
  只能得到整数
  会尽可能的尝试转换到第一个非数字的字符为止
  
  parseFloat()
  会尽可能的尝试转换到第一个非数字的字符为止
  可以转换浮点数（能取到小数）
  

• 将其他转换成字符串

  1 String() 可以将任意类型转换为字符串
  2 .toString()  可以将部分类型转换为字符串，null，undefined不能使用
  3 隐式转换：+ ""
  

• 转换为布尔类型

  Boolean()
  把其他任意类型转换为布尔
  
  在js当中，有哪些可以转换为false
  null,undefined,0,"",false,NaN
  
  隐式转换  !!数据 
  

类型判断

判断数据的类型 typeof 数据 or typeof(数据)

4、js的语法结构

• 顺序结构

• 选择结构(if-else 和switch-case)

  if (条件表达式) {
    条件表达式成立的时候执行的语句
  }
  
  if (条件表达式) {
    条件表达式成立的时候执行的语句
  }else {
    条件表达式不成立的时候执行的语句
  }
  
  if (表达式1) {
    表达式1成立时执行的代码
  }else if （表达式2）{
    表达式2成立时执行的代码
  }else if (){
  
  }...
  else {
    所有的表达式都不成立时执行的代码
  }
  
  -------------------------------------------------------------------------------
      
  switch(n) {
      case 定值1:
          当n和定值1相等的时候执行的代码
          break;
      case 定值2:
          当n和定值2相等的时候执行的代码
          break;
      case 定值3:
          当n和定值3相等的时候执行的代码
          break;
      default：
        当n和所有的定值都不相等的时候执行的代码
  }
  -------------------------------------------------------------------------------
  switch-case和if-else的区别
      - if-else     通常用来比较区间值
      - switch-case   只能用来比较定值
      
  所以，建议在一个变量和多个定值比较的时候，用switch-case，如果只有一个定值要比较，建议使用if-else，如果是区间值，只能只用if-else
  
  -------------------------------------------------------------------------------
      
  三元表达式：
  表达式1   ?   表达式2  :   表达式3
  先判断表达式1是否成立，如果成立，执行表达式2，并且返回表达式2的执行结果，如果表达式1不成立，执行表达式3，并且返回表达式3的执行结果，当逻辑处理比较复杂的时候，使用if-else，如果逻辑处理非常简单，使用三元表达式
  

• 循环结构

  什么是循环：重复的去做一件事情 ,重复执行一段代码

  while循环
  
  while (条件表达式){
    循环体，就是条件表达式成立的时候重复执行的代码
  }
  
  do {
    循环体
  }while(条件表达式)
  
  
  do-while 和 while 的区别:
  while 循环，有可能一次循环体都不执行
  do-while 至少执行一次循环体
  -----------------------------------------------------------------------------------
      
  for循环
  for ( 循环的初识值 ; 条件表达式 ; 自增或者自减的步长 ) {
    循环体
  }
  执行顺序：
  先初始化初始值，判断条件表达式是否成立，执行循环体，循环体执行完毕之后，自增或者自减，再检查条件是否成立，成立就执行循环体，否则结束循环
  
  for循环和while循环的区别:
  
  while 可以无限次循环，通常用来做未知次数的循环
  
  for    从一开始就指定循环的次数，用来做已知次数的循环
  

5、数组

什么是数组

数组就是数据的有序集合，有长度 length，在js当中，数组可以装任意类型的数据

创建数组

构造函数的方式
var arr = new Array(); // 创建了一个空的数组，长度为0
var arr = new Array(100); //创建了一个空的数组，长度为100

字面量表示法:
var arr = []; // 创建了一个空的数组,长度为0

数组的赋值

使用索引赋值,数组的索引是从0开始
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = "ABC";
arr[3] = false;

----------------------------------------------------------------------------------
数组的初始化赋值：

ar arr = new Array(1,2,"abc",false);
var arr2 = [1,2,"abc",false];

数组的取值

使用索引取值
var str = arr[2];  // 通过索引取值，要使用[]运算符

数组的遍历

for(var i = 0; i < arr.length ; i++ ){
    console.log(arr[i]);
}

6、数组的操作方法

• concat：连接数组 不会改变原来的数组，而是得到一个新的数组

• join : 使用某一个字符，连接所有的数组的元素，得到一个字符串

• push(xx, ....)：向一个数组中添加一个或者多个元素，并且返回数组增加元素之后的长度

  会修改原来的数组

• shift：删除数组的第一个元素，并返回，也会修改原数组

• pop(): 删除数组中的最后一个元素，并且返回这个元素，会修改原数组

• indexOf（searchValue [,formindex]）：获取数组中某个元素第一次出现的索引，但是如果规定从哪个索引开始查找，可以查找到任意位置元素

• slice（start，end） 获取从数组中某个下标开始，到end结束的所有元素，但是不能获取到end

• splice()

清空数组

var arr= [1,2,3,4,5];
//        arr.splice(0);
//        console.log(arr);
//        console.log(arr);
//        arr.length = 0;
 console.log(arr);
 arr = [];
 console.log(arr);

7、函数

什么是函数

可以在需要的时候执行的，可以重复使用的一段代码 ，思想：代码复用，把不变的放到函数体里面，把改变的变成参数

定义函数

1、使用function关键字声明
function 函数名 ( 参数列表 ) {
    函数体
}

2、函数表达式
var 函数名 = function (参数列表) {
    函数体
}

函数命名

命名规范和变量一样，推荐使用动词，推荐驼峰命名

函数的调用

函数名(参数的列表);

函数的返回值

函数执行完毕之后，得到一个结果，就是函数的返回值

• 如果函数里面没有写return关键字，函数执行完毕之后，会默认的到undefined
• 如果函数里有些return，但是return没有跟任何的东西，函数执行完毕，会默认得到undefined
• 如果函数里有return，并且return后面跟着某个变量或者值，函数执行之后，得到return后面的这个东西

return关键字，除了可以返回函数的返回值之外，还能，终止函数的执行

函数的参数

• 形参

形式参数，就是我们在声明函数的时候写在参数列表里的参数，起到占位的作用，让我们可以在调用函数的时候，传入响应参数，来在函数执行的时候参与运算

• 实参

其实就是我们在调用函数的时候传入参数，是实际参与函数执行的参数。

函数的四种形式

1、无参无返回值
function logError(){
    console.log("这里出现了一个错误");
}

2、无参有返回值
function getRandom(){
    return Math.random();
}

3、有参无返回值
function log(msg){
    console.log(msg);
}

4、有参有返回值
 function getSum(n){
     var sum = 0;
     for (var i = 1; i < n; i++) {
        sum += i;
     }
     return sum;
 }

函数调用函数的执行过程

当函数去调用另一个函数的时候，会去到那个被调用的函数里执行，被调用的函数执行完毕之后，会回到调用它的位置

函数也是数据类型

function fn(){
}
console.log(typeof  fn); //得到的结果是输出了：function 是数据类型，就可以当成参数传递

匿名函数

没有函数名的函数

function （参数列表） {
    函数体
}

自执行函数

声明结束之后，立刻执行

(function (){
    console.log("1");
    console.log("2");
})();

8、作用域

• 全局作用域

  在页面的任意位置都可以访问的作用域，在全局作用域下声明的变量，可以在任意位置访问

• 局部作用域

  就是指函数的内部，在函数内部声明的变量就是局部变量，如果在局部作用域内，没有使用var声明的变量，这个变量是一个全局变量 。但是这种做法不推荐

9、预解析

js的执行不是单纯解释一行执行一行，而是有一个预解析的过程，会找到当前作用域下的所有的var和function关键字，把变量的声明和函数的声明提升到当前作用域的最顶端。

变量提升和函数提升

其实就是预解析的时候做的变量的声明提前和函数的声明提前

定时器

setTimeOut

setInterval

10、JS的内置对象

Math对象

就是js提供的一套关于数学的一些方法

• Math.ceil() 向上取整
• Math.floor() 向下取整
• Math.pow(x,y) 求x的y次方
• Math.max(x,y,z,...) 求两个或多个数字的最大值
• Math.min(x,y,z...) 求两个或者多个数字的最小值
• Math.random() 获得[0,1)之间的随机数
• Math.PI js当中的圆周率
• Math.abs() 绝对值

Data对象

创建当前日期的日期对象
var date = new Date();

创建指定日期的日期对象
var date = new Date(2016,10,1); //注意：这里的月份是要从0开始，如果想要得到10月1号则要写9月
-----------------------------------------------------------------------------------
获取日期的毫秒数
var ms1 = +new Date();
or
var date = new Date();
console.log(date.getTime());
------------------------------------------------------------------------------------
获取日期对象的每一个部分
var date = new Date();

//获取年份
console.log(date.getFullYear());
//获取月份,获得到的月份是从0开始
console.log(date.getMonth());
//获取日期中日
console.log(date.getDate());
//获取日期中的星期几,要注意的是，星期是从星期日，得到0就是星期日，得到6，就是星期六
console.log(date.getDay());
//获得小时,0到23
console.log(date.getHours());
//获取分钟,0到59
console.log(date.getMinutes());
//获取秒数,0到59
console.log(date.getSeconds());
//获取毫秒数,得到0到999
console.log(date.getMilliseconds());

操作字符串的方法

var str = "abcdefghijklmn";

得到某一个位置的字符
console.log(str.charAt(0));
console.log(str[5]);

concat用来连接多个字符串的方法
var str2 = "abc";
var str3 = "def";
连接多个字符串，得到一个新的字符串，不会改变原来的字符串
console.log(str.concat(str2,str3));
console.log(str);

slice用来截取从start开始，到end结束的字符
console.log(str.slice(3,7));

substring用来截取字符串，从start开始，到end结束的字符，可以取到start，不能得道end
console.log(str.substring(3,7));

substr(start,length)，意思是从start开始，一共截取length的长度
console.log(str.substr(3,5));

indexOf 查找某一个字符在字符串中的位置,只能找到从某一个位置开始的第一个
console.log(str.indexOf("z"));
var str = "abcabcabc";
console.log(str.indexOf("c",3));


lastIndexOf,从后面开始往前面找，也只能找到第一次出现的位置,除了查找的方向和indexOf不一样，其他都一样
var str = "abcabcabc";
console.log(str.lastIndexOf("a",5));

trim方法，用来去除字符串两边的空格,会得到新的字符串，不会改变原字符串
var str = "    abc    def   hij    ";
console.log(str);
console.log(str.length);
console.log(str.trim());
console.log(str);

    字符串大小写转换

var str = "abcdef";
大写转换，不会对原来的字符串造成影响
var str2 = str.toUpperCase();
var str3 = str.toLocaleUpperCase();
console.log(str2);
console.log(str3);
console.log(str);

小写转换,不会对原字符串造成影响
var str4 = str2.toLowerCase();
var str5 = str3.toLocaleLowerCase();
console.log(str4);
console.log(str5);
console.log(str2);
console.log(str3);

replace替换字符串里的对应字符,但是只能替换掉匹配的第一个
var str = "abcdeffkfkfff";

var str2 = str.replace("f","g");
console.log(str2);
console.log(str);

split把字符串变成数组,根据的是分割的字符

var arr = [1,2,3,4,5,6];
var str = arr.join("|");
console.log(str);

var newArr = str.split("|");
console.log(newArr);

var str = "abcabcabc";
var arr = str.split("a");
var arr = str.split("");
console.log(arr);

对象

在js当中，对象就是无序属性的集合，对象里面包含属性和方法

创建对象

1 构造函数法

var o = new Object();

2 对象的字面量表示法

var o = {};

访问对象的属性

• 使用点的方式

  使用点的方式访问对象的属性，获取对应的属性的值
  console.log(nokia.brand);
  console.log(nokia.name);
  

• 通过键的方式

  使用键的方式访问对象的属性
  console.log(nokia["with"]);
  

• 使用for-in的方式遍历对象

  for-in 的方式访问对象属性，可以访问到某个对象的所有属性和方法
  //   for(var 键 in 要访问的对象){
  //      循环体
  //   }
  for(var k in nokia){
    console.log("对应的键是"+k+"，对应的值是"+nokia[k]);
  }
  

自定义对象的构造函数

构造函数本质上也是函数，只不过是专门用来创建对象，并且使用new的方式

function Person(name,height,weight,color){
//            在构造函数当中，this关键字，就是构造函数帮我们创建好的对象
    this.name = name;
    this.height = height;
    this.weight = weight;
    this.color = color;

    this.sayHi = function(){
        console.log("你好，我的名字是" + this.name +"，我的身高是" +  this.height + "，我的体重是" + this.weight);
    }
}

var zs = new Person("张三",150,50,"yellow");
var ls = new Person("李四",180,70,"black");
console.log(zs);
console.log(ls);

this关键字

• 在构造函数当中

this关键字在构造函数当中，就是指构造在创建对象时的那个对象

• 在函数或者方法当中

谁调用函数或者方法，this就是谁

new关键字

new 用来创建新的对象

1 先创建了一个自定义对象

2 把this关键字指向刚才创建的对象

3 执行构造函数里的代码，也就是想this（已经创建的对象）添加属相和方法

4 返回this（被创建的对象）

JSON

其实JSON，就是结构化数据格式

1 JSON格式的键，必须是双引号包裹的字符串

2 不支持undefined

{
"name" : "张无忌",
"wugong" : "九阳神功",
"attack" : 999999
// "deadTime" : undefined
}

基本类型和引用类型

基本类型（值类型）

是存储在栈空间上，当我们声明多个变量的值都是一样的时候，是分配不同的内存位置，当我们调用函数的时候，会把这些值复制一份进入函数区运行，就不会改变原来实参的值

引用类型

是存储在堆空间里的，只有一份，如果有多个变量指向同一个对象，会在栈空间保存有多个地址，这些地址都是指向这个对象，当我们把这些变量传入函数中运行的时候，其实都是根据变量保存的地址，找到对象，操作同一个对象

image.png