Javascript ES6(Generator、async、class、深浅拷贝等)

ES6

1.let和const关键字

使用let关键字代替var关键字
使用const关键字声明常量

let特点

  • 不允许重复声明同名变量
  • 在块作用域内有效
  • 不会预处理,不存在变量提升

预处理:提前声明变量和定义函数

const特点

  • 声明的变量不允许修改

2.变量的解构赋值

从对象或数组中提取数据,并赋值给多个变量。变量名必须和对象内的一致

//解构对象
let obj = { username: 'kobe', age: 39};
let {username , age} = obj; //username=kobe age=39

//解构对象
let arr = [1, 3, 5, 'abc', true];
let [,,a, b] =arr;//通过下标给变量赋值
console.log(a, b);

//传参解构
function foo({username, age}){
    console.log(username, age);
}
foo(obj);

3.模板字符串

简化字符串的拼接,例如使用在拼接url字符串时

let obj = { username: 'kobe', age: 39};
let str = `姓名:${obj.username},年龄:${obj.age}`; //使用tab键上面的键

4.对象的简写方式

提供了一种创建对象的快捷方式

let username = 'kobe';
let age =30;
let obj = {
     username,//同名属性可以省略不写,等价于 username: username
     age,
     getUsername(){ //可以省略function
        return this.username;
     }
}

5.箭头函数

使用箭头函数简化部分函数的创建

//只有一条函数执行语句的情况,可以省略花括号
let fun = () => console.log('Hello World'); //没有形参
let fun = a => console.log('Hello World', a); //只有一个参数,可以省略括号
let fun = (a, b) => console.log('Hello World', a, b); //两个及以上参数

//含有多条执行语句,加上花括号
let fun = () => {
    console.log('Hello World');
    console.log('Hello World');
    return 'hi';
}

箭头函数没有自己的this,其this决定定义的时候处在的对象,而不是调用的时候

6.三点运算符

可以用来当作可变参数,类似java,只能放在函数的最后

// 函数参数的用法
function foo(a,b,...value){ //value以伪数组的方式传入
    value.forEach(function(item, index){
        console.log(item, index);
    });
}

// 数组中的用法
let arr = [1,6];
let arr1 = [2, 3, 4, 5];
arr = [1, ...arr1, 6]; //将arr1插入

7.形参默认值

可以在参数上指定参数的默认值,同其他语言

8.Promise对象

代表了未来某个将要发生的时间,通常是一个异步操作
有了promise对象可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数

创建并使用Promise对象

let promise = new Promise(((resolve, reject) => {
    console.log('Hello');
    setTimeout(() => { //此处可以执行定时任务或者ajax异步任务
        console.log('Hi');
        //如果执行成功则修改promise的状态为fullfilled
        // resolve(data);
        //如果执行失败则修改状态为reject
        // reject(data);
    }, 2000);
}));
//使用promise设置回调函数
promise.then((data) => { //第一个表示成功的回调
    console.log('成功回调');
}, (data) => { //第二个表示失败的回调
    console.log('失败回调');
});

Promise对象的三个状态

  • pending:初始化状态
  • fullfilled:成功状态
  • rejected:失败状态

9.Symbol属性

ES5中对象的属性名都是字符串,容易造成重名,污染环境

特点

  • Symbol属性对应的值是唯一的,解决命名冲突问题
  • Symbol值不能与其他数据进行计算,包括同字符串拼串
  • for in , for of 遍历时都不会遍历Symbol属性
//创建一个Symbol属性
let symbol = Symbol();
console.log(symbol);
let obj = {username: 'kobe', age: 39};
obj[symbol] = 'hello'; //使用中括号的方式设置Symbol属性
console.log(obj);

10.Iterator迭代器

Iterator是一种接口机制,为不同的数据解构提供统一的访问机制,可以使用for of 语句

支持迭代器的数据类型

  • 数组
  • 字符串
  • arguments
  • set容器
  • map容器

使用方法

let arr = [1, 2, 3, 4];
for(let i of arr){ //输出数组
    console.log(i);
}

11.Generator函数

