ES6语法特性

LET声明变量

//声明变量的格式
let a;
let b,c,d;
  • 变量不能重复命名
//let star = 1
//let star = 2
  • 块级作用域 全局,函数,Eval
{
    let girl = '周杨青'
}
//console.log(girl)无法访问girl变量
  • 不存在变量升级,不允许在声明变量之前使用变量
  • 不影响作用域链
{
    let school = 'siqu'
    funtion foo(){
        console.log(school)
        //在这里依然可以使用school
    }
    foo()
}

const定义常量

  • 一定要赋初值
const A;
  • 一般常量使用大写(潜规则)
const a = 100;
  • 常量的值不能修改
SCHOOL = "siqu"
  • 块级作用域
const PLAYER = 'UZI'
  • 对于数组和对象的元素修改,不算作对常量的修改,不会报错
const TEAM = ['UZI','MXLG','Ming','Letme']

变量的解构赋值

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

  • 数组的解构
const F4 = ['小沈阳','刘能']
let [xiao,liu] = F4
  • 对象的解构
const zhao = {
    name:'zhao',
    age:23
    xiaopin:function(){
        console.log("我可以演小品")
    }
}
let {name,age,xiaopin} = zhao

模板字符串

ES6引入新的声明字符串的方式

  • 声明
let str = `这是一个字符串`
console.log(str,typeof str)
  • 内容中可以直接出现换行符
let Str = `<ul>
    <li>沈腾</li>
</ul>`
  • 可以直接进行变量的拼接
let lovest = '魏翔'
let out = "${lovest}是我心目中最搞笑的演员"
console.log(out);

简化对象写法

ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,这样书写更加简洁

let name = "siqu"
let change = function(){
    console.log("改变")
}
​
//如果key和value是相同的,那么可以简写
const school = {
    name,
    change,
}

箭头函数

ES6允许使用【箭头】(=>)定义函数

//声明函数
let fn = function(){
}
​
let fn = (a,b) =>{
    return a+b
}
​
//调佣函数
//let result = fn(1,2)
//console.log(result)
  • this是静态的,this始终指向函数声明时所在作用域下this的值
function getName(){
    console.log(this.name)
}
let getName2 = ()=>{
    console.log(this.name);
}
​
window.name = "siqu"
const school = {
    name:"AT"
}
​
//直接调用
//getName()
//getName2()
​
//call方法调用
getName.call(school)    //
getName2.call(school)   //它的this始终是window
  • 不能作为构造函数实例化函数
let Person = (name,age) =>{
    this.name = name;
    this.age = age;
}
​
let me = new Person("xiao",30)  //错误,不能使用箭头函数用来作为构造函数
  • 不能使用arguments变量
let fn = () =>{
    //console.log(arguments)
}
  • 箭头函数的简写
//1.省略小括号,当形参有且只有一个的时候
let add = n=>{
    return n+n;
}
​
//2.省略花括号,当代码体只有一条语句的时候
let pow = (n) => n*n;
//此时return语句必须省略,执行结果就是返回值
​
​
  • 从数组中返回偶数的元素
const arr = [1,6,9,10,100,25]
const reuslt = arr.filter(item => item % 2 === 0)
console.log(result)
​
//箭头函数适合于与this无关的回调,定时器,数组的方法回调
//箭头函数不适合与this有关的回调,事件回调,对象的方法
​

函数参数的默认值设置

  • 允许给函数参数赋值初始值
function add(a,c = 10,b){
    return a+b+c;
}
  • 与解构赋值结合
function conect({host = "127.0.0.1",username})

rest参数

rest参数,用于获取函数的实参,用来代替arguments

//rest 参数
funtion date(...args){
    console.log(args);
    //args是一个接收参数的数组    
}
  • rest参数必须要放到参数最后

扩展运算符

扩展运算符能将数组转换为逗号分隔的【参数序列】

//声明一个数组
const tfboys = ['易烊千玺','王源']
​
//声明一个函数
function chunwan(){
    console.log(arguments)
}
chunwan(...tfboys)  //相当于chunwan('易烊千玺','王源')
  • 扩展运算符的使用
//1.数组的合并
const kuaizi = ['王太利','肖央']
const name = ['san','si']
const s = [...kuaizi,...name]
console.log(s)
​
//数组的克隆
const kuaizi = ['王太利','肖央']
const san = [...kuaizi]
console.log(san)
​
//将伪数组编程真正的数组
const divs = document.querySelectorAll("div")
const divArr = [...divs]
console.log(dirArr)

Symbol基本使用

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,它是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型

Symbol特定

  • Symbol的值是唯一的,用来解决命名冲突的问题
  • Symbol值不能与其他数据进行运算
  • Symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Rflect.ownKeys来获取对象的所有键名
