ES6常用知识总结

前言

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。使用ES6语法可以大大的减少JS代码，弊端是浏览器并不识别ES6语法，主流浏览器一般都是将ES6语法转为ES5语法。本编文章讲解的都是一些工作中常用到的知识点，并不包含所有知识点。

ES6

demo地址: https://github.com/pengjunshan/WebPJS/ES6

其它Web文章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
Vue学习知识点总结
开发环境到生产环境配置webpack
待续......

本编文章会讲到的知识点

• 变量声明let、const
• 箭头函数
• 解构赋值
• 字符串扩展
• 函数默认参数
• 对象的扩展
• 扩展运算符
• ES6遍历数组
• ES6遍历对象
• import和export

变量声明let、const

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

特点
1.块级作用域；
2.先声明再使用；
3.在同作用域中不能重复声明；
4.声明了但没有赋值，值是undefined

    let num = 2;
        let mm;//undefined
        {
            let num = 3;
            // let num = 4;//再次声明会报错，提示已经声明过num了
            console.log(num)//3
        }
        console.log(num)//2

        for (var i = 0; i < 10; i++) {
        }
        //i被变量提升了成为了全局变量
        console.log(i)//10

        for (let j = 0; j < 10; j++) {
        }
        // console.log(j)//报错找不到j,因为j是局部变量出了for循环就找不到j了

const声明一个只读的常量。一旦声明，常量的值就不能改变。const的作用域与let命令相同：只在声明所在的块级作用域内有效;

特点
1.声明必须赋值，否则报错；
2.一旦声明，值不可以变；
3.可以更改对象中属性的值

        const name = '邓紫棋'
        // const sex;//报错，提示常量声明缺少初始值
        console.log(name)
        // name = '张韶涵'//报错，常量不能改值

        //可以改变对象中的属性的值
        const user = {name:'张萌萌'}
        user.name = '关晓彤'
        console.log(user.name)

箭头函数

特点
1.箭头函数里没有this，如果要用this就是父级的this 如果父级也没有this 那么就继续往上找 直到找到window
2.无法使用arguments，没有arguments对象
3.不需要 function 关键字来创建函数
4.不要在Vue的选项属性或回调上使用箭头函数
5.相当于java中的lamda表达式

//使用一:没有入参，函数内就一行
        let aa1 = function(){
            return 1;
        }
        //转箭头函数，可以省略return和{}
        let aa2 = ()=> 1;

        //使用二：有入参，函数内就一行
        let bb1 = function(num){
            return num+1;
        }
        //转箭头函数，可以省略return和{}
        let bb2 = num=> num+1;

        //使用三：有多个入参，函数内有多行
        let cc1 = function(pp,jj){
            pp = pp+'你好';
            return jj+'你好'
        }
        //转箭头函数，多个参数时用()包含着，
        let cc2 = (pp,jj)=>{
            pp = pp+'你好';
            return jj+'你好'
        }
        console.log(cc2('aa','邓紫棋'));//邓紫棋你好

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组解构

      let arr = [1,2,3];
      let [a,b,c] = arr;
      console.log(""+a+b+c)

对象解构

        let obj = {name:'邓紫棋',sex:'女'}
        //赋给对应的字段名
        let {name,sex} = obj
        console.log(name+sex)
        //赋给对应字段的变量,如果发现对应的字段名已经存在了可以用这种方式解构
        let {name:x,sex:y} = obj
        console.log(x+y)

在函数参数中使用解构

        let obj = {name:'邓紫棋',sex:'女'}
        let fn =function({name,sex}){
            console.log(name+sex)
        }
        //箭头函数+对象解构
        let fn1 = ({name,sex})=> console.log(name+sex+'fn1')
        fn(obj)
        fn1(obj)

字符串扩展

自从ES6出了``字符串模板标记后，再也不用双引号拼接字符串了。如果模板中有需要插入变量值使用${变量名}来界定；

        //上篇文章中组件就使用了字符串模板
        const template = `
            <div>
                <p>你好！</p>
                <p>邓紫棋</p>
            </div>
        `
        console.log(template)

        //将表达式嵌入字符串中进行拼接。用${}来界定
        let name = '邓紫棋'
        console.log(`我爱你${name}`)

