js入门 |ECMAScript 标准

前言

JS分为三个部分

• ECMAScript 标准----js的基本的语法
• DOM------Document Object Model 文档对象模型
• BOM-----Browser Object Model 浏览器对象模型

JavaScript是什么

• 一门运行在客户端的脚本语言、一门解释性语言、一门动态类型的语言、一门基于对象的语言。

• 编译语言：需要把代码翻译成计算机所认知的二进制语言，才能够执行；脚本语言：不需要霸译，直接执行，常见的脚本语言有t-sql，cmd。

JS应用场景

1. 网页特效
2. 服务端开发（Node.js）
3. 命令行工具（Node.js）
4. 桌面程序（Electron）
5. App（Cordova）
6. 控制硬件-物联网（Ruff）
7. 游戏开发（cocos2d-js）

变量

什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

如何使用

• 声明：有变量名 没有值

  var age
  

• 初始化赋值：有名有值

  var age=18
  

• 其他写法

  var num1 num2 num3
  num1=1;
  num2=2;
  num3=3
  

  var num1=1 num2=2 nume=e
  

数据类型

Number

• init——整数
• float——浮点数
• double

数值判断

• NaN：与任何值都不相等包括它本身
• isNaN：验证结果是否为NaN;判断不是一个数字，不是为true

操作符

• 算术运算符： + - * %, /(取余)——加减乘除
• 一元运算符：++ --——只需要一个操作数即可计算

  var num=10
  num++ //10
  ++num  //10
  num++ +10 //20
  ++num +10 //21
  //num++先参与运算后才自身++，
  //++num先自身++后再参与运算
  

• 二元运算符：+ - * % /——需要两个操作数
• 三元运算符
• 复合运算符|赋值运算符：+= -= *= /= %=

  num+=10
  num=num+10
  

• 关系运算符：> < >= <= == === != !==

  var str="5"
  var num=5
  console.log(str==num)//true，==不严格，只需要值相等而数据类型不一定
  console.log(str===num)//false ===严格，要求值与数据类型都相等
  

• 逻辑运算符：&& || ！

String

在js中，无论是单引号还是双引号都是字符串，它可以看成一个数组

字符串拼接

用“+”连接，拼接两个字符串。如果另一个是数字，不会计算结果；如果其中一个字符串里面是数字，另一个是数字，用的不是“+”，会隐式转换，有计算结果

转义字符

除了普通的可打印字符以外，一些特殊有特殊功能的字符可以通过转义字符的形式放入字符串中

转义序列	含义
\n	换行
\r	回车
"	双引号

Boolean

【false】判断为flase的几种情况：
	1. undefined（未定义，找不到值时出现）
	2. null
	3. false（布尔值的false，字符串"false"布尔值为true）
	4. 0（数字0，字符串"0"布尔值为true）
	5. NaN（无法计算结果时出现，表示"非数值"）
	6. ""或''（空字符串,空格时为true）
	
【注意】空数组空对象，负值转的布尔值时都为true

nulL

表示一个空，变量的值如果想为null，必须手动设置

Undefined

声明而没有赋值；函数没有明确返回值

Array

声明注意

var arr=new Array(5)//数组内有五个undefined元素
var arr=new Array(5,6,7,8)//[5,6,7,8]

数组特性

• 数组元素：数组内的数据；元素的数据类型可以多样
• 数组长度：数组内元素个数arr.length
• 数组索引：根据索引获取指定的数组元素arr[0]

相关案例

//案例1：去掉数组中重复的0
var arr=[1,0,3,0,5,0,7]
var newArr=[]
for(var i=0;i<arr.length;i++){
	if(arr[i]!=0){
		newArr[newArr.length]=arr[i]
	}
}

//案例2：冒泡排序从小到大
var arr=[10，0，100，20，60，30]；
for（var i=0；i<arr.length-1；i++）{
	for（var j=0；j<arr.length-1-i；j++）{
		if（arr[j]>arr[j+1]）{
			var temp=arr[j]；
			arr[j]=arr[j+1]；
			arr[j+1]=temp;
		}
	}
}

Function

声明与调用

• 命名函数

  //函数声明
  function funcName(){函数体}
  
  //函数调用
  funcName()
  

• 匿名函数：不能直接调用

  //函数声明
  function(){}
  
  //调用方法1：把函数给一个变量才能调用，这里称为函数表达式
  var f1=function(){}
  f1()
  
  //调用方法2：将函数包裹在括号内，也称自调用函数
  (function(){})()
  

