ES6新特性

ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,早已经在2015年6月正式发布了。虽然发布了,但并不是所用的浏览器都是兼容ES6语法的。目前使用的还大多是ES5的语法,使用ES6语法一般会与webpack等管理工具一起使用,使用(例如babel)帮助进行ES6语法到ES5语法的转化。
当然,作为新一代的标准,各大浏览器也在努力的兼容它。


总结一下ES6的新特性

1.增加新的定义变量关键字——let、const

let —— 使用块级作用域
以前js只有全局作用域和函数作用域,但es6中有块级作用域,let定义的变量只能在块级作用域内使用

{
    let name = "firewithwind"
}
console.log(name)//报错,name只能在对象内部使用

const —— 声明常量
const可以定义一个常量

const name = "firewithwind"
name = "othername"//报错,常量不能被重新赋值

const限制的是分配值的动作,如果是引用类型,指针不变,指向的变量内容是可变的

const name = []
console.log(name)
name.push("a new name")
console.log(name)

2.解构

以前的方法

function returnName() {
    return ['a', 'b', 'c']
}
var a = returnName()
var name1 = a[0], name2 = a[1], name3 = a[2]

ES6方法

function returnName() {
    return ['a', 'b', 'c']
}
let [name1, name2, name3] = returnName()

解构对象

function returnName() {
    return {a: "a", b: "b", c: "c"}
}
let {a: name1, b: name2, c: name3} = returnName()
console.log(name1, name2, name3)

3.字符模板

以前js连接字符串用+,ES6使用的字符模板,用`..${}.`来表示

let name1 = "food", name2 = "drink"
let want = `I wantsome ${name1} and ${name2}`
console.log(want)

带标签的模板,标签的表现实际是一个函数,接收两部分参数

let name1 = "food", name2 = "drink"
    let want = map`I want some ${name1} and ${name2}`
    function map(strings, ...values) {
        let result = ''
        console.log(strings)
        console.log(values)
        for (var i = 0; i < values.length; i ++) {
            result += strings[i]
            result += values[i] + "(let me see)"
        }
        result += strings[i]
        return result
    }
    console.log(want)

    //["I want some ", " and ", "", raw: Array(3)]
    //["food", "drink"]
    //I want some food(let me see) and drink(let me see)

4.新的字符串方法——startsWith, endsWith, includes

let string = "Today is a good day"

console.log(string.startsWith("Today"))

console.log(string.endsWith("day"))

console.log(string.includes("is"))

5.参数默认值

ES6中函数定义时可以给参数指定默认值,如果不传递该参数,则使用默认值

function printValue(name, age=120) {
    console.log(`name is ${name} and age is ${age}`)
}
printValue("fire")
//"name is fire and age is 120"

6.新的操作符“…”——展开或合并

展开

let name = ['a', 'b']
console.log(name)//["a", "b"]
console.log(...name)//a b

可以看到将name数组展开输出
一般用在将一个数组的元素整合到另一个数组

合并

function returnName(name, ...others) {
    console.log(name)
    console.log(others)
}
returnName("a", "b", "c", "d")
//a
//["b", "c", "d"]

可以看懂除了name指定接收的参数,其他参数被合并到others数组里面
通常用与函数接收参数,表示其他参数接收到该数组内

7.箭头函数

let fun = rest => rest + " is a arg"
console.log(fun("name"))
//
//"name is a arg"
//"如果有多个参数,要用()包括起来"
let fun2 = (a, b) => a === b
console.log(fun2("name", 'name'))
//
//true
let fun3 = (a, b) => {
    console.log(a === b)
}
fun3()
//
//true

8.增强对象字面量

对象字面量现在可以添加__proto__属性,了解js原型结构的都知道,在创建一个对象的实例时,该实例会自动添加__proto__属性,该属性指向构造函数的原型(prototype),相当于原型继承

let Person = {
    say: function() {
        console.log("I can say")
    }
}
let yperson = {
    color: "yellow",
    __proto__: Person,
    walk: function() {
        console.log("I can walk")
    }
}
yperson.say()

对象字面量的方法也不用使用function关键字

let person = {
    say() {
        console.log("I can say")
    }
}
person.say()

9.迭代器——generator

自己实现一个迭代器

// 接收一个数组
function chef(arr) {
    let i = 0
    return {
        next() {
            let done = (i >= arr.length)
            let value = (!done) ? arr[i++] : undefined 
            return {
                done: done,
                value: value
            }
        }
    }
}
let test = chef(['a', 'b'])
console.log(test.next())
console.log(test.next())
console.log(test.next())

使用生成器生成一个迭代器

function* chef(arr) {
    for (let i =0; i < arr.length; i ++) {
        yield arr[i]
    }
}
let test = chef(['a', 'b'])
console.log(test.next())
console.log(test.next())
console.log(test.next())

10.类的定义——class

calss一直是es5的保留字,在es6中将class正式使用,可以创建类

class Person{
    constructor(name) {
        this.name = name
    }
    say() {
        console.log("I can say")
    }
}
let p = new Person("a name")
p.say()
//
//I can say

constructor是类的构造函数,创建一个实例时会自动执行该函数
es6的类中定义了两个方法set 和 get,用于对类的变量进行操作

class Person{
    constructor(name) {
        this.name = name,
        this.day = []
    }
    set days(d) {
        this.day.push(d)
    }
    get days() {
        return this.day
    }
    say() {
        console.log("I can say")
    }
}
let p = new Person("a name")
p.days = "1"
p.days = "2"
console.log(p.days)

添加静态方法:不需要实例化就可使用的方法——static

