ES6常用知识点整理

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6常用知识点整理脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

==============================================================================

本文仅整理部分常用的知识点,完整请查看[阮一峰老师的文章][1],该文章也是于其中

==============================================================================

1、letconst

() let声明变量,const声明常量,不允许重复声明
(2) let是块级作用域,不会挂载到window对象中
(3) let需要先声明再调用,不会存在变量提升的问题


2、变量的解构赋值

(1)多个变量赋值,并设置默认值

    let [a=1,b,c] = [,2,3]
    console.LOG(a) // 1

(2)json中提取变量
提取json中的data值,并赋值给新的变量number:

    let jsonData = {
        id: 42,
        status: "OK",
        data: [867, 5309]
    };

    let { id, status, data: number } = jsonData;
    console.log(number);// [867, 5309]

(3)交互2个变量的值

    let x = 1;
    let y = 2;

    [x, y] = [y, x];
    console.log(x) //2

3、字符串的扩展

(1)判断一个字符串是否在另一个字符串

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWITh():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    let s = 'Hello world!';
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true

这三个方法都支持第二个参数,表示开始搜索的位置:

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

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
(2)rePEat()
repeat返回一个新的字符串,并将原字符串重复n次。

'hello'.repeat(2) // "hellohello"

(3)padStart(),padEnd()
自动补全字符串

    'x'.padStart(5, 'ab') // 'ababx'
    'x'.padEnd(4, 'xaba') // 'xaba'

(4)模板字符串

    let tempString = 'hello'
    console.log(`${tempString} world !`)

4、数值的扩展

ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变,减少全局性方法,使得语言逐步模块化。。

  • Number.isInteger() 判断一个数值是否为整数
  • Math.trunc() 反正一个值的整数部分
  • Math.sign()
    参数为正数,返回+1;
    参数为负数,返回-1;
    参数为 0,返回0;
    参数为-0,返回-0;
    其他值,返回NaN

5、函数的扩展

  • 函数参数的默认值
    function add(x=1,y) {
        console.log(x+y)
    }
    add(undefined,2) // 触发默认值x=1
    add(null,2) // 没触发默认值

参数形成单独的作用域,等到初始化结束,这个作用域就会消失

    const x1 = 1;
    function F1(x1, y = x1) {
        console.log(y);
    }
    f1(2) // 指向参数形成的单独作用域

    const x2 = 1;
    function f2(y = x2) {
        let x2 = 2;
        console.log(y);
    }
    f2() // 在这个作用域中x2没有定义,所以指向外层的x2
  • reset参数
    用于接收函数多余的参数,只能作为最后一个参数
    function push(array,...values) {
        values.map((item)=>{
            array.push(item)
        })
        console.log(array)
    }
    let arr = []
    push(arr,1,2,3,4) // [1,2,3,4]

6、数组的扩展

    //数组的深度拷贝
    const a1 = [1, 2];
    const a2 = [...a1];
    a1[0]=2
    console.log(a2) // [1,2]

    //合并数组(浅拷贝)
    const arr1 = [1,2,3]
    const arr2 = [4,5,6]
    const arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]

    //将字符串转为数组(调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换)
    const str = 'hello'
    console.log([...str]) // ["h", "e", "l", "l", "o"]
  • Array.From()
    用于将两类对象转为数组
    // 1、类数组对象:任何length属性的对象
    const obj = {
        '0': 'gao',
        '1': '26',
        length:2
    }
    console.log(Array.from(obj)) // ['gao','26']

    //2、可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
  • Array.of()
    将一组值,转换为数组,如果没有参数则返回空数组,用来替代Array()或new Array()
    Array.of(2) // [2]
    Array(2) // [,,]
  • 数组实例的 find()和findIndex()
    // find():返回第一个符合条件的成员,没有返回undefined
    const arrFind = [1,4,-5,10].find(value => value<0)
    console.log(arrFind) // -2


    //findIndex():返回第一个符合条件成员的位置,没有返回-1
    const arrFindIndex = [1,4,-5,10].findIndex(function (value,index,arr) {
        return value < 0
    })
    console.log(arrFindIndex) // 2
  • 数组实例的 fill()
    替换数组中的元素
    console.log([1,2,3].fill(4)) // 【4,4,4】默认从开始到结束都替换
    console.log([1,2,3].fill(4,1,2)) // [1,4,3] 替换数组下标第1个到第2个
  • 数组实例的 entries(),keys() 和 values()
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
  • 数组实例的 includes()
    返回一个布尔值,表示某个数组是否包含给定的值,替代es6之前的indexof
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
  • 数组实例的 flat()
    将嵌套的数组“拉平”,变成一维的数组
    //默认拉平一层
    console.log([1,2,[3,[4,5]]].flat()) // [1,2,3,[4,5]]
    //传入要拉平的层数
    console.log([1,2,[3,[4,5]]].flat(2)) // [1,2,3,4,5]
    //传入Infility,全部拉平
    console.log([1,2,[3,[4,5]]].flat(Infinity)) // [1,2,3,4,5]

