ECMAScript ES6 从一脸懵逼到灵活运用

接 part 1

New String Methods

const id = 'adcd123456x';
const fan = 'I love ES6.' // .startsWith()
// 检查字符串是否以xx开头,返回布尔值,第二个参数传入开始位置索引,不传默认为0,大小写敏感 id.startsWith('abc'); // true
id.startsWith('123', 5);// true
fan.startsWith('I'); // true
fan.startsWith('i'); // false // .endsWith()
// 检查字符串是否以xx结尾,返回布尔值,第二个参数传入结尾位置索引,不传默认为最后,大小写敏感 id.endsWith('x'); // true
id.endsWith('X'); // false
fan.endsWith('love', 6); // true // .includes()
// 检查子字符串是否包含于字符串中,返回布尔值,可以传入第二个参数,指定匹配开始位置索引,大小写敏感 fan.indexOf('ES6') !== -1; // in past
fan.includes('ES6'); // now // .repeat()
// 将字符串重复n次,参数为重复次数( >=0 )

解构

对象解构

const Tom = {
name: 'Tom Jones',
age: 25,
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones'
}
} // 1. without destructuring // const name = Tom.name;
// const age = Tom.age;
// ... // 2. with destructuring // 这行语句的意思:先声明变量 name 和 age ,然后在 Tom 对象中寻找同名属性,找到把属性值后赋值给变量
// 注意: 在这之前不能声明 name 和 age 变量,否则会报错
const { name, age } = Tom;
console.log(name); // 'Tom Jones'
console.log(age); // 25 // 如果你实在想要提前声明变量的话 可以使用 let 然后 将语句用()包裹起来
// let name = '';
// ({ name, age } = Tom);
// 因为如果不加 () 的话,解析器会把 { } 内的内容解析成一个代码块,而不是解构语法 // 对象解构中还允许对变量进行重命名
// 比如 father 变量名已经被提前占用,下面语法中把 father 重新命名成了 f ,引用时就必须使用 f 来代替
// 如果我们去获取一个对象没有的属性时,则会返回 undefined
// 当然也允许我们传入一个默认值,但只有在当对象该属性的值为 undefined 时才会使用默认值,null false 等不行
const father = "Tom's Dad";
const { father: f, mother, brother, sister = 'have no sister' } = Tom.family;
console.log(f); // 'Richard Jones'
console.log(sister); // undefined

数组解构

const numbers = [1, 2, 3, 4, 5]

// 获取相对应位置的值
const [one, two] = numbers
console.log(one, two) // 1 2 // 像这样用逗号隔开可以跳过某个索引位置
const [yi, , san] = numbers
console.log(yi, san) // 1 3 // 如果变量数量多余数组的值的话 多余的会被赋值 undefined ,
// 同样,我们也可以提供默认值, 当值为绝对的(===) undefined 时会使用默认值 // 还有一种写法 ...others 会将剩余的内容保存到一个数组里
const [first, ...others] = numbers
console.log(first, others) // 1 [2, 3, 4, 5] // ... + 变量名 是 rest参数 , 后面我们再介绍
// 注意它只能出现在数组的最后面,否则会报错

以前我们要交换两个变量的值的时候,经常会定义一个中间变量,有了解构赋值我们就可以方便的进行交换了

let a = 10
let b = 20 // 引入中间变量
let temp
temp = a
a = b
b = temp
console.log(a, b) // 20 10 // 解构赋值
[a, b] = [b, a]
console.log(a, b) // 10 20

for of 循环

for of 是ES6新增的一种循环方式

const fruits = ['apple', 'banana', 'orange', 'mango']

// 我们在遍历一个数组的时候, 常常有这几种方法:
// 1. for 循环 - 这种方式既繁琐可读性又差
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i])
} // 2. 数组的 forEach() 方法 - 简化了for循环,而且可以有新的变量名 fruit,但此方法无法中止或跳出循环
fruits.forEach(fruit => {
console.log(fruit)
}) // 3. for in 循环 -
for (let fruit in fruits) {
console.log(fruit) // 0 1 2 3 : for in 循环的值是属性名而不是属性值,所以在遍历数组是返回的是索引值
} for (let index in fruits) {
console.log(fruits[index]) // apple banana orange mango
} // 但是还有一个问题,for in 循环遍历的是对象上的所以可枚举属性, 即使你是加在原型对象上
// 比如我们给 fruits 加一个属性,这时候再去遍历输出, 你会发现输出多了个 My favorit fruits
// for in 更适合用来遍历对象,不适合用来遍历数组
fruits.description = 'My favorit fruits'
for (let index in fruits) {
console.log(fruits[index]) // apple banana orange mango My favorit fruits
} // 为了解决以上几种方法的缺陷 ES6 引入了新的循环方法 for of
// 它解决了 for in 遍历内容为属性名 和 会遍历数组的非数字属性 的问题
// 而且相对 forEach() 方法而言,它还支持循环中止和跳过
for (let fruit of fruits) {
console.log(fruit) // apple banana orange mango
}

New Array Methods

.from() & .of()

这两个方法并不是原型上的方法,需要通过 Array 对象来调用,即Array.from()Array.of()

  • Array.from()用于把一个类数组或者可遍历对象转换为一个真正的数组,

    同时它还支持传入回调函数作为第二个参数 ,来对转换成的数组每一项执行一定的方法进行处理

  • Array.of()主要解决Array()构造函数传入不同数量的参数时行为不一致的问题:

    ​ 当你传入一个参数(例如:2)时,它会返回长度为2的数组(undefined x 2),当你传入多个参数(例如:1,2,3),这时它又会返回由这些参数组成的数组

    Array.of()无论你传入多少个参数,它都会返回由这些参数组成的数组