函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

        //如果传参了就是传参的值，如果没有传参默认为6
        let fn = function(num=6){
            console.log(num)
        }
        fn();//没有传值默认6
        fn(8);//传了值8 num值就是8

对象的扩展

经常遇到key:value形式，把key和value命名都一样的话可以省略:value

        //键值对重名
        let fn = function (name, age) {
            return {
                name: name,
                age: age
            }
        }
        //简化 键值命名一样
        let fn1 = function (name, age) {
            return {
                name,
                age
            }
        }

ES6 同样改进了为对象字面量方法赋值的语法

        let obj = {
            fn: function () {
                console.log(111111)
            }
        }

        //省略function关键字
        let obj1 = {
            fn() {
                console.log(222222)
            },
        }
        obj.fn();
        obj1.fn();
// Object.keys(obj)：获取对象的所有key形成的数组
// Object.values(obj)：获取对象的所有value形成的数组
// Object.entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],…]
// Object.assign(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。

扩展运算符

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...， 它可以是数组也可以是对象，可以很好的把两个数组或者两个对象合并在一起；

数组
在一个数组中添加元素返回一个新数组，不会除重

        //数组，在一个数组中添加元素返回一个新数组，不会除重
        let arr = [1,2,3,4,5]
        let arr1 = [...arr,6,7,8,9,5]
        console.log(arr1)//[1,2,3,4,5,6,7,8,9,5]

        //两个数组合并不会除重
        let arr2 = [1,2,3,4,5]
        let arr3 = [1,2,3,4,5]
        console.log([...arr2,...arr3])//[1,2,3,4,5,1,2,3,4,5]

对象
1.在老对象中新增属性返回一个新的对象;
2.两个对象合并,后面对象会覆盖前面重复的属性

        //对象,在老对象中新增属性返回一个新的对象
        let obj = {
            name:'邓紫棋',
            age:18
        }
        let obj1 = {...obj,sex:'女'}
        console.log(obj1)

        //两个对象合并,后面对象会覆盖前面重复的属性
        let obj2 = {
            name:'邓紫棋',
            age:18
        }
        let obj3 = {
            name:'邓紫棋',
            age:19,
            sex:'女'
        }
        let obj4= {...obj2,...obj3}
        console.log(obj4)

函数中使用

        let fn = function(...n){
            console.log(n)
        }
        fn(1,2,3)//[1,2,3]

ES6遍历数组

map

map()方法,map常用在修改item中属性的值，不会改变数组的长度。

• 如果数组是值类型的，不会改变老的数组中的值；
• 如果数组的类型是对象，会改变老的数组中的值；
• item:当前元素； index:当前元素的下标；arr:当前操作的数组

        //值类型数组
        let arrNum = [1, 2, 3, 4, 5, 6]
        //对象类型数组
        let arrObj = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]

        //如果数组是值类型的，不会改变老的数组中的值
        let mapArrNum = arrNum.map((item,index,arr) => {
            return item * 2
        })
        console.log('arrNum老的数组', arrNum)//[1, 2, 3, 4, 5, 6]
        console.log('mapArrNum新的数组', mapArrNum)//[2, 4, 6, 8, 10, 12]

        //如果数组的类型是对象，会改变老的数组中的值
        //item:当前元素； index:当前元素的下标；arr:当前操作的数组
        // let mapArrObj = arrObj.map((item,index,arr)=>{
        let mapArrObj = arrObj.map((item) => {
            if (item.id === 3) {
                item.age = 20
            }
            return item;
        })
        console.log('arrObj老的数组', arrObj)//{ id: 3, name: '周芷若', age: 20 }
        console.log('mapArrObj新的数组', mapArrObj)//{ id: 3, name: '周芷若', age: 20 }

filter

• filter()方法，用来过滤数组，返回一个新的数组;
• filter方法需要在循环的时候判断一下是true还是false，是true才会返回这个元素然后加入到新的数组中;

        let filterArrObj = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]
        let filterArr = filterArrObj.filter((item, index, arr) => {
            return item.age >= 18;
        })
        console.log('age大于等于18的人', filterArr)//{id:1...}{id:2...}