函数参数

• 形参：函数在定义的时候括号里面的变量叫做形参

• 实参：函数在调用的时候括号里传入的值

  function sum(x,y){
      var sum=x+y
      console.log(sum)
  }//x,y为形参
  
  console.log(2,3)//2,3为实参
  //注意：形参与实参的参数数量可以不一致，但可能实现不了预期效果
  

• arguments：可以获取每个传入的参数值，即实参。它是一个伪数组

  function f1(){
  	console.log(arguments.length)//6
      console.log(arguments)//[1,2,3,4,5,6,collee:f...]
  }
  f1(1,2,3,4,5,6)
  

• 回调函数：即当函数作为参数使用时，这个函数就称为回调函数

  function f1(fn){
  	fn()//将函数作为变量、参数传进去，之后被调用
  }
  
  function f2(){这是一个将要被作为参数的函数}
  f1(f2)//传入f2函数，此时f2函数作为参数传入，被称为回调函数。传入的是函数的代码，不需要加括号；如果加括号了就是传入了函数的返回值
  

函数作用域

• 全局变量：全局变量可以在页面的任何位置使用。函数域外定义的变量都是全局变量。如果页面不关闭就不会释放，会占用内存。

• 局部变量：在函数内部定义的变量。

• 隐式全局变量：声明的变量没有var，区别在于没有var的变量会被轻易删除

• 全局作用域：全局变量的使用范围

• 局部作用域：局部变量的使用范围

• 块级作用域：一对大括号，里面的变量只能在里边使用，js只有函数内是块级作用域

• 作用域链：函数会在内部逐级调用；在内部的变量会在当前作用域找，如果找不到，会依次往外围作用域寻找

  var num=10//---0级作用域
  function f1=(){
      var num=20//---1级作用域
      function f2(){
          //var num=30---2级作用域
          console.log(num)//由于2级作用域的num被注释了，就往上找，在1级作用域中找到num，输出20
      }
      f2()//在f1中调用其内部的f2，f2才会被执行
  }
  f1()//调用f1，会循循往里深入
  

预解析

提前解析代码。它可以把变量的声明提前，提前到当前所在作用域的最上面，即函数内的变量只会提前到函数内部的最上边；函数的声明也会被提前，提前到当前所在作用域的最上面

//原本形式
console.log(num)//输出undefined
var num=10

//预解析后
var num//预解析会把声明放在上边
console.log(num)//输出undefined
num=10

//原本形式
function f1(){
    console.log(num)//undefined
    var num=10
}

//预解析后
function f1(){
    var num
    console.log(num)//undefined
    num=10
}
console.log(num)//报错，因为变量只是提前到当前作用域最上边，外部没有声明

//原本形式
f1()
function f1(){}

//预解析后
function f1(){}
f1()

var a=25;
function f1(){
	alert(a)//输出undefined。
    var a=10
}
//预解析会把a的声明提前，即alert上边是var a
//在这里a由于没有值，可以理解为a被赋值undefined
//所以函数能在内部找到a变量，
//所以函数不会根据作用域链的原理往外找外边的a变量，而只是输出内部的undefined

f1()
console.log(a)//报错
console.log(b)//9
console.log(c)//9
function f1(){
    var a=b=c=9;
    console.log(a)//9
    console.log(b)//9
    console.log(c)//9
}
//解析：首先函数预解析后会被提前，函数可调用。其次，函数内部的变量声明会被提前，即:
//var a;a=9;b=9;c=9;
//在这里，a是局部变量，而b和c是隐式全局变量，故b和c外部可以访问，而外部访问局部变量a的时候会报错

f1()
var f1=function(){
	console.log(a);
    var a=10;
}
//结果：报错，函数不能调用
//解析：注意，这里的f1是一个变量，首先变量的声明会被提前，即：
//var f1；
//f1()
//在这里，f1不是一个函数，而是一个没有被赋值的变量 ，所以f1无法调用，报错

函数的返回值

• return后面的值称之为返回值，注意，当你需要返回值，调用函数之后需要定义一个变量接收；return后面的代码不会执行

  function getSum(x,y){
      return x+y
  }
  //定义变量接收返回值
  var result=getSum(x+y)
  console.log(result)
  

  function getSum(x,y){
      return x+y
  }
  //这里表示先调用再输出返回值
  console.log(getSum(x,y))
  

