寒假学习2

1.js是什么？

运行在客户端的脚本语言（不需要编译，js引擎逐行解释并执行）

2.js作用

表单动态校验（最初）

网页特效

服务端开发等

3.三者关系

html/css描述类，js编程类语言。HTML是网页的结构，css是网页的外观，JavaScript是页面的行为

4.浏览器执行js简介

渲染引擎： 解析HTML与CSS，俗称内核

JS引擎：JS解释器，处理运行JS代码

5.JS组成（三个）

ECMAScript:ECMA标准定义

DOM文档对象模型

BOM浏览器对象模型

6.书写位置：

行内式（特殊情况下使用），内嵌式（常用），外部式（src适合代码量大的情况）

7.单行注释//，多行注释/*xxx */

8.JS输入输出语句

prompt（‘   ‘）；

alert（）弹出警示框 输出的 展示给用户的

console.log（） 控制台输出 给程序员测试用的

9.变量：装东西的盒子

原因：我们一些数据需要保存

变量是用于存放数据的容器。我们通过变量名获取数据

本质：程序中内存中申请存放数据的空间

使用：1.声明变量2.赋值

var age；

age=10；

console.log（age）；

10.变量初始化：声明变量并赋值；var myname=‘老虎’；

console.log（myname）；

11.变量的使用

12.变量语法扩展

更新变量：以最后一次值为准，覆盖了原有值

声明多个变量：只用一个var，两个变量间用逗号

声明变量的特殊情况：

​        1.只声明不赋值，结果是：undefined

​        2.不声明不赋值，直接使用：报错         

​        3.不声明直接赋值使用：可以（不提倡）

13.变量命名规范：

-由字母，数字，下划线，美元符号组成

-严格区分大小写

-不能以数字开头

-不能是关键字，保留字：var，for，while。尽量不使用name

-变量名必须有意义。nl——age

-遵守驼峰命名法。首字母小写，后面首字母需要大写。myFirstName

14.交换两个变量的值（中间变量）

var temp；

var apple1=‘青苹果’；

var apple2=‘红苹果’

temp=apple1；//把右边给左边

apple1=apple2；apple2=temp；

console.log（apple1）；

数据类型

15.为什么需要数据类型：便于把数据分成所需内存大小不同的数据，充分利用存储空间

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

js是动态语言，相同变量可用作不同类型。即数据类型可变化

16.简单数据类型：

数字型Number（整数和小数）默认值为0

  · 八进制：数字前面加0 表示八进制  var num1=010；输出默认十进制

  ·十六进制：数字前加0x 表示十六进制

  ·范围：console.log（Number.MAX_VALUE）

​              console.log（Number.MIN_VALUE）

​  ·  三个特殊型:   Infinity (无穷大)

​                          -Infinity  （无穷小）

​                            NAN（非数字）

17 isNaN（）这个方法用来判断非数字 并且返回一个值 如果是数字返回的是false，如果不是数字返回的是true

   console.log(isNaN(12));//false

18字符串型String（单引号和双引号）

因为HTML标签里面的属性使用的是双引号，js推荐单引号

字符串引号嵌套：js可以单引号嵌套双引号，或双引号嵌套单引号（外双内单，外单内双）

字符串转义符  \n换行  \b空格   \t tab缩进

19字符串长度

length属性

var  str=‘my name is andy';

console.log(str.length);//15

20字符串拼接：字符串+任何类型=拼接之后的新字符串

console.log('沙漠'+‘骆驼’)；

console.log('老师'+18)；//老师18

console.log(12+12)；//24

console.log(‘12’+12)；//  ’1212‘

数值相加，字符相连

加强版：

var  age=18；

console.log('老师'+age+‘岁’)；

变量通过字符串相连方式实现

21.布尔型boolean

只有两个值true和false

console.log（flag+1）；//true参与运算作为1

22.Undefined和Null

如果一个变量声明未赋值就是undefined 未定义数据类型

