一 es6简介
-
javascript:、: ECMAScript5 es5。ECMAScript6 : es6语法接近后端语法。还有一种脚本语言TypeScript (更接近后端); 在es5语法中声明变量用:var ,而在es6中用:
(1) let,声明的变量是在当前的作用于内有效;
(2)const:声明的是只读变量–常量;
let 、const 声明的变量不存在变量的声明提前,且声明变量不能重复声明;
代码块,按块区分代码 ,就是一个一组大括号 {}。 -
es6语法,变量的解构赋值:按照对应的结构进行赋值;
let [a,b,c,d]=[1,2,3,["a","b"]];
console.log(a, b, c, d);
//这种情况也是对应取值
let[a,b]=[1,2,3,4,5];
console.log(a, b);
- 结构统一,按照位置取值;
let[a,[b],[[c]]]=[1,[2],[[3]]];
console.log(a, b, c);
- 解构赋值,也可以设置默认值;
let [a=10,b]=[,2];
console.log(a, b);
- 对象解构赋值;
let{name,sex}={name:"张三",sex:"男"};
console.log(name, sex);
- 举例对象的解构赋值 Math;
let {abs,floor,random}=Math;
console.log(random());
console.log(abs(-1));
- 字符串的解构赋值;
let[a,b,c,d]="save";
console.log(a, b, c, d);
//字符串 String对象
let{length:len}="save";
console.log(len);
- 扩展符 es6 … 在解构赋值里面,放在最后一位
let[a,b,...c]=[1,2,3,4,5];
let{log}=console;
console.log(a, b, c);
- es6 里面的字符串遍历器:for of类似于es5里面的for in;
let[a,...b]=["hello",1,2,3,4,5];
for(let char of a){
console.log(char);
}
for(let str of b){
console.log(str);
}
- 模板字符串 ${} 字符串拼接的,将字符串修改为反引号 `,里面写模板字符串;
let[a,b,obj]=["abcd","efgh",{name:"毛豆"}];
let c=`我是第一个字符串:${a},我是第二个字符串:${b},我的名字叫:${obj.name}。`;
console.log(c);
- 模板字符串里面放置javascript表达式 <%…%>;
let obj=[
{"name":"张三"},
{"name":"李四"},
{"name":"王五"},
{"name":"马六"}
];
//下面的这种格式在ejs模板语法中在node中编译
let complete=`
<ul class="namelist">
<% for(let i=0;i<${obj.length};i++){%>
<li><%=${obj[i].name}%></li>
<%}%>
</ul>
`;
console.log(complete);
二 函数的扩展
- 函数默认值的问题;es6 给函数的形参带入了默认值的问题
function method(a="a",b=2){
console.log(a, b);
}
method();
- 函数传参和解构赋值连用;
function method({a,b=2}){
console.log(a, b);
}
method({});
method({a:1,b:3});
- 扩展符合函数的使用;;
function method([a,...b]){
console.log(a, b);
}
method([1,2,3,4,5,6]);
- es6里面的箭头函数=>;
let method=(val)=>val;
console.log(method(1));
//如果箭头函数返回对象,返回值上添加()
let fun=()=>({name:1,age:20});
console.log(fun);
let fun1=()=>[1,2,3];
console.log(fun1());
let a=["a","b","c","d"];
//map映射
let b= a.map((val,index)=>val+index);
console.log(b);
- 在实用性箭头函数的时候一定要注意内部的this指针问题,因为箭头函数保持上下文this一致,内部this和外部this一致;
let a=["a","b","c","d"];
//map映射
let b= a.map((val,index)=>{
//console.log(this);
if(index%2==0){
return val+index;
}
else{
return val;
}
});
console.log(b);
console.log(this);
//以上this指针内部外部都指向window
三 数组的扩展
- 扩展运算符和函数的使用;
function fun(array,...item){
array.push(...item);
}
let array=[];
fun(array,...[1,2,3,4,5]);
console.log(array);
- 扩展运算符替换apply args数组型;
function f1(a,b,c){
console.log(a, b, c);
}
let m=[1,2,3];
f1(...m);
- 扩展运算符,复制数组。修改其中一个数组,另一个数组也会发生变化;
let a=[1,2,3];
let b=a;
b[0]="a";
console.log(b, a);//输出都是["a", 2, 3]
//扩展运算符,复制数组。修改其中一个,另外一个不会发生变化
let a=[1,2,3];
let b= [...a];
b[0]="a";
console.log(a, b);//输出[1,2,3]和[a,2,3]
- 扩展运算符 ,合并数组
let a=[1,2];
let b=[3,4];
let c= [...a,...b];
console.log(c);
- 数组的扩展方法:Array.from()–将类数组对象转化为真正的数组;
let a={
0:"a",
1:"b",
length:2
}
console.log(Array.from(a));
//数组的扩展方法:Array.of()--将一组值转化为数组
console.log(Array.of(1, 2, 3, 4, 5));
- find():找出数组里面满足条件的第一个成员直接返回。findIndex:找出符合条件的第一个值的索引,若没有就返回-1;
let a=[1,2,3,4,5];
console.log(a.find((n)=>{
return n%2==0;
}));
console.log(a.findIndex((value,index,arr)=>{
return value%6==0;
}))
四 对象的扩展
- es6:允许直接在对象内部声明属性和方法,方法简写;
let obj={
name:"",
sleep(){
console.log("我在睡觉");
}
};
obj.sleep();
- es6允许通过字面量定义对象的属性;
let _sex="Sex";
let a="age";
let b="Now";
let obj={
name:" 毛豆",
[_sex]:"男",
[a+b]:20
};
console.log(obj);
console.log(obj['name']);
console.log(obj[_sex]);
console.log(obj[a+b]);
let obj={
name:"张三",
sex:"男"
}
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
// writable: true 可读写性
// enumerable: true 可枚举
// configurable: true 可配置
//修改上面对象的配置
Object.defineProperty(obj,"sex",{
configurable: true,
enumerable: false,
value:"张三",
writable: true
});
//Object.keys() //返回当前对象里面的键
//在获取键的时候,如果键的enumerable: false就是会忽略该属性
console.log(Object.keys(obj));
- es6扩展的super,指向当前对象的原型对象,this指向当前对象。
super:指向当前对象的原型对象;super:只能写在对象的方法内部,不能直接写在属性和方法的返回值上;
let proto={
sleep(){
console.log("睡觉");
}
}
let person={
name:"张三",
logproto(){
super.sleep();
}
}
//设置原型对象
Object.setPrototypeOf(person,proto);
erson.logproto()
- 对象的扩展方法:Object.assign():合并对象,一定是可枚举属性;
let ob1={
name:"张三"
};
let ob2={
name:"李四",
age:20
};
console.log(Object.assign({}, ob1, ob2));
}
//Object.assign可以复制对象,注意对象属性上的引用
let obj={a:1,b:2,c:{m:2}};
let b=Object.assign({},obj);
obj.a=10;
console.log(b, obj);
- 下面的方法获取,取决于对象属性的可枚举性:true。false该属性会被忽略;
Object.keys:获取对象的所有的键;
Object.values:获取的对象的所有键值;
Object.entries:获取对象的键值,返回是一个数组;
let obj={
name:"1",
sex:"2"
};
let ob={
eat(){
console.log("吃饭");
}
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
//__proto__ :获取当前对象的原型对象
console.log(obj.__proto__);
//设置对象的原型对象
Object.setPrototypeOf(obj,ob);
console.log(obj.__proto__);
//获取对象的原型对象
console.log(Object.getPrototypeOf(obj));
- Object.is()严格判断两个对象相等,类似于==
let a={};
let b={};
let c=a;
console.log(Object.is(1, 1));//true
console.log(Object.is(null, null)); //true
console.log(Object.is("1", 1));//false
console.log(Object.is([], []));//false
console.log(Object.is({}, {}));//false
console.log(Object.is(a, c));//true