原来es6是这样的

1.ES6怎么来的

• ECMAScript和JavaScript
  • ECMA是标准，JS是实现
  • ECMAScript简称ECMA或ES
• 历史版本
  • 1996年，ES1.0 Netscape将JS提交给ECMA组织，ES正式出现
  • 1999年，ES3.0被广泛支持
  • 2011，ES5.1成为ISO国际标准
  • 2015年，ES6.0正式发布

2.ES6兼容性

• ES6（ES2015）支持的环境IE10 +，Chrome，FireFox，移动端，NodeJS
• 解决不兼容办法，编译，转换
  • 在线转换
  • 或者提前编译
• Babel中文网
  • Babel入门教程阮一峰
  • Babel是一个JavaScript编译器
  • 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境中执行
  • 现在就用ES6编写程序，而不用担心现有环境是否支持

3.let-const-var

• let关键字

  • 从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；

• const关键字

  • const关键字是constant的单词的缩写，表示常量、衡量的意思；
  • 它表示保存的数据一旦被赋值，就不能被修改；
  • 但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容

注意：另外let、const不允许重复声明变量；

使用场景

var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些 历史遗留问题；其实是JavaScript在设计之初的一种语言缺陷；

对于let和const来说，是目前开发中推荐使用的；会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改； 只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

特点

let关键字

1. 不允许重复声明；
2. 块儿级作用域（局部变量）；
3. 不存在变量提升；
4. 不影响作用域链；

const关键字

1. 声明必须赋初始值；
2. 不允许重复声明；
3. 值不允许修改；
4. 块儿级作用域（局部变量）；

// 1. 不允许重复声明；
let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

// 2. 块儿级作用域（局部变量）；
{
let cat = "猫";
console.log(cat);
}
console.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined

// 3. 不存在变量提升；
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
console.log(people1); // 可输出默认值
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not
defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

// 4. 不影响作用域链；
// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中
的局部变量下级可用
{
let p = "大哥";
function fn(){
console.log(p); // 这里是可以使用的
}
fn();
}

4.对象字面量增强的写法

const name = "why";
const age = 18;
const obj = {
  //对属性
  name, age,
	// 对方法
  foo(){console.log(lll)},
  // 计算属性名
  [name+123]:'hahaha'
}

5.解构赋值

使用场景： 1.在开发中拿到一个变量时，自动对其解构使用 2.在函数传参传入一个对象或数组时，可直接对其解构使用

const names = ['aaa','bbb','ccc'];
// 对数组的解构
const [item1,item2,item3] = names;
// 只结构后面的元素
const [,,item1] = names;
// 解构出一个元素后面的元素放到新的数组中
const [item1,...newNames] = names;

const obj = {
  name:"why",
  age:18,
  height:1.88
}
// 对对象的解构 {}
const {name,age,height} = obj
// 对结构的名字重命名
const {name:newName} = obj //newName:"why"

6.模板字符串

使用场景： 当遇到字符串与变量拼接的情况使用模板字符串；

// 特性
// 1、字符串中可以出现换行符
let str =
`<ul>
<li>大哥</li>
</ul>`;
// 2、可以使用 ${xxx} 形式引用变量
let s = "大哥";
let out = `${s}是我最大的榜样！`;

7.扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列；

//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];

//2. 数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']

//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];

8.箭头函数

• 箭头函数，就是函数的简写
  • 如果只有一个参数，()可以省
  • 如果只有一个return，{}可以省

注意点

1. 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；(就是上层作用域的值)
2. 不能作为构造实例化对象；
3. 不能使用 arguments 变量；

//无参数
let speak = () => console.log("hello 哈哈！");

//一个参数
let hi = name => "hi " + name

//多个参数
let he = (a,b,c) => a + b + c;

//this的指向
getName1 = () => console.log("getName1：" + this);//this指向window

9.数组

• 新增4个方法
• map 映射 一个对一个

let arr = [12, 5, 8]
let result = arr.map(function (item) {
    return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)

let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)

// 结果
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '不及格', '及格', '及格', '不及格' ]

• reduce 汇总 一堆出来一个
  • 用于比如，算个总数，算个平均

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    //tmp 上次结果，item当前数，index次数1开始
    console.log(tmp, item, index)
    return tmp + item
})
console.log(result)

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result)  // 平均值

• filter 过滤器 保留为true的

var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)

var arr = [
    { title: '苹果', price: 10 },
    { title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)

• forEach 循环迭代

var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))

10.Symbol

1. Symbol 的值是唯一的，用来解决命名冲突的问题；
2. Symbol 值不能与其他数据进行运算；
3. Symbol 定义的对象属性不能使用for…in循环遍历 ，但是可以使用Reflect.ownKeys 来获取对象的 所有键名；

//创建Symbol
let s = Symbol();

// 向对象中添加方法
// 方式一
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function(){
console.log("我可以改变形状");
}
game[methods.down] = function(){
Symbol内置值：
概述：
除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方
法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；
方法：
console.log("我可以快速下降!!");
}
console.log(game);

// 方式二
let youxi = {
name:"狼人杀",
[Symbol('say')]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}
console.log(youxi);