文章目录

一、es6是什么
- - 1. 官方回答
  - 1. 本人理解
二、版本新增
- - 1. let 和 const 和 var 的区别
  - 2.解构赋值
  - 3.模板字符串
  - 4.字符串新增
  - 5.函数的新增
  - 6.箭头函数
  - 7.数组新增
  - 8.对象新增
  - - 1.对象的简洁：
    - 2.方法的简洁：
    - 3.新增对象方法：
  - 9.扩展运算符
  - 10.promise
  - 11.async await
  - 12.class类构造器
  - 13.class静态属性和静态方法
  - 14.set和map数据结构
  - - set数据结构
    - map数据结构
  - 15.模块化

一、es6是什么

1. 官方回答

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

2. 本人理解

es6.0版本
js版本，2015年六月推出的版本
ECMAScript组织 javascript 1.0 2.0 3.0 4.0 5.0
es6比es5,有更强的语法。以及增强和新增，它泛指js的下一个版本
每年六月会发布一次新版本

二、版本新增

1. let 和 const 和 var 的区别

var： 弱类型语言
1. 重复声明使用，第二次声明会覆盖之前的
2. 存在变量提升
let:
1. 不允许重复声明使用，否则报错
2. 不存在变量提升
const:(常量)
1.声明时必须要有初始值 不允许重复声明使用，否则报错
2. 不存在变量提升
3. 不可改变，改变报错

使用场景：

const num = 3
const arr = [];
const obj = { }
作用域：全局作用域
        var 
        局部作用域
        function
        块级作用域
        {}

2.解构赋值

//数组解构赋值：
    let [a,b,c] = [1,2,3]
    //作用：快速声明变量，数组对数组，值对值
    //扩展运算符：
    ...
    let [a = 1,b,...c] = [,2,3,4,5,6]
        console.log(a,b,c)
    //对象解构赋值：
    //作用：快速获取数据
    //方式一：
    let obj = { 
            name:'张飞',
            age:18,
            sex:'男'
        }
        console.log(obj.name) //张飞
        let{ name,age,sex} = obj
        console.log(name) //张飞
        console.log(age)  //18
        console.log(sex)  //男
    //方式二：
    function add({  name, age }) { 
            console.log(name, age) //111,222
        }
        add({  name: 111, age: 222 })
         //如果遇到敏感关键字或浏览器封装好的关键字
        let { delete:del = '默认'} = { delete:'删除'}
        console.log(del)  //删除

3.模板字符串

语法：

`hello ${ 变量}`

4.字符串新增

'hello'.includes('l') //判断字符串是否包含特定字符 如果包含返回true,否则返回false
        indexOf()     //查找字符串在字符串中的位置，如果找到了返回索引，否则返回-1
        startWith()   //判断字符串中是否以特定字符开头，如果是，返回true，否则false
        endsWith()    //判断字符串中是否以特定字符结尾，如果是，返回true，否则false
        padStart()    //在字符串开始位置填充
        padEnd()      //在字符串结尾位置填充
        repeat()      //重复字符串 方法不可以传负数，整数向下取整

5.函数的新增

函数默认值：

let f = function(a=100){ 
    console.log(a) //100
}
f()

函数参数rest用法：

let f = function (...arr) { 
           // console.log(arguments)
           // let arr = [];
           // for(let i = 0;i<arguments.length;i++){ 
           // arr.push(arguments[i])
           // }
           console.log(arr)
       }
       f(1,2,3,4)
       //通过...arr在函数传参中，就可以在函数内部拿到一个数组，数组中就是参数的集合

6.箭头函数

//箭头函数：
            语法：() =>{ 
            //代码块
            }
             //普通函数
        let fn = function({ str}) { 
            console.log(str)
        }
        //this指向 ：传统的函数内部this指向谁调用方法，this指向谁
        //箭头函数
        let fn2 = ({ str}) =>{ 
            console.log(`箭头函数${ str}`)
        }
        fn({ str:'函数'})
        fn2({ str:'厉害'})
作用：解决this指向问题，this定义时(上下文中的this),this的指向
    特点：1.this指向的是定义时(上下文中的this)
        2. 箭头函数中不能使用arguments
        3. 箭头函数不可用构造器(工厂函数)
        箭头函数简写：
        箭头函数参数，只有一个可以把()省略，函数体只有一行代码，可以省略{}

7.数组新增

es5 
    for(){}         可以循环数组，可以循环伪数组
    forEach()       可以循环数组，不可以循环伪数组
    map()(映射)      可以循环数组,批量处理数据，循环具备return,返回新数组
    filter()        过滤循环 return 就是过滤条件，循环会把每一项符合条件的数据，返回一个新数组中    
    some()          循环每一条数据，循环条件如果有一个符合，返回true，否则返回false
    every()         循环每一条数据，循环条件都符合，返回true，否则返回false
    es6新增
    fill() 数组填充  方法第一个参数为填充的内容，第二个参数填充起始位置，第三个参数结束位置
    includes() 数组数据是否包含，判断数组中是否包含某个特定字符，对比的是每一项，如果有返回true，否则返回false
    indexOf() 数组中查找，如果有返回索引，如果没有返回-1
    find()  数组中查找符合条件的数据，如果符合条件退出循环，将符合条件的数据返回成新的值，找不到返回undefined
    findIndex() 数组中查找符合条件的数据，如果符合条件退出循环,返回下标索引，找不到返回-1

