ES6

ES6

1.声明变量的方式

let：

1.无变量提升

2.不可重复声明：不能声明同一个变量名，也不可在函数体内部声明参数

3.块级作用域：{}、if(){}、for(){}

用let声明的变量，只在let声明存在的代码块中生效

 

const：

1.无变量提升

2.不可重复声明，一旦声明立即赋值，声明的是一个常量，不可修改

const age;
age = "12";
以上错误：声明变量后未马上赋值
 
const age = "11";
age = "12";
以上错误：const声明的是一个常量，不得修改

3.块级作用域：{}、if(){}、for(){}

var：

1.变量提升；包含声明阶段和执行阶段

2.重复声明一个变量

3.只存在全局作用域和函数作用域

针对以上问题es6(ECMA2015)做了更新

 

2.模板字符串

模板字符串用反引号定义

1.像普通字符串使用

2.嵌入js表达式、变量里面，通过`${}`的方式

3.可写多行字符串，不受回车、空格影响

 

3.箭头函数 Arrow Function

1.语法：

将原函数的"function"关键字和函数名去掉,使用=>连接参数列表和函数体

2.写法分类：

             参数个数上：

                 1.如果函数有一个参数，那么小括号可以省略

                 2.函数没有参数，小括号必须写，不能省略

                 3.如果有多个参数，小括号必须写，每个参数用","分隔

             函数体语句个数：

                 1.如果只包含一个表达式，可以省略{}和return

                 2.如果有多条语句不能省略{}和return

3.箭头函数的特点

         优点：

             1.书写简洁

             2.不绑定this(没有this)，捕获上下文的this作为自己的this,继承作用域的this

             利用上述特点解决了问题

                 1.解决匿名函数this指向的问题

                 2.解决了setInterval  setTimeout中this的问题

            setInterval、setTimeout、parseInt、alert、document这些属性和方法都是window下面的

 

4.使用箭头函数：

1.在对象内定义箭头函数

             在对象内定义箭头函数，函数体内的this指向window，所以在对象下面调用这个箭头函数， 那么obj下面的值是获取不到的，要想获取到obj下面的值用es5

2.定义原型方法

             构造函数下面的原型方法不要使用箭头函数，需要使用es5里面的写法

3. 事件回调函数

             不要使用箭头函数

4.定义构造函数

             用箭头函数创建构造函数是无效的，会报错不是一个构造器

 

4.解构函数

解构赋值：es6允许按照某种模式，从数组或者对象中提取值，提取的值赋值给变量，这个过程称为解构赋值

 

        数组的解构赋值:

                        数组以序列号一一对应，这是一个有序的对应关系,

                        如果解构不成功，值为undefined，也可以写默认值,

                        在解构时如果有值就会使用，若没有值，会找默认值，若没有默认值就会返回undefined

        

        对象的解构赋值：

                        对象根据属性名和变量名一一对应(一定要一致！！！)，没有次序的影响;

var prop = {name:"小李"}
const {name:className}
console.log(className)//小李
name ->模式：要与对象中的属性名一致
className -> 别名
若解构不到，值为undefined,可以写默认值

 

        字符串的解构赋值：

                        字符串在解构时，把它转化成了一个伪数组

                        null和undefined不能被解构

length(类似数组的对象)属性也可以用来解构
const {length} = "hello"
const{length:len} =5

 

        

        函数参数的解构赋值：

　　　　　　传进去的参数在传入函数内就被解构成了这个函数的变量

　　　　　　默认值：在函数定义的括号内变量名后面用 “=”连接

function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8});
 // [3, 8] move({x: 3});
 // [3, 0] move({});
 // [0, 0] move();
 // [0, 0] 先看函数返回是否有实参，有就返回实参数据，没有就返回默认值

 

 

解构赋值的作用：

1.可以交换变量，原理：数组解构赋值

2.可以提取json数据，原理：对象解构数据

3.函数返回多个值

4.给函数参数默认值，防止报错或找不到数据

 

5.数组的新增方法

1.reduce(fn,initial)：计算

方法：reduce(function(prev,next,index,arr){}，initial)

 参数一：函数

