ES6常用

2018-02-23  本文已影响0人  年过古稀的Coder

let

const

object.freeze(对象)

冻结对象，无法解冻

如果希望一个对象本身以及自数据都不能变化，那么通过const和freeze同时使用

解构赋值

允许按照一定模式，从数组和对象中提取值

let {left:L,top:T} = getComputedStyle(sdad);

函数扩展

函数参数默认值

//es5
function fn (a,b) {
    a = a||10;
    b = b||10;
}
//es6
function fn (a=10,b=10)

剩余参数

function push (arr,...data){};
push(arr,'1','2','3');

扩展运算符

function fn (a,b){};
var arr = [10,10]
fn(...arr)

var arr1 = ['a','b','c'];
var arr2 = [1,2,3];
arr1.splice(1,1,...arr2);

var arr3 = [...arr1,...arr2]
//相当于
var arr3 = arr1.concat(arr2);

//找数组中最大值的方法
var arr4 = [4,2,6,1,6,7];
Math.max(...arr4);

箭头函数

//函数声明
function fn1 (a,b){};
//函数表达式
var fn2 function (a,b){};

//箭头函数

//几种有条件的简化写法

//当参数有多个的时候
var fn3 = (a,b) => {};
//当参数只有一个的时候
var fn4 = a => {};
//当没有参数的时候
var fn5 = () => {};
//有只有一条语句的时候，可以省略函数体的{}，同时该条语句的结果将作为该函数的返回值
var fn6 = r => r*r;
//但是如果有多条语句或者返回值是一个对象，则必须用{}

对象扩展

对象属性简洁表示法

var a = 1;
var b = 1;
//es5
var obj{
    left:100,
    top:100,
    a:a,
    b:b
}
//es6
var obj{
    left:100,
    top:100,
    a,
    b
}

对象方法的简洁表示法

//es5
let obj2 = {
    a:a,
    fn:function(){};
}
//es6
let obj3 = {
    a,
    fn(){};
}

对象属性名表达式

//es5
var x = 'username'
let obj4 = {
    x: 'maotao' //这里的x不会作为表达式被解析
}
//es6
let obj4 = {
    [x]: 'maotao' //如果把key放在一个[]中，那么[]中的内容将被作为表达式进行解析
}

Iterator==迭代器==

迭代协议

var obj = {x:10,y:20};
obj[Symbol.iterator] = function(){
    let keys = Object.keys(obj);
    let n = -1;
    return {
        next(){
            if (n < keys.length-1) {
                n++;
                return {done: false, value: {
                    k: keys[n],
                    v: obj[keys[n]]
                }};
            } else {
                return {done: true};
            }
        }
    }
}

迭代器

字符串扩展

字符串的遍历器接口

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

includes(), startsWith(), endsWith()

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

str.repeat(num)

repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数，会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0，NAN等同于0

'na'.repeat(-0.9) // ""
'na'.repeat(NAN) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

模板字符串

