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

内嵌式
外联式【 scriptb 标签的 src属性】
行内式(了解)

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

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

image

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

1、js数据类型

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

引用类型：object

number数字类型

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

【 NaN和任意字符 - * / % 结果都为NaN 】

isNaN （）方法可判断数据是否为NaN（结果为 true false）

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、运算符

比较运算符

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

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

当两边都为 String 时，将比较其 ASCII

当两边有一个为number时，左右都必须转换成number类型然后比较

算术运算符

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

+ ：运算
 
 数字相加：得到数字
 
 数字和非数字内容的字符串相加：字符串
 
 数字和数字内容的字符串相加：字符串
 
 -，*，/，% : 运算
 
 数字相运算得到数字
 
 数字和数字内容的字符串运算：得到数字
 
 数字和非数字内容的字符串运算：NaN

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

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

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

逻辑运算符（）

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

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

! 非颠倒是非【var c= !a //a转换成bool取反,则c的值为false】

短路运算（短路运算的作用是为了赋值）

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

|| 短路：当||的左边为false，结果就跟false没关系，直接得到||右边的执行结果（函数传参取默认值常用）

[图片上传失败...(image-a97f87-1566820113674)]

[图片上传失败...(image-9879ef-1566820113674)]

不赋值结果为bool类型，赋值为短路运算

赋值运算符

= ：最简单的赋值运算

复杂：+=，-=，*=，/=, %= 【两个符号之间不能空格】

运算符的优先级

image

3、类型转换

将字符串转换为数字

Number() （整体转换：内容为纯数字，则能转换成number,如果内容有非数字的内容，则会转换成NaN）
 【 Number 能转换任意类型的数据如 string bool数据类型 等都可以 】
 只能转换数字为内容的字符串，否则得到NaN
 可以转换浮点数
 Boolean true--> 1
 false--> 0
 
 parseInt() （ 部分转换 ）
 【 parseInt只能转换字符串类型的数据不能转换如 bool 不能用该方法转换 】
 只能得到整数
 会尽可能的尝试转换到第一个非数字的字符为止
 
 parseFloat() （ 部分转换 ）
 【 parseFloat 只能转换字符串类型的数据不能转换如 bool 不能用该方法转换】
 会尽可能的尝试转换到第一个非数字的字符为止
 可以转换浮点数（能取到小数）

将其他转换成字符串

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

转换为布尔类型

Boolean()
 把其他任意类型转换为布尔
 
 在js当中，有哪些可以转换为false 【只有这个6个值转换成bool时能】
 null,undefined,0,""【空字符串】,false,NaN
 
 【隐式转换】 !!数据

类型判断

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

typeof(null) -->object

typeof(undefind) -->undefind

4、js的语法结构

顺序结构（从上到下，从左到右的执行）

选择结构(if-else 和switch-case) 【if里面可以再嵌套if】

if (条件表达式) {
条件表达式成立的时候执行的语句
}

if (条件表达式) {
条件表达式成立的时候执行的语句
}else {
条件表达式不成立的时候执行的语句
}

if (表达式1) {
表达式1成立时执行的代码
}else if （表达式2）{
表达式2成立时执行的代码
}else if (){

}...
else {
所有的表达式都不成立时执行的代码
}

【switch的值是定值，而if的值是区间】

switch(n) {
case 定值1:
当n和定值1相等的时候执行的代码
break; 【如果没有break,则后面的代码无条件执行，直到遇到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，如果逻辑处理非常简单，使用三元表达式

[图片上传失败...(image-3ecaeb-1566820113661)]

[图片上传失败...(image-9d4e6c-1566820113661)]

循环结构

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

【先判断后执行】
while循环

while (条件表达式){
循环体，就是条件表达式成立的时候重复执行的代码
}

【先执行一次后再判断】
do {
循环体
}while(条件表达式)

do-while 和 while 的区别:
while 循环，有可能一次循环体都不执行
do-while 至少执行一次循环体

for循环
for ( 循环的初识值 ; 条件表达式 ; 自增或者自减的步长 ) {
循环体
}
执行顺序：
先初始化初始值，判断条件表达式是否成立，执行循环体，循环体执行完毕之后，自增或者自减，再检查条件是否成立，成立就执行循环体，否则结束循环

for循环和while循环的区别:

while 可以无限次循环，通常用来做未知次数的循环

for 从一开始就指定循环的次数，用来做已知次数的循环

[图片上传失败...(image-835c69-1566820113673)]

[图片上传失败...(image-598c54-1566820113673)]

[图片上传失败...(image-46174c-1566820113673)]

[图片上传失败...(image-627ddd-1566820113673)]

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];