　　这个方法接收一个函数作为参数，这个函数也叫函数累加器(函数是用来做计算的)，数组从左往右依次减少，最终计算出一个返回结果

         这个函数接收4个参数：

                    prev:参与运算的初始值，或上一次计算的返回值,必选

                    next：依次参与运算的值，必选

                    index：索引，可选

                    arr：原数组，可选

 

var arr = [1,5,98,62]; var num = arr.reduce((prev,next,index,arr) => {     // console.log(this)     return prev + next },20) console.log(num)

参数二：initial

　　initial:计算的初始值，可选参数；

　　若有值，那么prev初始值就是initial的值，不会占用数组的第一项

 

2.filter(fn):过滤掉数组中不满足条件的值，把满足条件的值作为新数组的数组项返回，filter返回新数组

动态方法

方法：arr.filter(function(item,index,arr){})

例子：
var arr = [1,8,6,4,5,7,9];
var fil = arr.filter((item,index,arr) => {return item >= 5 }) console.log(fil)

        参数：

         item:数组的每一项 必选

         index：索引，可选

         arr：原数组，可选

 

 

3.of():将一组值转换为数组,初始化数组

静态方法
var num = Array.of(1,2,3,4,5,) console.log(num)

方法：Array.of(值)

                创建数组的方法：Array.of(item1,item2.....) = [item1,item2....]

                弥补newArray()创建数组时参数个数不同导致结果的差异，只有当参数>=2个的时候才会组成新数组

                Array.of().length可以获取数组的长度

 

 

4.find(fn)：用于找出第一个符合条件的数组成员

参数：function(item,index,arr){}

例子：var arr = [1,2,3,4,5,6,7] var mum = arr.find(function(item,index,arr){
     return item >6//7
     return item > 8//undefined
 })
 console.log(mum)

 参数是一个回调函数，数组的成员依次执行这个回调函数，直到找到第一个返回值为true的成员，然后返回的是这个成员，若未找到返回undefined

 

 

5.map(fn):映射，把原数组映射成一个新数组，新数组返回不改变原数组

     是一个动态方法

参数：function(item,index,arr){}
var  arr = [1,2,3,4] var aaa = arr.map(function(item,index,arr){     return item +4 }) console.log(aaa)

 

6.includes()：返回布尔值，表示某个数组是否包含给定的值

                     使用这个方法代替indexOf(),返回布尔值

                     动态方法

                     indexOf的弊端：无法判断数组成员是否存在NaN

　　关于参数：includes()

                     第一个参数：要找的指定项

                     第二个参数：寻找的开始位置，默认从0开始寻找

var arr = [20,50,80,45,63,9,NaN]
 console.log(arr.includes(NaN,0),)
//true console.log(arr.indexOf(NaN ,0),)//1

 

7.from()：把类似数组的对象或者可遍历的对象转化为真正的数组

　　伪数组：arguments，通过dom方式获得的集合，可遍历的对象均为伪数组，以上伪数组均可通过Array.from()这个方法转换成真正的数组

方法：Array.from(伪数组)

参数：伪数组(类似数组的对象必须设置length属性)

var obj = {
     0:1,
     1:2,
     2:3,
     3:4,
     length:4
 }
 console.log(Array.from(obj))

 

8.fill()：用给定值填充一个数组，抹掉原数组的值

      参数：这个方法接收的第二个参数和第三个参数，用于指定填充开始位置和结束位置，包含开始位置不包含结束位置

　　var arr = ["今天","星期","日"] console.log(arr.fill("一",2))

     

9.every()：最终返回布尔值，一假即假，全真则真

      数组成员中有一个不满足条件就返回false，只有全满足条件才返回true

var arr = [21,32,41,52]; var num = arr.every(function(item,index,arr){
     return item > 40//false
     return item > 10 // true
 })
 console.log(num)
 

 

10.some()：一真即真，返回布尔值

     数组的项目中有一个为真就返回true，全都不满足的时候才返回false

var arr = [21,32,41,52]; var num = arr.some(function(item,index,arr){
     // return item > 40    //true
     return item > 60     // false
 })
 console.log(num)