//创建Symbol
let s1 = Symbol('siqu')
let s2 = Symbol('siqu')``
console.log(s1 === s2)
​
//通过Symbol.for()进行创建
let s3 = Symbol.for("siqu1")
let s4 = Symbol.for("siqu2")
console.log(s3 === s4)
​
//不能与其他数据进行运算,
//let result = s + 100

迭代

迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作

  • ES6创造了一种新的命令for…of循环,Iterator接口主要提供for…of消费,
 //声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
​
//使用for...of循环进行遍历,遍历的结果是value
for(let v of xiyou){
    console.log(v)
}
  • 工作原理
  1. 创建一个指针对象,指向当前数据结构的起始位置
  2. 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
  3. 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
  4. 每调用next方法返回一个包含value和done属性的对象
  5. 注意:要自定义遍历数据的时候,要想到迭代器
  • 迭代器自定义遍历对象
        const banji ={
        name:"一班",
        stus:[
            'xiaoming',
            'daming',
            'xiaotian'
        ],
        //建立迭代器
        [Symbol.iterator](){
            let index = 0
            return {
                next:() =>{
                    if (index < this.stus.length){
                        const result =  {value:this.stus[index],done:false}
                        index ++
                        return result
                    }else{
                        return {value:undefined,done:true}
                    }
                }
            }
        }
    }
​
    for (let v of banji){
        console.log(v)
    }

生成器

生成器起始就是一个特殊的函数

用于异步编程

//定义生成器函数
function * gen(){
    console.log("hello")
}
​
//必须调用next方法才能执行
let ite = gen()
ite.next()
  • 可以for…of来进行遍历
function *gen(){
    yield '疯狂'
    yield '世界'
    yield '典韦'
}
​
for(let v of gen()){
    console.log(v)
}
​
//使用next调用
//let ie = gen()
//ie.next()
//ie.next()
//ie.next()
  • 可以在生成器函数当中传入参数
function *gen(arg){
    console.log(arg)
    
    let one = yield 111;
    console.log(one)
    
    let two = yield 222;
    console.log(two)
    
    let three = yield 333;
    console.log(three)
}
​
//执行获取迭代器对象
//整体方法传参数
let iterator = gen('AAA')
console.log(iterator.next());
​
//第一次调用next,参数会作为第一个yield的返回结果
console.log(iterator.next("bbb"))
//第二次调用next,参数会作为第二个yield的返回结果
console.log(iterator.next("ccc"))
//第三次调用next,参数会作为第三个yield的返回结果
console.log(iterator.next("ddd"))

生成器函数实例

//需求:1s后输出111,2s后输出222,3s后输出333
    function one(){
        setTimeout(() => {
            console.log("111")
            g.next()
        }, 1000);
    }
    function two(){
        setTimeout(() => {
            console.log("222")
            g.next()
        }, 2000);
    }
    function three(){
        setTimeout(() => {
            console.log("333")
            g.next()
        }, 3000);
    }
​
    function * gen(){
        yield one()
        yield two()
        yield three()
    }
​
    const g = gen()
    g.next()

生成器函数案例二

//需求:模拟获取:用户数据  订单数据   商品数据
    function getUser(){
        setTimeout(() => {
            let data = '用户数据'
            iterator.next(data)
        }, 1000);
    }
    function getOrders(){
        setTimeout(() => {
            let data = "订单数据"
            iterator.next(data)
        }, 1000);
    }
​
    function getGoods(){
        setTimeout(() => {
            let data = '商品数据'
            iterator.next(data)
        }, 1000);
    }
​
    function *gen(){
        //获取数据执行相关的处理
        let users = yield getUser()
        console.log(users)
        let orders = yield getOrders()
        console.log(orders)
        let goods = yield getGoods()
        console.log(goods)
    }
​
    let iterator = gen()
    iterator.next()

Promise

Promise是ES6引入的异步编程的新解决方案,语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果

  • Promise 构造函数:Promise(excutor){}
  • Promise.prototype.then()
  • Promise.prototype.catch()
    //实例化Promise对象
    const p = new Promise(function(resolve,reject){
        setTimeout(() => {
            let message = "数据读取成功"
​
            //成功则调用resoleve函数,p的状态更新为成功
            resolve(message)
        }, 1000);
    })
​
    //在then方法中
    //当p的状态为成功的时候调用,第一个参数方法
    //当p的状态为失败的时候调用,第二个参数方法
    p.then(function(value){
        console.log(value)
    },function(reason){    
        console.log(reason)
    })

使用Promise读取文件

