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

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)//+0Math.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 参数 形式是“… 变量名”

  function test(data){console.log(data);}test(1, 2, 3, 4, 5)
  

  // 1

  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到后端，获取列表数据

  
  使用箭头函数：