• 函数作为返回值使用

  function f1(){
      return function(){我是返回的匿名函数}
  }
  var f2=f1()//在这里，f2就成了f1返回的那个匿名函数，即f2=function(){我是返回的匿名函数}
  f2()//调用返回的匿名函数
  

函数案例

//求n-m内数字的和
function getSum(n,m){
    var sum=0;
    for(var i=n;i<m;i++){
        sum+=i;
    }
    return sum
}
console.log(getSum(1,100))

//求圆的面积
function getS(r){
    return Math.PI*r*r;
}
console.log(getSum(10))

//求一组数字的和
function getSum(array){
    var sum =0;
    for(var i-0;i<array.length;i++){
        sum+=array[i]
    }
    return sum
}
console.log(getSum([1,2,3,4]))

注意事项

• 函数需要先定义才能使用
• 函数名字：遵循驼峰命名法
• 函数一旦重名，后面的会把前面的覆盖掉
• 一个函数最好是一个功能

函数部分的内容会在这篇文章有更多细节的展开

Object

编程思想

• 面向过程：每件事都自己做，具体过程都要知道，注重过程
• 面向对象：根据需求找对象，所有的事都用对象来做，注重结果

面向对象

• 特性：封装，继承，多态（抽象，可模拟特性）
• js不是面向对象的语言，但是可以模拟面向对象的思想，js是一门基于对象的语言，即本身有对象可以直接用。
• 对象：有特征和行为，具体特指某一个事物

创建对象的方式

引入 ：
instanceof ，判断变量是否属于某类型,语法：变量 instanceof 类型的名字
xiaoming instanceof Object——判断小明是否属于对象

1. 调用系统的构造函数

   //语法
   var 变量名=new Object()
   
   
   //实例化对象
   var xiaoming=new Object()
   //添加属性
   xiaoming.age=18
   xiaoming.sex="男"
   //添加方法(行为)
   xiaoming.sleep=function(){
     console.log("我天天睡懒觉")
   }
   //获取与调用
   console.log(xiaoming.name)
   xiaoming.sleep()
   

   //在当前的对象的方法中，可以使用this关键字代表当前对象
   xiaoming.sleep=function(){console.log("我天天睡懒觉，我是"+xiaoming.name)}
   xiaoming.sleep=function(){console.log("我天天睡懒觉，我是"+this.name)}
   

2. 工厂模式

   需求：第一种方法无法一次性创建多个对象，我该怎么做？

   解决：把创建对象的代码封装在一个函数中

   function createPerson(){
       var person=new Object();//---1.创建对象
       person.name="小明";//---2.添加属性
       person.age=18;
       person.sayHi=function(){
           alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
       }//---3.添加方法
       return person//---4.返回对象
   }
   
   //使用：创建人的对象
   var person1=createPerson()
   person1.sayHi()//---此时就能使用封装函数内定义的属性和方法
   

   需求：上面的方法只能创建相同的对象，但我要不同的，我该怎么办？

   解决：传入变量

   function createPerson(name,age){
       var person=new Object();
       person.name=name;//在这里，左边的person.name是个属性，右边name是个变量
       person.age=age;
       person.sayHi=function(){
           alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
       }
       return person
   }
   
   var person1=createPerson("小明",18)
   

3. 自定义构造函数

   需求：不能分辨出对象到底属于哪个对象类型？怎么办？

   解决：自定义构造函数。

   function Person(){
       this.name="小明";
       this.age=18;
       this.sayHi=function(){
           alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
       }
   }
   
   var person1=new Person()
   console.log(person1 instanceof Person)//true
   

   function Person(name,age){
       this.name=name;
       this.age=age;
       this.sayHi=function(){
           alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
       }
   }
   
   var person1=new Person("小明",18)
   console.log(person1 instanceof Person)//true
   

   与工厂模式对比，少了new Object()和return；属性与方法直接用this而不用person。构造函数与函数的区别：名字上，构造函数首字母要大写；调用上，没有区别

   自定义构造函数创建对象做了四件事：

   1.开辟空间，储存创建的新对象

   2.把this设置为当前对象

   3.设置对象的属性和方法的值

   4.返回创建后的新对象

