ES6数据部分（字符串，数组，对象，symbol，set，map）

概括：ES6数据部分 讲到的内容 都是针对 ES5的拓展功能

字符串

模板字符串

• 语法：

  `字符串内容`

  应用场景：多用于 要在字符串内容中 进行插值

• 插值语法

  `字符串内容${要插入的内容（变量、常量、数组项、对象的属性、函数调用表达式...）}字符串内容`

  优点：

  • 方便插值

  • 字符串内部可以换行 因此 可以用来设置html内容

• 模板字符串中 还可以插入 算式

字符串的拓展方法

• startsWith

  • 用法：字符串.startsWith(指定的字符片段)

  • 作用：判断字符串 是否是以指定片段 开头的 如果是 返回true 否则返回false

• endsWith

  • 用法：字符串.endsWith(指定的字符片段)

  • 作用：判断字符串 是否是以指定片段 结尾的 如果是 返回true 否则返回false

• repeat

  • 用法：字符串.repeat(数字)

  • 作用：将指定字符串 重复 指定数字次 生成新字符串返回出来

• padStart

  • 用法：字符串.padStart(目标长度，填充字符片段)

  • 作用：使用填充字符片段 将字符串 填充到目标长度 填充在字符串开头

• padEnd

  • 用法：字符串.padEnd(目标长度，填充字符片段)

  • 作用：使用填充字符片段 将字符串 填充到目标长度 填充在字符串结尾

数组

• 数组的构造函数Array的新增方法

  • of

    • 用法：Array.of(数组项1，数组项2，...)

    • 作用：实例化数组（创建数组对象）

  • from

    • 用法：Array.from(伪数组)

    • 作用：将伪数组 转换为 真数组 返回出来

• 数组的新增方法

  • find

    用法：数组.find(function(item,idx,arr){
        /*item:循环出来的数组项
        idx：索引
        arr：循环的数组*/
        return 条件
    })

    作用：本方法 会自动循环整个数组 并查找 满足条件的第一个数组项 返回出来

  • findIndex

    用法：数组.findIndex(function(item,idx,arr){
        /*item:循环出来的数组项
        idx：索引
        arr：循环的数组*/
        return 条件
    })

    作用：本方法 会自动循环整个数组 并查找 满足条件的第一个数组项 返回其索引

  • includes

    • 用法：数组.includes(指定的数据)

    • 作用：判断数组中 是否包含 指定的数据 如果包含 返回true 否则 返回 false

对象

• 对象中属性和方法的简写

• （ES7新增功能）

  • 属性的简写：如果属性名 和 属性值的名字相同 就可以只写属性名

  • 例如

let name = "张三";
let age = 18;
let gender = "男";
let obj = {
    name:name,
    age:age,
    gender:gender
}
//简写
let obj = {
    name,
    age,
    gender
}

• 方法的简写

let obj = {
    skill:function(){
        console.log("大杀四方，无情铁手，致残打击，诺克萨斯断头台")
    }
}
//简写形式
let obj1 = {
    skill(){
        console.log("大杀四方，无情铁手，致残打击，诺克萨斯断头台")
    }
}

• 对象属性名的新写法

• 对象的属性名 可以通过 [变量名] 的方式来编写

  let a = "name";
  let obj = {
      [a]:"张三"
  }

对象的新增方法

• assign

  • 用法：Object.assign(对象1，对象2，...)

  • 作用：将传入的对象都合并为一个对象 并返回出来

  • 注意：本方法 是将后续参数对象 合并到 第一个参数对象上 因此 第一个参数对象会改变

    • 因此 我们如果想做对象合并 更多的写作：Object.assign({}，对象1，对象2，...) 来防止原对象被修改

  • 使用assign方法 实现浅拷贝

    • Object.assign({}，要拷贝的对象)

• keys

  • 用法：Object.keys(指定的对象)

  • 作用：获取到对象中的所有属性名（键名） 按照顺序 拼接为一个数组 并返回出来

• values

  • 用法：Object.values(指定的对象)

  • 作用：获取到对象中的所有属性值（键值） 按照顺序 拼接为一个数组 并返回出来

• JSON.stringify

  • 用法：JSON.stringify(js数据)

  • 作用：将js数据 转换为 json字符串

  • 说明：json字符串 就是 保留数据结构的字符串

• JSON.parse

  • 用法：JSON.parse(json字符串)

  • 作用：将json字符串 转换为js数据

• JSON的两个方法 主要用来 实现深拷贝

symbol 记号

• 这个数据 是ES6中 新增的数据

  • ES6 引入了一种新的简单数据类型 Symbol ，表示独一无二的值。

  • 它是 JavaScript 语言的第六个基本数据类型。

  • Symbol 值通过 Symbol 函数生成。

• symbol数据的创建方式

  • 基本创建方式：let sym = Symbol()

  • 创建带有描述信息的symbol数据：let sym = Symbol("描述信息")

• symbol数据 多用于 框架类项目的开发 symbol可以避免重名

  • 例如：

    let name = Symbol("name")
    let age = Symbol("age")
    let obj = {
        [name]:"狗蛋",
        [age]:3
    }

set

• set是ES6中新增的一种 数据格式 是一种伪数组

• 它类似于数组，但是成员的值都是唯一的，没有重复的值

• set数据的创建

  • let set = new Set([1,2,3,4,5,6]);

  • console.log(set)

  • 说明：

    • 在set数据中 包含的数据不叫数组项 而叫成员

    • 每一个成员 都有自己的索引 因此可以循环

    • size属性 相当于 数组中的length属性 记录set数据中 包含的成员的个数

    • set数据中的成员 可以是任意类型的数据

• set数据的操作方法

  • set.add(成员) 在set数据末尾 添加成员

  • set.delete(成员) 删除set数据中指定成员

  • set.has(成员) 判断 set数据中有没有指定成员 如果有 返回true 否则 返回false

  • set.clear() 清空set数据中的所有成员

map

• map是ES6中 新增的一种 数据结构

• 类似于ES5中的对象 但是其写法不同于对象 且 可以使用任何类型的数据作为键名

• 写法

  let map = new Map([
      [键名，键值],
      [键名1，键值],
      ....
  ])
  console.log(map)

• 说明

  • map数据有一个属性 size 记录其中键值对的个数

  • 键值也可以是任意类型的数据

  • 键名可以是任意类型的数据

  • 在map数据中 我们不叫属性 而叫 键值对

• map数据的操作

  • map.set(键名，键值) 给map数据 设置新的键值对 或 修改原键值对的值

  • map.get(键名) 可以获取到map数据中 指定键名的键值 并返回出来

  • map.delete(键名) 删除指定键名的键值对

  • map.has(键名) 判断 是否有指定键名的键值对

  • map.clear() 清空map中所有键值对

• 注意：在map数据中 如果想设置键名为 复杂类型数据 或 symbol 一定要提前声明变量 以此来保证后面使用的时候 和前面的键名保持一致