JS ES6

时间:2020-09-16 03:39:10 来源:

【摘要】 JS ES6考必过小编为大家整理了关于JS ES6的信息,希望可以帮助到大家!

JS ES6

标签:还需要new结束引号efapt默认funtimeout抛出异常

let

作用:

声明变量

特性:

变量不能重复声明

块级作用域,块级 == { }

const

作用:

声明常量

特性:

一定要赋初始值

常量的值不能重新赋值

块级作用域

模板字符串

语法:

反引号。

作用:

创建字符串

无需换行符

与变量进行拼接,${ }

快速使用:

let name = "SPC"
let ele =  `<p class="star">
            <p>张碧晨</p>
            <p>江疏影</p>
            <p>林允儿</p>
            <p>${name}</p>
            </p>`
console.log(ele)

解构赋值

数组的解构

const STUDENTS = ["小明", "小红", "小李"]
let [ming, hong, p] = STUDENTS
console.log(ming, hong)

对象的解构

const Dog = {
    name: "旺财",
    age: 6,
    play: function () {
        console.log("play football")
    }
}
let {name, age, play} = Dog
console.log(name, age)
play()

简化对象写法

作用:

简化代码

直接写变量名即可,无需:

省略函数的关键字

快速使用:

let name = "SPC"
let age = 18
let person = {
    name,
    age,
    tip(){
        return "这是一个简化的写法"
    }
}

箭头函数

作用:

声明函数

特征:

this是静态的,this始终指向函数在声明时所在作用域下的this值

不能作为构造实例化对象

不能使用arguments

语法:

fn = () => {}

快速使用:

let add = (num) => {
    return num + num
}
console.log(add(1))

省略写法:

当形参只有一个值,()可以去掉。

当 { } 中只有一条语句是,{ } 可以去掉,并且自身就是返回值,无需加 reture。

let add = num => num + num
console.log(add(1))

函数形参默认值

跟大多数语言一样,形参可以有默认值。

function person(name, age, gender="male") {
    console.log(name)
    console.log(age)
    console.log(gender)
}
person("kidd", 18)

还可以与解构赋值一起使用。

function person({name, age, gender}) {
    console.log(name)
    console.log(age)
    console.log(gender)
}
const info = {
    name: "kidd",
    age: 18,
    gender:"male"
}
person(info)

函数无限传参

快速使用:

function student(...args) {
    console.log(args.length) // 4
    console.log(args) // ["小明", "小红", "小军", "小李"]
}
student(...["小明", "小红", "小军"], "小李")

生成器

function * gen() { // 函数后加*,表示创建生成器
    yield "Hello js"
    yield "Hello world"
}
let generator = gen()
for(let g of generator){
    console.log(g)
}

当然生成器也可以进行传参,而且还可以给yield传参数。

function * gen(...arg) {
    console.log(arg)
    let first = yield "1"
    console.log(first)
    let second = yield "2"
    console.log(second)
}
let iter = gen(...["Hello Js", "Hello World"])
console.log(iter.next("A").value) // 如果第一次就给的next()传值,不会有任何效果,因为它并不知道把值传给那个yield
console.log(iter.next("B").value)
console.log(iter.next("C").value)

迭代器

可迭代对象:

Array

Arguments

Set

Map

String

TypedArray

NodeLIst

生成器对象

可迭代对象,可以使用 for of 进行遍历。 for of 是直接遍历后的值,for in 返回的是索引。

let songs = ["勿忘心安", "最初的梦想", "你曾是少年"]
for (let song of songs){
    console.log(song)
}

如果你不想一次性的遍历完,你可使用 next() 。生成器本身也是迭代器所以自带next ()

let songs = ["勿忘心安", "最初的梦想", "你曾是少年"]
let iter = songs[Symbol.iterator]() // 生成器对象
console.log(iter.next()) // 勿忘心安
console.log(iter.next()) // 最初的梦想
console.log(iter.next()) // 你曾是少年
console.log(iter.next()) // undefined

Promise

作用:

进行异步操作

特征:

Promise 需要构造方法,也就是需要 new 方法。

还需要接收两个形参。第一个:成功时调用,第二个:失败时调用。

实例化后的对象,使用 then 方法进行接收。

也需要接收两个形参,并且是函数类型的。该函数还需要接收参数,是运行后的结果。

快速使用:

let p = new Promise((resolve, reject) => {
    setTimeout(function () {
        let random = Math.floor(Math.random() * 2)
        if (random){
            let data = "数据读取成功"
            resolve(data) // 该方法表示成功
        }else {
            let data = "数据读取失败"
            reject(data) // 该方法表示失败
        }
    }, 2000)
})
p.then(value => { // value 成功后的结果
   console.log(value)
}, reason => { // reason 失败后的通知
    console.error(reason)
})

then() 方法

它可以不断地 then 方法,直到你想结束。

可以避免代码的不整洁和难以维护。

then 返回的结果,由最终的结果直接导致。

const p = new Promise((resolve, reject) => {
    resolve("第一次成功")
})
// 因为没写失败,then 也可以不接受失败值
let respt = p.then(value => {
    console.log(value)
    return new Promise((resolve, reject) => {
        resolve("第二次成功")
    })
}).then(value => {
    console.log(value)
    return new Promise((resolve, reject) => {
        reject("出错了!")
    })
}).then(value => {}, reason => {
    throw reason// 抛出异常
})
console.log(respt) // 最终导致失败