var str；

console.log(str);

var variable = undefined;

console.log(variable+'pink')// undefinedpink

console.log(variable+1)// NaN

null空值

var space = null;

console.log(space + 'pink');// nullpink

console.log(space + 1);//1

23.获取检测变量

var num = 10;

console.log(typeof num);//number

var str ='pink';

console.log(typeof str);//string

prompt取的值是字符型

var age=prompt('请输入您的年龄‘);

console.log(age);

console.log(typeof age);

24.字面量：字面如何代表一个值

数字字面量：8，9，10

字符串字面量：‘程序员’

25.数据类型转换为字符串

法一：toString() 转成字符串

var num=10;

var str = num.toString();

console.log(str);

法二：String(变量)

console.log(String(num));

法三：利用 + 拼接字符串的方法实现转换效果(更常用隐式转换)

console.log(num + '');

26.转换数字型

法一：parselnt（变量）常用 字符型转化为数字型，得到是整数无四舍五入

var age = prompt('请输入您的年龄‘);

console.log(parseInt(age));

console.log(parseInt(‘3.94’));//3

console.log(parseInt(‘120px’));//120

console.log(parseInt(‘rem120px’));//NaN

法二：parseFloat(变量) 常用

     字符型转换为数字型，得到小数 浮点数

法三：Number（变量）

var str = '123';

console.log(Number(str));

console.log(Number('12'));

法四：利用算数运算- * /隐式转换

console.log('12'-0);//12

console.log('123-'120');// 3

27.转换为布尔型

   · 代表空，否定的值会被转换为flase  ,如：,0,NaN,null,undefined

    其余值会被转换为true

console.log(Boolean(''));//false

console.log(Boolean('小白‘));//true

28. 标识符：开发人员为变量，属性，函数，参数取的名字 不能是关键字保留字。

    关键字：指JS本身已经使用了的字，不能再用它们充当变量名方法名。

    保留字：预留的“关键字”。

29.算数运算符

不能直接用浮点数判断相等，精度有误差

% 取余运算符判断是否可以整除

算数运算符先乘除后加减

右边表达式计算完毕把返回值给左边

30.递增递减运算符（必须和变量配合使用）

前置：++num 与 num=num+1 一样，先自加1，后返回值

后置：num++ 与 num=num+1 一样，先返回原值，后自加

两者单独使用效果一样,联用不同

console.log(++age + 10)//21

console.log(age++ + 10)//20

31.比较运算符

<,>,>=,<=，=

==(等号，会转型)，===（数据类型相等）,!==（不完全相等）

32.逻辑运算符

&& || !

短路 左边表达式可以确定结果就不再运算右边表达式值

33.赋值运算符

34.运算符优先级（八种）

（1）小括号

（2）一元运算符++--！

（3）算数运算符（先加减后乘除）

（4）关系运算符<>=     (5)相等运算符

（6）逻辑运算符（先&&后｜｜）

（7）赋值（8）逗号

35.流程控制：顺序，分支，循环

36.if语句

37.三元表达式

   条件表达式 ？表达式1 ； 表达式2

   真返1，假返2   

38.switch语句

switch(){

case value1:

         执行语句1；

         break;

    ...     

       default:最后语句；

}

39.JS标识符命名规范

变量名称用名词

函数名称用动词

40.数组新增元素

法一：通过修改length长度新增数组元素

var arr=['red','green','blue'];

console.log(arr.length);

arr.length = 5;//修改数组长度

法二：修改索引号 追加数组元素

var arr1=['red','green','blue'];

arr1[3]=‘pink’；

arr1[1]='yellow';可替换

arr1=‘有点意思’；//直接给数组名赋值，新数据覆盖数组元素

41.可以直接声明空数组arr[]

42.函数使用：声明，调用

声明函数的关键字 全部小写

函数是做某件事情，函数名一般是动词

函数不调用自己不执行

声明：function（形参）{}

调用：函数名（实参）；

如果实参个数 > 形参个数，取到形参个数

如果实参个数 < 形参个数, 多的形参定义为undefined,结果为NaN

43.arguments的使用

(只有函数有，而且是每个函数都内置好了这个)

function fn(){

   console.log(arguments);

   //里面存储了所有传递过来的实惨

      console.log(arguments.length);

         console.log(arguments[2]);

}

fn(1,2,3);

//伪数组 并不是真正意义上的数组

//1，具有数组length属性

//2.按照索引的方式进行存储的

//3.它没有真正数组的一些方法pop() push()等等

44.利用函数求任意个数的最大值

function getMax(){

  var max = arguments[0];

  for( var i = 1; i < arguments.length; i++){

    if(argumrnts[i]>max){

        max = arguments[i];

     }

   }

   return max;

}

console.log(getMax(1,2,3))

45.利用函数封装的方法翻转任意数组

function reverse(arr){

  var newArr = [];

  for(var i = arr.length - 1;i >= 0;i--){

    newArr[newArr.length] = arr[i];

   }

   return newArr;

}

var arr1 = reverse([1,1,2,3]);

46.函数的两个声明方式

  1..利用函数关键字自定义函数（命名函数）

  function fn(){

}

  fn();

 2.函数表达式(匿名函数)

var 变量名 = function(){}

var fun =function(){

}

fun();

//（1）fun是变量名，不是函数名

//（2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

47.js作用域：全局作用域 局部作用域 在es6的时候新增块级作用域

48.预解析

js解析代码的时候，会提前读取带有关键词

49.对象（复杂数据类型object）

JS中，对象是一组无序的相关属性和方法的集合。

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

 属性：事物的特征，在对象中用属性来表示（大小，颜色）

 方法：事物的行为，在对象中用方法来表示（打电话，玩游戏）

50.为什么需要对象

  保存一个值时，可以使用变量，保存多个值（一组值）时，可以 使用数组。

  JS中的对象表达结构更清晰，更强大

51.创建对象（类似于结构体）

法一：

1. 用字面量创建

花括号{}里面包含了对象的属性和方法

  var obj = {

   uname:'张三疯',

   age:18,

   sex:'男'，

   sayHi：function:{

   console.log('hi~');

     }

};

//(1)里面的属性或者方法我们采取键值对的形式 键 属性名： 值 属性值

//(2)多个属性或者方法中间用逗号隔开的

//(3)方法冒号后面跟的是一个匿名函数

2.使用对象

(1)调用对象的属性 采取 对象名.属性名

console.log(obj.uname);

(2)调用属性还有一种方法 对象名['属性名']

console.log(obj['age']);

(3)调用对象的方法  对象名.方法名()记得小括号

obj.sayHi();

法二：

1.利用new Object 创建了一个空的对象

var obj = new Object();

obj.uname = '张'

obj.age = 18;

obj.sex = '男‘；

obj.sayHi = function(){

   console.log('hi~');

}

//(1)我们利用等号赋值的方法 添加对象的属性和方法

//(2)每个属性和方法之间用 分号结束

console.log(obj.uname);

console.log(obj['sex']);

obj.sayhi();

法三：

利用构造函数创建对象(构造函数首字母大写)

原因：前两种创建对象的方式一次只能创建一个对象

构造函数：把对象里面一些相同的属性和方法抽象出来封装到函数里面

语法规范：

  function 构造函数名(){

  this.属性 = 值；

  this.方法 = function(){}

}

   new 构造函数名（）；

例子

function Star(uname,age,sex){

   this.name = uname;

   this.age = age;

   this.sex = sex;//相同属性

   this.sing = function(sang){

   console.log(sang);

  }

}

var ldh = new Star('刘德华',18,'男');

//调用函数返回的是一个对象

ldh.sing('冰雨');

//1.构造函数首字母大写

//2.我们构造函数不需要return 就可以返回结果

//3.我们调用构造函数必须用new

//4.我们只要new Star()调用函数就创建一个对象

52.

变量：单独声明并赋值 使用的时候直接写变量名 单独存在

属性：在对象里面的不需要声明的 使用的时候必须是 对象.属性

函数：单独声明 并且调用的 函数名()单独存在的

方法：在对象里面调用的是 对象.方法()

函数和方法的相同点 都是实现某种功能 做某件事

53.

   对象是特指一个具体的事物

   构造函数是泛指的某一大类

   利用构造函数创建对象的过程我们也称为对象的实例化

54.new关键字

（1）.new构造函数可以在内存中创建一个空的对象

（2）.this就会指向刚才创建的空对象

（3）.执行构造函数里面的代码 给这个空对象添加属性和方法

（4）.返回这个对象（所以构造函数里面不需要return）

55.遍历对象

for...in语句

for（变量 in 对象){

}

例子

  var obj = {

   uname:'老师',

   age:18,

   sex:'男'，

   fn:function(){}

};

for(var k in obj){

  console.log(k);//k 变量 输出 得到属性名

  console.log(obj[k]);//得到属性值

}

//我们使用for in 里面的变量 我们喜欢写k 或者  key

56.内置对象

JS中对象分三种：自定义对象，内置对象，浏览器对象

内置对象：JS语言自带的一些对象，供开发者使用，并提供了一些常用的或最基本的而必要的功能 （属性和方法）

57.MDN 查文档

58.Math 内置对象

Math 数学对象 不是一个构造函数，所以不需要new 来调用，而是直接使用里面的属性和方法即可

常见：

   console.log(Math.PI);//一个属性

   console.log(Math.max(1,99,3));//99

   console.log(Math.max(1,99,'am'));//NaN

   console.log(Math.max());//-Infinity

   

利用对象封装自己的数学对象 里面有PI 最大值 最小值

var myMath = {

  PI:3.141592653,

  max:function(){

    var max = arguments[0];

    for(var i=1;i<arguments.length; i++){

    if(arguments[i]>max){

      max = arguments[i];

        }

      }

    return max;

   },

     min:function(){

    var min = arguments[0];

    for(var i=1;i<arguments.length; i++){

    if(arguments[i]< min){

     min= arguments[i];

        }

      }

    return min;

  }   

}

console.log(myMath.PI);   

console.log(myMath.max(1,5,9));   

59. Math.abs//绝对值

console,log(Math.abs(1));//1

console,log(Math.abs('1'));//隐式转换 把字符型转为数字型

60. 三个取整方法

Math.floor() 向下取整 往最小了取值

console.log(Math.floor(1.9));// 1

Math.ceil()  向上取整 往最大了取值

console.log(Math.floor(1.1));//2

Math.round() 四舍五入 .5特殊 往大了取

61.随机数方法 random()

-返回一个随机的小数 [0,1)

-这个方法里面不跟参数

-两个数之间的随机整数 并且 包含这两个数

公式：

Math.floor(Math.random()*(max-min+1))+min;

例

function getRandom(min,max){

return

Math.floor(Math.random()*(max-min+1))+min;

}

console.log(getRandom(1,10));

-随机点名

var arr = ['张三','李四','王五']；

console.log(arr[getRandom(0,2)]);

62.日期对象 是一个构造函数 必须使用new 来调用创建

var arr = new Array();//创建了一个数组对象

var obj = new Object();//创建了一个对象实例

1.使用date,如果没有参数 返回当前系统的当前时间

var date = new Date();

console.log(date);

2.参数常用的写法

数字型 2019，10，01 或者 字符串型‘2019-10-1 8:8:8’

var date1 = new Date(2019,10,1);

console.log(date1);//返回的是11月不是10月

var date2 = new Date(2019-10-1 8:8:8);

console.log(date2);

63.日期格式化年月日

var date = new Date();

console.log(date.getFullYear());//返回当前日期的年

console.log(date.getMonth()+1);//返回的少一月

console.log(date.getDate());//几号

console.log(date.getDay());//星期几，周日为0

时分秒

var date = new Date();

console.log(date.getHours());

console.log(date.getMinutes());

console.log(date.getSeconds());

64.获得Date总的毫秒数（时间戳）不是当前的毫秒数 而是距离1970年1月1日过了多少毫秒数

1.通过valueOf() ，getTime()

var date = new Date();

console.log(date.valueOf());

console.log(date.getTime());

2.简单的写法(最常用)

var date1 = + new Date();

console.log(date1);

3.H5新增的

console.log(Date.now());

65.倒计时//时间戳得剩余毫秒，再转换为时分秒

d=parseInt(总秒数/60/60/24)；

h=parseInt(总秒数/60/60%24)；

m=parseInt(总秒数/60%60)；

s=parseInt(总秒数%60)；

function conutDown(time){

  var nowTime = +new Date();

  var inputTime = +new Date(time);

  var times = (inputTime - nowTime)/1000;

  var d = parseInt(times/60/60/24)；//天

    d = d<10 ?'0'+d:d;

  var h = parseInt(times/60/60%24)；

    h = h<10 ?'0'+h:h;

  var m = parseInt(times/60%60)；

    m = m<10 ?'0'+m:m;

  var s = parseInt(times%60)；

    s = s<10 ?'0'+s:s;

  return d+'天'+h+'时‘+m+’分‘+s+’秒‘;

}

console.log(countDown('2019-5-1 18:00:00'));

66.创建数组对象的两种方式

（1）利用数组字面量

var arr = [1,2,3];

console.log(arr[0]);

(2)利用new Array()

var arr1 = new Array();//创建了一个空的数组

var arr1 = new Array(2);//表示数组长度为2，里面有两个空元素

var arr1 = new Array(2，3);//表示两个元素2和3

67.检测是否为数组

（1）instanceof 运算符 检测是否为数组

var arr = [];

var obj = {};

console.log(arr instanceof Array);//true

console.log(obj instanceof Array);//false

（2）Array.isArray(参数);H5新增的方法 ie9以上版本支持

console.log(Array.isArray(arr));//true

68.添加删除数组元素的方法

1.push()在我们数组的末尾 添加一个或多个数组元素

var arr = [1,2,3];

arr.push(4,5);

console.log(arr);//[1,2,3,4,5]

(1)push目的是可以给数组追加新的元素

(2)push() 参数直接写 数组元素即可

(3)push 完后，返回的结果是新数组的长度

2.unshift 在我们数组的开头 添加一个或多个数组元素

3.pop 它可以删除数组的最后一个元素

arr.pop();

console.log(arr);//无参数

返回值是删除的元素

4.shift 它可以删除数组的第一个元素

69.筛选数组

//把超过2000删除，剩余放到新数组里面

var arr = [1500,1200,2000,2100,1800];

var newArr = [];

for(var i=0;i<arr.length;i++){

  if(arr[i]<2000){

  //newArr[newArr.length] = arr[i];

  newArr.push(arr[i]);

   }

}

70.数组排序

1.翻转数组reverse函数

var arr = ['pink','red','blue'];

arr.reverse();

console.log(arr);

2.数组排序(冒泡排序)

var arr1 = [1,13,4,7,77];

arr1.sort(function(a,b){

return a-b;//升序的顺序排列

});

console.log(arr1);

71.数组索引方法

1.indexOf(数组元素)返回元素索引号，只返回第一个，找不到就返回-1

var arr = ['red','blue','pink','green']

console.log(arr.indexOf('blue'));

2.lastIndexOf

console.log(arr.lastIndexOf('blue'));从后找

72.数组去重，要求去除数组中重复的元素

function unique(arr){

  var newArr = [];

  for(var i = 0;i<arr.length;i++){

   if( newArr.indexOf(arr[i])===-1){

     newArr.push(arr[i]);

       }

   }

   return newArr;

}

var demo = unique('c','a','z','a','x','b','a');

console.log(demo);

73.数组转化为字符串

1.toString() 将我们的数组转化为字符串

var arr = [1,2,3];

console.log(arr.toString());//1,2,3

2.join(分隔符)

var arr = ['green','blue','pink'];

console.log(arr1.join('-'));//green-blue-pink

74.基本包装类型

var str = 'andy';

coonsole.log(str.length);

简单数据类型为什么会有length 属性呢？

基本包装类型：简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法

（1）把简单数据类型包装成复杂数据类型

var temp = new String('andy');

(2)把临时变量的值给str

str = temp;

(3)销毁临时变量

temp = null;

75.字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

76.根据字符返回位置

str.indexOf('查找字符'，【起始的位置】）

var str = '改革春风吹满地‘；

console.log(str.indexOf('春'));//2

//查找字符串“abcoefoxyozzopp"中所有o出现的位置及次数

var str = “abcoefoxyozzopp";

var index = str.indexOf('o');

var num = 0;

while(index!=-1){

  console.log(index);

  num++;

  index = str.indexOf('o',index+1);

}

console.log('o出现的次数：‘+num);

77.根据位置返回字符（重点）

(1).charAt(index)

var str = 'andy';

console.log(str.charAt(3));

//遍历所有的字符

for(var i = 0;i <str.length;i++){

  console.log(str.charAt(i));

}

(2).charCodeAt(index)返回相应索引号的字符ASCII值

目的：判断用户按下了哪个键

console.log(str.charCodeAt(0));//97

(3).str[index] H5新增的

console.log(str[0]);//a

78.统计出现最多的字符和次数

var str = 'abcoefoxyozzopp';

var o={};

for(var i = 0;i < str.length;i++){

  var chars = str.charAt(i);//chars是字符串的每一个字符

  if(o[chars]){//o[chars]得到的是属性值

      o[chars]++;

  } else{

  o[chars] = 1;

  }

}

console.log(o);

var ch = '';

for(var k in o){

  //k得到的是属性名，o[k]得到的是属性值

  if(o[k]>max){

    max = o[k];

    ch = k;

  }

}

console.log(max);

console.log('最多的字符是'+ch);

79.字符串操作方法（重点）

（1）concat('字符串1','字符串2','字符串3'.....)

var str = 'andy';

console.log(str.concat('red'));

（2）substr('截取的起始位置','截取几个字符')；

var str1 = '改革春风吹满地‘；

console.log(str1.substr(2,2));//春风

（3）silce(start,end)

    substring(start,end)

    

80.其他方法

（1）替换字符replace('被替换的字符‘，’替换为的字符‘) 它只会替换第一个字符

  var str = 'andy';

  console.log(str.replace('a','b'));

//有一个字符串‘abcoefoxyozzopp‘把里面的所有o替换为*

var str1 = ‘abcoefoxyozzopp‘;

while(str1.indexof('o')!==-1){

  str1.replace('o','*');

}

console.log(str1);

(2)字符串转换为数组 split('分隔符')

var str2 = 'red,pink,blue';

console.log(str2.split(','));

81.简单类型又叫做基本数据类型或值类型，复杂数据类型又叫做引用类型。

值类型：存储时变量存储的是值本身string,number,booiean,undefined,null

null返回的是一个空的对象 ；如果有一个变量以后打算存储为对象，暂时还没想好，这是就给null

引用类型：在存储时变量中存储的仅仅是地址（引用）。通过new关键字创建的对象（系统对象，自定义对象），如Object,Array,Date

82.简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值

复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址只想堆里面的

注：JS里面没有堆栈的概念，通过堆栈的方式，可以更容易理解代码的一些执行方式，便于学习

83.简单复杂类型传参