其他方法

.find() .findIndex() .some() .every()

find()方法用于返回满足条件(函数内判断)的数组的第一个元素的值

  • 当数组中的元素在符合条件时返回,之后的值不会再调用执行函数
  • 如果没有符合条件的元素返回 undefined

语法:array.find(function(element, index, arr))

参数:测试函数 function(element, index, arr)

​ element - 当前元素

​ index - 当前元素索引

​ arr - 正在执行该方法的数组

findIndex()方法与find()方法类似,唯一不同就是它返回的是满足条件的元素的索引值

some()every()方法也是传入一个测试函数,返回一个布尔值

​ 前者表示至少有一个满足,即找到一个满足条件的元素时返回true

​ 后者表示每一个都满足,即当所有元素都满足条件时才会返回true,当找到一个不满足条件的元素时就会立即返回false

剩余参数

当我们定义一个函数的时候,在最后一个形参前面加三个点,就表示剩余参数

// 比如我们定义一个函数来计算商品的折后价
// 第一个参数传入的是折扣 后面的参数为商品原价
// 这里我们就可以用到剩余参数啦,将价格存到一个数组中去
function discount(rate, ...prcies) {
// 因为prices是一个数组,所以我们可以直接调用 map 方法
return prices.map((price) => price * rate)
} const discountPrices = discount(0.8, 100, 150, 1000)
console.log(discountPrices) // [80, 120, 800]

前面我们提到过,剩余参数还以用于变量的解构

// 我们定义一个变量来记录玩家的 name id 和 scores
// 利用剩余参数我们就可以方便的将分数都保存到一个数组里面
const player = ['Tom', 123456, 5.6, 7.3, 3,4, 8.9]
const [name, id, ...scores] = player

ES6笔记分享 part 2的更多相关文章

  1. ES6笔记分享 part 1

    ECMAScript ES6 从一脸懵逼到灵活运用 var let const var let const 的比较 声明与赋值 var声明的变量是可以重新赋值的,也可以重复声明 let和const声明 ...

  2. ES6笔记(5)-- Generator生成器函数

    系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还 ...

  3. ES6笔记系列

    ES6,即ECMAScript 6.0,ES6的第一个版本是在2015年发布的,所以又称作ECMAScript 2015 如今距ES6发布已经一年多的时间,这时候才去学,作为一个JSer,羞愧羞愧,还 ...

  4. ES6笔记(1) -- 环境配置支持

    系列文章 -- ES6笔记系列 虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度 ...

  5. ES6笔记(2)-- let的块级作用域

    系列文章 -- ES6笔记系列 一.函数级作用域 我们都知道,在ES6以前,JS只有函数级作用域,没有块级作用域这个概念 没有块级作用域,有利有弊,利于方便自由,弊于作用域内的变量容易被共享,例如这个 ...

  6. ES6笔记(3)-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

  7. ES6笔记(4)-- Symbol类型

    系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...

  8. ES6笔记(6)-- Set、Map结构和Iterator迭代器

    系列文章 -- ES6笔记系列 搞ES6的人也是够无聊,把JS弄得越来越像Java.C++,连Iterator迭代器.Set集合.Map结构都出来了,不知道说什么好... 一.简单使用 1. iter ...

  9. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

随机推荐

  1. looping through multiple lists

    map: 最大长度输出: zip: 最短输出: third: 有序排列: a = ['a1', 'a2', 'a3'] b = ['b1', 'b2'] print "Map:" ...

  2. acwing 239. 奇偶游戏 并查集

    地址  https://www.acwing.com/problem/content/241/ 小A和小B在玩一个游戏. 首先,小A写了一个由0和1组成的序列S,长度为N. 然后,小B向小A提出了M个 ...

  3. 0016 CSS 背景:background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

  4. 开启 Django 博客的 RSS 功能

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 博客提供 RSS 订阅应该是标配,这样读者就可以通过一些聚合阅读工具订阅你的博客,时 ...

  5. leetcode.1266访问所有点的最小时间

    平面上有 n 个点,点的位置用整数坐标表示 points[i] = [xi, yi].请你计算访问所有这些点需要的最小时间(以秒为单位). 你可以按照下面的规则在平面上移动: 每一秒沿水平或者竖直方向 ...

  6. Java日志体系居然这么复杂?——架构篇

    本文是一个系列,欢迎关注 日志到底是何方神圣?为什么要使用日志框架? 想必大家都有过使用System.out来进行输出调试,开发开发环境下这样做当然很方便,但是线上这样做就有麻烦了: 系统一直运行,输 ...

  7. wechat+项目开源分享 - 让你的微信账号有趣起来

    WeChat+ 如果你曾经有过以下的问题或者需求,那么这篇分享很适合你: 苦于手机存储不够,但是又不敢随便删微信的消息,只能小心翼翼的清理: 酷炫沙雕表情包制作,比如把几句话融入到王静泽-真香的表情包 ...

  8. 假设检验的Python实现

    结合假设检验的理论知识,本文使用Python对实际数据进行假设检验. 导入测试数据 从线上下载测试数据文件,数据链接:https://pan.baidu.com/s/1t4SKF6U2yyjT365F ...

  9. Go Web 编程之 Hello World

    概述 计划写一个讲 Go Web 编程的系列文章.从基于 net/http 包编写 Go Web 程序开始,讲述处理器,请求,响应等基础知识.然后到框架的使用.中间会穿插一些源码的分析.最后做一个实战 ...

  10. HTML 图片(image) 左右滑动

    1.需求 需要用简单动画的形式将一组图片进行展示,图片数量不固定 2.效果如下: 3.思路 说到动画,首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧,然后 ...