Set

作用:

值唯一

快速使用:

let studentID = new Set([1, 2, 3, 1])
for (let i of studentID){
    console.log(i)
}

属性和方法:

let studentID = new Set([1, 2, 3, 1])

studentID.size // 数量
studentID.has(2) // 该值是否存在集合中
studentID.add(4) // 添加(只能单个加)
studentID.delete(4) // 删除(只能单个删除)
studentID.clear() // 清空集合

console.log(studentID)

实例:

let arr1 = new Set([1,2,3,3])
let arr2 = new Set([3,4,5,5])

// 交集
var respt1 = [...arr1].filter(value => arr2.has(value))
console.log(respt1) // [3]

// 并集
var respt2 = [...new Set([...arr1, ...arr2])]
console.log(respt2) // [1, 2, 3, 4, 5]

// 差集
var respt3 = [...arr1].filter(value => !arr2.has(value))
console.log(respt3) // [1, 2]

Class

作用:

因为新的面向对象类的概念

快速使用:

class Phone{
    // 在 constructor 中写初始化
    constructor(brand, price) {
        this.brand = brand
        this.price = price
    }
    // 必须使用该语法
    introduce(){
        console.log(`品牌:${this.brand} 价格:${this.price}`)
    }
}
XiaoMi = new Phone("小米", 3999)
XiaoMi.introduce()

静态方法:

静态方法属于类,而不属于实例化对象。

class Phone{
    static brand = "小米"
}
XiaoMi = new Phone()

console.log(XiaoMi.brand) // undefined
console.log(Phone.brand)  // 小米

继承

ES5

function Phone(brand, price) {
    this.brand = brand
    this.price =price
}
Phone.prototype.call = function () {
    console.log("我可以打电话了!")
}

function smartPhone(brand, price, color) {
    this.color = color
    Phone.call(this, brand, price)
}
smartPhone.prototype = new Phone
smartPhone.prototype.play = function () {
    console.log("我可以玩游戏了")
}
xiaomi = new smartPhone("小米", 3999, "黑色")
console.log(xiaomi)
xiaomi.call()
xiaomi.play()

ES6

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
    }
    play(){
        console.log("我可以玩游戏了!")
    }
}
xiaomi = new SmartPhone("小米", 3999, "黑色")
console.log(xiaomi)
xiaomi.call()
xiaomi.play()

get 与 set

class Phone{
    set price(newVal){
        if (typeof newVal == "number"){
            console.log("价格被写入了")
        }
    }
    get price(){
        console.log("价格被读取了")
    }
}
phone = new Phone()
phone.price = 3999
phone.price

数值扩展

// 1. 进制
let b = 0b1010 // 二进制
let o = 0o10   // 八进制
let d = 100    // 十进制
let x = 0xff   // 十六进制

// 2. 判断
let num = 123
Number.isFinite(num) // 是否有限
Number.isInteger(num) // 是否为整数
Number.isNaN(num) // 是否为 NaN

// 3. 字符串转整数或浮点,你可以不使用 Number 进行调用
let str = "3.14圆周率"
Number.parseInt(str)
Number.parseFloat(str)

// 4. 将小数部分抹掉
let float = 3.14
Math.trunc(float)

// 5. 给一个数做标记。如果该数大于0,则返回1。如果该数小于0,则返回-1。如果该数等于0,则返回0。
let sign = 200
Math.sign(sign)

对象扩展

// 1. 判断两个值是否完全相等
Object.is(123, 456) // false, 相当于 ===

// 2. 对象的合并
let config1 = {
    host: "localhost",
    port: 3306,
    user: "root",
    password: "root",
}
let config2 = {
    user: "peng",
    password: "peng",
}
Object.assign(config1, config2)

模块导入

语法:

export 模块向外接口

import 输入其它模块提供的功能

快速使用:

demo.js

export let name = "SPC"
export let age = 18

export function Person(name, age) {
    console.log(`${name},今年${age}岁了。`)
}

html.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入</title>
</head>
<body>

<script type="modpe">
    import * as demo from "./demo.js"
    let person = demo.Person(demo.name, demo.age)
</script>
</body>
</html>

export 方式

分别暴露

export let name = "SPC"
export let age = 18

export function Person(name, age) {
    console.log(`${name},今年${age}岁了。`)
}

统一暴露

let name = "SPC"
let age = 18

function Person(name, age) {
    console.log(`${name},今年${age}岁了。`)
}

export {
    name,
    age,
    Person
}

默认暴露

let name = "SPC"
let age = 18

export defapt {
    name: "SPC",
    age: 18,
    Person: function (name, age) {
        console.log(`${name},今年${age}岁了。`)
    }
}

import 方式

<script type="modpe">
    
    // 通用写法
    import * as demo from "./demo.js"
    console.log(demo.name, demo.age)
    
    // 解构赋值写法
    import {name as name1, age} from "./demo.js"
    console.log(name1, age)
    
</script>

JS ES6

标签:还需要new结束引号efapt默认funtimeout抛出异常

以上就是JS ES6的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
vue从入门到精通系列:Vue.js 是什么 JS常见问题:xx is not defined at HTMLAnchorElement.onclick 【Web前端基础知识】关于Js中this的指向 js上传照片本地预览 JS 节流函数(throttle)与防抖函数(debounce) JS中的DFS和BFS 手写XML转化为JS对象方法 将一个json对象属性值赋值到另一个json中
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net