ES6 基本用法总结

本文详细介绍了 ES6 的基本用法,包括变量与常量的申明(var、let、const)、箭头函数使用、函数参数使用、for in 和 for of 的用法,以及解构(对象解构、数组解构、混合解构)等内容,对 ES6 入门者有很大帮助。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES6 变量与常量的申明
var、let、const
  • var 申明变量作用域,根据申明时所在的区域相关;

  • let 申明的变量只在它所在的代码块有效。

  • const 用来声明一个常量 (值类似值不能改变,引用类型地址不能改变)

    {
      let a = 10;
      var b = 1;
    }
    console.log(b) // 1
    console.log(a) // ReferenceError: a is not defined.
    
    const PI = 3.1415;
    console.log(PI) // 3.1415
    
    PI = 3; // Uncaught TypeError: Assignment to constant variable.
    
ES6 箭头函数使用
ES6 可使用“箭头”(=>)定义函数。
  1. 函数无参数或多个参数,可使用圆括号进行参数传递;当执行语句只有一句,可直接写在箭头函数后面。(此时的圆括号可加可不加)

    var a = () => 5;
    // 等同于
    var a = function () { return 5 };
    
    var sum = (num1, num2) => ( num1 + num2 ); //此时的圆括号可加可不加
    // 等同于
    var sum = function(num1, num2) {
      return num1 + num2;
    };
    
  2. 箭头函数的代码块部分语句过多,需使用大括号括起来,并使用return返回。

    let a = 3, b = 5;
    let getSum = (a,b) => { let sum = a+b; return sum; };//此处的花括号不能再用圆括号包起来,否则会报错
    console.log(getSum (a,b)); //8
    
  3. 花括号被解释为代码块,若箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

    var id = 10;
    var getReturn = (id) => ( { id: id, name: "Temp" } ); //此处的花括号为对象,即一个独立的代码块,须加上圆括号
    console.log(getReturn(id)); //{id: 10, name: "Temp"}
    
ES6 函数参数使用
  1. 单独传参数,一一对应,并且函数的参数名称不能相同

    function argfun(x, y) {  //此处的参数名字不能相同 ,即 function argfun(x,x,y){...} //此时会报错
      y = y || 'World';
      console.log(x, y);
    }
    
    argfun('Hello') // Hello World
    argfun('Hello', 'China') // Hello China
    argfun('Hello', '') // Hello World
    
  2. 函数中参数带有默认值,放置在参数最后;

    // 例一
    function f(x = 1, y) {
      return [x, y];
    }
    
    f() // [1, undefined]
    f(2) // [2, undefined])
    f(, 1) // 报错
    f(undefined, 1) // [1, 1]
    
    // 例二
    function f(x, y = 5, z) {
      return [x, y, z];
    }
    
    f() // [undefined, 5, undefined]
    f(1) // [1, 5, undefined]
    f(1, ,2) // 报错
    f(1, undefined, 2) // [1, 5, 2]
    
  3. ES6 中 Rest 参数传递使用
    3.1. 只有一个 rest 参数使用

    function add(...values) { //只有一个rest参数
      let sum = 0;
      for (var val of values) {
        sum += val;
      }
      return sum;
    }
    add(2, 5, 3) // 10
    

    3.2. 多个参数,同时使用 rest 参数,此时须把 rest 参数放置在参数最后;

    function f(a,b,c, ...items) {
      items.forEach(function(item) {
        a.push(item);
        console.log(item);
      });
    }
    var a = [];
    f(a, 1, 2, 3,4,5,6);  //此处会依次打印出 3 4 5 6
    console.log(a); //[3, 4, 5, 6]
    
ES6 for in 和 for of 的用法

for in 用法

  1. for in 声明用于对数组或者对象的属性进行循环/迭代操作。
    对于数组 ,迭代出来的是数组元 素,对于对象 ,迭代出来的是对象的属性;

    //数组操作
    var myStudents = ['zhanghuan','liuzhiqiang','chenzhihua','zengshangshu'];
    for( let i in myStudents){
    	console.log('myStudents '+ i +' : '+myStudents[i]);
    }
    //打印出结果:
    myStudents 0 : zhanghuan
    myStudents 1 : liuzhiqiang
    myStudents 2 : chenzhihua
    myStudents 3 : zengshangshu
    
    //对象操作
    var myStudent = {
    		name: 'zhanghuan',
    		sex: '1',
    		age: 26,
    		hobbies: 'study  , play the basketball'
    	};
    for(let key in myStudent){
    	console.log('myStudent '+key+' : '+myStudent[key]);
    }
    //打印出结果:
    myStudent name : zhanghuan
    myStudent sex : 1
    myStudent age : 26
    myStudent hobbies : study  , play the basketball
    
  2. 判断对象是否为数组/对象的元素/属性:
    格式:(变量 in 对象)…
      当“对象”为数组时,“变量”指的是数组的“索引”;
      当“对象”为对象是,“变量”指的是对象的“属性”。

    //数组示例:
    var arr = ["a","b","2","3","str"];  
    var result = ("b" in arr);  
    var result1 = (4 in arr);  
    
    document.write(result+"<br>");  //false
    document.write(result1+"<br>");  //true
    
    var obj={  
             w:"wen",  
             j:"jian",  
             b:"bao"  
        };
    var result=(2 in obj);      
    var result1=("j" in obj);  
     
    document.write(result)+"<br/>";  //false
    document.write(result1)+"<br/>";  //true
    

