es6入门

最新推荐文章于 2025-02-20 20:09:53 发布

左希希

最新推荐文章于 2025-02-20 20:09:53 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript es6

本文链接：https://blog.youkuaiyun.com/Rococoberry/article/details/104840688

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

es6

5 篇文章

订阅专栏

一 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