[图片上传失败...(image-54a0d9-1566820113672)]

数组的取值

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

[图片上传失败...(image-dbe9e9-1566820113672)]

数组的遍历**

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

6、数组的操作方法

concat：连接数组不会改变原来的数组，而是得到一个新的数组
join : 使用某一个字符，连接所有的数组的元素，得到一个字符串
push(xx, ....)：向一个数组最后添加一个或者多个元素，并且返回数组增加元素之后的长度

会修改原来的数组

unshift（）向一个数组最开始添加一个或者多个元素，并且返回数组增加元素之后的长度

会修改原来的数组
```
 // unshift（）向数组最前面添加元素（至少添加一个元素）
 var aa = [ 1, 112, 'a' ,12 ]
 aa.unshift( 'aac' ,'12a')
 console.log( aa )
```
shift：删除数组的第一个元素，并返回，也会修改原数组
pop(): 删除数组中的最后一个元素，并且返回这个元素，会修改原数组
indexOf（searchValue [,formindex]）：获取数组中某个元素第一次出现的索引，但是如果规定从哪个索引开始查找，可以查找到任意位置元素
slice（start，end）获取从数组中某个下标开始，到end结束的所有元素，但是不能获取到end （左闭右开）

splice（） 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

splice（index ，howmany，item1，...，item1）

[图片上传失败...(image-4790ec-1566820113660)]

说明：

index：是删除元素的位置（元素下标）【必填】

howmany : 删除元素的个数【必填】

item1 ：如果不写就表示只删除元素。如果写，就表示添加该元素【选填】

[图片上传失败...(image-f6c75a-1566820113660)]

[图片上传失败...(image-5e5933-1566820113671)]

[图片上传失败...(image-4ded83-1566820113671)]

[图片上传失败...(image-b0762c-1566820113671)]

清空数组

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、函数

什么是函数

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

做用：代码的封装和复用

[图片上传失败...(image-6a9d3f-1566820113671)]

定义函数

1、使用function关键字声明
 function 函数名 ( 参数列表 ) {
 函数体
 }
 
 2、函数表达式 【 需要将函数赋值给一个变量，否则报错 】
 var 函数名 = function (参数列表) {
 函数体
 }

函数命名

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

函数的调用

函数名(参数的列表);

函数的返回值

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

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

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

[图片上传失败...(image-fee598-1566820113670)]

函数的参数

形参

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

实参

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

函数的四种形式

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;
 }

[图片上传失败...(image-5272ef-1566820113670)]

函数调用函数的执行过程

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

函数也是数据类型

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

[图片上传失败...(image-d9331a-1566820113669)]

匿名函数

没有函数名的函数

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

[图片上传失败...(image-2e0ebe-1566820113669)]

自执行函数**

声明结束之后，立刻执行

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

[图片上传失败...(image-9cb872-1566820113669)]

[图片上传失败...(image-d4d7d8-1566820113669)]

8、作用域

全局作用域

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

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

9、预解析

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

变量提升和函数提升

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

定时器

setTimeOut

setInterver

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当中的圆周率

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(str2.concat(str3));
 console.log(str); 
 slice用来截取从start开始，到end结束的字符
 console.log(str.slice(3,7)); //能取到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
 }

基本类型和引用类型

基本类型（值类型）

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

引用类型

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

JS基础加随堂练习

JS

1、js简介

js能做什么

js的历史

js的组成

如何使用js

JS语法

1、注释

2、常用全局函数

3、变量

4、变量的声明和赋值

5、变量命名规范

1、js数据类型

number数字类型

String字符串类型

Boolean布尔类型

null

undefined

2、运算符

当两边都为 String 时，将比较其 ASCII

当两边有一个为number时，左右都必须转换成number类型然后比较

运算符的优先级

3、类型转换

类型判断

4、js的语法结构

5、数组

6、数组的操作方法

说明：

清空数组

7、函数

定义函数

函数命名

函数的调用

函数的返回值

函数的参数

函数的四种形式

函数调用函数的执行过程

函数也是数据类型

匿名函数

自执行函数**

8、作用域

9、预解析

定时器

10、JS的内置对象

Math对象

Data对象

操作字符串的方法

对象

创建对象

访问对象的属性

自定义对象的构造函数

this关键字

new关键字

JSON

基本类型和引用类型

你可能感兴趣的:(JS基础加随堂练习)