4. 字面量的方式

   //1.原始写法
   var person={}//创建了一个空对象
   person.name="小明";
   person.age=18;
   person.sayHi=function(){
     alert('你好，我叫'+this.name)
   }
   

   //2.优化后的写法
   var person={
     name:"小明",
     age:20,
     sayHi:function(){
         alert('你好，我叫'+this.name)
     }
   }
   

   缺陷：它是一次性的对象，无法轻易改值，只能在对象内部更改。即对象一开始就被写死

访问与修改属性

• obj.name 、obj.name="小明"
• obj["name"]、obj["name"]="小明"

JSON

json也是一个对象，一般json格式的数据无论是键还是值都是用双引号括起来的

值类型与引用类型

• 基本类型（值类型）：number，string，boolean
  值类型的值在栈中储存。值在栈。
• 复杂类型（引用类型）：object
  引用类型的值在栈和堆中储存。对象在堆，引用（地址）在栈

• 值类型作为函数的参数时，传递值

  function f1(x){
  	x=100;
  }
  var num=10
  f1(num)  
  console.log(num)//10
  //解析：f1调用相当于在栈创建了一个内存=> x=100
  //函数内部可以这样理解：var x;x=100 传进来的参数10自动化为变量x
  

• 引用类型作为函数的参数时，传递的是地址

  var obj={name="小明"}
  function f2(obj2){
  	obj2.name="小红"
  }
  console.log(obj.name)//"小明"
  f2(obj);
  console.log(obj.name)//"小红"
  //解析：f2调用相当于传递obj的地址，进而在堆的找到地址上进行修改。这里obj和obj2指向的是同个地址
  

内置对象

JS包括三种对象

• 内置对象——js系统自带的对象
• 自定义对象——自定义构造函数创建的对象
• 浏览器对象——BOM

• 实例对象：通过构造函数创建出来，实例化的对象
• 静态对象：不需要创建，静态方法直接通过这个对象的名字调用

1. Math，它具有数学常数和函数的属性和方法。它不是一个构造器，不能直接new实例化。

   //属性
   Math.E//自然对数的底数e==>2.718281828459045
   Math.PI//圆周率
   
   //方法
   Math.abs(-2)//取绝对值==>2
   Math.ceil(10.1)//向上取整==>11
   Math.floor(10.1)//向下取整==>10
   Math.max(1,2,3,4)//获取最大值==>4 
   Math.random() //返回一个0-1的浮点
   

   [案例1]在1-10中获取随机数

   parseInt(Math.random()*10+1)
   

   [案例2]自定义构造函数，实现取最大值

   function MyMax(){
   	this.getMax=function(){
           var max=arguments[0];
           for(var i=0;i<arguments.length;i++){
               if(max<arguments[i]){
                   max=arguments[i]
               }
           }
           return max
       }
   }
   
   var mt=new MyMath();
   var result=mt.getMax(10,20,30)
   console.log(result)//30
   

   [案例3]随机生成一个十六进制的颜色值

   function getColor(){
       var str="#"
       //十六进制的值的数组
       var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
       //生成十六进制的6个索引
       for(var i=0;i<6;i++){
           //随机生成arr数组的索引，以根据索引获得里面的值
           var num=parseInt(Math.random()*16);
           //拼接字符串
           str+=arr[num]
       }
       return str
   }
   

2. Date，创建date实例来处理时间和日期，可以new实例化

   //与Math不同，Date首先要实例化
   var dt=new Date()//表示实例化时刻的日期和时间。已自动转换成字符串类型
   
   dt.toDateString()//英文格式==>Fri Jul 31 2020
   dt.toLocaleDateString()//数字格式==>2020/7/31
   dt.toTimeString()//小时分钟秒==>16:16:12 GMT+0800 (中国标准时间)
   dt.toLocaleTimeString()//小时分钟秒==>下午4:16:12
       
   dt.getFullYear()//获取年份
   dt.getMonth()+1//获取月份，这里的月份是从0开始算的
   dt.getDate()//获取日期
   dt.getHours()//获取小时
   dt.getMinutes()//获取分钟
   dt.getSeconds()//获取秒
   dt.getDay()//获取星期，0指的是星期日
   

   [案例1]封装函数——格式化后的指定格式的日期和时间

   指定的格式：2020年7月31日 16:16:12
   
   function getDate(dt){
       var year=dt.getFullYear();
       var month=dt.getMonth()+1;
       var day=dt.getDate();
       var hour=dt.getHours();
       var minute=dt.getMinutes();
       var second=dt.getSeconds();
       
       month=month<10?"0"+month:month;
       day=day<10?"0"+day:day;
       hour=hour<10?"0"+hour:hour;
       minute=minute<10?"0"+minute:minute;
       second=second<10?"0"+second:second;
   
       return year+"年"+month+"月"+day+"日"+hour+"："+minute+"："+second
   }
   
   //调用
   getDate(new Date())
   

