ES6 基本用法总结

最新推荐文章于 2022-03-20 18:50:28 发布

原创最新推荐文章于 2022-03-20 18:50:28 发布 · 358 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 基本用法 #ES6 语法

代码知识专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了 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 可使用“箭头”（=>）定义函数。

函数无参数或多个参数，可使用圆括号进行参数传递；当执行语句只有一句，可直接写在箭头函数后面。(此时的圆括号可加可不加)

var a = () => 5;
// 等同于
var a = function () { return 5 };

var sum = (num1, num2) => ( num1 + num2 ); //此时的圆括号可加可不加
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

箭头函数的代码块部分语句过多，需使用大括号括起来，并使用return返回。

let a = 3, b = 5;
let getSum = (a,b) => { let sum = a+b; return sum; };//此处的花括号不能再用圆括号包起来，否则会报错
console.log(getSum (a,b)); //8

花括号被解释为代码块，若箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

var id = 10;
var getReturn = (id) => ( { id: id, name: "Temp" } ); //此处的花括号为对象，即一个独立的代码块，须加上圆括号
console.log(getReturn(id)); //{id: 10, name: "Temp"}

ES6 函数参数使用

单独传参数，一一对应，并且函数的参数名称不能相同

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

函数中参数带有默认值，放置在参数最后；

// 例一
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]

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 用法

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

判断对象是否为数组/对象的元素/属性：
格式：（变量 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 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值；
作用：将数据结构分解为更小的部分的过程，从而达到简化提取信息的目的。

一、对象解构

同名变量解构赋值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

不同变量解构赋值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type:localType,name:localName} = node;
console.log(localType);//identifier
console.log(localName);//foo

默认值：当使用解构赋值语句时，如果指定的本地变量没有同名属性，那么该变量会被赋值为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'

嵌套的对象解构：使用类似于对象字面量的语法，可以深入到嵌套的对象结构中去提取你想要的数据

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;

二、数组解构

数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具名属性上；
```
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
```

默认值：数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ，那么该默认值就会被使用
```
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
```

嵌套的数组结构：与对象类似，只是仍使用的是数组字面量

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

数组中剩余值的解构，即使用 “…” 方式解构；

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 基本用法，对于入门的你能给以很好的帮助！

流水漫漫，时光匆匆，任重道远，永不止步！！！