|
目录
变量声明?
解构?
① 数组解构[ ]
② 对象解构{}
③ 字符串解构
模板字符串
箭头函数 ( 参数 ) => { 函数体 }
剩余参数
扩展?
?①?运算符扩展?
?②??字符串扩展：
?③?Number扩展：
?④? 数组的扩展：
?⑤ 对象的扩展：
?symbol
?promise?
?类class
变量声明?
- 采用?let?和?const?分别声明变量和常量。
- 不用var所以不存在变量提升。
解构?
① 数组解构[ ]
? ? ?等号左边允许存在默认值。变量的取值按照顺序。??
let [a,b]=[1,2];
console.log(a,b) -> 1 2
let [c,d]=[3]
console.log(c,d) -> 3 undefined
let [f=4,g=5,h=6]=[,undefined,null];
console.log(f,g,h) -> 4 5 null
② 对象解构{}
? ? ?根据键值取值。
let obj={
name:'hua',
age:18
}
//不同名，则把左边的属性的值赋给右边自定义的变量
let {name:n,age:a}=obj;
console.log(n,a) -> 'hua' 18
console.log(name,age) ->打印报错 未声明
//同名的可以将name:name省略成name
let {age,name}=obj;
console.log(name,age) -> 'hua' 18
③ 字符串解构
? ? ?此时字符串被转换成一个类似于数组的对象。
let str='hello World';
let [a,b,c]=str;
console.log(a,b,c,typeof(a)) -> h e l string
模板字符串
`字符串${变量}字符串`
箭头函数 ( 参数 ) => { 函数体 }
不能作为构造的实例化对象，不能使用argument函数内置对象。当只有一个参数时，小括号可以省略；当函数体只有一条语句且为return，可以省略return和大括号。
剩余参数
实参大于形参个数时，会将多余的实参放进一个数组里。
function fn(a,...arr){
console.log(a); -> 1
console.log(arr); -> ['a', 'b']
console.log(arr[0]); -> a
console.log(arr[1]); -> b
console.log(arr[2]); -> undefined
}
fn(1,'a','b');//方法中的定义了4个参数，但调用函数时只使用了3个参数，ES6 中并不会报错。
扩展?
?①?运算符扩展?
用途1：避免指向同一个地址
//对象是引用数据类型，赋给的变量存的是该对象的地址，所以
let str1=[1,2];
let str2=str1;
//这两个变量存的是同一个对象的地址，通过任何一个变量对该数组进行改变，该数组都会发生相应的改变，
//这时就可以通过扩展运算符
let str2=[...str1]; //为str2开辟一个新的内存地址，就不会影响str1了
用途2：合并数组
let arr1 = [1, 2, 3]; // ...arr1 // 1,2,3 序列
let arr2 = [4, 5, 6]; // ...arr2 // 4,5,6 序列
// 方法1
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1,2,3,4,5,6]
// 方法2
arr1.push(...arr2);
console.log(arr1); // [1,2,3,4,5,6]
用途3：伪数组或可遍历的对象转为数组
let pa = document.getElementsByClassName('li');
let arr = [...myDivs]; // 利用扩展运算符，将伪数组转为真正的数组
//pa.push('a'); 报错 伪数组不支持
arr.push('a');
console.log(arr); //['a']
//方法2
let a=Array.from(pa);
a.push('a');
console.log(a);
?②??字符串扩展：
includes(str)：判断是否包含指定的字符串startsWith(str)：判断是否以指定字符串开头endsWith(str)：判断是否以指定字符串结尾repeat(count)：重复指定的次数
?③?Number扩展：
- 八进制0o表示，二进制0b；
-
Number.isFinite(n)：判断是否为有限大的数。比如Infinity这种无穷大的数，返回的就是 false。
-
Number.isNaN(n)：判断是否为 NaN。
-
Number.isInteger(n)：判断是否为整数。
-
Number.parseInt(str)：将字符串转换为对应的数值。
-
Math.trunc(n)：去除小数部分。
?④? 数组的扩展：
?⑤ 对象的扩展：
?symbol
?
?promise?
?
?类class
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
class lei{
constructor(age){
this.age=age;
}
fangfa(){
console.log('方法不需要写function');
}
}
let l=new lei(18);
console.log(l.age); //18
l.fangfa(); //方法不需要写function
- 通过class关键字创建类，类名首字母大写；
- 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象；只要new生成实例化对象，就会自动调用该函数，即使不写也会自动生成；
- 生成实例化对象new不能省略；
- 方法不需要写function。
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum(){ console.log(this.x+this.y); }
father(){ return ('我是父亲'); }
}
class Son extends Father {
constructor(x,y){
super(x,y);
this.x=x;
this.y=y;
}
son() {
console.log(super.father()+'的儿子' );
}
sub(x,y){ console.log(this.y-this.x) }
}
let son = new Son(1, 2);
console.log(son); //Son {x: 1, y: 2}
son.sum(); // 3
son.son(); //我是父亲的儿子
son.sub(); //1
- 继承extends，super()。
- 必须先调用父类的构造函数才能写子类构造函数的this。
- constructor的this指向实例对象，方法的this指向调用者。
?
?
?
|