ES6（一）

最新推荐文章于 2024-12-04 10:45:47 发布

原创最新推荐文章于 2024-12-04 10:45:47 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

最近ES6 很火，当然这也源于它强大的功能，现在我将自己学到的ES6知识做个小分享。。。

1.ES6是什么？

ES6：它是ECMAScript 6.0的简称，也是JavaScript语言的下一代标准，它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.Let和Const

Same：它们都在块级作用域内有效
Difference: Let声明变量，Const声明常量
细说let：Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面，也就是用大括号定义的代码块，let限制块级作用域，var限制函数作用域，当然for循环就比较适合用let。
细说const:const它一旦被定义不能被修改，当然它也是块级作用域
下面给大家一些关于let,var,const 的栗子

const c = 2;  
  alert(c);     //  2
  //var   定义的变量可以修改，如果不初始化会输出undefined，不会报错。
  var a = 1;
  console.log("函数外var定义a: " + a);  //  1
  function change(){
    a = 3;
    console.log("函数内部var定义a: " + a);   // 3
        }
    change();
    console.log("函数调用后var定义a为函数内部修改值：" + a);  //3

   //let   是块级作用域，函数内部使用let定义后，对函数外部无影响。
   let b = 1;
   console.log("函数外var定义b: " + b);  //  1
   function change1(){
      let b = 3;
      console.log("函数外var定义b: " + b);  //  3
    }
   change1();
   console.log("函数调用后let定义b不受函数内部定义影响： " + b);  //1

2.ES6变量的解构赋值

我们先说说什么叫解构
解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值
1.模式匹配，等号两边模式一样，如果解析不成功，就是undefined

var [a,b,c] = [1,2,3];  //es6可以这样写，对应赋值

2.不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组

数组解构赋值

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

解构赋值不仅适用于var命令，也适用于let和const命令
解构赋值允许指定默认值

var [hh = true] = [];
hh // true

对象的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

var { hh, ll } = { hh: "aaa", ll: "bbb" };
hh  // "aaa"
ll  // "bbb"
oo  //undefined  解析不到

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = 'lemon';
a // "l"
b // "e"
c // "m"
d // "o"
e // "n"

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: str} = 123;
str === Number.prototype.toString // true

函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

3.箭头函数

箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

//箭头函数简写
let breakfast = dessert => dessert;
/*普通写法*/
var breakfast = function breakfast(dessert){
   return dessert;
}

箭头函数不仅仅是让代码变得简洁，函数中 this 总是绑定总是指向对象自身

function Person(){
  this.age = 0;

  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}

var person = new Person();

箭头函数不管是书写，还是this的使用，都给我们省了很多不必要的麻烦，所以说学号ES6很有必要的。

4.Map和Set

1.Map

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值覆盖

2.Set

Set和Map类似，也是key的集合，但不存储value。由于key不能重复，所以，在Set中没有重复的key
要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

//add(key)在set中添加元素，可重复添加，但是不会有效果
//delete(key)在set中删除元素

未完待续……