for of 用法

  • for…of 循环适用于数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。

    const arr = ['red', 'green', 'blue'];
    
    for(let v of arr) {
      console.log(v); // red green blue
    }
    

    关于 for of 使用可参考 下面网址:
    http://es6.ruanyifeng.com/#docs/iterator#for---of-循环

ES6 解构

定义:ES6 中允许按照一定模式,从数组和对象中提取值,对变量进行赋值;
作用:将数据结构分解为更小的部分的过程,从而达到简化提取信息的目的。

一、对象解构
  1. 同名变量解构赋值

    let node = {
            type : 'identifier',
            name : 'foo'
    };
    let {type,name} = node;
    console.log(type);//'identifier'
    console.log(name);//'foo'
    
  2. 不同变量解构赋值

    let node = {
            type : 'identifier',
            name : 'foo'
    };
    let {type:localType,name:localName} = node;
    console.log(localType);//identifier
    console.log(localName);//foo
    
  3. 默认值:当使用解构赋值语句时,如果指定的本地变量没有同名属性,那么该变量会被赋值为undefined,可以对其进行指定默认值

    let node = {
          type : 'identifier',
          name : 'foo'
      };
      let {type,name,val} = node;
      console.log(val);//undefined
      ({type,name,val = '234'}  = node)
      console.log(val);//'234'
    
  4. 嵌套的对象解构:使用类似于对象字面量的语法,可以深入到嵌套的对象结构中去提取你想要的数据

    let node = {
         type: "Identifier",
         name: "foo",
         loc: {
           start: {
                 line: 1,
                 column: 1
            },
           end: {
                 line: 1,
                 column: 4
            }
        }
    };
    let { loc: { start }} = node;
    console.log(start.line); // 1
    console.log(start.column); // 1
    

注意:

  • 使用var、let、const对对象进行解构时,必须提供初始化容器(即等号右边的值)
  • 不使用var、let、const赋值时,需要将解构语句使用()进行包裹;如下:
  • ({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
  • 下面语句中并没有任何变量被绑定:
  • let { loc: {} } = node;
二、数组解构
  1. 数组解构的语法看起来与对象解构非常相似,只是将对象字面量替换成了数组字面量。数组解构时,解构作用在数组内部的位置上,而不是作用在对象的具名属性上;

    let colors = [ "red", "green", "blue" ];
    let [ firstColor, secondColor ] = colors;
    console.log(firstColor); // "red"
    console.log(secondColor); // "green"
    

    对于数组解构,最主要在于位置的固定,当然,如果不想赋值某些值,可以直接略过,如:

    var s = [1,2,3,4,5];
    let [,,T] = s;
    console.log(T);//3
    
  • 注意:
    使用var、let、const对对象进行解构时,必须提供初始化容器(即等号右边的值)
    不使用var、let、const赋值时,需要将解构语句使用()进行包裹,因为数组的[],与{}是不同的
    对互换两个变量的值很有用,如排序算法中使用的,可以直接用

    let a = 3;
    let b = 4;
    [b,a] = [a,b];
    console.log(a);//4
    console.log(b);//3
    
  1. 默认值:数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ,那么该默认值就会被使用

    let colors = [ "red" ];
    let [ firstColor, secondColor = "green" ] = colors;
    console.log(firstColor); // "red"
    console.log(secondColor); // "green"
    
  2. 嵌套的数组结构:与对象类似,只是仍使用的是数组字面量

    let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
    let [ firstColor, secondColor ] = colors;
    console.log(secondColor); // ["green", "lightgreen"]
    
  3. 数组中剩余值的解构,即使用 “…” 方式解构;

    let colors = [ "red", "green", "blue","yellow" ];
    let [ firstColor, ...restColors ] = colors;
    console.log(firstColor); // "red"
    console.log(restColors.length); // 3
    console.log(restColors[0]); // "green"
    console.log(restColors[1]); // "blue"
    
三、混合解构
  • 既有函数的解构,也有数组的解构,也只需要对象的创建出字面量来赋值即可,如:

    let node = {
        type: "Identifier",
        loc: {
          start: {
          line: 1,
          column: 1
           }
        },
        range: [0, 3]
    };
    let { loc: { start }, range: [ startIndex ] } = node;
    console.log(start.line); // 1
    console.log(start.column); // 1
    console.log(startIndex); // 0
    

以上为 es6 基本用法 ,对于入门的你能给以很好的帮助!

流水漫漫,时光匆匆,任重道远,永不止步!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值