ES6入门及一些常用命令

 

一个常见的问题:ECMAScript 和 JavaScript 到底是什么关系?

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。

Let命令

ES6新增的命令,有以下特点:

1.let是变量,可以对let声明的数据重新赋值

2.在同一作用域里面,let不能重复声明

以下这种写法是错误的。

function error() {

        let i = 10;

        let i = 12;

    }

以下这种写法是正确的,因为定义的let变量i在不同的作用域中。

    function correct1() {

        let i = 10;

    }

    function correct2() {

        let i = 10;

    }

3.和var声明的变量一样,let声明的变量区分全局和局部变量。

Const命令

在ES6中,新增了常量的概念

特点:

1.同一作用域内的常量不能修改

2.和let一样,同一作用域内不能重复定义相同的变量

3.const也区分全局变量和局部变量

Symbol

使用Symbol定义的是一个独一无二的数据,以下是一个简单的例子:

用let声明的变量a和b,console出来的结果是true(相等的)   

    let a = "hello";

    let b = "hello";

    console.log(a == b);

而用Symbol定义的a和b,console出来的结果是false(不相等)   

    let a = Symbol("hello");

    let b = Symbol("hello");

    console.log(a == b);

解构赋值

提供一个和源数据类型相同的带变量的数据结构,可以实现对应位置的数据直接赋值到变量上的效果。

对于数组:

let [a, b, c] = [1, 2, 3];

可以从数组中提取值,按照对应位置,对变量赋值。结果为:a = 1;b = 2;c = 3;

数组中不需要获取的数据需要占位实现

如下例子中,不想获取4

    let arr = [1,2,3,[4,3]];

    let [a,b,c,[,e]] = arr;

    console.log(a);  //1

    console.log(b);  //2

    console.log(c);  //3

    console.log(e);  //3

对于对象:

不需要获取的数据不需要占位,直接提供你想获取的属性名即可。

    let obj = {name:"zhangsan",age:24,add:"yt"};

    let { name, add } = obj;

    console.log(name);

    console.log(add);

对于字符串:

    let str = "大家好呀";

    let [j1,j2,j3,j4] = str;

    console.log(j1); //大

    console.log(j2); //家

    console.log(j3); //好

    console.log(j4); //呀

对于函数:

函数调用的同时可使用解构赋值,也可设定默认值,如下,若obj1未定义degree属性,则console出来的结果为”benke”,若obj1定义了degree属性为“daxue”,则console出来的结果为“daxue”

    function showInfo({name,age,weight,degree="benke"}) {

        console.log(name);

        console.log(age);

        console.log(weight);

        console.log(degree);

    }

    let obj1 = {

        name:"lisi",

        age:"21",

        weight:70,

        degree:"daxue"

    };

    showInfo(obj1);

set集合:

set集合和数组类似,但是不能存放相同的数据

常用方法和属性:

add():往集合添加数据。

    let set = new Set([1, 2, 3, 4]);

    set.add(5);//新增元素5

delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

    let set = new Set([1, 2, 3, 4]);

    set.delete(1);//删除1

has(value):返回一个布尔值,表示该值是否为Set的成员。

    let set = new Set([1, 2, 3, 4]);

    console.log(set.has(2));//结果为true

clear():清除所有成员,没有返回值。

   let set = new Set([1, 2, 3, 4]);

    set.clear();

size属性:获取集合的大小。

    let set = new Set([1, 2, 3, 4]);

    console.log(set.size);//长度是4

for of:遍历集合

for (let i of set) {

        console.log(i);

    }  

利用set清除数组的重复数据

[...set]:把set集合转换成数组

    let arr = [1,2,3,1,1,3];

    let set = new Set(arr);

    set.forEach(function (value) {

        console.log(value);

    });

    let arr2 = [...set];

    console.log(arr2);

则输出结果为[1,2,3];

WeakSet

1.成员只能是对象,而不能是其他类型的值。

2.不能遍历,因为大小不能确定,size属性也不能用

WeakSet 结构有以下三个方法。

.add(value):向 WeakSet 实例添加一个新成员。

.delete(value):清除 WeakSet 实例的指定成员。

.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。

Map

在ES5中对象的key值只能是字符串类型,ES6中新增了一种数据类型map,和对象一样是键值对的集合,但是map中的key值可以是任意的数据类型。

属性和方法:

size 属性

size属性返回 Map 结构的成员总数。

set(key, value)方法

设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

    let arr = [1,2];

    let obj1 = {name:"zs"};

    let map = new Map();

    map.set(1,"1");

    map.set(true,"true");

    map.set(arr,"array");

    map.set(obj1,"obj1");

get方法

使用get方法读取这个键

console.log(map.get(1));

delete方法

使用delete方法删除了这个键

console.log(map.delete(1));

for of遍历

for(item of map){

       console.log(item[0] + ":" + map.get(item[0]));

    }

forEach遍历

    map.forEach(function (value, key) {

        console.log(value + ":" + key);

    });

WeaMap

结构与Map结构类似,也是用于生成键值对的集合。但key值只能是对象类型的。

主要方法和属性有:

set(),has(),get()和delete()。

iterator遍历器

遍历过程是这样的。

(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

(2)第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

(3)第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

(4)不断调用指针对象的next方法,直到它指向数据结构的结束位置。

遍历arr数组:

let arr = [1,2,3,4];

    let it = arr[Symbol.iterator]();

    while (true){

        let re = it.next();

        if (re.done){

            break;

        }

        console.log(re.value);

    }

遍历set数组:

    let set = new Set(["zs","ls","ww"]);

    let it2 = set[Symbol.iterator]();

    while (true){

        let re = it2.next();

        if (re.done){

            break;

        }

        console.log(re.value);

    }

猜你喜欢

转载自blog.csdn.net/tjy1214/article/details/82890812