es6入门

一 es6简介

  1. javascript:、: ECMAScript5 es5。ECMAScript6 : es6语法接近后端语法。还有一种脚本语言TypeScript (更接近后端); 在es5语法中声明变量用:var ,而在es6中用:
    (1) let,声明的变量是在当前的作用于内有效;
    (2)const:声明的是只读变量–常量;
    let 、const 声明的变量不存在变量的声明提前,且声明变量不能重复声明;
    代码块,按块区分代码 ,就是一个一组大括号 {}。

  2. 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);
  1. 结构统一,按照位置取值;
let[a,[b],[[c]]]=[1,[2],[[3]]];
        console.log(a, b, c);

  1. 解构赋值,也可以设置默认值;
let [a=10,b]=[,2];
console.log(a, b);
  1. 对象解构赋值;
 let{name,sex}={name:"张三",sex:"男"};
console.log(name, sex);
  1. 举例对象的解构赋值 Math;
let {abs,floor,random}=Math;
console.log(random());
console.log(abs(-1));
  1. 字符串的解构赋值;
let[a,b,c,d]="save";
console.log(a, b, c, d);
//字符串 String对象
let{length:len}="save";
console.log(len);
  1. 扩展符 es6 … 在解构赋值里面,放在最后一位
let[a,b,...c]=[1,2,3,4,5];
let{log}=console;
console.log(a, b, c);
  1. 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);
 }
  1. 模板字符串 ${} 字符串拼接的,将字符串修改为反引号 `,里面写模板字符串;
 let[a,b,obj]=["abcd","efgh",{name:"毛豆"}];
let c=`我是第一个字符串:${a},我是第二个字符串:${b},我的名字叫:${obj.name}。`;
console.log(c);
  1. 模板字符串里面放置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);

二 函数的扩展

  1. 函数默认值的问题;es6 给函数的形参带入了默认值的问题
function method(a="a",b=2){
    console.log(a, b);
 }
 method();
  1. 函数传参和解构赋值连用;
function method({a,b=2}){
    console.log(a, b);
}
method({});
method({a:1,b:3});
  1. 扩展符合函数的使用;;
function method([a,...b]){
   console.log(a, b);
}
method([1,2,3,4,5,6]);
  1. 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);
  1. 在实用性箭头函数的时候一定要注意内部的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

三 数组的扩展

  1. 扩展运算符和函数的使用;
  function fun(array,...item){
		array.push(...item);
}
let array=[];
fun(array,...[1,2,3,4,5]);
console.log(array);
  1. 扩展运算符替换apply args数组型;
function f1(a,b,c){
     console.log(a, b, c);
}
let m=[1,2,3];
 f1(...m);
  1. 扩展运算符,复制数组。修改其中一个数组,另一个数组也会发生变化;
 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]
  1. 扩展运算符 ,合并数组
let a=[1,2];
let b=[3,4];
let c= [...a,...b];
console.log(c);
  1. 数组的扩展方法: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));
  1. 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;
 }))

四 对象的扩展

  1. es6:允许直接在对象内部声明属性和方法,方法简写;
let obj={
      name:"",
      sleep(){
   console.log("我在睡觉");
 }
    };
 obj.sleep();
  1. 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));
  1. es6扩展的super,指向当前对象的原型对象,this指向当前对象。
    super:指向当前对象的原型对象;super:只能写在对象的方法内部,不能直接写在属性和方法的返回值上;
 let proto={
     sleep(){
      console.log("睡觉");
 }
 }
 let person={
      name:"张三",
      logproto(){
      super.sleep();
  }
}
//设置原型对象
Object.setPrototypeOf(person,proto);
erson.logproto()
  1. 对象的扩展方法: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);
  1. 下面的方法获取,取决于对象属性的可枚举性: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));
  1. 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值