7、对象的扩展

  • Object.assign()
    对象的合并,将一个对象的所有可枚举属性复制到另一个对象,同名属性会直接替换。
    //浅拷贝:如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用
    const objName = {name: {surname: 'gao'}}
    const objAge = {age:26}
    const person = Object.assign({},objName,objAge)
    objName.name.surname = 'danny'
    console.log(person.name.surname) // 'danny'
  • Object.setPRototypeOf()
    设置原型对象
    // 将proto设置为obj的原型对象
    let proto = {};
    let obj6 = { x: 10 };
    Object.setPrototypeOf(obj, proto);
    proto.y = 20;
    proto.z = 40;
    obj6.x // 10
    obj6.y // 20
    obj6.z // 40
  • Object.getPrototypeOf()
    读取一个对象的原型对象
    function Rectangle() {
        // ...
    }
    const rec = new Rectangle();
    Object.getPrototypeOf(rec) === Rectangle.prototype// true
    Object.setPrototypeOf(rec, Object.prototype);
    Object.getPrototypeOf(rec) === Rectangle.prototype// false
  • Object.keys(),Object.values(),Object.entries()
    //Object.keys():返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
    const obj6 = { foo: 'bar', baz: 42 };
    Object.keys(obj6) // ["foo", "baz"]

    //Object.values():方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值
    const obj7 = { foo: 'bar', baz: 42 };
    Object.values(obj7) // ["bar", 42]

    //Object.entries() :返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
    const obj8 = { foo: 'bar', baz: 42 };
    Object.entries(obj8) // [ ["foo", "bar"], ["baz", 42] ]

8、Symbol

  • 介绍
    ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
    Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
  • 作为属性名的 Symbol
    //Symbol 值作为对象属性名时,不能用点运算
    const mySymbol = Symbol();
    const va = {};
    va.mySymbol = 'Hello!';
    va[mySymbol] // undefined
    va['mySymbol'] // "Hello!"
  • 属性名的遍历
    Symbol 作为属性名,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertynames()、JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。
    const obj = {};
    let a = Symbol('a');
    let b = Symbol('b');

    obj[a] = 'Hello';
    obj[b] = 'World';

    const objectSymbols = Object.getOwnPropertySymbols(obj);

    objectSymbols// [Symbol(a), Symbol(b)]
    
    //另一个新的 API,Reflect.ownKeys方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。
    let obj = {
        [Symbol('my_key')]: 1,
        enum: 2,
        nonEnum: 3
    };

    Reflect.ownKeys(obj)//  ["enum", "nonEnum", Symbol(my_key)]

9、Set和Map数据结构

1、Set

  • Set()是个构造函数,用来生成类似数组的数据结构,但是成员值都是唯一的。
  • 去重
    const set  = [...new Set([1,2,3,3,4,4])] // 1,2,3,4
  • Set实例的属性和方法
    const set = new Set([1,2,3])
    
    // 添加值,并返回Set结构本身
    set.add(4)
    console.log([...set]) //[1,2,3,4]

    //删除值,返回bool值表示是否成功
    set.delete(4)
    console.log(set)  //[1,2,3]

    //表示是该值是否为Set成员,返回bool值
    console.log(set.has(3))

    //清除所有成员,没有返回值
    set.clear()
    console.log([...set])  //[]
  • 遍历操作
    const set2 = new Set([1,2,3])

    // keys():返回键名的遍历器
    for(let i of set2.keys()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // values():返回键值的遍历器(set结构没有键名,只有键值,所以keys和values方法一样)
    for(let i of set2.values()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // entries():返回键值对的遍历器
    for(let i of set2.entries()){
        console.log(i)
        // [1,1]
        // [2,2]
        // [3,3]
    }

    //foreach遍历器
    set2.forEach((key,value)=>{
        console.log(`${key}:${value}`)
        // 1:1
        // 2:2
        // 3:3
    })

2、Map

  • MaP实例的属性和方法
    和Set一致
  • 遍历器
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用Map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

脚本宝典总结

以上是脚本宝典为你收集整理的ES6常用知识点整理全部内容,希望文章能够帮你解决ES6常用知识点整理所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。