JS基础

js介绍

(1)历史

• 1995年，JS最早出现在NetScape的浏览器中
• 1996年，IE3中也出现了JS的克隆版，称作JScript
• 1997年，EMCA组织制定了JS的标准规范ECMAScript
• 2009年，JS遵循CommonJS规范，开始向服务器端发展

(2)现状

• JS既可以运行在客户端浏览器，也可以运行在服务器端

(3)特点

• 解释型语言，编译一行执行一行
• 弱类型语言
• 基于对象
• 跨平台性

(4)应用场景

• 开发浏览器端的交互效果
• 服务器端开发

开发环境

(1)浏览器端

• 自带的JS解释器
• UC/360/QQ/搜狗/百度…
• 谷歌/Safari/火狐/欧朋/IE/edge
• 内核

(2)服务器端

• Node.js
• www.nodejs.org 官网 下载地址
• node -v 查看版本号

(3)运行JS

• 浏览器
• 创建01.js和01.html，将js文件嵌入到html中
• <script src="01.js"></script>
• Node.js
• node 拖拽文件 回车

JS的语法规范

• 区分大小写
• 每行结束的分号可以省略
• 分为单行注释(//…)和多行注释(/…/)

变量的声明和赋值

声明变量
     var a;
变量赋值：
  变量声明后如果未赋值则为undefined（未定义），这表示一个空值
  变量可以被多次赋值，赋不同类型的值，这是弱类型语言的特点
     var a = 1;
     var a;
         a = 1;
     var a = 1;
         a = 2;
     var a = 1;
         a=a+10;

声明多个变量

var a,b,c;

声明多个变量且赋值

• var a = 1,b = 2,c = 3;

声明变量，赋值为另一个变量

var a=1;
var b=a;

常量

const  pi=3.14;
//常量也是用于存储数据的容器
//常量一旦声明必须赋值，不允许重新赋值

变量的命名规则：

• 可以由字母、数字、下划线、美元符号组成
• 不能以数字开头
• 不能以关键字命名
• 区分大小写
• 驼峰式命名(例如：userName)

数据类型和强转

原始类型

• 原始类型分为数值型、字符串型、布尔型、未定义型、空

Number

• 数字
• NaN 不是某个数

String

• 被引号包含的数据就是字符串型，不区分单双引号
  • 查看任意一个字符的Unicode码
  • 's'.charCodeAt()

boolean

• 只有两个值，分别是true和false，代表真和假，表示只有两个结果的数据，例如是否登录、是否注册…

undefined

• 声明了变量未赋值则为undefined，属于一种空值

null

• 只有一个值null。类型是object(对象)，常结合引用类型数据使用

查看数据类型

• typeof(a)或者typeof a
• 其中null显示的数据类型是object
• prompt()存储的数据类型是字符串类型

数据类型转换分为隐式转换和强制转换

1、隐式转换

(1)数字+字符串 ： 数字转为字符串

var a = 2 + '1';
console.log(a); //'21'

(2)数字+布尔型 ： 布尔型转为数值 true-1 false-0

var a = 1+true;
var b = 1+false;
console.log(a,b);  //2  1

(3)字符串+布尔型 ： 布尔型转为字符串

var a = '5'+true;
console.log(a);  //'5true'

NaN

var a = 2+undefined;//NaN Not a Number 不是一个数字
console.log(a);//NaN

Not a Number，不是一个数字，是在将数据转数值的时候失败的结果，和任何的值执行数学运算结果还是NaN

加号(+)的作用

1. 加法运算
2. 字符串之间的拼接

总：练习:

var a1 = 2+undefined;//NaN 
var a2 = 2+null;//2 
var a3 = '2'*3;//6
var a4 = '4' / '2';//2
var a5 = true - '5';//-4
var a6 = undefined - '2';//NaN
var a7 = '2a'/2;//NaN
console.log(a1,a2,a3,a4,a5,a6,a7);//NaN 2 6 2 -4 NaN NaN
console.log(NaN-2);//NaN

2、强制转换

• Number
  • 强制转换为数值

 var n1 = Number(true); //1
 var n2 = Number(false); //0
 var n3 = Number('2'); //2
 var n4 = Number('2a'); //NaN
 var n5 = Number(undefined); //NaN
 var n6 = Number(null); //0
 console.log(n1,n2,n3,n4,n5,n6); //1  0  2  NaN  NaN  0

• parseInt()
  • 强制转换为整型

 var p1 = parseInt(8.9);  //8
 var p2 = parseInt('3.14'); //3
 var p3 = parseInt('6.18a'); //6
 var p4 = parseInt('a6.18'); //NaN
 console.log(p1,p2,p3,p4); //8  3  6  NaN

• parseFloat()
  • 强制转换为浮点型

 var f1 = parseFloat('5.18'); //5.18
 var f2 = parseFloat('7a'); //7
 var f3 = parseFloat('a4.13'); //NaN
 console.log(f1,f2,f3);//5.18  7  NaN

• toString()
• 将数值和布尔型强制转为字符串（了解）
  • null和undefined不能

 var num = 2;
 var n1 = num.toString(); //'2'
 console.log(n1,typeof n1); //2  string

运算符

算数运算符

   +   -   *   /    %    ++   --
   %  取余
   ++  自增，在原来的基础之上加1
   --   自减，在原来的基础之上减1

比较运算符

   >  <  >=  <=   ==(等于)   !=   ===(全等于)   !==(不全等于)
   ==  等于，只是比较值是否相同，可能会发生隐式转换
   ===   全等于，先比较类型，然后再比较值
   !=   不等于，比较值不等于
   !==  不全等于，类型不同或者值不同
   NaN==NaN //false
   NaN和任何值比较(>  <  >=  <=  ==  ===)结果都是false

逻辑运算符

   &&   ||   !
   &&  逻辑与，关联的两个条件都是true结果是true，否则是false
   ||  逻辑或，关联的两个条件有一个是true结果是true，否则是false
   !  取反

短路逻辑

   当执行完第一个条件不再执行第二个条件，就会产生短路逻辑
   关注点在于第二个条件(表达式)是否执行
   &&  当第一条件为false就不再执行第二个条件
   ||  当第一个条件为true就不再执行第二个条件

示例：查看以下程序是否会报错

 var  a=5;
 console.log(a > 2    &&   console.log(num)); //报错
 console.log(a > 2    ||   console.log(num));//不报错

位运算符

 模拟计算机底层的运算，先将数据转为二进制，然后进行运算，当运算完再把结果转回成十进制。
                      1      2     3      4      5     6     7
                      1    10   11   100  101  110  111
 &  按位与，上下两位比较，如果都是1结果是1，否则是0
 |   按位或，上下两位比较，如果含有1结果是1，否则是0
 ^  按位异或，上下两位比较，不同是1，相同时0
 >>   按位右移，删除末尾的位数
 <<   按位左移，在末尾补0
       5&7           8|13          7^12
       101           1000          0111
       111           1101          1100
      -----         ------        ------
      101            1101          1011 

赋值运算符

   =  +=  -=  *=   /=   %= ...
   赋值      运算赋值：先执行运算，再执行赋值

三目运算符

• 一目运算符：由一个运算符连接的一个操作数据或者表达式 ++ – !
• 二目运算符：由一个运算符连接的两个操作数据或者表达式
• 三目运算符：由两个运算符连接的三个操作数据或者表达式
  • 条件表达式 ? 表达式1 : 表达式2
  • 如果条件表达式为true执行表达式1
  • 如果条件表达式为false执行表达式2

if判断 和 循环

if 和 if-else判断

(1)if语句

• 如果if后的语句块中只有一行代码，则大括号可以省略
• 以下数据作为条件表达式会隐式转换为false
• 0 ‘’ undefined null NaN
  

if(条件表达式){
  语句块;
}

(2)if-else语句

if(条件表达式){
  语句块1;
}else{
  语句块2;
}

(3)if-else嵌套

if(条件表达式1){
  语句块1;
}else if(条件表达式n){
  语句块n;
}else{
  语句块n+1;  //以上所有的条件表达式都是false
}

(4)switch-case

• 是特殊的多项分支语句，根据表达式的值选择执行对应的语句

switch(表达式){
  case 值1:
    语句块1;
    break;
  case 值n:
    语句块n;
    break;
  default:
    语句块n+1;   //表达式和case后的值都不相同
}

注意: 对比if-else嵌套和switch-case的区别

• 相同：两者都可以用于多项判断
• 不同：if-else既可以进行等于，也可以进行不等于的比较；switch-case只能进行全等于的比较；if-else的适用范围更加广泛，switch-case结构上更为清晰，执行效率更高。

循环

(1)while循环

while(循环条件){
  循环体
}

(2)do-while循环

do{
  循环体
}while(循环条件);

(3)for循环

for(初始值;循环条件;增量){
  循环体
}

(4)break和continue

• break 强制结束循环，后续不再执行循环中的代码，相当于整个循环执行完毕
• continue 跳过剩余部分的循环体，还会往后执行其它的代码

函数

• Number()/parseInt()/parseFloat()/alert()/prompt()...
• 函数分为系统函数和自定义函数
• 函数：是一个功能体，需要提供若干个数据，返回结果，用于封装重复 执行的代码 —— 煎饼机

1. 普通函数

(1)创建普通函数

function 函数名称(){
  函数体 —— 封装的代码
}
//调用函数
函数名称();

(2)创建带有参数的函数

function 函数名称(参数列表){  //用于接收外部传递的数据
  函数体
}
//调用函数
函数名称(参数列表) //实际传递的数据
//创建函数时的参数称为形参，调用函数时的参数称为实参，实参会赋值给形参，形参的数量可以和实参的数量不匹配，如果形参未赋值为undefined

(3)创建带有返回值的函数

function 函数名称(参数列表){
  函数体
  return 值; //返回值，函数调用后得到的结果
}
//调用
函数名称(参数列表);
  //return用于函数调用后得到的结果，如果函数中没有return或者return后没有加值，得到的结果是undefined；一旦return执行，就会跳出函数，结束函数的执行。

对比return和break

• return是用于跳出函数，结束函数的调用
• break是用于跳出循环、switch-case，结束对应语句的执行

2. 变量的作用域

 局部变量：在函数内的作用域称为函数作用域，里边的变量就是局部变量
 全局变量：在函数外的作用域称为全局作用域，默认一个js文件下就是在一个全局作用域下，里边的变量就是全局变量
 局部变量只能在当前的函数作用域下访问到
 全局变量可以在任意的作用域下访问到
 在函数中不加var声明的变量是全局变量 —— 不推荐
 变量提升，程序执行前，将var声明的变量提升到所在作用域的最前边，赋值不提升

3. 函数提升

程序执行前会将函数提升到所在作用域的最前边

//函数f会提升到最前边，然后f被8覆盖，最终f代表一个数字，不是函数。
//var f=function(){}
var f = 8;
function f(){
  console.log(5);
}
//f 代表什么？
console.log(f,typeof f);//8  number
//f();//报错

4.递归

• 在一个函数的内部调用了自身这个函数

• 如何使用递归：

  • 要有边界条件
  • 结合着return，最终跳出函数

• 递归示例：

  猴子吃桃问题：猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，
又多吃了一个，第二天早上又将剩下的桃子吃掉一半，又多吃了一个。
以后每天早上都吃前一天剩下的一半零一个。到第10天早上想再吃时，
见只剩下一个桃子了。求第一天共摘多少个桃子？
解析：
  第一天的桃子数量，等于第二天的桃子数量加1然后乘以2
  第二天的桃子数量，等于第三天的桃子数量加1然后乘以2
  第三天的桃子数量，等于第四天的桃子数量加1然后乘以2
  第四天的桃子数量，等于第五天的桃子数量加1然后乘以2
  第五天的桃子数量，等于第六天的桃子数量加1然后乘以2
  第六天的桃子数量，等于第七天的桃子数量加1然后乘以2
  第七天的桃子数量，等于第八天的桃子数量加1然后乘以2
  第八天的桃子数量，等于第九天的桃子数量加1然后乘以2
  第九天的桃子数量，等于第十天的桃子数量加1然后乘以2
  
  很明显，前一天的桃子数量等于后一天的数量加1然后乘以2
  通过以上分析，我们发现每一天桃子数量的求法过程是类似的，因此我们可以通过递归来解决该问题。
  递归函数的出口为n等于10，参数也是为n，表示第n天。
  //用递归计算
  function peach(n) {
    if (n===10){
        return 1;
    }
    return (peach(n + 1) + 1) * 2;
}
console.log( peach(1) );//1534

  //使用for循环计算
function peach2() {
    //从第10天开始
    var day = 10;
    //已知第10天剩一个桃子
    var left = 1;
    //欲求前一天桃子总量
    var total;
    //通过循环从第10天求第9天，从第9天求第8天......从第2天求第1天
    for (var day = 10; day > 1; day--) {
       //通过当天的left，计算前一天的total
       total = (left + 1) * 2;
       //将total作为left，再计算前一天的total
       left = total;
    }
    return total;
}
console.log( peach2() );

5.匿名函数

function (){}

(1)创建函数

//函数声明
function  fn(){
}

//函数表达式
//变量名称就是函数名称
var  fun=function(){
}

• 对比函数名称()和函数名称
  • 函数名称()，调用函数，得到函数的返回结果。
  • 函数名称，本质上是一个变量，保存了一个函数。
• 对比函数名称()和函数名称
  • 函数声明创建的函数存在函数的提升，顺序上可以先写调用再写创建
  • 函数表达式创建的函数只是存在变量声明的提升，必须先写创建再写调用

(2)匿名函数自调用

• 全局污染：全局变量的出现产生的影响

(function(){
   函数作用域下，变量是局部变量，可以防止污染全局
})();

(3)回调函数

• 将函数以实参的形式传递，这个传递的函数称为回调函数

function tao(madai){
  madai()  //调用传递进来的回调函数
}
function dong(){ }
tao(dong);
tao( function(){ } )

(4)系统函数

• isNaN() 检测一个值是否为NaN，常用于检测用户输入的值是否含有非数字
• 会将检测的值隐式转换为数值，然后查看是否为NaN，是->true 不是->false
• isFinite() 检测一个值是否为有限值，只有Infinity是无限值，其它所有的值都是有限值， 是有限值 -> true 不是有限值 -> false
• eval() 执行字符串表达式

对象

 属于引用类型数据
 对象是一组属性和方法的集合
 一部手机，属性有品牌、颜色、型号、尺寸... 方法有玩游戏、看视频、办公、购物...
 旁边的电扇，属性有品牌、颜色、高度... 方法有吹风、摇头...
 一个杯子，属性颜色、容量....  方法存储水..
 万物皆对象

(1)分类

• 自定义对象，用户自己创建的对象
• 内置对象(ES对象)，JS提供的对象
• 宿主对象，根据不同的执行环境划分

(2)自定义对象创建方式

• 对象字面量
• 内置构造函数
• 自定义构造函数

(3)对象字面量

• { 属性名: 属性值, 属性名: 属性值 }
• 属性名中的引号可以省略，如果含有特殊字符必须加引号

(4)访问属性

• 对象.属性名
• 对象[ ‘属性名’ ]
• 如果属性名不存在则返回undefined

(5)内置构造函数

• new Object()
• 创建一个空对象，需要单独添加每个属性

(6)遍历属性

• 依次访问对象中的每个属性

for(var k  in  对象){
  k 代表属性名
  对象[k]   属性名对应的属性值
}

(7)检测属性是否存在

• 对象.属性名 === undefined true -> 不存在 false -> 存在
• 对象.hasOwnProperty(‘属性名’) true -> 存在 false -> 不存在
• ‘属性名’ in 对象 true -> 存在 false -> 不存在

(8)对象中的方法

• 方法对应的是一个函数

var person = {
  name: '涛哥',
  play: function(){
     this //指代调用方法的对象
  }
};
person.play()   //调用方法，play中this指向person

数据的存储

(1)原始类型存储

• 直接存储在栈内存中

(2)引用类型存储

• 将数据存储在堆内存中，同时会自动生成一个地址，然后把这个地址保存到栈内存(变量)中
• 引用类型数据占用内存空间比较大，如果要销毁，没有任何的地址所指向，就会自动销毁。直接赋值为null即可销毁
  

数组

就是一组数据的集合，每个数据称为元素

(1)数组字面量

[ 元素1, 元素2, … ]

(2)元素的访问

• 数组[下标]
• 下标从0开始的整数，如果下标不存在返回undefined

(3)数组的长度

• 数组.length 获取数组元素的个数
• 数组[ 数组.length ] = 值; 可以在数组的末尾添加元素

(4)内置构造函数

• new Array(元素1,元素2…)
• new Array(3) 创建数组，初始化数组长度为3，可以添加更多个元素

(5)数组的分类

• 索引数组：以0及以上整数作为下标 >=0
• 关联数组：以字符串作为下标，需要单独的添加元素

(6)数组的遍历

for-in
for(var k  in  数组){
  k  代表下标
  数组[k]   下标对应的元素
}

循环
for(var i = 0;i < 数组.length; i++){
   i  代表下标
   数组[i]  下标对应的元素
}

(7)API

• API：应用程序编程接口，JS下指提供好的函数或者方法
• toString() 将数组转为字符串
• join(str) 将数组转为字符串，可以设置字符串之间的分割符

数组API

• reverse() 翻转数组中的元素
• sort() 对数组进行排序，默认按照编码排序

var arr = ['a','b','c','d'];
//翻转数组元素
arr.reverse();
console.log(arr);

var arr = [23,9,78,6,45];
//排序
//默认按照编码排序
arr.sort();
console.log(arr);

//回调函数
var arr = [23,9,78,6,45];
arr.sort( function(a,b){
  //console.log(a,b);
  //return a-b; //按照数字从小到大排列
  return b-a; //按照数字从大到小排列
} );
console.log(arr);

如何学习API：API的作用、有哪些参数，哪些参数可选，哪些参数必选、返回结果是什么?

 concat(arr2,arr3...)  拼接多个数组，arr2,arr3表示要拼接的数组，返回拼接后的数组
 slice(start, end)   截取数组元素，start开始的下标，end结束的下标，不包含end本身；如果下标是负数表示倒数，返回截取的元素，格式为数组。
 splice(start, count, v1,v2...)  删除数组中的元素，start开始的下标，count删除的数量，count为空删除的最后，下标是负数表示倒数；v1，v2..表示删除后补充的元素，返回删除的元素，原数组会发生变化
 indexOf()   查找数组中是否含有某个元素，返回找到的第一个的下标，如果找不到返回-1
 push()   往数组的末尾添加元素，返回数组的长度
 pop()  删除数组末尾的一个元素，返回删除的元素
 unshift()   往数组的开头添加元素，返回数组的长度
 shift()  删除数组开头的一个元素，返回删除的元素
 length  获取字符串的长度
 charAt(下标)  获取下标对应的字符，也可以使用数组形式  字符串[下标]
 lastIndexOf()   查看是否含有某个字符串，返回最后一次出现的下标，找不到返回-1
 substr(start, count)   按照长度截取字符串，start开始的下标，count截取的长度，如果count为空截取到最后，如果下标是负数表示倒数，返回截取到的字符串
 -------------------------------------------------------
 toUpperCase()   英文字母转大写
 toLowerCase()   英文字母转小写
 split( 字符 )   将字符串按照指定的字符分割为数组

concat

//拼接多个数组
var arr1 = ['张三','李四','王五'];
var arr2 = ['二麻子','唐三','奥斯卡'];
var arr3 = ['尘心','比比东','胖子'];
console.log( arr1.concat(arr2,arr3) );

slice

var arr = ['唐三','奥斯卡','尘心','比比东','胖子','戴沐白','老怪物','小学生'];
//截取数组元素
console.log( arr.slice(2) );
console.log( arr.slice(2,4) );
console.log( arr.slice(-3,-1) );

splice

//创建数组包含a~f，每个字母是一个元素；分别截取bc，ef；最后再将这两组拼接成一个新数组。
var arr = ['唐三','奥斯卡','尘心','比比东','胖子','戴沐白','老怪物','小学生'];
//删除数组元素
//console.log( arr.splice(1) );
//console.log( arr.splice(1,2) );
console.log( arr.splice(-4,0,'骨斗罗','剑斗罗','昊天斗罗') );
console.log(arr);

indexOf

var arr = ['a','e','c','d','e','f','g','h'];
//查找是否含有某个元素
console.log( arr.indexOf('e') );
console.log( arr.indexOf('n') );//不存在会显示-1

push

var arr = ['唐三','奥斯卡','尘心'];
//在末尾添加元素
console.log( arr.push('比比东','大师') );
console.log(arr);

pop

var arr = ['唐三','奥斯卡','尘心'];
//删除数组末尾的一个元素
console.log( arr.pop() );
console.log(arr);

unshift

var arr = ['唐三','奥斯卡'];
//往数组的开头添加一个元素
console.log( arr.unshift('小舞','宁荣荣') );
console.log(arr);

shift

var arr = ['唐三','奥斯卡'];
//删除数组开头的一个元素
console.log( arr.shift() );
console.log(arr);

length

var str = '唐三正在玩dangang';
//获取字符串长度
console.log( str.length );

charAt

var str = '唐三正在玩dangang';
//获取下标对应的字符(两种方法)
console.log( str.charAt(0),str[0] );

lastIndexOf

//查找字符串中是否含有某个字符串
var str = 'javascript';
//找第1个
console.log( str.indexOf('a') );
//找最后1个
console.log( str.lastIndexOf('a') );

substr

//按照长度截取字符串
var str = 'javascript';
console.log( str.substr(4) );
console.log( str.substr(4,3) );
console.log( str.substr(-3,2) );

toUpperCase

//英文字母大小写转换
var str = 'JavaScript';
//转大写
console.log( str.toUpperCase() );

toLowerCase

//英文字母大小写转换
var str = 'JavaScript';
//转小写
console.log( str.toLowerCase() );

split

var arr = ['a','b','c'];
//数组转为字符串
var str = arr.join('/'); //'a/b/c'
console.log(str);
//字符串转为数组
console.log( str.split('/') );

二维数组

• 用于对一组数据进行二次分类
• [ [元素1,元素2 ], [ ], [ ] ]
• 访问
• 数组[下标][下标]

var arr1 = ['山东','江苏','广东'];
//var arr2 = ['济南','青岛','烟台','南京','苏州','无锡','广州','深圳','珠海'];
var arr2 = [
  ['济南','青岛','烟台','威海'],
  ['南京','苏州','无锡'],
  ['广州','深圳','珠海','惠州']
];
console.log( arr2[0][3] );

//练习：截取文件名称的后缀名
var str = 'web.2104.tao.jpg';
var arr = str.split('.');
//最后一个元素
console.log(arr[arr.length - 1]);

字符串对象

• 包装对象：目的是为了让原始类型的数据像引用类型数据，具有属性和方法，一共有三种包装对象，String、Number、Boolean
• new String() 将数据转为字符串，返回对象
• String() 将数据转为字符串，返回字符串

var str1 = '1'; //字面量
var str2 = new String(1); //构造函数
var str3 = String(1);//'1'
console.log(str2,typeof str2);
console.log(str3,typeof str3);

转义字符 \

• \' 将特殊意义的引号转义为普通引号
• \n 将普通的字符n转义为换行符
• \t 将普通的字符t转义为制表符(tab键效果)

//转义字符
var str = 'It\'s a dog';
var str2 = 'a\nd';  //  \n 换行
var str3 = 'a\tb';  //  \t 制表符  tab键
console.log(str);
console.log(str2);
console.log(str3);
//打印出 'C:\users\web'
console.log('C:\\users\\web');//C:/users/web

Math对象

• Math.PI();获取圆周率
• Math.abs();`获取绝对值
• Math.ceil() 向上取整
• Math.floor() 向下取值
• Math.round() 四舍五入取值
• Math.random() 获取随机，范围 >=0 <1
• Math.pow(x, y) 计算x的y次方
• Math.max() 获取一组数字的最大值
• Math.min() 获取一组数字的最小值

//获取圆周率
console.log( Math.PI );
//绝对值 absolute
console.log( Math.abs(18-20) );
//向上取整
console.log( Math.ceil(3.14) );
//向下取值
console.log( Math.floor(3.14) );
//四舍五入
console.log( Math.round(5.49) );
//取随机 >=0 <1
console.log( Math.random() );
console.log( Math.random() );
console.log( Math.random() );
// 计算x的y次方
console.log(Math.pow(5,2)); //次方 计算x的y次方(5代表x,2代表次方)
console.log(Math.max(23,9,45,78,6));//最大值
console.log(Math.min(23,9,45,78,6));//最小值

Date对象

用于对日期时间的存储和计算

创建

• new Date(‘2021/5/18 10:27:30’)
• new Date(2021,4,18,10,27,30) 月份0~11 对应1月~12月
• new Date() 存储当前操作系统的时间
• new Date(1608336000000) 存储的是距离计算机元年的毫秒数，会产生一个具体的日期时间
• 计算机元年：0时区1970-1-1 0:0:0

//创建Date对象
var d1 = new Date('2021/5/18 10:27:30');
var d2 = new Date(2021,4,18,10,27,30);//月份0~11 1月~12月
var d3 = new Date();//当前操作系统时间
//距离计算机元年的毫秒数
var d4 = new Date(1608336000000);
console.log(d1);
console.log(d2);
console.log(d3);
console.log(d4);

获取存储的日期时间

• getFullYear 获取年
• getMonth 获取的月份0~11 对应1~12月
• getDate 获取日
• getHours 时
• getMinutes 分
• getSeconds 秒
• getMilliseconds 毫秒
• getDay 获取星期 0~6 对应星期日~星期六
• getTime 获取距离计算机元年的毫秒数

var d = new Date('2021/5/16 10:56:30');
console.log( d.getFullYear() );//获取年
console.log( d.getMonth()+1 );//0~11  对应1~12月
console.log( d.getDate() );//日
var hour = d.getHours();//时
var minute = d.getMinutes();//分
var second = d.getSeconds();//秒
console.log( d.getDay() );// 0~6  星期日~星期六
console.log( d.getTime() );//获取距离计算机元年毫秒数

转为本地字符串格式

• 存在兼容性问题，常用于调试
• toLocaleString() 日期+时间
• toLocaleDateString() 日期
• toLocaleTimeString() 时间

var d = new Date();
console.log(d);
//转为本地字符串
console.log( d.toLocaleString() );
console.log( d.toLocaleDateString() );
console.log( d.toLocaleTimeString() );

设置修改日期时间

修改Date对象中存储的日期时间

• setFullYear 修改年份
• setMonth 修改月份 月份 0~11 1月~12月
• setDate 修改日
• setHours 修改时
• setMinutes 修改分
• setSeconds 修改秒
• setMilliseconds 修改毫秒
• setTime 设置距离计算机元年的毫秒数，产生一个具体的日期

var d = new Date('2021/5/18 14:58:30');
//d.setFullYear(2024);修改年份
//d.setMonth(12);//修改月份
//d.setDate(10)//修改日
//setHours/setMinutes/setSeconds/setMilliseconds时/分/秒/毫秒
//设置为1周前：获取当前的日期后，然后减7，把结果作为要修改的值
//d.setDate( d.getDate()-7 );
//设置为3小时后
//d.setHours( d.getHours()+3 );
//d.setDay(6);//没有星期的修改
//设置距离计算机元年的毫秒数，产生新的日期时间
d.setTime(1500000000000);
console.log( d);
console.log( d.toLocaleString() );

拷贝Date对象

var d1 = new Date();
   var d2 = new Date(d1); //拷贝d1对象

Number对象(tofixed)

• new Number() 将数据转为数值，返回对象
• Number() 将数据转为数值，返回数值
• toFixed(n) 保留小数点后n位
• toString(n) 将数值转为字符串，可以设置显示的进制

var n1 = 1;//字面量
var n2 = new Number(true);//构造函数
var n3 = Number(true);//普通函数
console.log(n1, typeof n1);//1  number
console.log(n2, typeof n2);//[Number: 1]  object
console.log(n1 + 2,n2 + 2);//3  3
console.log(n3,typeof n3);//1  number

var n = 2 * 3.14 * 5;
//保留小数点后n位(想保留几位toFixed括号里面就写几)
console.log( n.toFixed(5) );

var num = 10;
//转为字符串，可以设置显示的进制
//toString(16/10/8/2) 括号里面可以写对应的进制
console.log( num.toString(16) );

Boolean对象

• new Boolean() 将数据转为布尔型，返回对象
• Boolean() 将数据转为布尔型，返回布尔型
• !! 隐式转换为布尔型 (!!null -> false)

var b1 = true;//字面量
var b2 = new Boolean(1);//构造函数
var b3 = Boolean(1);
//console.log(b2, typeof b2);
//console.log(b3);
//false: 0  undefined  null  ''  NaN
//[]  {}
console.log( Boolean({}) );//true
// !!隐式转换为布尔型
console.log( !!null ); //false

错误处理

常见的错误

• 语法错误(SyntaxError)：不符合语法规范，例如出现中文的符号，缺少半块括号
• 引用错误(ReferenceError)：使用了未声明的变量
• 类型错误(TypeError)：把一个非函数当做函数调用
• 范围错误(RangeError)：数据的使用超出了JS的规定范围
• 自定义错误：程序员自己制定的错误
• throw 错误内容

错误处理:

• 在运行过程中产生的错误，不再影响后续代码的执行

try{
  尝试执行，可能产生错误，一旦产生会被catch捕获
}catch(err){
  将错误信息放入到err中，不再影响后续代码执行
  进行错误处理
}

var age = 10;
try
{
	//尝试执形,可能产生错误,一旦出现错误,不在影响后续代码执型
	if (age<18 || age>60)
{
	//自定义错误
	throw '非法的年龄'
}
}
catch (err)
{
	//捕获错误,只有try中出现错误才会执行
	//将try中错误信息放入到形参err
	console.log(err);
	//解决错误
	age = 18;                                                              
}
console.log(age);
console.log(2);

ES6

  ECMA  ->  ECMAScript  ->  ES
             标准规范
  ES6  js的第6套标准规范
  ES7  ES8  ...
  ES2015   ES2016   ES2017

块级作用域

• let a = 1;
• let声明的变量不存在提升，在同一个作用域下，不允许重复声明同一个变量
• 大括号之间的语句块就是一个块级作用域，例如：if、else、while、do-while、for… 在块级作用域下，let和const声明的都是局部的，无法被块级作用域以外访问到。

//声明变量
//console.log(n1);//报错
let n1 = 5;//不存在提升
console.log(n1);//5
let n2 = 6;
//let n2 = 7;//报错 ： 同一个作用域下，不允许重复声明同一个变量
console.log(n2);//6

//块级作用域
{
  var c = 3;
  let d = 4;//局部变量
  const e = 5;//局部常量
}
console.log(c);//3
//console.log(d);//报错
//console.log(e);//报错

var let const三个区别

 var声明的变量存在提升，在同一个作用域下可以重复声明同一个变量
 let声明的变量不存在提升，在同一个作用域下不允许重复声明同一个变量，存在块级作用域，即使在全局作用域下let声明的变量也不是全局的
 const 声明的时候必须赋值，不允许重新赋值，存在块级作用域，即使在全局作用域下const声明的常量也不是全局的

参数增强

• 可以给函数的参数设置默认值

//参数增强
function fn(a,b,c=0){
  //es6之前设置参数的默认值方式
  //c = c || 0;
  console.log(a+b+c);
}
fn(10000,2000,500);//12500
fn(10000,2000);//12000
fn(10000);//NaN

箭头函数

 ()=>{ }   简化了匿名函数的写法，不等价于匿名函数

//回调函数
//使用箭头函数排序(两种方法)
var arr = [23,9,78,6,45];
//①
//arr.sort( (a,b)=>{
//  return a - b;//从小到大排序
return b-a;//从大到小排序
//} );
//箭头函数的函数体中只有一行代码，并且是return形式
//②
//arr.sort( (a,b)=>a-b );//从小到大排序
arr.sort( (a,b)=>b-a );//从大到小排序
console.log(arr);

模板字符串

 解决了字符串的拼接问题
 `模板字符串 ${JS表达式}`  
 注意:模板字符串是写在(``)这两个符号里面的

//模板字符串
var title = 'Apple MacBook Air';
var os = 'MacOS';
var memory = '16G';
var isOnsale = 1;
console.log(`
  商品名称：${title}
  操作系统：${os}
  内存大小：${memory}
  是否在售：${isOnsale === 1 ? '是' : '否'}
`);

//使用对象模式：声明变量保存一条员工的数据，格式为对象
var emp = {
  eid: 2,
  ename: '涛桑',
  sex: 0,
  salary: 50000
};
console.log(`
  编号：${emp.eid}
  姓名：${emp.ename}
  性别：${emp.sex ? '男' : '女'}
  工资：${emp.salary.toFixed(2)}元
`);