ES6新属性笔记

一、destructuring--解构赋值

1、数组解构赋值

  (1)完全解构

    

  let [a,b,c] = [1,2,3];//普通
  console.log(a+":"+b+":"+c);

  let [a1, [[b1], c1]] = [1, [[2], 3]];//嵌套
  console.log(a1+":"+b1+":"+c1);

  let [ , , third] = ["foo", "bar", "baz"];
  console.log(third);

  let [x, , y] = [1, 2, 3];
  console.log(x+":"+y);

这种解构赋值的方式很直观,数组嵌套的多了以后也好输出。

  (2)不完全解构

  let [x1, y1] = [1, 2, 3];
  console.log(x1+":"+y1);
  //x1 y1分别对应1 2
  let [x3,, y3 = "cc", z3 = "ccy"] = [1, 2, 3];
  console.log(x3+":"+y3+":"+z3);
  //x3对应1;这里的2对应x3与y3之间的空变量;y3=‘cc’只是初始化一下值,当对应的数组中有值的话会直接被覆盖,这里的cc就已经被3覆盖掉了,z3就是ccy     let [a2, [b2], d2] = [1, [2, 3], 4];   console.log(a2+":"+b2+":"+d2);  //a2对应1,b2对应2,d2对应4

2、对象解构赋值

  对象解构与数组解构基本一样

  

  /*对象的属性没有次序,变量必须与属性同名,才能取到正确的值*/  let {foo, bar ,arr:[name,age,id="001"]} = {foo: "aaa", bar: "bbb" ,arr:["zhangsan","18"]};
  console.log(foo+":"+bar+":"+name+":"+age+":"+id);

3、字符串解构

     let [q,w,e] = "lemon";
     console.log(e);

4、函数参数解构

  let funObj = {
    name:"lemon",    age:"18",
       }  function show({name,age,id="001"}){
       console.log(name+":"+age+":"+id);
       }
  show(funObj);

----------------------------------------------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------------------------------------------------

二、Symbol--定义一个独一无二的值

  var x = ‘lemon‘;
  var y = ‘lemon‘;
  console.log(x == y);
  console.log(x === y);
  //此时x与y是相等的,毋庸置疑打印出来的自然是两个true;

  var m = Symbol(‘lemon‘);
  var n = Symbol(‘lemon‘);
  console.log(m == n);
  //此时打印出的就是false了;

语法很简单,由Symbol定义出的是独一无二的;

三、set与WeakSet--ES6新增的数据类型

1、set

set是ES6新增的一种数据类型,语法特点与数组类似不同的是set数据结构里的的所有数据都是唯一的。 

先来看下数组

var arr1 = [1,2,3,4,6,6,7,7,8];
for(var i = 0;i < arr1.length; i++){
  console.log(arr1[i]);
}
for(var n in arr1){
  console.log(arr1[n]);
}
arr1.map(function(val){  //依次遍历数组中的数据
  console.log(val);
});

  

再来看下我们set数据结构,set数据是数组通过Set来转变的

var arr1 = [1,2,3,4,6,6,7,7,8];var set1 = new Set(arr1);//当数组转变为set数据时,数组中所有的重复数据都将会被删除,只会保留一个,此时set里面的数据只有 1,2,3,4,5,6,7,8;
/*for of语法遍历*/
for(var ele of set1){ //请忽略报错   for in循环不能遍历set集合  用for of
  console.log(ele);
}

add方法来添加数据,类似数组的push方法

var set2 = new Set();
for(var i = 0 ; i < 10; i++){
  set2.add(i);
}
console.log(set2);

我们还可以使用拓展运算符“[...set]”,将set集合转换为数组

//这里我们将上面的set2转化为数组
var arr = [...set2];
console.log(arr);

我们还可以通过delete方法删除set里面的数据

//此处还是拿上面的set2进行讲解
set2.delete(2);//这里的2不是索引,是数据,这里只能删除对应的数据;

还可以通过clear方法进行清空

set2.clear();
console.log(set2);

为什么在删除的时候没有使用索引,我们先来看看遍历的结果

let set3 = new Set([‘lemon1‘,‘lemon2‘,‘lemon3‘,4,2,3,4]);
set3.forEach(function(index,val){
    console.log(index+":"+val);
});//index与他的value值相同;

使用has方法进行判断set中是否有对应数据

