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向外暴露一次

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,263评论 0 1
  • 以下内容是我在学习和研究ES6时,对ES6的特性、重点和注意事项的提取、精练和总结,可以做为ES6特性的字典;在本...
    科研者阅读 2,441评论 2 9
  • ES6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2...
    凌雨微尘阅读 668评论 0 3
  • 第一章:块级作用域绑定 块级声明 1.var声明及变量提升机制:在函数作用域或者全局作用域中通过关键字var声明的...
    BeADre_wang阅读 474评论 0 0
  • 1、新的声明方式 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种...
    令武阅读 548评论 0 7