ES6 学习（二）-- 字符串/数组/对象/函数扩展

文章目录

• [1. 模板字符串](#1. 模板字符串)
• • [1.1 {} 使用](#1.1 {} 使用)
  • [1.2 字符串扩展](#1.2 字符串扩展)
  • • [(1) ! includes() / startsWith() / endsWith()](#(1) ! includes() / startsWith() / endsWith())
    • [(2) repeat()](#(2) repeat())
• [2. 数值扩展](#2. 数值扩展)
• • [2.1 二进制 八进制写法](#2.1 二进制 八进制写法)
  • [2.2 ! Number.isFinite() / Number.isNaN()](#2.2 ! Number.isFinite() / Number.isNaN())
  • [2.3 inInteger()](#2.3 inInteger())
  • [2.4 ! 极小常量值Number.EPSILON](#2.4 ! 极小常量值Number.EPSILON)
  • [2.5 Math.trunc()](#2.5 Math.trunc())
  • [2.6 Math.sign()](#2.6 Math.sign())
• [3. 数组扩展](#3. 数组扩展)
• • [3.1 扩展运算符](#3.1 扩展运算符)
  • [3.2 Array.from()](#3.2 Array.from())
  • [3.3 Array.of()](#3.3 Array.of())
  • [3.4 find() / findIndex()](#3.4 find() / findIndex())
  • [3.5 fill()](#3.5 fill())
  • [3.6 ! flat() / flatMap()](#3.6 ! flat() / flatMap())
• [4. 对象扩展](#4. 对象扩展)
• • [4.1 对象简写](#4.1 对象简写)
  • [4.2 对象属性 表达式](#4.2 对象属性 表达式)
  • [4.3 扩展运算符 ...](#4.3 扩展运算符 ...)
  • [4.4 Object.assign()](#4.4 Object.assign())
  • [4.5 Object.is()](#4.5 Object.is())
• [5. 函数扩展](#5. 函数扩展)
• • [5.1 参数默认值](#5.1 参数默认值)
  • [5.2 rest 参数](#5.2 rest 参数)
  • [5.3 name 属性](#5.3 name 属性)
  • [5.4 ! 箭头函数](#5.4 ! 箭头函数)

1. 模板字符串

之前字符串的痛点写法：

本来是 let oli = "

• kerwin

• "; 如果字符串中间换行，那么字符串会断开：
  只有加上 \ 才可以：
  标签中间的内容如果想要是可变的，还需要将kerwin 换成变量，使用字符串拼接的方法进行书写，这种写法实在是很麻烦，现在可以采用一种新方法。（反引号：Tab键）

  

  数组中数据可以使用遍历来获取，也可以通过使用数组的map 映射方法来获取。

  
  

  数组上传到页面中会强行的转换成字符串的形式，数据会被 "，" 隔开；
  

  可以写为newlist.join("") 利用空字符串连接

  1.1 ${} 使用

  1. ${ 变量 } 替换了之前字符串拼接方式(引引加加)；
  2. ${ 表达式 }
     
  3. ${ 函数 }
     

  1.2 字符串扩展

  (1) ! includes() / startsWith() / endsWith()

  1. includes()

     -- 判断字符串中是否存在指定字符(串)
     

     // true
     

     // false
     

     // true

     表示从字符串的索引 1 处开始查找

  2. startsWith()
     

     // true

     startsWith() 同时也可以添加参数，与includes() 函数参数表示含义相同。

  3. endsWith()
     

     // true
     

     // true

     注意：endsWith() 在该处的含义是w 之前的部分是不是以r 结尾的。

  (2) repeat()

  let myname = kerwin

  

  // kerwinkerwin

  //

  // kerwinkerwin

  //

  2. 数值扩展

  2.1 二进制 八进制写法

  

  2.2 ! Number.isFinite() / Number.isNaN()

  减少全局性方法，使得语言逐步模块化

  1. Number.isFinite()
     
  2. Number.isNaN()
     
     它们与传统的全局方法isFinite() 和isNaN() 的区别在于，传统方法先调用Number(0将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite() 对于非数值一律返回false ,Number.isNaN() 只有对于NaN才返回true ,非NaN一律返回false 。

  2.3 inInteger()

  inInteger() -- 判断是否是整数
  

  2.4 ! 极小常量值Number.EPSILON

  它表示1与大于1的最小浮点数之间的差，2.220446049250313e-16。

  function isEqual(a,b){
  return Math.abs (a-b)<Number.EPSILON
  3
  console.log(isEqual(0.1+0.2,0.3))//true
  conso1e.1og(0.1+0.2===0.3)//fa1se

  2.5 Math.trunc()

  将小数抹掉，返回一个整数

  console.log(Math.trunc(1.2))//1
  console.log(Math.trunc(1.8))//1
  console.log(Math.trunc(-1.8))//-1
  console.log(Math.trunc (-1.2))//-1

  2.6 Math.sign()

  Math.sign 方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。

  Math.sign(-100)//-1
  Math.sign(100)//+1
  Math.sign(0)//+0
  
  Math.sign(-0)//-0
  Math.sign("kerwin")/NaN

  3. 数组扩展

  3.1 扩展运算符

  之前复制数组写法：

  ... 展开符写法：
  

  利用解构赋值和... 展开符复制数组(浅复制)：
  

  3.2 Array.from()

  之前所说的arguments 是类数组结构，不能使用filter() 等方法，但是现在可以使用Array.from() 将类数组结构转换成真数组，就可以使用相关数组方法来。
  

  3.3 Array.of()

  可以将一组值转换成数组，
  

  // [ ] (一个长度为3 的空数组)

  // [ 3 ]

  3.4 find() / findIndex()

  1. find() / findIndex() -- 正着寻找
     
     // 14
     // 3
  2. findLast() / findLastIndex()
     这两个方法在ES13出现。

  // 15

  // 4

  3.5 fill()

  

  // ['kerwin','kerwin','kerwin']

  // [11,'kerwin',33]

  3.6 ! flat() / flatMap()

  

  // [1,2,3,Array(3)] [1,2,3,4,5,6]

  数组数据为对象时使用flat() ：
  

  // {...}, {...}

  使用flatMap() :

  // ['安庆'，'安阳'，'鞍山'，'北京'，·'保定'，'包头']

  4. 对象扩展

  4.1 对象简写

  1. 函数简写：
     
     

  

  简写为

  let obj = {

  name,

  ...

  }

  4.2 对象属性 表达式

  

  // {a: 'kerwin'}

  \]也可以进行字符串拼接：\[name+'bc'\]等 ### 4.3 扩展运算符 ... 对象扩展运算符 ... ES9才出现  // {name: "tiechui", age: "100", } 对象展开合并遇到同名属性后者回复该前者的属性值！ ### 4.4 Object.assign()  // {name: "tiechui", age: "100"} 此处与对象扩展符不同的是，对象扩展符例子中obj1 的name 属性值在对象合并展开时不会发生改变；而此处则会发生改变。 如果不想要obj1 的属性值发生改变，可以使用以下方法：  ### 4.5 Object.is() 判断两个数是否相等 1. 判断NaN 和NaN 是否相等 之前使用== 和 === 判断NaN==/===NaN结果都为false ;  // true // false // false // true 2. 判断+0 和-0 是否相等  // false // true ## 5. 函数扩展 ### 5.1 参数默认值  // aaa get true // bbb get true ### 5.2 rest 参数 rest 参数 形式是"... 变量名" ```javascript function test(data){ console.log(data); } test(1, 2, 3, 4, 5) ``` // 1 ```javascript function test(...data){ console.log(data); } test(1, 2, 3, 4, 5) ``` // Array(5) ### 5.3 name 属性  // test ### 5.4 ! 箭头函数 箭头函数写法简洁！ 语法格式：  1. 函数{ }中只有return 语句，写法更加简洁：   2. 如果返回对象时需要注意: 使用( ) 将返回的对象括起来  // {name:'kerwin',age:100} 3. 只有一个参数可以省略( )  4. 无法访问arguments，无法new  5. ！没有this(也有说法说是指向了它的父作用域) 普通函数的痛点： 在函数内部定义定时器，定时器中的this 指向window  // window // 发送undefined到后端，获取列表数据  使用箭头函数：