ES6学习笔记之新增数据类型实例解析

本文实例讲述了ES6学习笔记之新增数据类型。分享给大家供大家参考,具体如下:

1、数据解构赋值

1、数组的解构赋值

基本用法:let  [key1,key2...]=[value1,value2...]

let [name,age,sex]=['小明',24,'男'];
console.log(name);
console.log(age);
console.log(sex);

注意左右的key与value格式要匹配对应,键值可以缺省,但逗号的位置要正确

let [arr1,,[arr3,,[,arr6]]]=[1,2,[31,32,[331,332]]];
console.log(arr1);
console.log(arr3);
console.log(arr6);

2、对象的解构赋值

用法:let  {key1,key2...}={key1:value1,key2:value2...}

let obj={name:'小明',age:24,sex:'男',friend:['小张','小李']};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
console.log(obj.friend);

3、字符串类型

字符串中每个字符与数组键对应

let [a,b,c]="这是一个字符串";
console.log(a);
console.log(b);
console.log(c);

2、新增数据类型Set集合

set与数组不同在于set中不可以有重复数据,常用于去重操作

1、创建set

let myset=new Set(['data1','data2','data3','data3']);

2、属性size:集合的元素个数

console.log(myset.size);

3、方法

myset.add('data4');//增加元素
myset.delete('data2');//删除元素
console.log(myset.has('data1'));//判断是否含有某个元素,包含返回true
myset.clear();//清除集合所有元素
console.log(myset.keys());//返回集合所有的键值
console.log(myset.values());//返回集合所有值

3、新增数据类型Map

由于对象的键值只能是字符串,不可以是对象类型,使用对象作为键值会被toString转化为字符串"[object Object]",例如:

let obj1={key:1},obj2={key:2},obj={};
obj.value='objValue';
obj[obj1]='obj1Value';  //将对象obj1作为obj的键值
obj[obj2]='obj2Value';
console.log(obj);

输出:Object { value: "objValue", "[object Object]": "obj2Value" },由于转化为相同的键值字符串,obj2会覆盖obj1

而使用map可以避免键值必须为字符串的限制,其键值可以为对象、数组等

1、创建Map

let mymap=new Map([
    ['stringKey','stringValue'],
    ['age',24],
    [obj1,'obj1Value'],
    [obj2,'obj2Value'],
    [['arr'],'arrValue']
]);

打印mymap如下:

2、属性size:返回map中键值对个数

console.log(mymap.size);

3、方法

mymap.set('key','value');//设置map的键、值
mymap.get('key');//通过键来取值
mymap.delete('key');//删除对应的键值
mymap.has('key');//判断是否含有
//mymap.clear();//清除map中所有键值
//遍历
mymap.forEach(function (value,key) {
  console.log(key+":"+value);
})

4、注意{}与{}是不同的两个键值

mymap.set({},"obj1");
mymap.set({},"obj2");

以上语句obj2不会覆盖obj1,由于空对象{}在内存中不同的堆区申请存储空间,所以作为键值它们是不同的

4、Symbol类型

在用相同的字符串对对象属性名或方法进行命名时会发生命名冲突,而使用symbol产生的名字是不同的,例如:

let obj={};
obj[Symbol('name')]="小赵";
obj[Symbol('name')]="小钱";
console.log(obj);

结果如下,不会覆盖第一句:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2020-01-20

浅谈ES6新增的数组方法和对象