(`)

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

.trim()

可以消除模板字符串中的换行或空格

`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim()

数组扩展

Array.from()

Array.of()

//es5
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
//es6
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

arr.find()

var arr = '43157'.split('');
console.log(arr.find( function(item) {
        return item > 5;
} , document));//打印出来7

arr.findIndex()

findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

console.log( arr.findIndex( function(item) {
        //返回true，就表示找到了满足条件的值，则不会继续查找了，那么当前的值的位置作为findIndex的返回值
        return item > 4;
} ) );//打印出来0

arr.fill()

for of

作用：用来遍历拥有遍历接口的对象的属性的值

arr.keys()

遍历并获取数组的所有key，返回数组对象

arr.values()

遍历并获取数组的所有value，返回数组对象

arr.entries()

遍历并获取数组的所有键值对，返回数组对象

数组推导

通过现有数组生成新数组，称为数组推导

var arr = [1,2,3,4];
var arr2 = [for (i of arr) i*2];
var arr3 = [for (i of arr) if(i > 2) i];
var arr4 = [for (i of arr) if(i > 2) if(i < 3) i];

数据结构

Set

let s1 = new Set(['a','b','c']);

s1.add('d');
console.log(s1);//a,b,c,d//可以添加元素
s1.add('a');
console.log(s1);//a,b,c,d//可以添加元素，但是如果添加的元素已经存在，则不会添加进去
//s1.clear();//清空
s1.delete('a');
console.log(s1);//b,c,d//可以删除元素

for (let v of s1) {
    console.log(v);
}

var arr = [...s1];
console.log(arr);


var arr1 = 'shdfkjwehfhjsdf'.split('');
console.log( [...new Set(arr1)] );//这里把数组转化成set集合再转回数组，由于set集合中的值具有唯一性从而达到去重的目的

WeakSet

WeakSet类似于Set，也是不重复的值得集合，但是他只能用于存储对象，而不能是其他类型的值

let ws = new WeakSet();
var arr = [1,2];
ws.add(arr);
ws.add(window);
ws.has(window);//true
ws.delete(arr);
ws.has(arr);//false

let ws = new WeakSet();
function fn () = {};
ws.add(fn());
console.log(ws);//返回一个WeakSet对象，包含fn函数
setTimeout(function () {
    console.log(ws);//返回一个WeakSet空对象
},1000)

Map

const m = new Map();
const o = {p : 'Hello World'};
m.set(o,'content');
m.get(o);//返回content
m.has(o);//true
m.delete(o);

Map也接受数组作为参数，该数组的成员是一个个表示键值对的数组

const map = new Map([['name','张三'],['title','标题']])；
map.size;//2
map.has('name');//true
map.get('name');//张三
map.has('title');//true
map.get('title');//标题

Generator 函数

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

yield 表达式

next方法的参数

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

Promise

解决js中异步编程的问题
当我们new Promise会得到一个Promise对象，该对象下会有一个任务要完成，同时该对象会维护一个状态

Promise :

异步/同步

阻塞/非阻塞

Promise:

通过Promise构造函数得到一个Promise对象，我们传入的callback将会被Promise对象所执行
Promise会维护一个任务状态，这个状态是一个Promise内部的属性

[[PromiseStatus]] :

当我们把一个callback函数传递给Promise对象的时候，Promise对象会去执行该callback函数，同时，还会传递两个参数给这个callback，所以，我们可以在callback函数接收这两个参数

这两个参数都是一个函数，当我们调用他们的时候，会改变当前任务的状态

let p1 = new Promise(function(resolve, reject) {
    setTimeout(() => {
        var a = Math.random();
        if (a < 0.5) {
            reject(a);
        } else {
            resolve(a);
        }

    }, 1000)
});

then方法

Promise对象还有一个then方法，当前置任务完成的时候，会调用该方法，并执行该方法传入函数参数
then方法接收两个参数，他们都是函数

p1.then(function(a) {
        console.log('成功', a);
    },function(a) {
        console.log('失败', a);
});

then方法传递数据

其中a，在promise内部为实参，then方法中函数里的a为形参，接收内部传过来的实参a

一旦一个Promise的状态改变了，是没有办法在重置该Promise对象的状态的，我们只能另外创建一个新的Promise对象
虽然then方法中的参数接收两个
一个是成功的callback
一个是失败的callback
但是，在书写的时候，如果每一个then都传这两个callback的话，编写过程太麻烦
为了能够统一的去处理失败，Promise对象又提供了一个新的方法：catch
catch方法也接收一个callback
只要有一个Promise的状态变成了rejected，那么就会被catch方法捕获，执行catch的callback

var b = 10;
new Promise((resolve, reject) => {
    setTimeout(() => {
        b += 10;
        resolve();
//        reject();
    }, 1000);
}).then(function() {
    console.log(b);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            b *= 2;
            resolve();
        }, 1000);
    });
}).then(function() {
    console.log(b);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            b *= b;
//          resolve();
            reject();
        }, 1000);
    });
}).then(function() {
    console.log(b);
}).catch(function() {
    console.log(1);
});

all方法

var p1 = new Promise((resolve, reject) => {
    let a = 1;
    setTimeout(() => {
        a++;
//        reject('one');
        resolve(a);
    }, Math.random() * 1000);
});

var p2 = new Promise((resolve, reject) => {
    let b = 2;
    setTimeout(() => {
        b++;
        resolve(b);
    }, Math.random() * 1000);
});
Promise.all([p1, p2]).then(([a, b]) => {
    console.log(a, b);
}).catch((err) => {
    console.log(err);
})

async,await

async function fn() {
    var a = 1;

    a = await todo(a);

    console.log(a);
}

function todo(a) {
    return new Promise((resolve) => {
        setTimeout(() => {
            a += 10;
            resolve(a);
        }, 1000);
    })
}

运动实例

button.onclick = async function() {

    await startMove(div, {
        width: 200
    });
    await startMove(div, {
        height: 200
    });
    await startMove(div, {
        left: 200
    });
    await startMove(div, {
        top: 200
    });

}

function startMove(ele, attrs, duration=1000, fx='linear') {
    return new Promise((resolve) => {
        animation(ele, attrs, duration, fx, () => {
            resolve();
        });
    })
}

Object.defineProperty()

对对象的属性进行 定义/修改
返回值 ：被传递给函数的对象

var obj = {};
Object.defineProperty(obj,y,{
    configurable: false,
    enumerable：false，
    value: 100
})

参数 ：

let obj = {x:10}

let y = 100;
Object.defineProperty(obj, 'y', {
    get() {
        //当obj的y属性被调用的时候触发，该方法的返回值将作为获取的结果
        console.log('get');
        return y;
    },
    set(value) {
        //当obj的y属性被设置的时候触发
        console.log('set', value);
        y = value;
    }
})
console.log(obj.y);
obj.y = 1;
console.log(obj.y);

数据双向绑定实例 ：

<input type="text" id="age">
<h1></h1>

<script>
    var ageElement = document.querySelector('#age');
    var h1Element = document.querySelector('h1');

    let obj = {};

    Object.defineProperty(obj, 'age', {
        get() {

        },
        set(value) {
            ageElement.value = value;
            h1Element.innerHTML = value;
        }
    });

    obj.age = 10;

    ageElement.oninput = function() {
        obj.age = this.value;
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读