3. String，全局对象，用于字符串或一个字符串序列的构造函数

   string：字符串类型——值类型 var str="hello"
   String：字符串类型——引用类型 var str=new String("hello")
   一个字符串既是值类型又是引用类型。以上两种方式声明的字符串都可以被认为是实例化的一个对象，即都可以使用内置的方法。区别在于是否使用了内置方法和属性。

   字符串特性：不可变性，即字符串原来的值不可改变

   //这里的改变是因为重新赋值了
   var str="hello"//这里在堆生成了地址1
   str="hi"//这里在堆生成了地址2，原来的地址1没改
   console.log(str)//hi  这里是因为地址的指向发生改变
   
   
   //不可变性
   var str="hello"
   str[1]="w"//字符串可以通过索引访问某个值，但是只可以访问不能修改，即只读
   console.log(str)//hello
   

   属性与方法

• string.length

  返回字符串的长度

  var str="hello"
  str.length//5
  

• chartAt()

  输入索引，找到该索引位置的值。语法：str.chartAt(索引)。如果指定的索引超出了该范围，则返回一个空字符串

  var str="hello"
  str.charAt(2)//l
  

• concat()

  合并字符串，并返回一个新的字符串。语法：str.concat(字符串1，字符串2，字符串3...)

  var str="hello"
  str.cancat('my','name','is','xiaoming')//hellomynameisxiaoming
  

• indexOf()

  返回字符串中第一次出现指定值的索引，只找一个。语法：str.indexOf(指定值，从哪里开始找)，第二个参数默认是0；如果未找到该值，则返回 -1；区分大小写

  //通常用法
  var str="Blue Whale"
  str.indexOf("Blue")		   // 返回 0
  str.indexOf("Blute")       // 返回 -1
  str.indexOf("Whale", 5)    // 返回 5
  str.indexOf("blue")        // 返回 -1
  
  //检测是否存在某字符串
  str.indexOf('Blue') !== -1    // true
  str.indexOf('Bloe') !== -1    // false
  

• includes()

  判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。语法：str.includes(要找的字符,从哪开始])。区分大小写

  var str= "Blue Whale"
  str.includes('blue'); // false
  

• match()

  返回一个字符串匹配正则表达式的的结果。语法：str.match(regexp)

  正则表达式相关知识请看这篇文章

    var str="中国移动10086；中国联通10010"
    var array=str.match(/\d{5}/)//这样只能匹配一个
    var array=str.match(/\d{5}/g)//全局匹配 ["10086","10010"]
  

• replace()

  如果与正则表达式相匹配，就将这个字符串替换成自己想要的
  语法：str.replace(regexp|substr, newSubStr|function)

    var str="小明睡懒觉了"
    str=str.replace(/睡懒觉/,"起床")
    console.log(str)//小明起床了
  

• slice()

  输入开始索引与结束索引，截取其中间的字符。语法：str.slice(开始索引，结束索引)，从第一个索引开始，到第二个索引前结束。

  var str = 'The morning is upon us.'
  str.slice(1, 8)//he morn
  

• substr()

  从指定位置开始，直到满足指定字符数后结束，返回字符串。语法：str.substr(开始索引，字符数)，如果后面没有参数，则返回从索引开始到结束的字符串。

    var str = "abcdefghij";
      str.substr(1,2);   // bc
      str.substr(1);     // bcdefghij
  

• toLocaleLowerCase()

  把字符串转换为小写的格式。

  var str=HELLO
  str.toLocaleLowerCase()//hello
  

• toLocaleUpperCase()

  把字符串转换为大写的格式。

  var str=hello
  str.toLocaleLowerCase()//HELLO
  

• split()

  用特定分隔符认定字符串中需要分割的位置，分割成数组。语法：str.split(分隔符，切割后留下的个数)

    var str = "Hello World. How are you doing?";
    str.split(" ", 3)//["Hello", "World.", "How"]
  

