4-es6(贰)

当前位置:

首页 > temp > JavaScript教程 >

4-es6(贰)

1. ES6-Number

1.1 Number函数

Number.isNaN函数

Number.isNaN('abc');返回false；判断是否是NaN，除了NaN以外，都为false；没有隐式类型转换

Number.isFinite函数

Number.isFinite(Infinity);返回flase；判断数值是否是有限，只有Infinity是无限的，其他数值因为17位精确度问题都有限

Number.parseInt函数

Number.parseInt("124.sd");返回123；解析字符串返回一个整数

Number.isInteger

Number.isInteger(3.00);但会true；判断是否是整数

1.2 Math函数

Math.trunc(3.4);返回3；返回传入数值的整数，相当于向下取整

Math.sign(3);返回1；判断数值正负；正数返回1、复数返回-1、0返回0

2. ES6-Object

2.1 新写法

ES6允许在对象字面量中直接写入变量和函数，作为对象的属性和方法。此时，属性名就是变量名，属性的值就是变量的值。

let name = 'zs';
let age = 12;
let f = "foo"
let person = {
    [f]:'yiKaLuoSi',name, age, say() {
        alert("hi")
    }
}
console.log(person.foo);//yiKaLuoSi

2.2 Object函数

Object.is(num1, num2);返回false；判断两个值是否严格相等

Object.assign(target,origin);把源对象的属性复制到目标对象上；返回目标对象

let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
let returnedTarget = Object.assign(target, source);
console.log(target);//Object { a: 1, b: 4, c: 5 }

Object.getPrototypeOf(person);用于获取指定对象的原型

Object.setPrototypeOf()用于设置一个指定的对象的原型

let dict = Object.setPrototypeOf({}, null);//指定空对象的原型为空

Object.entries();遍历对象，返回可枚举属性（除Symbol外）的键值对数组

Object.keys()遍历对象，返回一个给定对象的所有可枚举属性的字符串数组

Object.values()遍历对象，返回一个包含对象自身的所有可枚举属性值的数组

let person2 = {
    name: 'zs',
    age: 19
}
console.log(Object.entries(person2));
//Array [Array ["name", "zs"], Array ["age", 19]]
console.log(Object.keys(person2));
//["name", "age"]
console.log(Object.values(person2));
//["zs", 19]

3. ES6-function

3.1 rest参数（剩余参数）

如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组

function fun(a, b, ...theArgs) {
    console.log(theArgs);
}
fun(1, 2, 3, 4, 5);//[3,4,5]

3.2 扩展运算符

用于将一个数组转成一个对应的参数数列

function sum(x, y, z) {
  return x + y + z;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers));

3.3 箭头函数

基础语法

(参数列表) => {返回值}

高级用法：支持剩余参数和默认参数、支持参数列表结构

let fun = (param1, param2) => { return expression; }

4. symbol

symbol 是一种基本数据类型。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

基础语法：let sym1 = Symbol('foo');

symbol作为属性名不会被遍历到

4.1 Symbol函数

Object.getOwnPropertySymbols函数

用于获取对象的symbol属性

let name = Symbol('name');
let person = {
    [name]: 'zs',
    age: 12
};
Object.getOwnPropertySymbols(person);//[Symbol(name)]

Reflect.ownKeys函数

用于获取对象包含symbol属性的所有属性

Reflect.ownKeys(person);// ["age", Symbol(name)]

Symbol.for(key)函数

使用给定的key搜索现有的symbol，如果找到则返回该symbol。否则将使用给定的key在全局symbol注册表中创建一个新的symbol

key：一个字符串，作为 symbol 注册表中与某 symbol 关联的键（同时也会作为该 symbol 的描述）

Symbol.keyFor(sym)

用来获取全局symbol 注册表中与某个 symbol 关联的键

5. Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

实现

let p = new Proxy(target, handler)

target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

get、set、ownKeys、has方法

let person = { 'name': 'zs', 'age': 15 }
let proxy1 = new Proxy(person, {
    //get方法用于拦截对象的读取属性操作
    //target 目标对象、property 被获取的属性名、receiver Proxy或者继承Proxy的对象
    get: function (target, property) {
        return { 'name': 'lks', 'age': 20 }
    },
    //set方法是设置属性值操作的捕获器
    //target 目标对象、property 将被设置的属性名、value 新属性值
    set: function (target, property, value) {
        target[property] = value;
        console.log(`已更名为${value}`);
    },
    //ownKeys用于拦截: 
    // Object.getOwnPropertyNames()
    // Object.getOwnPropertySymbols()
    // Object.keys()
    // Reflect.ownKeys()
    //target 目标对象
    ownKeys: function (target) {
        return ['name']
    },
    // has会拦截key in object的操作，结果会返回一个布尔值
    //target 目标对象、property 需要检查是否存在的属性
    has: function (target, property) {
        if (target[property] === undefined) {
            return false;
        } else {
            return true;
        }
    },
})
console.log(proxy1.name);//{name: "lks", age: 20}
proxy1.name = 'ttk';//已更名为ttk
console.log(person.name);//ttk
console.log(Reflect.ownKeys(proxy1));//["name"]
console.log(Reflect.ownKeys(person));// ["name", "age"]
console.log('age' in proxy1);//true

apply方法

function sum(a, b) {
    return a + b;
}
let proxy2 = new Proxy(sum, {
    // apply会拦截函数的调用
    // target 目标对象（函数）、thisArg 被调用时的上下文对象(必须有)、argumentsList 被调用时的参数数组 
    apply: function (target, thisArg, argumentsList) {
        return target(argumentsList[0], argumentsList[1]) * 10;
    }
});
console.log(sum(1, 2));// 3
console.log(proxy2(1, 2));// 30

Proxy.revocable方法

Proxy.revocable() 方法用来创建一个可撤销的代理对象

let person3 = { 'name': 'zs' }
let revocable = Proxy.revocable(person3, {
    get(target, property) {
        return 'lks';
    }
});
console.log(revocable.proxy.name);//lks
revocable.revoke();
console.log(revocable.proxy.name); // 抛出 TypeError

6. for...of

for...of语句在可迭代对象（包括Array，Map，Set，String，arguments 等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句；不能迭代Object对象

let iterable = [10, 20, 30];
for (let value of iterable) {
    console.log(value);
}

6.1 for总结

forEach可以取得对象的内容，不能操作遍历的进程
for in常用于对象的遍历，对遍历数字数组取到的时字符串类型
for of写法简洁，除了对象都可以遍历，很先进

__EOF__

本文作者： ReCreyed

本文链接： https://www.cnblogs.com/recreyed/p/es602.html

栏目列表