初入ES6随笔

Posted 2020-11-04 sundayboy

初入ES6随笔

---

 

var c = a => console.log(a)

 

 

 

let a1 = 1; //只在块儿状作用域生效的变量声明

 

const a2 = 1; //常量声明，值不可改变，快儿状作用域

 

解构赋值语法

---

 

let [a3, b3, c3] = [1, 2, 3]; //数组解构赋值

 

let [a4 = 0, ...b4] = [1, 2, 3, 4] //数组解构赋值 a4 = 1 b4 = [2,3,4] 允许默认值;

 

let {a5, b5} = {a5: "1", b5: "2"} // 对象解构赋值 a5 = 1; b5=2;

 

let {a6: b6, c6: d6} = {a6: "2323", c6: "2"} // 对象解构赋值 将a6的值赋给b6 b6 = 2323;

 

let [a7, b7, c7, d7, e7] = "hello"; //字符串解构赋值 a7="h"; b7="e" ....

 

 

字符串扩展

---

let a8= "hello world!"

 

for(let a8 of ‘let‘){ /*console.log(a8)*/ } //for...of 循环遍历 "h","e","l" ....

 

a8.indexOf("hello"); //是否包含该字符 //返回在字符串的位置

 

a8.startsWith("wo"); //true 返回是否包含该字符

 

a8.startsWith("wo", 6); //true 当前数字的位置是否包含该字符 返回布尔值

 

a8.endsWith("d!"); //true 最末是否有该字符

 

a8.endsWith("e",2); //true 第二个是否是该字符 只针对单个字符

 

a8.includes("hel"); //true 是否包含该字符 返回布尔值

 

a8.includes("world",6); //true 当前数字的位置是否包含该字符 返回布尔值

 

a8.repeat(2); //hello world!hello world! 返回一个新的字符串，将该字符串重复N次

 

‘x‘.padStart(5, ‘ab‘); // ‘ababx‘ 在数值前补全到指定位数 常用与数字位数的补全 0000012

 

‘x‘.padEnd(5, ‘ab‘); // ‘xabab‘ 在数值后补全到指定位数 常用与数字位数的补全 0000012

 

`${a8}我是ME`; //模板字符串，使用“ ` ” 在${} 中加入js代码可直接运行并输出

 

`${a8}我是ME`.trim(); //使用 .trim() 可以消除反引号中的换行

 

 

数值的扩展

---

 

Number.parseInt(‘12.34‘) //12 取整

 

Number.parseFloat(‘12.34sdf‘) //12.34 只保留数字部分

 

 

Math.trunc(4.1) //4 去掉小数部分。只保留整数

 

Math.sign(-5) //-1 判断是否正数还是负数 负数返回-1 正数返回 +1

 

Math.cbrt(2) //1.2599210498948734 计算数字的立方根

 

 

函数的扩展

---

 

function a9(b=0, c=1){}; //函数的参数中允许使用默认参数 替代了之前的 b = b || 0;

 

function a10({x,y=5}){ console.log(x,y)} // a10({x:1,y:2}) 可以使用解构方式赋值 直接调用 并可以设置默认值

 

function a11({x,y=5} = {} ){ console.log(x,y)} //a11({y:2}) X 对象为undefined // 为了避免没有默认值的参数报错，所以给对象复制一个空对象

 

function a12(a,...b){ console.log(a+b[0]+b[1]) }(1,2,3); //6 rest参数 形式为...变量名 获取函数的多余参数 rest是一个数组。和调用数组的方式一样

 

a12.name //字符串返回函数的名字

 

var a13 = a=>a; //相当于 var a13 = function(a){return a} 箭头函数 声明 变量名 = 参数 => 返回值 如果函数体大于一条语句需要改为 =>{return a}

//如果需要添加多个参数则需要加上（） var a13 = (a,b) => a+b

 

let a14 = ({ first, last }) => first + ‘ ‘ + last; //箭头函数与变量解构结合使用

 

 

class的基本使用

---

 

class a15{ //创建class 类

constructor(x, y){ //类的默认属性

this.x = x;

this.y = y;

this.h = "hello"

}

toString(){ //类中的方法。不需要写function

console.log(`${this.h}--${this.x+this.y}`)

}

b(){ //类中的方法。不需要写function

console.log(`world--${this.x+this.y}`)

}

static classMethod(){ //静态方法，只能在本类调用。赋给其他表达式将找不到本方法

 

}

}

//new a15(1,2).toString();

 

class a16 extends a15{ //a16 类 将继承a15类的所有方法

constructor(x,y){//定义类的默认属性

super(x,y);//**调用父级的所有属性和芳芳，此方法必须存在

this.c();//调用当前类的C方法。

}

c(){

super.h="world2";//调用父级类的h属性。调用父级方法时可以依然使用this调用，也可以使用super调用

this.toString();//调用父级类的toString()方法，方法中打印出来的h属性被改变了

 

}

}

//var a18 = new a16(1,2)

 

class a17 extends a16{ //a17 类 将继承a16类和15类的所有方法的所有方法

constructor(x,y){//设置类的默认方法

super(x,y);//调用父级类（a16）。父级类中默认改变了a15类中的h属性。所以在这里也改变了

super.toString();//此方法调用的是父级类的父级类的方法。此方法中的变量被a16类改变后。在a17中调用a15类依然被改变了。

}

}

 

 

 

 

 

 

 

 

 

//new a17(13,22)