• String.fromCharCode()

  返回使用指定的Unicode值的序列创建的字符串。静态方法，即不能通过实例化直接调用，而是直接用大写的String调用

    String.fromCharCode(65)//A  如果输入多个则返回拼接后的字符串
  

  [案例]找到这个字符串中索引a出现的位置

  var str="asjdhqohkjasekcaxa"
  var index=0//开始的位置
  var key="a"//要找的字符串
  while((index=str.indexOf(key,index))!=-1){
  	console.log(index)
      index+=key.length
  }
  

4. Array 数组对象是用于构造数组的全局对象

• forEach()
  遍历数组。对数组的每个元素执行一次给定的函数，不会改变原数组。这个函数不能终止循环
  语法：arr.forEach(item,(index)=>{操作})

  const arr1= ['a', 'b', 'c'];
  arr.forEach(item => console.log(item));
  const arr2 = [1, 4, 9, 16];
  arr.forEach(item=> item * 2);//打印输出：[1, 4, 9, 16]
  

• map()
  把每个元素进行处理后返回一个新数组
  语法：arr.map(item,(index)=>{处理})

  const arr = [1, 4, 9, 16];
  arr.map(item=> item * 2);//打印输出：[2, 8, 18, 32]
  

• every()
  测试数组内的所有元素是否都能通过某个指定函数,返回一个布尔值。可提前终止
  语法：arr.every(item,(index)=>{测试})

  const arr = [1, 30, 39, 29, 10, 13];
  arr.every(item=>item<40))//打印输出：true 即所有元素满足小于40
  

• some()
  测试数组是否至少有1个元素通过了测试，返回一个布尔值。可提前终止
  语法：arr.some(item,(index)=>{测试})

  const arr = [1, 2, 3, 4, 5];
  arr.some(item=>item%2===0)//打印输出：true 即至少有一个元素可被2整除
  

• find()
  返回数组中通过测试的第一个元素值。否则返回 undefined。可提前终止
  语法：arr.find(item,(index)=>{测试})

  const arr = [5, 12, 8, 130, 44];
  arr.find(item=>item>10)//12 即12是第一个大于10的元素，返回
  

• findIndex()
  返回数组中通过测试的第一个元素的索引。否则返回-1。可提前终止
  语法：arr.findIndex(item,(index)=>{测试})

  const arr = [5, 12, 8, 130, 44];
  arr.findIndex(item=>item>13)//打印输出：3 即第一个满足测试的元素的索引是3
  

• cancat()
  合并两个或多个数组,返回一个新数组。
  语法：旧数组.cancat(数组1，数组2...)

  const arr1 = ['a', 'b', 'c'];
  const arr2 = ['d', 'e', 'f'];
  arr1.concat(arr2)//打印输出：["a", "b", "c", "d", "e", "f"]
  

• filter()
  创建一个新数组, 里面是通过测试的所有元素。
  语法:arr.filter(item,(index)=>{测试})

  const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
  arr.filter(item=>item.length>6)//打印输出：["exuberant", "destruction", "present"]
  

• push()
  将元素添加到数组的末尾，并返回该数组的新长度。改变原有
  语法：arr.push(元素1,元素2...)

  const animals = ['pigs', 'goats', 'sheep'];
  animals.push('cows')//打印输出：4
  animals//打印输出：["pigs", "goats", "sheep", "cows"]
  

• unshift()
  将元素添加到数组的开头，返回该数组的新长度,改变原有
  语法：arr.unshift(元素1,元素2...)

  const arr = [1, 2, 3];
  arr.unshift(4, 5)//打印输出：5
  arr//打印输出：[4, 5, 1, 2, 3]
  

• pop()
  从数组中删除最后一个元素，返回该元素的值,更改了数组的长度。
  语法：arr.pop()

  const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
  plants.pop()//打印输出："tomato"
  plants//打印输出：["broccoli", "cauliflower", "cabbage", "kale"]
  

• shift()
  从数组中删除第一个元素，返回该元素的值。更改了数组的长度。
  语法：arr.shift()

  const arr = [1, 2, 3];
  arr.shift()//打印输出：1
  arr//打印输出：[2, 3]
  

• indexOf()
  找给定元素的索引，返回。如果不存在，则返回-1。
  语法：arr.indexOf(要找的元素，从哪里开始)

  const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  beasts.indexOf('bison')//打印输出：1
  

• join()
  用一个指定符号把数组元素连接起来，返回连接好的字符串
  语法：arr.join("指定符号")

  const arr = ['Fire', 'Air', 'Water'];
  arr,join('-')//打印输出："Fire-Air-Water"
  

