ES6基本语法

头像
Miss_Ye
    阅读 6 分钟
    9

    ES6基本语法

    1、let

    （1）、let作用域只限于当前代码块

    {
    let a = 12;
}
console.log(a);   //报错，a不存在

    (2)、let声明的变量作用域不会被提升

    {
    console.log(a);  //报错
    let a = 12;
}

    （3）、在相同的作用域下不能声明相同的变量

     {
   let a = 10;
   let a = 11;  //报错    
 }

    （4）、for循环体现let的父子作用域

        //使用var声明，需要用到“闭包”
    var btns = document.querySelectorAll("button");
      for(var i=0;i<btns.length;i++){
      （function(i){
           btns[i].onclick= function (){
            alert("点击了"+i+"个按钮")
          }
      })(i);
    }
    
    //let声明
     let btns = document.querySelectorAll("button");
      for(let i=0;i<btns.length;i++){
          btns[i].onclick= function (){
            alert("点击了"+i+"个按钮")
          }
      }

    2、const
    (1)、const作用域只限于当前代码块
    (2)、const声明的变量作用域不会被提升
    (3)、在相同的作用域下不能重复声明
    (4)、声明的同时必须赋值，声明后值无法改变

    {   
    const b; //报错
    
    const a = 123;
    a = 222; //报错
    
}
    注意：针对"对象"就不一样了，如下：
    {
    const obj = {
        name:"lisi"
     }
    console.log(obj.name); //lisi
    
    obj.name = "zhaoliu";
    console.log(obj.name);//zhaoliu
}
//在上面中定义的是一个常量对象，对象是储存在内存的“堆区”，通过一个地址描述出来，在“栈区”关联此地址。所以，obj存储的是地址，而不是值，是可以做修改的。

    3、解构赋值

    ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构。

    （1）、基本用法

    //新的定义方法
let  [name,age,sex] = ["李四",20,"女"];

//以前的定义方法
let name = "李四";
let age = 20;
let sex = "女"

    (2)、对象的解构赋值

      //前面的key值和后面的key值相对应的
  let {name,age,friends} = {name:"zhangsan",age:12,friends:["lulu","女"]};
  console.log(name); //zhangsan

    (3)、嵌套数组的解构赋值

    //只要一一对应就可以
let [a1,[a2,a3,[a4,a5]]] = [1,[2,3,[4,5]]];
console.log(a1,a2,a3,a4,a5);  //1，2，3，4，5

    （4）、字符串的解构赋值

    let [a,b,c,d,e] = "我是中国人";
console.log(a);   //我
console.log(b);   //是
console.log(c);   //中
console.log(d);   //国
console.log(e);   //人

    （5）、空缺变量

    let [a,b,,e]=['a','b',[1,2],4]

    (6)、多余变量

    let [a,b,,e,f]=['a','b',[3,4],5]
    注意：因为字符串有构造器，所以可以解析出来。

    4、数据集合: set

    （1）、特点

    ① 类似于数组，但没有重复的元素（唯一的）;
    ② 开发中用于去除重复数据;
    ③ key和value都是相等的;

    let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
    console.log(set);  // zhangsan ,lisi ,wangwu

    （2）、一个属性

    let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
console.log(set.size);   // 3

    （3）、四个方法

    ① add方法：

    vlet set = new Set(["zhangsan","lisi"]);
console.log(set); // {"zhangsan", "lisi"}
set.add("wangwu");
console.log(set); // {"zhangsan", "lisi", "wangwu"}

    ②delete方法：

    let set = new Set(["zhangsan","lisi"]);
//直接将删除的值传进去即可
set.delete("lisi");
console.log(set); //{"zhangsan"}

    ③has方法：

    let set = new Set(["zhangsan","lisi"]);
console.log(set.has("lisi"));  //true

    ④clear方法：

    let set = new Set(["zhangsan","lisi"]);
set.clear(); // 此时set为空了

    5、数据集合：map

    (1)、特点

    ① 类似于对象，本质上是键值对的集合;
    ② "键"不局限于字符串，各种类型的值（包括对象）都可以当做键;
    ③ 对象"字符串——值",Map"值——值",是一种更完善的hash结构实现;

      //创建map
  let obj1 = {a:1}, obj2 ={b:2};
  const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["sex",'男'],
    [obj1,"haha"],
    [obj2,'wowo']
  ]);
  console.log(map);   //{"name" => "张雪", "age" => 21, "sex" => "男", Object => "haha",Object => "wowo"}

    结果如图所示：
    图片描述

    (2)、一个属性

    const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
console.log(map.size); //3

    (3)、五个方法

    ① get/set方法：

        const map = new Map([
        ['name','张雪'],
        ["age",21],
        ["age",21],
        ["sex",'男']
    ]);
    console.log(map.get("name")); // "张雪"
    map.set("A","aa");
    console.log(map.get("A")); // aa

    ② delete方法：

        map.delete("age");
    console.log(map); // {"name" => "张雪", "sex" => "男", "A" => "aa"}

    ③ has方法：

        console.log(map.has("sex"));  //true

    ④clear方法：

        map.clear();
    console.log(map); //map为空

    ⑤keys、values、entries

        map.keys();  //  {"name", "age", "sex"}
    map.values();  //  {"张雪", 21, "男"}
    map.entries();  // {"name" => "张雪", "age" => 21, "sex" => "男"}

    ⑥遍历

        map.forEach(function(value,key){
      console.log(key +":"+value);
    });//name:张雪   age:21   sex:男
    注意：
    const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
