es6小结

ES6入门知识可以参考这里：阮一峰ES6入门

这篇文章主要是介绍ES6小结。也默认已经基本掌握了ES6的一些知识

1、let和const

• const定义变量必须赋初始值，let不需要赋初始值;

• const 定义的变量不是数据不可变，而是保存的引用地址不能发生改变。

  <script>
    const obj = {a:2};
    obj.a=3;
    console.log(obj.a)
  </script>
  

• let 变量指向的内存地址，保存的只是一个指向实际数据的指针

  2、扩展符

  在对象中的用法： 在对象中的常见的用法就是浅复制，结构赋值，修改对象属性 ``` let obj = { name: ‘guodada’, age: 22, sex: 1 }

// 复制对象。扩展符为浅复制！！！ const copy = { …obj }

// 修改对象属性值(生成新对象) 相当于 Object.assgin({}, obj, { age: 18 }) const newObj = { …obj, age: 18 }

// 结合结构赋值 let { sex, …z } = obj z // { name: ‘guodada’, age: 22 }

在数组中的用法

在数组中常见的用法就是浅复制，合并数组，数组去重

const arr = [1, 2, 3] const arr2 = [4, 5, 6, 4]

// 复制数组。扩展符为浅复制！！！ const newArr = […arr] // …[1, 2, 3] => 相当于展开数组：1, 2, 3

// 合并数组 const conbineArr = […arr, …arr2]

// 结合求最大值函数 Math.max(…arr)

// 结合 Set 实现数组去重。注意：json 等对象数组不可用 […new Set(arr2)] // [4, 5, 6]

### ES数组新增方法

const arr = [1, 2, 3, 4]

Array.isArray(arr) // 判断是否为数组

arr.includes(2) // true 判断数组中是否包含某项

arr.findIndex(d => d === 3) // 2 找出第一个符合条件的数组成员并返回数组下标, 找不到返回 -1

arr.find(d => d === 3) // 3 找出第一个符合条件的数组成员并返回, 找不到返回 undefined

// es5 其他还有 filter map forEach 等，这里不做举例。 arr.every(d => d > 2) // false 每一项都满足条件则返回 true

arr.some(d => d > 2) // true 只要有一项满足条件则返回 true

find/findIndex : 找出第一个符合条件的数组成员之后不再匹配，一定程度下优化查找。 includes: 返回 true/false, 相较于 indexOf, 实用多了
+ flat() : 扁平化数组，常用于将数组转化为一维数组

const arr = [1, 2, [3, 4]]

arr.flat() // [1, 2, 3, 4] 扁平化数组, 默认展开一层。

const arr2 = [1, 2, [3, 4, [5, 6]]]

arr2.flat() // [1, 2, 3, 4, [5, 6]] arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3) 也是展开两层…

+ flatMap(): 在数组执行 map 方法后执行 flat, 用的不多，其实可以写 map 后写 flat 更好懂点。

[2, 3, 4].flatMap(x => [x, x * 2]) // [ 2, 4, 3, 6, 4, 8 ] // 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]] // 2. [[2, 4], [3, 6], [4, 8]].flat()

常用的对象转数组的用法：

const obj = { name: ‘guodada’ }

Object.keys(obj) // [‘name’] Object.values(obj) // [‘guodada’] Object.entries(obj) // [[‘name’, ‘guodada’]]

### 利用数组的`Array.includes` 来处理多重条件

const ages = [18, 20, 12]

if (age === 18 || age === 12) { console.log(‘match’) }

// better if ([18, 12].includes(age)) { console.log(‘match’) }

### 对象匹配属性来优化switch/case代码
如果碰到判断代码比较多的情况，采用常规的switch方法来判断，代码量也比较长。如图：

利用对象去匹配属性值，可以减少你的代码量，也使你的代码看起来更加简洁。

还可以用map对象去匹配

``` 更多详见 Set 和 Map 数据结构

---

• Previous
  浏览器兼容性问题解决
• Next
  HTML5地理位置geoLocation