es6 工作中常用总结

一.let和const

1.不存在变量提升 不存在预解析

console.log(foo);
var foo = 10;

 

2.let声明的变量不允许重复，在同一个作用域内。

3.es6引入了块级作用域，实际上为 JavaScript 新增了块级作用域

 

//内部声明的变量在外部访问不到
{
//这里是块级作用域
let flag = true：
}
 
for (let i = 0 ; i<10; i++) {
//for循环内部声明的变量只能在for循环里面使用
console.log(i);
}
 
//在块级作用域内部，变量只能先声明再使用。
if(true){
console.log(flag);
let flag = 123;
}

 

 

const声明的常量不允许重新赋值

es6 6种声明变量有6中方法

var function命令

let const

import class

 

二.变量的解构赋值

解构赋值（destructuring assignment）语法是一个Javascript表达式，这种语法能够更方便的提取出 Object 或者 Array 中的数据。

这种语法可以在接受提取的数据的地方使用，比如一个表达式的左边。有明确的语法模式来告诉我们如何使用这种语法提取需要的数据值。

1.变量的解构赋值

let a=1，b=2，c=3；

 

2.数组的解构赋值

let[a,b,c] = [3,4,5];

 

3.对象的解构赋值

let {foo，bar} = {foo：“hello”，bar：“nihao”}

对象属性别名，那么原来的名字就没有效了。

对象的解构赋值指定默认值

 

4.字符串的解构赋值

let [a,b,c,d,e,f,g] = "joycedh";

 

let {length} = "ni";

console.log(length);

 

三.字符串的扩展

includes（） 判断字符串中是否包含指定的字串，（有的返回true，否则返回false）

startWith（）

endWith（）

let url = ‘a/’；

let tag = '<div>'+username+'</div>'

反引号表示模板 ，模板中的内容可以有格式，通过$()方式填充数据

let tpl = ’

<div>

<span>${obj.username}</span>

<span>${obj.color}</span>

<span>${obj.hobble}</span>

</div>

‘

 

四.函数的扩展

1.参数默认值

//es5
function foo(param){
let p = param || 'hello';
connsole.log(p);
}
foo('hi');
 
//es6
 
function foo(param = 'nihao'){
console.log(param);
}
foo('hello kitty')

 

2.参数解构赋值

function foo(uname = 'lisi',age = 12){
console.log(uname,age);
}
foo();

　　

 

3.rest参数

... 剩余参数

。。。加参数变成数组

 

4....扩展运算符

以前

function foo(a,b,c,d){
console.log(a+b+c+d);
 
}
let arr = [1,2,3,4]
foo.apply(null,arr);
//现在
function foo(a,b,c,d){
console.log(a+b+c+d);
 
}
let arr = [1,2,3,4]
foo(...arr)；
//数组加... 变参数

 

 

五.箭头函数

 

function(){
console.log(1);
}
 
let foo = ()=>{
console.log(2);
}
 
function(){
return v;
}
let foo = v => v;
let ret = foo(345);
console.log(ret);

 

多个参数必须要用（）包裹

 

箭头函数的注意事项

1.箭头函数中的this取决于函数的定义，而不是调用。

2.箭头函数不可以new

3.箭头函数不可以使用arguments 获取参数列表，可以使用rest参数代替

 

六.类与继承

静态方法只能通过类名来调用，不可以使用实例对象调用

类的继承 extends

类的继承  extends
class Dog extends anni(){
    constructor(name,color){
        super(name);  super //用来调用父类
        this.color = color;
    }

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


}

let d = new Dog();
d.show();