ES6+的语法

ES6+的语法

ES6+链接

1.ES6 模块化（import 、export）

2.数组方法

数组遍历：map some every reduce forEach
数组操作方法： push pop shift unshift splice 、 sort reverse slice
实例对象新增：find findIndex
构造函数新增：Array.form Array.of

Array.from():

用于将一组值(可遍历)，转换为数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    length: 2
};
let arr2 = Array.from(arrayLike); // ['a', 'b']
Array.of(3, 11, 8) // [3,11,8]

Array.of():

用于将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]

fill:填充 覆盖所有项

some:

用于数组判断 当数组中只要有一个符合条件就返回 true
例1 判断数组中是否有大于60的元素

let result = counts.some(item => item>=60)  

every:

*用于数组判断 当数组中所有符合条件就返回 true *
只有当 所有输入框都是真的时候 才可以登录

 let result3 = results.every(item =>item)

reduce:

累加

3.字符串方法

repeat includes startwith endwith trim

字符串方法

chatAt concat slice substring substr indexOf replace split

字符串方法

s.chatAt(index) //返回指定位置的字符

s.concat(s2) //用于连接两个字符串

s.slice(start,end) 如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。

s.substring(start,end)

s.substr(start,length)

4.proxy

Proxy 可以代理任何对象，包括数组。
Proxy 可以直接监听整个对象而非属性，比 Object.defineProperty() 更加简洁，更加高效，更加安全。
Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的

5.声明变量let const

ES6 let和const、ES5var：

• 有块级作用域，仅在关键字所在的代码块内起作用。不会在预编译过程中有提升行为。
  var是不受限于块级的
  let const 是受限于块级
• 同一变量不能重复声明。内部使用的变量与外部作用域中的变量相互隔绝，互不影响。即使是同名变量。
  var声明变量可以重复声明
  let、const不可以重复声明
• let const有暂存死区，在声明的上面访问变量会报错
  var可以在声明的上面访问变量(变量提升)
• const声明之后必须赋值，否则会报错
  const定义不可变的量，改变了就会报错

6.扩展运算符…

应用：参数列表 、解构对象 数组

7.箭头函数

什么时候不能使用this?

作用：

• 箭头函数比普通函数更加简洁
  省略{} return
• this永远指向其父级对象的this。
• 箭头函数没有自己的this
• 箭头函数不能作为构造函数使用
• 箭头函数继承来的this指向永远不会改变 call()、apply()、bind()等方法不能改变箭头函数中this的指向

8.模板字符串

• 字符串插值：嵌入变量
• JavaScript表达式：可以进行运算，以及引入对象属性
  ${x} + ${y} = ${x + y};
