ES6新增,解构赋值,扩展运算符和箭头函数

关于ES6新增特性

** 块级作用域**
let、const 和 var 的区别

  1. let、const不可以重复声明,var 可以重复声明
  2. let、const不可以变量提升,var 可以
  3. 常量const,但是他在创建必须要有初始值,并且不可以改变
//块级作用域
//在for循环中,条件的let相当于块级夫作用域
for(let i=0;i<10;i++){
// 循环体是子作用域
let i = hello
}
varletconst
在函数作用域内或者全局有效,没有块级作用域只在let命令所在的代码块内有效只在声明所在的块级作用域内有效
能重复声明不能重复声明不能重复声明
存在变量提升暂时性死区暂时性死区

class类

class Person1 {
    // constructor 实例属性
    constructor(name = 'parker', age = 18) {
            this.name = name
            this.age = age
        }
        // 方法
    showMsg() {
        console.log(this.name)
    }
    print() {
        console.log(this.age)
    }
}

class继承
var newPerson = new Person1();
console.log(newPerson);
extends 与 super

子类 proto 表示 构造函数的继承
子类 proto.prototype表示方法的继承

class A {
    constructor() {
        this.name = 'xiaoming'
    }
    print() {
        console.log(this.name)
    }
}

class B extends A {
    constructor() {
        super()
        this.age = 'B'
    }
}

var b = new B('daming');

变量的解构赋值
数组的解构赋值 实质是模式匹配

数组解构赋值

//解构成功,左右两边迭代器要相同即两边都是数组或者两边都是对象
let [a,b,c] = [1,2,3];
console.log(a,b,c);
//解构失败的情况是没有对相应的值赋值个变量
let [d,e,f] = [1,2]; //let [d,e,f] = [1,2,undefined];
console.log(d,e,f);
// 不完全解构,没有变量接收多余的值
let [g,h] = [1,2,3];
console.log(g,h);
// 默认值,给变量设置默认值,当有赋值时将值赋给变量,当没有赋值时使用默认值
let [x = 10] = [20]; 
console.log(x); 
//let [i = 10, y, z = 5] = [20,10]; console.log(i, y, z); //---> 20 10 5

对象的解构赋值
对象的解构赋值是无序的

let {username, age} = {age : 18, username : 'parker'};
console.log(username,age);//'parker' 18

let {username:newName} = {age : 18, username : 'parker'};
console.log(newName);//'parker'

函数的扩展
// 函数参数的默认值

function Person (name, age = 18) {
	console.log(name, age);
}
Person('parkerWang')
Person('parkerWang', 20)
Person('parkerWang', null)

扩展运算符 REST参数

var arr = [...1,2,3,4,5]; // 1,2,3,4,5

函数默认赋值
ES6之前,函数的形参是无法给默认值得,只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。

function es6Fuc (x, y = 'default') {
    console.log(x, y);
}
es6Fuc(4) // 4, default

箭头函数

var fu = num => num;
var fun = function(num1, num2) {
    return num1, num2;
}
var fu1 = str => () => str.split('')
function fn(str) {
    return function() {
        return str.split('');
    };
}**

Symbol
Symbol是ES6引入的第七种数据类型。

所有Symbol()生成的值都是独一无二的,可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。

var str1 = Symbol("a");
var str2 = Symbol("a");
console.log(str1 === str2); //false

Set
Set是ES6新的数据结构,类似数组,但成员的值是唯一的,没有重复的值。

let set= new Set()
set.add(1)
set.add(2)
set.add(2)
set.add(3)
for(let item of set){
  console.log(item) //1,2,3
}

let set2 =new Set([1,2,3,3])
[...set2] //1,2,3

在Set中,两个NaN时相等的,会去掉重复的NaN

Map
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

const numbers = [4, 9, 16, 25];

function calcFun(num) {
    return num.map(Math.sqrt);
}
console.log(calcFun(numbers))

promise
Promise是ES6引入的一个新的对象,他的主要作用是用来解决JS异步机制里,回调机制产生的“回调地狱”。

new Promise((resolve, reject) =>{
    // 一段耗时的异步操作
    // resolve('成功') // 数据处理完成
    reject('失败') // 数据处理出错
}).then(
    // .then()的第一个参数是成功(resolve)的回调
    (res) => {
        console.log(res)// 成功
        // console.log(res2)// 成功
    },  
    // 第二个参数是失败(reject)的回调
    (err) => {
        console.log(err)// 失败
        // console.log(err2)// 失败
    } 
).catch((err)=>{
    console.log(err);
})

.then()是promise的回调,接受两个参数,第一个参数是promise的resolve回调,第二个参数是reject回调;如果不写,只会执行失败回调(reject);另外,它还有另外一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。

数组实例方法
copyWithin copyWithin(target,start,end)

// 复制数组中start~end的值,从target位覆盖到数组中,会改变原数组。
var arr4 = [1,2,3,4,5,6,7];
var arr5 = arr4.copyWithin(0, 3, 4);
console.log(arr4, arr5);
fill()
//数组填充
var arr6 = new Array(6);
arr6.fill(5);
console.log(arr6);

entries() keys() values()

var arr7 = ['2',2,3,4,5];
var r = arr7.keys()
var t = arr7.values()
for([item, index]of arr7.entries()) {
	console.log(item, index);
}

includes() find(callback) findIndex(callback)

// find()找到满足条件的第一个数 findIndex()找到满足条件的第一个数的下标
var num12 = arr7.find(item => item > 2);
var num13 = arr7.findIndex(item => item > 2);
console.log(num12);
console.log(num13);
var num14 = arr7.includes(3);//有就返回true无就返回false

对象的扩展
属性的可枚举性以及属性的遍历
Object.is(‘item1’,‘item2’) 返回bool值 判断两个值是否绝对等于,可以判断NaN
Object.assign() 将若干个对象的可枚举属性放到一个对象当中

var obj1 = {},
    obj2 = {
        name: 'parker'
    },
    obj3 = {
        age: 18
    },
    obj4;
obj4 = Object.assign(obj1, obj2, obj3);
console.log(obj4, obj3, obj2, obj1); // 输出{name: "parker", age: 18} {age: 18} {name: "parker"} {name: "parker", age: 18}

Object.keys() Object.values() Object.entries()
var obj5 = {
    name: 'parker',
    age: 18,
    getMsg() {
        return this.name + this.age;
    }
}

var keys = Object.keys(obj5);
var values = Object.values(obj5);
var entries = Object.entries(obj5);
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

文雅的

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值