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
关键字和保留字：
保留字：现在还不是关键字，将来有可能成为关键字
注意：使用保留字为变量命名是不会报错，但是为了程序的安全性考虑，我们规定不能使用保留字作为变量名
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没关系，直接得到||右边的执行结果
赋值运算符
= ：最简单的赋值运算
复杂：+=，-=，*=，/=, %=
运算符的优先级
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
}
基本类型和引用类型
基本类型（值类型）
是存储在栈空间上，当我们声明多个变量的值都是一样的时候，是分配不同的内存位置，当我们调用函数的时候，会把这些值复制一份进入函数区运行，就不会改变原来实参的值
引用类型
是存储在堆空间里的，只有一份，如果有多个变量指向同一个对象，会在栈空间保存有多个地址，这些地址都是指向这个对象，当我们把这些变量传入函数中运行的时候，其实都是根据变量保存的地址，找到对象，操作同一个对象