//使用node.js
//使用回调函数来进行读取
const fs = require("fs")
​
// fs.readFile("./test.txte",function(err,data){
//     if (err)    throw err
//     console.log(data.toString())
// })
​
​
//使用Promis来读取文件
const p = new Promise(function(resolve,reject){
    fs.readFile('./test.txt',function(err,data){
        if (err) reject(err)
        resolve(data)
    })
})
​
p.then(function(value){
    console.log(value.toString())
},function(err){
    console.log("读取失败")
})

then方法

调用then方法,then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定

如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功值,状态为失败,返回值是错误值

既然then方法返回的是一个Promise对象,因此就可以进行链式调用

//使用链式调用读取多个文件
const fs = require('fs')
​
const p = new Promise((reslove,reject)=>{
    fs.readFile('./test1.txt',(err,data)=>{
        reslove(data)
    })
})
​
p.then(function(value){
    return new Promise((reslove,reject)=>{
        fs.readFile('./test2.txt',(err,data)=>{
            reslove([value,data])
        })
    })
}).then(value =>{
    return new Promise((reslove,reject)=>{
        fs.readFile('./test3.txt',(err,data)=>{
            value.push(data)
            reslove(value)
        })
    })
}).then(value =>{
    console.log(value.join('\n'))
})

catch方法

指定当Promise的状态为失败的时候,所要执行的回调

不使用catch方法也可以,因为使用then方法可以指定两种状态的回调

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject("失败")
    },1000)
})
​
p.catch(function(value){
    console.warn(value)
})

Set集合

//声明一个set
let s = new Set()
//集合里面的内容是不重复的
let s2 = new Set(['大事儿','小事儿','小事儿'])
​
//删除元素
s2.delete("大事儿")
​
//元素个数
s2.size()
​
//添加新的元素
s2.add("喜事儿")
​
//检测
console.log(s2.has('糟心事儿'))
​
//清空
s2.clear()
console.log(s2)

类继承

class Phone{
    constructor(brand,price){
        this.brand = brand
        this.price = price
    }
​
    call(){
        console.log("我可以打电话")
    }
}
​
class SmartPhone extends Phone{
    constructor(brand,price,color){
        super(brand,price)
        this.color = color
    }
​
    photo(){
        console.log("我可以拍照片")
    }
}
​
let k = new SmartPhone("小米",1300,"black")
console.log(k.brand)
k.call()
k.photo()

子类重写父类方法

class SmartPhone extends Phone{
    constructor(brand,price,color){
        super(brand,price)
        this.color = color
    }
​
    photo(){
        console.log("我可以拍照片")
    }
    
    call(){
        //子类不能去调用父类的同名方法
        console.log("智能手机打电话")
    }
}

get和set方法

class Phone{
    //函数的返回值就是读取属性的值
    get price(){
        console.log("价格属性被读取了")
        return 1300
    }
    
    set price(newValue){
        console.log("价格属性被修改了")
        this.price = value
    }
}
​
let s = new Phone()
console.log(s.price())

数值扩展

  • Number.EPSILON是JavaScript表示的最小精度
  • 二进制和八进制
let b = 0b1010;
let o = 0o777;
let x = 0xff;   //十六进制
  • Number.isFinite 检测一个数值是否为有限数
  • Number.isNaN检测一个数值是否为NaN
  • Number.parseInt Number.parseFloat字符串转整数
  • Number.isInteger判断一个数是否为整数
  • Math.trunc将数字的小数部分抹掉
  • Math.sign判断一个数到底是正数 负数 还是零

对象方法扩展

  • Object.is判断两个值是否完全相等
console.log(Object.is(120,120))
  • Object.assign对象的合并
Object.assign(config1,congfig2);
//后面的属性会覆盖前面的属性
  • Object.setPrototypeOf Object.getPrototypeof
//设置原型对象  获取原型
Object.setPrototypeOf(school,l)

模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来

  • 防止命名冲突
  • 代码复用
  • 高维护性

模块化规范产品

ES6之前的模块化规范有:

  • CommonJS => NodeJS、Browserify
  • AMD => requireJS
  • CMD => seaJS

模块化语法

模块功能主要由两个命令构成:export和import

  • export 命名用于规定模块的对外接口
  • import 命令用于输入其他模块提供的功能
//m1.js
//分别暴露
export let school = 'siqu'
export function teach(){
    console.log("我们可以交个你开发技能")
}
//统一暴露
let school = 'siqu'
function findJob(){
    console.log(hello)
}
export {school,findJob}
//默认暴露
export default{
    school:'siqu',
    change:function(){
        console.log("hello")
    }
}

引入模块

//通用的引入方式
import * as m1 from "./.."
//解构赋值形式
import {school,teach} from './..'
​
//引入默认暴露
import {default as m3} from './..'
//简便形式  只能针对默认暴露
import m3 from './..'
//在html中引入口js文件
<script src = './..' type='module'></script>
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发
四曲的头像-四曲博客

昵称

取消
昵称表情代码图片