es6 工作中常用总结

时间:2023-02-08 16:03:39
一.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();