• 多行字符串：（换行符和空格）

 $('#list').html(`

   <ul>

     <li>first</li>

     <li>second</li>

   </ul>

• 调用函数

function func() {

​    return 'Hello';

}
`${func()} World`;

9.symbol：

表示独一无二的值

	const mySymbol = Symbol()
	console.log(typeof mySymbol) // "symbol"
	let n=Symbol("name");
    let obj={
            age:21
        }
	obj.n="张三"//对象n
    obj[n]="张三"//Symbol("name")
	console.log(obj)

10.对象 Object.assign()

合并 浅拷贝

const obj3 = Object.assign(obj1, obj2)
console.log(obj3) // { a: 1, b: 4, c: 5, d: 6 }

11.数据结构 set和map

Set 和 Map主要的应用场景在于 数据重组 和 数据储存。
区别

• Map是键值对，Set是值的集合，当然键和值可以是任何的值；
• Map可以通过get方法获取值，而set不能因为它只有值；
• Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储
• map和set都是stl中的关联容器，map以键值对的形式存储，key=value组成pair，是一组映射关
  系。set只有值，可以认为只有一个数据，并且set中元素不可以重复且自动排序。

相同：

• 都能通过迭代器进行for…of遍历；

Set的使用

let set = new Set(['red', 'green', 'blue','red']); //{'red', 'green', 'blue'}

• 成员不能重复，数组去重
• 只有键值没有键名，类似数组//{'red', 'green', 'blue'}
• 可以遍历：keys vaules entries forEach
• 操作方法有add, delete,has clear size

遍历方法有：keys vaules entries forEach

• keys()：返回键名的遍历器
• vaules()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue','red']); //{'red', 'green', 'blue'}
for (let item of set.keys()) {
  console.log(item);
}// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

操作方法：add, delete,has clear size

• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear(value)：清除所有成员，没有返回值。
• Set.prototype.size：返回成员总数，

Set.prototype.size：返回成员总数，
1.set.size //{'red', 'green', 'blue'} 3
2.也可以接受类似数组的对象作为参数：
const set = new Set(document.querySelectorAll('div'));
set.size // 输出结果： 56

set.add('black').add('black');// 注意2被加入了两次 {'red', 'green', 'blue', 'black'}
set.has('black') // true
set.delete('black');//true
set.has('black') // false
set.clear() //Set(0){size: 0}

应用：

1.去重 ：接收数组或伪数组：数组去重、数字去重

数组去重
[...new Set([1, 2, 3, 4, 4, 4])] //[1, 2, 3, 4]

数字去重
[...new Set('12312')].join('') //123

2.map/filter间接用与set
对象转数组+数组方法+数组转对象

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));// 返回Set结构：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));// 返回Set结构：{2, 4}

Map的使用

• 本质上是健值对的集合，类似对象

const m = new Map();
m.set(1, 'a').set(2, 'b').set(3, 'c');//Map(3) {1 => 'a', 2 => 'b', 3 => 'c'}

• 实例对象可以遍历，可以跟各种数据格式转换keys、values、entries、forEach
• 操作方法：set get has delete clear size

遍历方法

• keys()：返回键名的遍历器。

• values()：返回键值的遍历器。

• entries()：返回所有成员的遍历器。

• forEach()：遍历 Map 的所有成员。

遍历方法
const map = new Map([
  ['1', 'no'],
  ['2',  'yes'],
]);

//keys()
for (let key of map.keys()) {
  console.log(key);       // "1"  "2"
}

//values()
for (let value of map.values()) {
  console.log(value);    // "no"  "yes"
}

操作方法

• set 添加成员 new Map().set (属性，属性值）
• get
• delete
• has
• clear

m //Map(3) {1 => 'a', 2 => 'b', 3 => 'c'}
1.set
m.set('edition', 6) // 键是字符串 {1 => 'a', 2 => 'b', 3 => 'c', 'edition' => 6}

2.get
m.get(1)  //'a'

3.has
m.has(2)    // true

4.delete
m.delete(3) //true

5.clear
map.clear() //Map(0) {size: 0}

相同点:

都能通过迭代器进行for…of遍历

m //Map(3) {1 => 'a', 2 => 'b', 3 => 'c'}
for (let item of m ) {
  console.log(item) 
	// (2) [1, 'a']
	// (2) [2, 'b']
	// (2) [3, 'c']
}

set //Set(3) {'red', 'green', 'blue'}
for (let item of set) {
  console.log(item) 
	// red
	//green
	// blue
}

不同点：

• Map是键值对，Set是值的集合，当然键和值可以是任何的值；
• Map可以通过get方法获取值，而set不能因为它只有值；
• Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储

1.
set = Set(3) {'red', 'green', 'blue'} //值的集合  不可以重复且自动排序
m = Map(3) {1 => 'a', 2 => 'b', 3 => 'c'} //键值对 映射关系

2.
m.get(1) //'a' get方法获取值

3.
const m = new Map();//没有格式限制，可以做数据存储
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined
Map(3) {'edition' => 6, 262 => 'standard', undefined => 'nah'} //键值对的形式存储
----
set //数组去重
new Set(['red', 'green', 'blue','red']) //{'red', 'green', 'blue'}```
### 12.for in遍历对象
遍历键名
```javascript
const obj = { a: 1, b: 2 }

for (let key in obj) {
  console.log(key) // a b
}

12.for of遍历数组

遍历键值
for of可以遍历迭代对象，不能遍历普通对象
for…of 循环可以与break、continue 和 return 配合使用，跳出循环

const arr = [1, 2]

for (let item of arr) {
  console.log(item) // 1 2
}
//应用
for(let item of arr) {
   if(item % 2 === 0) {
     break
   }
   console.log( item)
 }
 // 1

区别：

1.for…in 循环：只能获得对象的键名，不能获得键值:遍历对象而生
for…of 循环：允许遍历获得键值:遍历数组、类数组对象，字符串、Set、Map

2.for…in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。
for…of 则不会这样

数组：
var arr = ['red', 'green', 'blue']
for(let item in arr) {
  console.log(item) // 0 1 2
}
for(let item of arr) {
  console.log('for of item', item) //red  green blue
}

对象：
var obj = {
   'name': 'Jim Green',
   'age': 12
 }
for(let key in obj) {
   console.log(key)//name age
 }

13.class构造函数 实例

class Student {
  constructor(name) {
    this.name = name
  }

  sayName() {
    console.log(`My name is ${this.name}`)
  }
}

const student = new Student('Bob')

student.sayName() // My name is Bob