//因为对象存储在堆区，存在的地址是不同的，所以一下两个都会被set进map中。
map.set({},"hehe");
map.set({},"qq");
console.log(map); // {"name" => "张雪", "age" => 21, "sex" => "男", Object => "hehe", Object => "qq"}

    6、Symbol

    (1)、应用场景：

      ES5的对象属性名都是字符串，容易造成属性名冲突；ES6 引入新的原始数据类型Symbol，表示独一无二的值。

    （2）、对象的属性名两种形式

    ①字符串

    ②symbol类型（独一无二，不会与其他属性冲突）

        //定义一个symbol
    let str1 = Symbol();
    let str2 = Symbol();
    console.log(str1 === str2); //false
    console.log(typeof(str1)); //Symbol
    
    
    //symbol主要用于对象属性的定义，且定义的属性是唯一的
    const obj = {};
    obj[Symbol("name")]="zhangsan";
    obj[Symbol("name")]="lisi"
    console.log(obj);//{Symbol(name): "zhangsan", Symbol(name): "lisi"}

    7、class
    （1）、ES6中新增的语法糖，作用在于让对象原型的写法更加清晰，更像面向对象的编程方式。也是构造函数的另一种写法。

      //构造函数写法
  function Person(name,age){
    this.name = name;
    this.age = age;

  }
  Person.prototype = {
    constructor:Person,
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"岁")
    }
  }
  let person = new Person("张三",12);
  person.print(); //我叫张三，今年12岁
  
  
  
  // class面向对象
  class Person{
    constructor(name,age){
      this.name = name;
      this.age = age;
    }
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"岁")
    }
  }
  let person = new Person("张三",12);
  person.print();//我叫张三，今年12岁

    8、模板字符串

    模板字符串在Vue.js中使用的比较多的。使用 `` 符号，这样可实现代买的格式化。
    let str = "你好！";
let className = "red";
let html = `<html>
              <head>今天天气很好！</head>
              <p class="${className}"> ${str} </p>   //这里使用${}的形式调用变量
           </html>`
console.log(html);

    9、数组的扩展
    （1）、Array.from

    let list = document.querySelectorAll("li")
   console.log(Array.isArray(list));  //false
   Array.from(list);  //将非数组list转为数组
   console.log(Array.isArray(Array.from(list))); //true

    （2）、Array.of

     Array.of(1,2,3,4); //将零散元素转为数组
 console.log(Array.isArray(Array.of(1, 2, 3, 4)));  //true

    10、对象的扩展
    (1)、

      let obj = {
    "name":"lisi",
    "age":12
  }
  console.log(obj);  //{name: "lisi", age: 12}

    (2)、ES6中key和value一样时，直接写一个即可。

      //这种写法等同于下面的方法，常用下面的方法
  let name = "zhangsan"
  let age = 12
  let obj = {
    "name":name,
    "age":age
  }
  console.log(obj);

  //方法同上 
  let name = "zhangsan"
  let age = 12
  let obj = {
    name,
    age
  }
  console.log(obj);

    (3)、assign用法：

        let obj1 = {name:"lisi"};
    let obj2 ={age:21};
    let obj = {};
    Object.assign(obj,obj1,obj2);//将obj1,obj2合并到obj上。
    console.log(obj);//{name: "lisi", age: 21}

    (4)、延展操作符

      let str = "张三";
  let strArr =[...str];
  console.log(Array.isArray(strArr));  //true
    主要用于数据传递和数组去重。
      let myArr = [1,2,10,"zhangsan",20,2,1];
  console.log(new Set(myArr));//根据set唯一性去重
  let newArr = [...new Set(myArr); //将set转为array
  console.log(Array.isArray([...new Set(myArr)])); //true

    10、函数扩展

    （1）、形参设置默认值

        //ES6中，直接将的形参设置默值
   function sum(num1 = 10,num2 = 10){
     console.log(num1 + num2);
   }
   sum();   //20
   sum(1,3);  //4

    （2）、参数形式

     //在不清楚元个数时，使用延展操作符代替
 function sum(name,...nums){
   console.log(name)
   let result = 0;
   for(let value of nums){
     result += value
   }
   return result;
 }

console.log(sum("李四",1,45,3,2)); // 李四  51
    ecmascript-6
    Miss_Ye
    1.5k 声望157 粉丝

    知识的价值不在于占有，而在于使用！

    « 上一篇
    webpack
    下一篇 »
    异步加载

    引用和评论

    推荐阅读
    头像
    Node 之 Path

    Miss_Ye阅读 1.6k

    头像
    webpack的入门教程

    小蚊酱赞 2阅读 2.1k

    头像
    一个由于前端缺少 encodeURIComponent 引起的登录问题的分析和解决

    注销赞 1阅读 941

    头像
    `Object.hasOwn` 检查对象是否包含某一属性参数

    tiee赞 1阅读 2.8k评论 2

    头像
    ES6, Angular,React和ABAP中的String Template（字符串模板）

    注销阅读 2.2k

    头像
    使用 HTTP PUT, PATCH 以及 MERGE 请求消费 SAP ABAP OData 服务修改操作的实现及其区别试读版

    注销阅读 1.6k

    头像
    什么是 SAP HANA Code-to-Data 编程模型

    注销阅读 1.3k

    0 条评论
    得票最新