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刚出来的函数,大多数浏览器不支持,暂时就不列出来了

时间: 2024-08-02 10:57:07

ES6 常用总结——第三章(数组、函数、对象的扩展)的相关文章

紫书第三章 数组和字符串

1  序 系统的整理下第三章的学习笔记.例题代码是在未看书本方法前自己尝试并AC的代码,不一定比书上的标程好:习题除了3-8百度了求解方法,其它均独立完成后,会适当查阅网上资料进行整理总结.希望本博文方便自己日后复习的同时,也能给他人带来点有益的帮助(建议配合紫书--<算法竞赛入门经典(第2版)>阅读本博客).有不足或错误之处,欢迎读者指出. 2  例题 2.1  UVa272--Tex Quotes #include <stdio.h> int main() { bool log

effective java-读书笔记-第三章 对于所有对象都通用的方法

个人博客同步发布:effective java-读书笔记-第三章 对于所有对象都通用的方法 第三章 对于所有对象都通用的方法 所有非final方法(equals.hashCode.toString.clone.finalize)都有明确的通用约定,因为它们被设计成是要被覆盖的,如果不遵守,基于散列的集合(HashMap.HashSet.HashTable)可能无法结合该类一起运作. 第8条 覆盖equals时请遵守通用约定 覆盖equals规范: 自反性(reflexive).对于任何非null

ES6学习笔记第三章

数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中取值,对变量进行赋值,这被称之为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; var b = 2; var c = 3; 而ES6允许写成下面这样. var [a,b,c] = [1,2,3]; 这种写法属于"模式匹配",只要等号两边模式相同,左边的变量就会被赋值. 如果解构不成功,变量的值就等于undefined. var [foo] = [ ]; var [bar,

ES6数组和对象的扩展

es6数组的扩展 扩展运算符 扩展运算符是对具有Iterator 接口的对象,都可以使用扩展运算符 Array.from() 用于将两类对象转化为真正的数组 1.类似数组的对象(只要据有length属性, 都可以被转化为数组) 2.可遍历(iterable)的对象 Array.of() 将一组值转化为数组 find和findIndex find方法,用于找出第一个符合条件的数组成员,没有找到会返回undefiend,findIndex方法返回的是第一个符合条件成员的位置, 如果找不到返回-1,

C++教程第三章-数组

转载请注明出处: http://blog.csdn.net/miaoyunzexiaobao PS:命名空间的概念:之前写的std::cout/std::cin/std::endl等,表示cout/cin/endl这些属于一个名为std的命名空间,不愿写的话可以在main之前声明:using namespace std,表明本函数使用命名空间std.命名空间的概念会在以后讲解. 1.      数组的概念 数组是一组类型的值的集合,是由类型名,标识符和维数组成的复合数据类型.其中类型名规定了数组

第三章 数组与字符串 UVa1588 Kickdown

题目要求简述:给定长度分别为n1,n2(n1,n2<=100)且每列的高度只为1或者2的长条.需要将他们放入一个高度为3的容器,问能够容纳它们的最短容器长度. 分析: 对于这样的题目显而易见有两种思路,第一,固定一个字符串,另一个从左到右进行移动.第二,固定一个字符串a,另一个字符串b移动,再固定b,取长度最小值. 两种方法我都经过自己的实现,觉得还是第二种代码更简洁优雅,同时还具有一定的可扩展性. 用例子说明一下吧~ 数组1和数组2是我们待比较的两个数组,(当然,都是字符串数组),我们先固定其

Javascript高级程序设计——第三章:函数

函数Function 通过函数封装多条语句,在任何地方执行.javascript函数不会重载,相同名字函数,名字属于后定义的函数通过function关键词声明. function functionName(arguments){ statement; } 函数会在执行return语句后停止并退出.return语句之后的任何代码不会被执行. function say(){ return “hay”; alert("hay"); //永远不执行 } return后不带返回值的会返回unde

快学Scala-第三章 数组相关操作

知识点: 1.定长数组 Array val nums = new Array[Int](10) //10个整数的数组,所有元素初始化为0 val a = new Array[String](10) //10个元素的字符串数组,所有元素初始化为null val s= Array("Hello","World") //长度为2的Array(String) 类型是编译器推断出来的,已提供初始值就不需要new s(0) = "Goodbye" //Arr

python 培训第三章 ,函数,装饰器,模块,内置函数之一函数

目录: 函数示例装饰器模块内置函数一.函数示例: 1.定义函数: def fun(args): '描述信息' 函数体 return 返回值 定义函数的三种形式: 无参函数def foo():print('in the foo') foo() 有参函数: def bar(x,y): print('in the bar') bar(1,2) 空函数: def func(): pass 空函数的应用示例: def put():pass def get():pass def cd():pass def