脚本宝典收集整理的这篇文章主要介绍了

ES6基本语法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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









总结

以上是脚本宝典为你收集整理的

ES6基本语法

全部内容,希望文章能够帮你解决

ES6基本语法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过