ES6提供的解决异步编程的方案之一,Generator函数是一个状态机,内部封装了不同状态的数据,用来生成遍历器对象

特性

  • 可以暂停函数(惰性求值),yield可以暂停,next方法可以启动,每次换回的是yield后的表达式结果
  • function与函数名之间有一个星号,即 function*
  • generator函数返回的是指针对象,不会执行函数内部的逻辑
  • 调用next方法从上次暂停处向下执行,直到遇到下一个yield表达式
//Generator函数
function* myGenerator() {
    console.log("开始执行");
    yield 'hello';
    console.log("继续执行");
    yield 'world';
    yield console.log('再次执行');
}
let mg = myGenerator(); //返回的是指针对象
let iteratorResult = mg.next();
console.log(iteratorResult.value); //通过结果获取返回值,yield语句默认返回是undefined
mg.next();//继续执行
mg.next();//再次执行

使用Generator函数为对象生成迭代器

//对象的Symbol.iterator属性,指向遍历器对象
let obj = {username : 'kobe', age: 42};
obj[Symbol.iterator] = function* () { //设置iterator
    yield 1;
    yield 2;
    yield 3;
};
for (let i of obj) {
    console.log(i);//输出1 2 3
}

12.async函数

async函数是ES7中规定的内容,类似于Generator函数,是基于它的再一次封装

特点

  • 不需要像Generator一样去调用next方法,遇到await等待,当前的异步操作完成之后就自动向下执行
  • 返回的总是Promise对象,可以用then方法进行下一步操作
  • async取代Generator的* ,await取代yield

基本使用

//基本使用
async function foo() {
    return new Promise(resolve => {
        setTimeout(function () {
            console.log('foo执行');
            resolve();
        }, 2000);
    });
}

async function test() {
    console.log('开始执行');
    await foo(); //等待foo执行完毕后进行下一条语句
    console.log('执行完毕');
}

test(); //调用函数测试

示例使用

//示例使用
async function getRequest(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            method: 'GET',
            url: url,
            success: data => resolve(),
            error: data => reject
        })
    });
}
async function test2() {
    await getRequest('http://localhost:L8080');
}

13.class类

使用class可以创建类和实现类的继承

基本使用

使用class关键字定义类时,类的方法不可以加function关键字
使用constructor关键字来定义一个构造器

//创建一个Person类
class Person {
    //构造器
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    //类的一般方法
    showName() {
        console.log(this.name, this.age)
    }
}
let person = new Person('kobe', 39);
person.showName();

类的继承

此处类的继承类似于java中的机制

//定义一个子类StarPerson
class StarPerson extends Person {
    constructor(name, age) { //构造父类的构造器,同Java
        super(name, age);
    }
}

14.数组方法扩展

  • Array.from(v):将伪数组或可遍历对象转换成真数组
  • Array.of(v1, v2, v2):将一系列值转换成数组
  • find(function(value, index, arr){return true}):找出第一个满足条件返回true的元素
  • find(function(value, index, arr){return true}):找出第一个满足条件返回true的元素下标

15.对象方法扩展

  • Object.is(v1, v2):判断两个数据是否完全相等
  • Object.assign(target, source1, source2…):将源对象属性复制到目标对象上
  • 直接操作__proto__属性:obj2.__proto__ = obj1;

区别于普通的比较

console.log(0 == -0); //true
console.log(NaN == NaN); //false
console.log(Object.is(0, -0)); //false
console.log(Object.is(NaN, NaN)); //true

16.深拷贝和浅拷贝

深拷贝和浅拷贝的区别:当一个变量x被赋值另一个变量y时,x的变化会影响到y的变化,这就是浅拷贝(只拷贝了引用)。而x的变化对于y没有影响的话,这就是深拷贝(复制了堆内存)

浅拷贝

  • 基本数据类型
  • Object.assign()
  • Array.prototype.concat()
  • Array.prototype.slice()

深拷贝

  • JSON.parse(JSON.stringify())
  • 对象
  • 数组
  • 拷贝数据里不能有函数
发布了15 篇原创文章 · 获赞 5 · 访问量 344
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览