ES6基础

声明变量let和const

let用来声明变量：特点：
(1)不存在变量提升
(2)存在暂时性死区，ReferenceError
(3)不允许重复声明

(4)只在声明的块级作用域内有效
const用来声明常量：特点：
(1)一旦声明必须初始化，常量的至不能变。
(2)只在声明的块级作用域内有效
(3)不会提升，存在暂时性死区，先声明后使用 。
(4)不可重复声明

// let声明的变量不存在预解析
// console.log(flag);
// var flag = 123;
// let flag = 456;
// ------------------------
// let声明的变量不允许重复（在同一个作用域内）
// let flag = 123;
// let flag = 456;
// console.log(flag);
// --------------------------
// ES6引入了块级作用域
// 块内部定义的变量，在外部是不可以访问的
// if(true){
// // var flag = 123;
// let flag = 123;
// }

// {
// // 这里是块级作用域
// let flag = 111;
// console.log(flag);
// }
// console.log(flag);

// for (let i = 0; i < 3; i++) {
// // for循环括号中声明的变量只能在循环体中使用
// console.log(i);
// }
// console.log(i);
// ---------------------------------------
// 在块级作用域内部，变量只能先声明再使用
// if(true){
// console.log(flag);
// let flag = 123;
// }
// ========================================
// const用来声明常量
// const声明的常量不允许重新赋值
// const n = 1;
// n = 2;
// --------------------------------
// const声明的常量必须初始化
const abc;

变量的解构赋值

// var a = 1;
// var b = 2;
// var c = 3;

// var a = 1,b = 2,c = 3;
// 数组的解构赋值
// let [a,b,c] = [1,2,3];
// let [a,b,c] = [,123,];
// let [a=111,b,c] = [,123,];
// console.log(a,b,c);

// 对象的解构赋值
// let {foo,bar} = {foo : ‘hello’,bar : ‘hi’};
// let {foo,bar} = {bar : ‘hi’,foo : ‘hello’};

// 对象属性别名(如果有了别名，那么原来的名字就无效了)
// let {foo:abc,bar} = {bar : ‘hi’,foo : ‘nihao’};
// console.log(foo,bar);

// 对象的解构赋值指定默认值
let {foo:abc=‘hello’,bar} = {bar : ‘hi’};
console.log(abc,bar);

// let {cos,sin,random} = Math;
// console.log(typeof cos);
// console.log(typeof sin);
// console.log(typeof random);
// --------------------------------------
// 字符串的解构赋值
// let [a,b,c,d,e,length] = “hello”;
// console.log(a,b,c,d,e);
// console.log(length);

// console.log(“hello”.length);

// let {length} = “hi”;
// console.log(length);

字符串相关扩展

includes() 判断字符串中是否包含指定的字串（有的话返回true，否则返回false）
           参数一：匹配的字串；参数二：从第几个开始匹配
startsWith()  判断字符串是否以特定的字串开始
endsWith()  判断字符串是否以特定的字串结束

模板字符串

// console.log(‘hello world’.includes(‘world’,7));

// let url = ‘admin/index.php’;
// console.log(url.startsWith(‘aadmin’));
// console.log(url.endsWith(‘phph’));

// ----------------------------------
let obj = {
username : ‘lisi’,
age : ‘12’,
gender : ‘male’
}

let tag = ‘

’+obj.username+’ ’+obj.age+’ ’+obj.gender+’

’;
console.log(tag);
// 反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据

let fn = function(info){
return info;
}
let tpl = <div> <span>${obj.username}</span> <span>${obj.age}</span> <span>${obj.gender}</span> <span>${1+1}</span> <span>${fn('nihao')}</span> </div>;
console.log(tpl);

/*

函数扩展

1、参数默认值
2、参数解构赋值
3、rest参数
4、...扩展运算符

*/

// 参数默认值
// function foo(param){
// let p = param || ‘hello’;
// console.log§;
// }
// foo(‘hi’);

// function foo(param = ‘nihao’){
// console.log(param);
// }
// foo(‘hello kitty’);
// ----------------------------------
// function foo(uname=‘lisi’,age=12){
// console.log(uname,age);
// }
// // foo(‘zhangsan’,13);
// foo();
// 参数解构赋值
// function foo({uname=‘lisi’,age=13}={}){
// console.log(uname,age);
// }
// foo({uname:‘zhangsan’,age:15});
// --------------------------------------
// rest参数（剩余参数）
// function foo(a,b,…param){
// console.log(a);
// console.log(b);
// console.log(param);
// }
// foo(1,2,3,4,5);

// 扩展运算符 …
function foo(a,b,c,d,e,f,g){
console.log(a + b + c + d + e + f + g);
}
// foo(1,2,3,4,5);
let arr = [1,2,3,4,5,6,7];
// foo.apply(null,arr);
foo(…arr);

// 合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = […arr1,…arr2];
console.log(arr3);

箭头函数

// function foo(){
// console.log(‘hello’);
// }
// foo();

// let foo = () => console.log(‘hello’);
// foo();

// function foo(v){
// return v;
// }
// let foo = v => v;
// let ret = foo(111);
// console.log(ret);

// 多个参数必须用小括号包住
// let foo = (a,b) => {let c = 1; console.log(a + b + c);}
// foo(1,2);

// let arr = [123,456,789];
// arr.forEach(function(element,index){
// console.log(element,index);
// });
// arr.forEach((element,index)=>{
// console.log(element,index);
// });

// 箭头函数的注意事项：
// 1、箭头函数中this取决于函数的定义，而不是调用
// function foo(){
// // 使用call调用foo时，这里的this其实就是call的第一个参数
// // console.log(this);
// setTimeout(()=>{
// console.log(this.num);
// },100);
// }
// foo.call({num:1});
// ----------------------------------
// 2、箭头函数不可以new
// let foo = () => { this.num = 123;};
// new foo();
// ------------------------------------
// 3、箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
// let foo = (a,b) => {
// // console.log(a,b);
// console.log(arguments);//这种方式获取不到实参列表
// }
// foo(123,456);
let foo = (…param) => {
console.log(param);
}
foo(123,456 );

类与继承

// function Animal(name){
// this.name = name;
// }
// Animal.abc = function(){};
// $.ajax = function(){};
// Animal.prototype.showName = function(){
// console.log(this.name);
// }
// var a = new Animal(‘Tom’);
// a.showName();
// var a1 = new Animal(‘Jerry’);
// a1.showName();
// -------------------------
class Animal{
// 静态方法(静态方法只能通过类名调用，不可以使用实例对象调用)
static showInfo(){
console.log(‘hi’);
}
// 构造函数
constructor(name){
this.name = name;
}

showName(){
    console.log(this.name);
}

}
// let a = new Animal(‘spike’);
// a.showName();
// a.showInfo();
// Animal.showInfo();
// ------------------------------
// 类的继承extends
class Dog extends Animal{
constructor(name,color){
super(name);//super用来调用父类
this.color = color;
}

showColor(){
    console.log(this.color);
}

}

let d = new Dog(‘doudou’,‘yellow’);
d.showName();
d.showColor();
// d.showInfo();
Dog.showInfo();