var set = new Set([1,2,3]);
console.log(set.has(3));//返回true
console.log(set.has(4));//返回false

set还有size属性,像数组里面的length

var set = new Set([1,2,3]);
console.log(set.size)//返回3

values方法可以遍历出所有值

var set = new Set([1,2,3]);
console.log(set.values);

var newSet = ser.values();
for(var val of newSet){
    console.log(val)
}

2、WeakSet

WeakSet类似于Set,也是不重复的值的集合。但是它只能用于存储对象。而不能是其他类型的值。 
WeakSet是一个个构造函数。可以接受数组和类似数组的对象作为参数。(实际上,任何具作为iterable接口的对象都可以作为WeakSet的参数)。该数组的所有成员都会自动成为WeakSet的实例对象的成员。 
WeakSet的一个用处是存储DOM节点,而不用担心这些节点从文档移除时,会引起内存的泄露。

具体内容这里就不讲解了。

代码格式如下:

/*WeakSet与Set使用方式类似,与set不同的地方在于WeakSet只能保存对象类型的数据*/
        let ws1 = new WeakSet();
        ws1.add(5);//报错

        let ws2 = new WeakSet();
        let num = new Number(5);
        console.log(num);
        ws2.add(num);//不报错

        let data = new WeakSet();
        var obj1 = {name:"ccy"};
        var obj2 = new String("你好");
        var obj3 = new Number(6);
        data.add(obj1);
        data.add(obj2);
        data.add(obj3);
        /*不能遍历、取值*/
        for(let i of data){
            console.log(i);
        }
        /*只能判断数据存不存在*/
        console.log(data);
        console.log(data.has(obj1));
        //没有size属性,没有clear方法,拓展运算符不可用

这篇就说这么多,学到知识记得收藏加关注哟!

时间: 2024-10-18 11:05:15

ES6新属性笔记的相关文章

常见ES6新属性

ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是:详细学习http://es6.ruanyifeng.com/ ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 常用es6特性 然后我下面简单的介绍一些很常用的语法特性,如果想完整的了解ES6,我推荐大家点这里 定义函数 我们先来看一个基本的

ES6新属性(追加)

话不多说,直接进正题 一.Map Map也是ES6新增的一种数据类型,它的本质和对象一样都是键值对的集合.与对象不同的是,它的键值可以是各种数据类型首先我们创建一个Map数据 //用var创建一样 let map1 = new Map(); 我们通过Object实例化两个对象 var obj1 = new Object(); var obj2 = new Object(); 我们使用set方法对Map进行添加值 map1.set(obj1,"对象键值1"); map1.set(obj2

css3新属性transform 3D的基础笔记.

研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子: <style> #box{ -webkit-perspective:800px;//定义3D场景大小 -webkit-transform-origin:50%

HTML笔记(2)——HTML5新属性

HTML5 DAY01: 基本内容 HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) HTML版本 - 第一阶段主要学习还是4版本(包含5版本) <header><nav> HTML5版本之后,声明不再出现版本信息 有意地版本,以后可能不再会有新版本 HTML5的规范内容实时更新 注意 HTML5永远都不可能离开javascript. HTML5在移动

ES6新特性

ES6新特性概览 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs. 我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐.当引入箭头操作符后可以方便地写回调了.请看下面的例子. var array = [1, 2, 3]; //传统写法 array.forEach(f

ES6新特性(函数默认参数,箭头函数)

ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:   这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 =>

总结常见的ES6新语法特性。

前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一

ES6新特性:Proxy代理器

ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome>39或者firefox>18: Proxy的基本使用: Proxy如其名, 它的作用是在对象和和对象的属性值之间设置一个代理,获取该对象的值或者设置该对象的值, 以及实例化等等多种操作, 都会被拦截住, 经过这一层我们可以统一处理,我们可以认为它就是“代理器” ; Proxy是一个构造函数, 使

ES6新特性学习

ES6是ECMAScript 6的缩写简称,2015 年 6 月,ECMAScript 6 正式通过,成为国际标准.ES6带来的新功能涵盖面很广,还有很多很便利的功能.下面来记一下我接触到的几个新特性. 1.模板字符串,用反单引号包起来,可以实现字符串回车换行,也可以在字符串里拼接变量,${变量},很方便使用. var name="fanfan"; var age="20"; console.log("Hello,My name is "+nam