8.对象新增

1.对象的简洁：

let name = '张飞'
    let obj = { 
        name
    }
    console.log(obj)
//总结：属性的总结，使用的变量和属性名相同时，那么可以省略成一个属性

2.方法的简洁：

let name = '张飞'
    let obj = { 
        name,
        // say:function(){ 
        // alert('你好'+this.name)
        // }
        say(){ 
            alert('你好'+this.name)
        }
    }
    console.log(obj)
obj.say()
//总结：可以直接省略成say(){}

3.新增对象方法：

Object.is()        //判断两个对象，是否一样
 Object.assign()    //对象合并方法
 Object.keys()      //拿到对象中属性集合
 Object.values()    //拿到对象中属性值集合
 Object.entries()   //拿到对象中键值对集合
//浅拷贝实现方式：
 Object.assign() 
 //扩展运算符...
//最简单深拷贝
let a = [1,2,3,{ name:'张飞'}]
let b = JSON.parse(JSON.stringify(a))
a[3].name = 123
console.log(a,b)

9.扩展运算符

语法：...
1. 可以展开字符串，字符串转换数组
2. 可以浅拷贝，对象和数组都可以进行展开实现浅拷贝
3. 伪数组可以转换成数组
4. 可以用rest方式，在函数中可以快速拿到所有参数集合生产一个数组，在数组结构中，可以将剩余的值，当到变量

10.promise

Promise是异步编程的一种解决方案，比传统的回调函数更强大和高效，最早是由社区提出并实现 ECMA觉得不错，就把promise加到api,他其实就是一个对象，对象中装载着未来某个状态

异步表现形式：

定时器
ajax请求
回调函数

回调地狱：函数嵌套
promise可以解决回调地狱问题
浏览器提供构造函数，在定义一个promise对象时，注意：参数是回调函数，回调函数第一个参数为成功resolve,失败回调为reject
通过原型上的then方法，可以拿到resolve返回的参数
通过原型上的catch方法，可以拿到reject返回的参数
使用方式：

let p = new Promise((resolve,reject)=>{ 
        resolve('成功')
    })
    console.log(p)
    p.then((res)=>{ 
        console.log(res)
    })
特点：1. 一旦创建，立即执行
    2. 返回结果不受外界影响

11.async await

async 异步
await 等待
作用：async也是异步编程的一种方式，更好的解决异步编程
特点：async返回的一直是promise对象,可以结合结构赋值进行预处理响应数据

let fun = async function () { 
    let {  data } = await request()
}
fun()

12.class类构造器

ECMA推出的构造函数，语法糖(功能不变，用法有变化)
java和.net后端语言都具备面向对象 class类的方式进行构造
语法：

class Person {  //原型对象
     constructor(name) {  //构造方法
         this.name = name
     }
 }
 let p = new Person('张飞')
 //继承：
 class Child extends Person { 
     constructor(name,age) {  //构造方法
         super(name) //作用就是调用了Person中的constructor
         this.age = age
     }
 }
 let c = new Child('刘备',18)

13.class静态属性和静态方法

在类构造函数中，static关键字定义属性和方法、
然后使用 构造函数中直接调用属性或方法
Person.user
Person.fun()
继承之后，子构造器，继承父构造器的静态属性和静态方法

14.set和map数据结构

set数据结构

语法：

let set = new Set()

特点：
set数据结构中不允许重复值，去重

// set数据结构转换成数组
  Array.form(set)
  [...set]

方法或属性：
size属性：返回的就是set数据结构中的数量
has()：判断set数据结构中是否有特定的值
add():向set数据结构中添加一个数据
delete():删除指定数据
clear():清空数据结构

//最简单数组去重：
    let arr = [1,2,6,1,7,4,2,7,7,5,4,5,8,55,5,2,2,3,1,1,1,2,3,1,8,9,9,8,4,4,5,1]
    let newArr = [...new Set(arr)]

map数据结构

语法：

let map = new Map()
特点：可以以任意数据类型进行key value形式存储
具备的方法：
size属性:返回数据数量
set(),向map数据结构中进行存储，第一个参数为key,第二个参数为valve
delete():删除指定的数据
get()在map数据结构中获取相应数据
clear():全部清除
has(),判断是否有这条数据

15.模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

我们先来创建一个test.js文件，来对这一个变量进行输出：

export let str ="hello es6";

然后可以创建一个index.js文件，以import的形式将这个变量进行引入:

import {  str } from "./test.js";
console.log(str);//hello es6

文章目录

一、es6是什么

1. 官方回答

2. 本人理解

二、版本新增

1. let 和 const 和 var 的区别

2.解构赋值

3.模板字符串

4.字符串新增

5.函数的新增

6.箭头函数

7.数组新增

8.对象新增

1.对象的简洁：

2.方法的简洁：

3.新增对象方法：

9.扩展运算符

10.promise

11.async await

12.class类构造器

13.class静态属性和静态方法

14.set和map数据结构

set数据结构

map数据结构

15.模块化

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

随便看看

教程文章

热评文章

1江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表