• ES6学习笔记(二):引用数据类型


    Array

    新增方法

    1.Array.from()
    将类数组(dom对象 或 arguments)或setmap对象转换为数组
    2.Array.of()
    将一组值转换为数组,例如Array.of(3,5,7,9) => [3,5,7,9]
    3.Array.prototype.copyWithin()
    数字内部复制
    4.数组实例的find()和findIndex()
    例如[1,2,3].find(n => n > 2) // 3
    5.数组实例的fill()
    使用给定的值填充数组
    6.数组实例的entries(),keys()和values()
    keys() 遍历数组key值
    values() 遍历数组value值
    entries() 遍历数组key和value值
    7.数组实例的includes()
    检测数组中是否含有某个值,返回一个布尔值

    数组的空位

    注意与undefined区分

    Function

    设置参数默认值

    参数变量是默认声明的,所以不能用let或const再次声明。
    es5:

    function doSomething(x){
       x = x || 1;
       console.log(x);
    }
    doSomething() // 1
    

    es6:

    function doSomething(x = 1){
        console.log(x)
    }
    doSomething() // 1
    

    arguments.length失真的问题

    如果设置了默认值,则length失真
    length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。
    rest参数也不会计入length属性。

    (function (a) {}).length // 1
    (function (a = 5) {}).length // 0
    (function (a, b, c = 5) {}).length // 2
    

    rest参数

    rest参数是一个数组

    function push( ...items) {
      console.log(items)
    }
    
    push(1, 2, 3); // [1,2,3]
    

    注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

    扩展运算符...

    它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

    // ES5的写法
    Math.max.apply(null, [14, 3, 77])
    
    // ES6的写法
    Math.max(...[14, 3, 77])
    
    // 等同于
    Math.max(14, 3, 77);
    

    应用:
    1.合并数组 [...arr1,...arr2,...arr3]
    2.转换字符串为数组 [...'hello] // [ "h", "e", "l", "l", "o" ]
    3.实现了Iterator接口的对象转换为数组(注意与Array.from区别)

    箭头函数

    使用注意点:
    1.this指向定义时的对象,非执行时所在的对象
    2.不能使用new命令
    3.不能使用arguments、super、new.target,可用rest参数
    4.不能使用yield命令

    var obj = {
      id:42,
      foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
        
      }
    }
    var id = 21;
    obj.foo()// id: 42
    

    以上例子中如果不用箭头函数,则结果会是id:21,因为this指向的window。
    箭头函数里面根本没有自己的this,而是引用外层的this。

    // ES6
    function foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
    }
    
    // ES5
    function foo() {
      var _this = this;
    
      setTimeout(function () {
        console.log('id:', _this.id);
      }, 100);
    }
    

    函数绑定

    1.语法:
    func::obj 等价于 func.bind(obj)
    2.传参数写法
    func::obj(...arguments) 等价于 func.bind(obj,...arguments)
    3.省略写法
    ::obj.func 等价于 obj::obj.func

    尾调用和尾递归优化

    函数参数逗号尾

    Object

    对象简写

    1.只写属性名
    2.属性名表达式(字符串拼接)

    var foo = '111';
    var bar = {foo};
    console.log(bar); // {foo:'111'}
    

    新方法

    1.Object.is(obj1,obj2) // 判断两个对象是否等价
    2.Object.assign() // 对象合并,类似于jQuery的$.extend()
    应用:为对象添加属性、克隆对象、合并多个对象、为属性添加默认值
    浅拷贝:如果源对象某个属性是引用数据类型,则目标对象拷贝后得到的是该引用。
    注意:拷贝嵌套的对象,如果属性名相同,则会替换该属性的值而非添加

    属性的可枚举性

    以下操作会忽略enumerable为false的属性
    1.for...in
    2.Object.keys()
    3.JSON.stringify()
    4.Object.assign()
    ES6规定,所有Class的原型的方法都是不可枚举的。

    属性的遍历

    (1)for...in // 遍历自身的和继承的属性(不含Symbol)
    (2)Object.keys(obj) // 遍历对象自身属性,并将所有属性返回为一个数组(不含继承和Symbol)
    (3)Object.getOwnPropertyNames(obj) // 返回一个数组,遍历对象自身的所有属性(不含Symbol,包括不可枚举的)
    (4)Object.getOwnPropertySymbols(obj) // 返回一个数组,包含对象自身的所有Symbol属性
    (5)Reflect.ownKeys(obj) // 返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。

    属性遍历的次序规则:
    首先:数值的属性,按照数字排序。
    其次:字符串的属性,按照生成时间排序。
    最后:所有属性名为Symbol值的属性,按照生成时间排序。

    Object.setPrototypeOf(),Object.getPrototypeOf()

    Object.values(),Object.entries()

    Object.values(): 遍历对象,返回所有属性的值组成的数组
    Object.entries(): 返回一个数组,成员是对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

    Object.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptors

  • 相关阅读:
    『Python』进程同步
    『Python』多进程
    『GoLang』协程与通道
    『GoLang』错误处理
    『码农翻身』语言的学习
    『GoLang』fmt包的使用
    异或运算符(^)、与运算符(&)、或运算符(|)、反运算符(~)、右移运算符(>>)、无符号右移运算符(>>>)
    HTML DOM focus() 方法
    JavaScript中的indexOf使用方法
    HTML 5 中的textarea标签
  • 原文地址:https://www.cnblogs.com/shuiyi/p/5824193.html
Copyright © 2020-2023  润新知