• reverse()
  颠倒数组元素的位置
  语法：arr.reverse()

  const arr = ['one', 'two', 'three'];
  arr.reverse();//打印输出：["three", "two", "one"]
  

• sort()
  对数组的元素进行排序，并返回数组,改变了。按照转换为的字符串的各个字符的Unicode位点进行排序。
  语法：arr.sort()，arr.sort(比较函数)

  const months = ['March', 'Jan', 'Feb', 'Dec'];
  months.sort();//打印输出：["Dec", "Feb", "Jan", "March"]
  
  var numbers = [4, 2, 5, 1, 3]; 
  sort((a, b) => a - b); //打印输出：[1, 2, 3, 4, 5]
  

• slice()
  从开始位置到结束位置抽取新数组,不包括结束位置的元素
  语法：arr.slice(开始索引，结束索引)

  const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  animals.slice(2)//打印输出：["camel", "duck", "elephant"]
  animals.slice(2, 4)//打印输出：["camel", "duck"]
  

• splice()
  删除、替换或添加元素来修改数组,以数组形式返回被修改(替换)的内容。改变原数组。
  语法：arr.splice(开始位置，要移除的个数，要添加（替换）的元素)

  //删除
  var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
  myFish.splice(3, 1)//从第三位删除一个元素。打印输出：["mandarin"]
  myFish//打印输出：["angel", "clown", "drum", "sturgeon"]
  
  //替换
  var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
  myFish.splice(2, 1, "trumpet");//从第二个元素开始删除一个插入一个，即替换第三个元素。打印输出：["drum"]
  myFish//打印输出：["angel", "clown", "trumpet", "sturgeon"]
  
  //添加或插入
  var myFish = ["angel", "clown", "mandarin", "sturgeon"];
  myFish.splice(2, 0, "drum");//从第二个位置添加元素“drum”。打印输出:[]
  myFish//打印输出：["angel", "clown", "drum", "mandarin", "sturgeon"]
  

• Array.isArray()
  静态方法，判断传递的值是否为一个数组

  Array.isArray([1, 2, 3]);  // true
  Array.isArray({foo: 123}); // false 
  

基本包装类型

普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法

本身是基本类型，但是在执行代码的过程中，如这种类型的变量调用了属性或者是方法，那么这种类型就不再是基本类型了，而是基本包装类型。这个变量也不是普通的变量了，而是基本包装类型对象

var num=Number("10")//类型转换
var num=new Number//基本包装类型

数据类型转换

• parseInt（）：转为整数
• parseFloat（）：转小数
• Number()：转数字，更为严格
• .toString()：转字符串，如果变量有意义使用
• String（）：转字符串，没有意义时转换，即可以是未声明或null等
• Boolean（） ：转布尔值。0|字符串没有内容|null|undefined等没有意义的为false

流程控制

1.顺序结构

从上到下，从左到右

2.分支结构

if if-else if-else if switch-case

if(条件){事件1}else{事件2}

//三元表达式可达到同等效果
//解释：判断条件的结果是true还是false，如果是true执行事件1，如果是2执行事件2，最后把结果赋值给变量
var a=条件?事件1:事件2

if(条件1){事件1}else if(条件2){事件2}else{事件3}
//else if可无限添加

switch(变量){
	case 值1:事件1:
	break;
	case 值2:事件2:
	break;
	case 值3:事件3:
	break;
	default:事件4
}
//获取变量的值，与case的值依次比较，如果一样则执行事件并且跳出整个语句。若前面都不相同，执行default事件。
//变量与case值比较时，是严格模式，即“===”
//若事件重复，值可集合在一起，在这个集合中，前面的事件和break可以省略，只保留最后一个即可

3.循环结构

while do-while for for-in

while(循环条件){
	循环体；
	计数器++
}
//判断循环条件是否为true，为true时执行，先循环体再计数器

//计算1-100所有值的和
var sum=0
var i=0
while(i<100){
	sum+=;
	i++;
}
//解析：第一次进入循环，sum=0，i=1；
//第二次进入循环,sum=0+1，i=2;
//第三次进入循环，sum=1+2，i=3

do{
	循环体
}while(循环条件)
//先执行循环体，再判断条件，成立时继续执行，否则跳出

for(变量；判断；计数器){
	循环体
}
//例子
for(var i=0;i<10;i++){
	执行事件
}

break：循环中如果碰到则会跳出当前循环
continue：不再执行其后面的事件，直接进入下一次循环