es6 尚硅谷学习

1、let

1.变量不能重复声明
2.块级作用域，只在块内有效
3.不存在变量提升，变量未声明之前不可使用
4.不影响作用域链

2、const

const SCHOOL = “温医”；
1.一定要有初始值
2.一般常量使用大写
3.常量不能赋值
4.块级作用域
5.对数组和对象的元素修改，不算对常量的修改，不会报错。

3、变量和对象的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；

const F4 = ['11','22','33','44']
let [QQ,WW,EE,RR] = F4;

const zhao = {
	name:"zpp",
	age:'18',
	eat:function(){
		console.log('eat');'
	}
}
let{name,age,eat} = zhao;

4、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符；
可以使用 ${xxx} 形式引用变量；

5、简化对象和函数写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

6、箭头函数

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；
注意：

如果形参只有一个，则小括号可以省略；
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；
箭头函数 this 指向声明时所在作用域下 this 的值；
箭头函数不能作为构造函数实例化；
不能使用 arguments；
特性：
箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
不能作为构造实例化对象；
不能使用 arguments 变量；

特性1

const school = {
      name: "hai"
    }
    var name = "zpp";
    function getName() {
      console.log("getName", this.name);
    }
    getName1 = () => {
      console.log("getName1", this.name)
    }
    getName(); // getName zpp
    getName1(); // getName1 zpp

    //使用call调用
    getName.call(school) // getName hai
    getName1.call(school) // getName1 zpp

特性2

	function Person(age, name) {
      this.name = name;
      this.age = age;
      console.log(this)
    }
    let me = new Person("zpp", 18)

在这里插入图片描述

	let Person = (age, name) => {
      this.name = name;
      this.age = age;
      console.log(this);
    }
    let me = new Person("zpp", 18)
    // Uncaught TypeError: Person is not a constructor

特性3

let fn = () => { console.log(arguments) }
fn(1, 2, 3, 4)
// Uncaught ReferenceError: arguments is not defined

需求-2 从数组中返回偶数的元素：

 const arr = [1, 6, 7, 10, 100, 25];


    // const result = arr.filter(function (item) {
    //   if (item % 2 === 0) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // })
    const result = arr.filter(item => item % 2 === 0)
    console.log(result);

7、ES6中函数参数的默认值

function add(a,b,c=10){
return a + b + c
}
let result = add(1,2); // 13

function connect({host="127.0.0.1,username,password,port}){
	console.log(host);
	console.log(username);
	console.log(port);
}
connect({
	host: 'atguigu.com',
	username: 'root',
	password: 'root',
	port: 3306
})

8、rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；

function data(){
console.log(arguments);
}
运行结果：
9、扩展运算符
介绍：
... 扩展运算符能将数组转换为逗号分隔的参数序列；
扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参
数序列，对数组进行解包；
基本使用：
data("大哥","二哥","三哥","四哥");
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args){
console.log(args); // fliter some every map
}

9、扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列；
扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

10、symbol

Symbol 生成一个全局唯一的值。
它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型；

Symbol 特点：

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

创建

//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
Symbol创建对象属性：
let s3 = Symbol('尚硅谷');
console.log(s2==s3); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4==s5); // true

var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}

race.protoss !== race.terran // true
race.protoss !== race.zerg // true

你也可以给每个 Symbol 起一个名字：

var race = {
  protoss: Symbol('protoss'),
  terran: Symbol('terran'),
  zerg: Symbol('zerg')
}

不过这个名字跟 Symbol 的值并没有关系，你可以认为这个名字就是个注释。如下代码可以证明 Symbol 的名字与值无关：

var a1 = Symbol('a')
var a2 = Symbol('a')
a1 !== a2 // true

11、面向对象

class User{
	constructor(name,pass){
		this.name = name;
		this.pass = pass;
	}
	showName(){
		alter(this.name);
	}
	showPass(){
		alert(this.pass);
	}
}
var ul = new User("blur","1234");
ul.showName();
ul.showPass();

继承
super