ES6 常用总结——第三章(数组、函数、对象的扩展)
1.1. Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
下面是一个类似数组的对象,Array.from将它转为真正的数组。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3};
// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from([1, 2, 3])
// [1, 2, 3]
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x); // 等同于Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
1.2. Array.of()
Array.of方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
1.3. 数组实例的entries(),keys()和values()
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"// 1 "b"
1.4. 函数参数的默认值
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
参数变量是默认声明的,所以不能用let或const再次声明。
function foo(x = 5) {
let x = 1;
// error
const x = 2;
// error
}
上面代码中,参数变量x是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。
1.5. 扩展运算符的应用
(1)合并数组
扩展运算符提供了数组合并的新写法。
// ES5[1, 2].concat(more) // ES6[1, 2, ...more] var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e']; // ES5的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
1.6. 箭头函数
ES6 允许使用“箭头”(=>)定义函数。
var f = v => v;
上面的箭头函数等同于:
var f = function(v) {
return v;
};
示例
$(function() {
var a=()=>{
const [a, b, c, d, e] = 'hello';
console.log(a+"__"+b+"__"+c+"__"+d+"__"+e);
}
a();//不带参数
//h__e__l__l__o
var b=(name,password)=>{
console.log("用户名:"+name+",密码:"+password);
}
b("张三","123456");//带参数
//用户名:张三,密码:123456
});
1.7. 对象的扩展
1.8. 属性的简洁表示法
ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
// 等同于var baz = {foo: foo};
上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
1.9. 属性的遍历
ES6 一共有5种方法可以遍历对象的属性。
(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。
以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。
- 首先遍历所有属性名为数值的属性,按照数字排序。
- 其次遍历所有属性名为字符串的属性,按照生成时间排序。
- 最后遍历所有属性名为 Symbol 值的属性,按照生成时间排序。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2和10,其次是字符串属性b和a,最后是 Symbol 属性。
注释:对于Object.values等ES2017刚出来的函数,大多数浏览器不支持,暂时就不列出来了
brew uninstall --force libimobiledevice ios-webkit-debug-proxy
brew install --HEAD libimobiledevice ios-webkit-debug-proxy
ES6 常用总结——第三章(数组、函数、对象的扩展)的更多相关文章
- es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...
- javascript进阶课程--第三章--匿名函数和闭包
javascript进阶课程--第三章--匿名函数和闭包 一.总结 二.学习要点 掌握匿名函数和闭包的应用 三.匿名函数和闭包 匿名函数 没有函数名字的函数 单独的匿名函数是无法运行和调用的 可以把匿 ...
- [Effective Java]第三章 对所有对象都通用的方法
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 20190814 On Java8 第三章 万物皆对象
第三章 万物皆对象 对象创建 数据存储 有5个不同的地方可以存储数据: 寄存器 (Registers) 最快的存储区域,位于CPU内部 .无法直接控制. 栈内存(Stack) 存在于常规内存 RAM ...
- ES6 的Object.assign(target, source_1, ···)方法与对象的扩展运算符
一.基本概念 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象. Ob ...
- ES6必知必会 (三)—— 数组和对象的拓展
数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console ...
- ES6标准入门 第三章:变量的解构赋值
解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- ES6 数组、对象的扩展
8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...
随机推荐
- 7. oracle表的管理*
一.表名和列名的命名规则: 1.必须以字母开头 2.长度不能超过30个字符 3.不能使用oracle的保留字 4.只能使用如下字符 A-Z,a-z,0-9,$,#等 二.Oracle数据类型1.字符类 ...
- springboot~通过面向接口编程对控制反转IOC的理解
IOC,把控制反转到业务端,这句话没什么问题,在springboot框架里,对象的管理是通过spring ioc来实现的,而开发人员的开发原则里总是说"面向接口编程",而为什么要面 ...
- 在win10的Linux子系统(WSL)上搭载python编程环境
为什么使用WSL进行python编程 WSL,全称Windows Subsystem for Linux.简言之,win10提供了一个子Linux系统,可以解决虚拟机和双系统的系统之间阻隔的问题而不影 ...
- 自动化项目Jenkins持续集成
一.Jenkins的优点 1.传统网站部署流程 一般网站部署的流程 这边是完整流程而不是简化的流程 需求分析—原型设计—开发代码—内网部署-提交测试—确认上线—备份数据—外网更新-最终测试 ,如果 ...
- 《MySQL数据库》MySQL主从复制搭建与原理
前言 主从复制:两台或者更多的数据库实例,通过二进制日志,实现数据同步.为什么需要主从复制,主从复制的作用是什么,答:为了预防灾难. 搭建 第一步:准备多实例环境.如何创建多实例见: 第二步:确保每一 ...
- for...in、for...of和forEach
let arr = [1,2,3,4,5,6]; arr.name="AAA"; for(var i in arr){ //遍历的实际是对象的属性名臣,每一个元素的索引被视为一个属 ...
- SpringBoot中JPA,返回List排序
这里简单示例,利用query,根据“createtime”字段,进行 desc 排序,最近日期的数据在最前面. public List<StatusEvent> findAll(Speci ...
- ARM开发板实现双系统引导的一种方法——基于迅为iTOP-4412开发板
前言 本文所用的uboot代码为迅为官方提供,开发板是迅为iTOP-4412开发板.本文如有错误,欢迎指正. 首先,我们确定一下系统启动的流程:首先启动uboot,uboot启动内核并挂载rootfs ...
- 【Android】Android开发实现进度条效果,SeekBar的简单使用。音量,音乐播放进度,视频播放进度等
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- android studio配置so和assets目录
so配置: 1. 建立src/main/libs/armeabi目录,so文件放入armeabi目录 2.配置build.gradle android { defaultConfig{ XXXXXX ...