forEach

• forEach()方法，没有返回值，map()、filter()都会返回一个新数组；
• forEach遍历方式遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次；
• 且无法break中途跳出循环，不可控、不支持return操作输出，return只用于控制循环是否跳出当前循环；

        let eachArrObj = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]
        eachArrObj.forEach((item,index,arr)=>{
            item.age>18? item.age=18:item.age=item.age
        })
        console.log('forEach遍历后：',eachArrObj)//{id:1,age:18}{id:2,age:18}{id:3,age:16}

every

• every()方法，循环遍历数组，返回一个布尔值；
• 对数组中的每一项运行给定函数，如果该函数对每一项返回true,则最后返回true。否则返回false；

        let arrObjTow = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]
        let isEvery = arrObjTow.every((item,index,arr)=>{
            return item.age>18
        })
        console.log('every，age是否全部大于18:',isEvery)//false

some

• some()方法，循环遍历数组，返回一个布尔值；
• 对数组中的每一项运行给定函数，如果该函数中任一项返回true，则最后返回true；

        let isSome = arrObjTow.some((item,index,arr)=>{
            return item.age>18
        })
        console.log('some(),age有大于18的吗:',isSome)//true

for…in

• for…in;是用于遍历包含键值对(key-value)的对象，对数组并不是那么友好;
• 通过arr[key]获取当前元素,key：下标;

        let arrObjTow = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]
        for(let key in arrObjTow){
            console.log('for...in:',arrObjTow[key])//{id:*,name:*,age:*}
        }

for...of

• for...of;是ES6定义的新的遍历数组的方法,直接获取值

        let arrObjTow = [
            { id: 1, name: '邓紫棋', age: 18 },
            { id: 2, name: '高圆圆', age: 19 },
            { id: 3, name: '周芷若', age: 16 },
        ]
        for(let val of arrObjTow){ 
            console.log('for...of：',val)//{id:*,name:*,age:*}
        }

ES6遍历对象

for...in

• for...in;循环遍历对象自身的和继承的可枚举属性;
• 通过obj[key]获取值，key：属性名称;

        let obj = {id: 1, name: '邓紫棋', age: 18}
        for(let key in obj){
            console.log(key+'--'+obj[key])//id--1  name--邓紫棋  age--18
        }

Object.keys(obj)

• Object.keys(obj);获取对象中的key,组成一个数组

Object.keys(obj).forEach(key=>console.log(key+'--'+obj[key]))

import和export

导入第三方库、插件

• import引入一个依赖包，不需要相对路径

import vue from 'vue'
import axios from 'axios'

• import引入css、less、sass

import './index.css'
import './a.less'

export{}

• 使用export{}抛出的变量,一个文件里可以多个export；
• 可以导出多个变量, 当使用导出变量时, 需要了解导出变量原来的命名；
  A.js导出

const name = '邓紫棋'
function fn() {}
function getName() {
    return name
}
export { name, getName }
//给fn另起个名字 as后面的值就是新名字
export { fn as fnn }

B.js导入

// 导入1 B.js导入，用{}分别接收每个变量和方法
import {name,fnn,getName} from 'A.js'
console.log(name)
console.log(fn())
//导入2 B.js导入，一次性导入整个类
import * as utils from 'A.js'
console.log(utils.name)
console.log(utils.getName())

export default{}

• 使用export default{}抛出,一个文件里只能有一个export default；
• 默认无法同时导出多个变量；
• 导出变量的方式非常优雅, 当使用导出变量时, 无需了解导出变量原来的命名；

// A.js导出
function getAge(){return 18}
export default{ getAge }

// B.js接收导入 接收export导出的数据需要用{}接收，接收export default导出的数据不需要用{}接收并且接收名字可以更改
import getAge from 'A.js'

export 和 export default的区别

1.export
import {getCurrTime} from './util'; //需要加花括号 可以一次导入一个也可以一次导入多个，但都要加括号
如果是两个方法，import {getCurrTime,post} from './util';

2.export default
import utils from './util'; //不需要加花括号 只能一个一个导入
export default有单次限制，只能使用export default向外暴露一次