es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((val

ES6中字符串string常用的新增方法小结

本文实例讲述了ES6中字符串string常用的新增方法.分享给大家供大家参考,具体如下: ES6为js新增了很多方法,包括遍历.查询.替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法. for-of: let str="wbiokr"; for(let s of str){ console.log(s) } //结果:w, b, i, o, k, r 由于es5并没有为js制定字符串相关遍历方法,for-of无疑会是接下来前端开发中的一个很重要

ES6新增的math,Number方法

ES6新增的math,Number方法,下面总结了一些我觉得有用的 Nunber.isInteger()判断是否为整数,需要注意的是1,和1.0都会被认为是整数 console.log(Number.isInteger(1.0))//true console.log(Number.isInteger(1))//true console.log(Number.isInteger("1"))//false console.log(Number.isInteger("1.1&quo

浅析Javascript ES6新增值比较函数Object.is

在Object.is出现之前我们比较值使用两等号 "==" 或 三等号"===", 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object.is,让比较运算的江湖更加混乱. 多数情况下Object.is等价于"===",如下 1 === 1 // true Object.is(1, 1) // true 'a' === 'a' // true Object.is('

ES6中新增的Object.assign()方法详解

前言 将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作.下面这篇文章将介绍ES6的Object.assign()属性,可以用于对象复制. 在JavaScript生态系统中,对象复制有另外一个术语: extend.下面是两个JS库提供的extend接口: Prototype: Object.extend(destination, source) Underscore.js: _.extend(destination, *sources) Object.assign()介绍 E

简述ES6新增关键字let与var的区别

最近看了很多文章,偶然间看到ES6中新增了一个关键字 let ,它具有与 var 关键字相似的功能.一开始使用它时,发现它让我对之前一些习以为常的东西产生了怀疑. 下面先让我们看看它和 var 之间用法的不同 { var a = 10; let b = 8; } a //10 b // Referenceerror :b is not defined 上面在代码块中声明了两个变量并分别赋值输出到控制台,结果a的变量成功输出,b的输出结果产生了报错.可见,let声明的变量只在它所在的代码块中产生作

ES6中数组array新增方法实例总结

本文实例讲述了ES6中数组array新增方法.分享给大家供大家参考,具体如下: ●find : let arr=[1,2,234,'sdf',-2]; arr.find(function(x){ return x<=2; })//结果:1,返回第一个符合条件的x值 arr.find(function(x,i,arr){ if(x<2){console.log(x,i,arr)} })//结果:1 0 [1, 2, 234, "sdf", -2],-2 4 [1, 2, 23

ES6 新增的创建数组的方法(小结)

在ES6之前,创建数组的方式有2种: 一: 通过数组字面量 let array = [1,2,3]; console.log(array);//[1,2,3] 二: 通过new Array()创建数组 let array = new Array(1, 2, 3); console.log(array); //[1,2,3] 在大多数情况下new Array()运行良好: let array = new Array(1, 2); console.log(array.length); //2 con

ES6中Math对象新增的方法实例详解

本文实例讲述了ES6中Math对象新增的方法.分享给大家供大家参考,具体如下: Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. 对于没有部署这个方法的环境,可以用下面的代码模拟. Math.trunc = Math.trunc || function(x) { return x < 0 ? Math.ceil(x) : Math.floor(x); }; Math.sign() Math.sign方法用来判断一个数到底是正数.负数.还是零. 对于没有部

ES6知识点整理之String字符串新增常用方法示例

本文实例讲述了ES6知识点整理之String字符串新增常用方法.分享给大家供大家参考,具体如下: 字符串includes,startsWith,endsWith方法测试 普通的用法: <script> var str = 'Hello'; console.log(str.indexOf('o')); // 4 console.log(str.includes('e')); // true console.log(str.startsWith('H')); // true console.log

ES6新增数据结构WeakSet的用法详解

WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

详解es6新增数组方法简便了哪些操作

什么是es6? 在这里不过多阐述,我也是跟着阮一峰大佬的<es6入门>来学习的,es6新增了很多的方法.属性,让我们在编码中得到了很高的提升,在这里只对array这块进行阐述,其他的就过不多介绍了. 言归正传,在项目中,经常会遇到处理数据,筛选数据的要求,我们更多的会借助于for循环来完成,比如:数组去重,传统方法如下(以下所有实例只列举一种) let a = [1,2,2,3,3,4,5]; let b = [a[0]]; for(let i = 0; i < a.length; i+

详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时,我们会不假思索回答道:indexOf方法.其实,ES6 又提供了三种新方法includes().startsWith().endsWith(),也是比较好用的. indexOf方法在这里就不多说了,大家都比较熟悉,意思就是:返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置,如果没有出现则返回-1. 下面详细介绍ES6新增的这三种方法: ①includes():返回布尔值,表示是否找到了参数字符串. 如下所示: let

详解ES6语法之可迭代协议和迭代器协议

ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

详解Java中数组判断元素存在几种方式比较

1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String containValue){ return Arrays.asList(arr).contains(containValue); } 需要注意的是Arrays.asList这个方法中转换的List并不是java.util.ArrayList而是java.util.Arrays.ArrayList,其中java.

详解ES6 CLASS在微信小程序中的应用实例

ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

详解ES6中class的实现原理

一.在ES6以前实现类和继承 实现类的代码如下: function Person(name, age) { this.name = name; this.age = age; } Person.prototype.speakSomething = function () { console.log("I can speek chinese"); }; 实现继承的代码如下:一般使用原型链继承和call继承混合的形式 function Person(name) { this.name =

Python高级特性——详解多维数组切片(Slice)

(1) 我们先用arange函数创建一个数组并改变其维度,使之变成一个三维数组: >>> a = np.arange(24).reshape(2,3,4) >>> a array([[[ 0, 1, 2, 3], [ 4, 5, 6, 7], [ 8, 9, 10, 11]], [[12, 13, 14, 15], [16, 17, 18, 19], [20, 21, 22, 23]]]) 多维数组a中有0~23的整数,共24个元素,是一个2×3×4的三维数组.我们可以

详解Java中native方法的使用

今天在网上学习时碰到有关于 native修饰符所修饰的方法,上网查了查,觉得很有意思记录一下 1.native简介 简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由非java语言实现,比如C.这个特征并非java所特有,很多其它的编程语言都有这一机制,比如在C++中,你可以用extern "C"告知C++编译器去调用一个C的函数. native是与C++联合开发的时候用的!使用nat

详解phpstorm2020最新破解方法

推荐阅读: PHPStorm2020.1永久激活及下载更新至2020(推荐) https://www.jb51.net/article/195806.htm Jetbrains PhpStorm 2020.1 完美版(附安装教程) https://www.jb51.net/softs/720592.html PHPStorm 是 JetBrains 公司开发的一个轻量级且便捷的 PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. 没有phpst

详解Java合并数组的两种实现方式

最近在写代码时遇到了需要合并两个数组的需求,突然发现以前没用过,于是研究了一下合并数组的方式,总结如下. 1.System.arraycopy()方法 (1) 解析 通过阅读JDK源码,我可以知道方法原型如下: public static native void arraycopy(Object src, int srcPos, Object dest, int destPos, int length); 其中: src是源数组 srcPos是源数组复制的起始位置 dest是目标数组 destP