class Person{
    constructor(name) {
        this.name = name,
        this.day = []
    }
    set days(d) {
        this.day.push(d)
    }
    get days() {
        return this.day
    }
    say() {
        console.log("I can say")
    }
    static eat() {
        console.log("I can eat")
    }
}
Person.eat()

继承——extends

class Person{
    constructor(name) {
        this.name = name,
        this.day = []
    }
    set days(d) {
        this.day.push(d)
    }
    get days() {
        return this.day
    }
    say() {
        console.log("I can say")
    }
    static eat() {
        console.log("I can eat")
    }
}
class YPer extends Person{
    constructor(name) {
        super(name)
    }
}
let AChinese = new YPer("lili")
AChinese.say()

11.异步——Promise

Promise用来实现函数的异步执行,他有三个状态:
Fulfilled——执行成功
Rejected——失败
Pending——初始状态

先看一下Promise对象的构建形式

let step = new Promise(function(resolve, reject) {
    if(true) {
        resolve(confident)
    } else {
        reject("error")
    }
})

Promise接收以一个接收一个参数的函数,该函数包含两个方法:resolve和reject
如果条件满足则执行resolve方法,否则,执行reject

Promise支持链式调用,then方法和catch方法

then方法接收两个函数作为参数,第一个函数为成功回调,第二个为失败回调,该函数返回一个Promise对象,所以可以链式调用

function step(confident) {
    returnnew Promise(function(resolve, reject) {
        if(confident) {
            resolve(confident)
        } else {
            reject("error")
        }
    })
}
step(true).then(function(mes) {
    console.log(mes)
}, function(err) {
    console.log(err)
})

catch是接收失败回调

function step(confident) {
    return new Promise(function(resolve, reject) {
        if(confident) {
            resolve(confident)
        } else {
            reject("error")
        }
    })
}
step(false).then(function(mes) {
    console.log(mes)
}).catch(function(err){
    console.log(err)
})

Promise.all 和 Promise.race

Promise.all接收一个Promise对象的数组为参数,then里面传递结果数组

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});
### ES6 新特性介绍 ES6(ECMAScript 2015)是 JavaScript 的一个重要版本更新,引入了许多新特性和改进。以下是一些关键的 ES6 新特性及其详细说明: #### 1. 模块化支持 在 ES6 中,模块化功能得到了显著增强。每个文件被视为一个独立的模块,默认情况下,模块内的变量和函数对外部是不可见的,除非显式使用 `export` 关键字导出。通过 `import` 可以从其他模块导入所需的接口[^4]。 ```javascript // 导出模块内容 export const sqrt = Math.sqrt; export function square(x) { return x * x; } // 导入模块内容 import { sqrt, square } from './lib.js'; ``` #### 2. 箭头函数 箭头函数是 ES6 中新增的一种函数定义方式,它提供了更简洁的语法,并且在处理 `this` 绑定时更加直观。需要注意的是,箭头函数不能作为构造函数使用,也没有自己的 `prototype` 属性[^2]。 ```javascript const add = (x, y) => x + y; const Foo = () => {}; // new Foo(); // TypeError: Foo is not a constructor ``` #### 3. Map 和 Set 数据结构 ES6 引入了两种新的数据结构:`Map` 和 `Set`。`Map` 是键值对的集合,允许使用任意类型的键;而 `Set` 是一个存储唯一值的集合。这两种数据结构可以提高代码的可读性和性能[^3]。 ```javascript const map = new Map(); map.set('name', 'Alice'); console.log(map.get('name')); // Alice const set = new Set([1, 2, 3, 3]); console.log(set.size); // 3 ``` #### 4. 类(Class)语法 ES6 引入了类的语法糖,使得继承和面向对象编程更加直观。尽管底层仍然基于原型链,但类的语法让开发者能够更容易地创建和扩展对象。 ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } const d = new Dog('Rex'); d.speak(); // Rex barks. ``` #### 5. 解构赋值 解构赋值允许从数组或对象中提取数据并赋值给变量,简化了复杂的数据访问操作。 ```javascript const [a, , b] = [1, 2, 3]; console.log(a, b); // 1, 3 const { name, age } = { name: 'Bob', age: 30 }; console.log(name, age); // Bob, 30 ``` #### 6. 默认参数与剩余参数 函数参数现在可以设置默认值,同时还可以使用剩余参数来捕获不定数量的参数。 ```javascript function multiply(a, b = 1) { return a * b; } console.log(multiply(5)); // 5 function sum(...args) { return args.reduce((acc, val) => acc + val, 0); } console.log(sum(1, 2, 3, 4)); // 10 ``` #### 7. 模板字符串 模板字符串允许嵌入表达式,并且可以轻松创建多行字符串。 ```javascript const name = 'Alice'; const greeting = `Hello, ${name}!`; console.log(greeting); // Hello, Alice! const multiLine = `This is a multi-line string.`; console.log(multiLine); ``` #### 8. let 和 const `let` 和 `const` 提供了块级作用域的变量声明方式,避免了全局污染和变量提升问题。 ```javascript for (let i = 0; i < 3; i++) { console.log(i); } // 0, 1, 2 console.log(i); // ReferenceError: i is not defined const pi = 3.14; pi = 3; // TypeError: Assignment to constant variable. ``` #### 9. Promise Promise 提供了一种更好的方式来处理异步操作,解决了回调地狱的问题。 ```javascript const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('Success!'), 1000); }); promise.then(result => console.log(result)); // Success! ``` ### 结论 ES6 的这些新特性极大地增强了 JavaScript 的功能和开发体验。通过合理使用这些特性,开发者可以编写更加简洁、高效和易于维护的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值