阮一峰ES6学习笔记
1. let和const
1.let 和 const不存在变量提升问题;
2.let 负责定义变量、const 负责定义常量;
3.二者在同一作用域内(即{}内) 不允许重复声明同一变量名;
4.const 声明后需立即赋值,不然会报错;
5.使用lett定义变量时,该变量不允许使用,此区间称为 暂存性死区
// 暂存性死区
if (true) {// TDZ开始tmp = 'abc'; // ReferenceErrorconsole.log(tmp); // ReferenceErrorlet tmp; // TDZ结束console.log(tmp); // undefinedtmp = 123;console.log(tmp); // 123
}
上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”
注意:“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
typeof x; // ReferenceError
let x;
上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError。
2.es6声明变量的6种方式
var(es5)、function(es5)、const、let、class、import
// var命令和function命令声明的全局变量,依旧是顶层对象的属性,
// let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性;
// 顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象
// 顶层对象 可以通过this 获取到
const a = 5;
var b = 6;
console.log(this.a) // undefind
console.log(this.b) // 6
3.解构赋值
1.可以从数组或对象中提取内容,并支持赋初始值操作,可以避免初始值为空导致的报错问题
const [a, b, c] = [1,2,3] // 1, 2, 3
const obj = {name:'jack', age:'23'}
const {name, age, id} = obj// name = jack, age = 23, id = undefined 此时id为undefined,如实际开发中若没做非空判断可能会报错,可以通过赋默认值的方式避免这个错误const {name, age, id = '1' } = obj // name = jack, age = 23, id = '1'
2.若等号右侧是不可遍历的数据解构,进行解构会报错
const [a] = 1 \ true\ false \ {} \ undfined \ NaN \ null
3.对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
实际应用:若解构变量名,已经定义过,可使用重新命名的方式进行处理
4.字符串也可以进行解构赋值,此时字符串被转换成一个类数组的对象
const [aa,bb,cc] = 'javaScript' // j a v
4.字符串扩展及新增方法
1.for…of 遍历字符串
const str = 'hello Worde'for (let i of str){log(i)}//h e ll o W o r d e
2.模版字符串 ${},支持运算表达式
const name = 'jack'
const age = '23
`hello ${name},age${age}`
const x =1
const y =2
`re=${x+y}`
3.方法
1.传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置
使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
let s = 'Hello world!';s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // trues.endsWith('Hello', 6) // false
s.includes('Hello', 6) // false
2.repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次
参数如果是小数,会被取整
如果repeat的参数是负数或者Infinity,会报错
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""'na'.repeat(2.9) // "nana"'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
3.padStart(),padEnd()
padStart()用于头部补全,padEnd()用于尾部补全
padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串
如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串
'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab''xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx''x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
4.trimStart(),trimEnd()
trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串,对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效
const s = ' abc ';s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
函数的扩展
1.允许形参设置默认值 (es5不支持、es6新增)
参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的(参数p的默认值是x + 1。这时,每次调用函数foo,都会重新计算x + 1,而不是默认p等于 100)
function test(x, y = '2'){}let x = 99;
function foo(p = x + 1) {console.log(p);
}
foo() // 100
x = 100;
foo() // 101
2.作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的(参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2)
var x = 1;
function f(x, y = x) {console.log(y);
}
f(2) // 2
3.箭头函数
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
总结:任何情况下,箭头函数的this跟外层function的this一致,外层function的this指向谁,箭头函数的this就指向谁,如果外层不是function则指向window。
var code = 'java'test = () => {const code ='go'console.log('====>code',this.code)} test() // javanewTest = {code: 'python',testFuc:function(){const out = () => {console.log(this.code)}out()}}newTest.testFuc() // python
扩展运算符
1.扩展运算符后可用表达式
2.如果扩展运算符后面是一个空数组,则不产生任何效果
3.只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错
4.找出数组中的最大值
5.通过push函数,将一个数组添加到另一个数组的尾部
6.扩展运算符还可以将字符串转为真正的数组。
1. const arr = [...(x > 0 ? ['a'] : []),'b',
]2. [...[], 1]
// [1]3. (...[1, 2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1 24. const arr = [1,2,3,5]const max =Math.max(...arr) // 55. let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);6. [...'hello']
// [ "h", "e", "l", "l", "o" ]
数组&对象
1.Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map);Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
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], (x) => x * x)
// [1, 4, 9]
2.Array.of方法用于将一组值,转换为数组,这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
3.数组实例的 entries(),keys() 和 values()
for (let index of ['a', 'b'].keys()) {console.log(index);
}
// 0
// 1for (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"
4.flat 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数,如果原数组有空位,flat()方法会跳过空位
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3][1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
5.Object.is()它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致
不同之处只有两个:一是+0不等于-0,二是NaN等于自身。
+0 === -0 //true
NaN === NaN // falseObject.is(+0, -0) // false
Object.is(NaN, NaN) // true
阮一峰ES6学习笔记相关推荐
- 《ES6》(阮一峰)学习笔记
一.简介 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现 各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/compa ...
- 【ES6】阮一峰ES6学习之Class(一)
Class的基本用法 1. 类的由来 2. constructor() 方法 3. 类的实例 4. 取值函数(getter)和存值函数(setter) 5. 静态方法 6. 私有方法和私有属性 7. ...
- 【ES6】阮一峰ES6学习(四) 对象的扩展
对象的扩展 1. 属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; ...
- 【ES6】阮一峰ES6学习之迭代器和for...of循环
迭代器和for...of循环 1. 迭代器 1. 概念 2. 工作原理 3. 默认 Iterator 接口 4. 调用 Iterator 接口的场合 (1)解构赋值 (2) 扩展运算符 (3) yie ...
- 【ES6】阮一峰ES6学习(一) let、const、解构赋值
let 和 const 命令 1. let 概念:块级作用域. 不存在变量提升:在声明变量前使用该变量,会报错. 暂时性死区:形成了封闭作用域,在代码块内,使用let声明变量之前,该变量都是不可用的. ...
- 【ES6】阮一峰ES6学习之Promise(一)
Promise 一.含义 1. 概念 2. 特点 3. 基本用法 4. 为什么要用 Promise 1. 指定回调函数的方式更加灵活 2. 支持链式调用,可以解决回调地狱的问题 用Promise实现A ...
- 【ES6】阮一峰ES6学习之Module的加载实现
Module的加载实现 1. 浏览器加载 传统方法 加载规则 ES6 模块与 CommonJS 模块的差异 1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. 2. Co ...
- 【ES6】阮一峰ES6学习之编程风格
编程风格 1. 块级字符串 1. let 取代 var 2. 全局常量和线程安全 2. 字符串 3. 解构赋值 4. 对象 5. 数组 6. 函数 7. Map 结构 8. Class 9. 模块 1 ...
- 【ES6】阮一峰ES6学习之Module的语法
Module的语法 1. 前言 2. 严格模式 3. export命令 4. import命令 5. 模块的整体加载 6. export default 命令 7. export 与 import 的 ...
- 【ES6】阮一峰ES6学习之Generator 函数(一)
Generator 1. 概念 2. yield表达式 1. 概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. Generator 函数有多种理解角度 ...
最新文章
- pigcms 标签读不出
- oracle中database,Oracle Database 一些基本的视图和表
- java客户端操作zookeeper:对某个节点进行持续监听代码示例
- 【单词】常见单词含义的辨异(emulator/simulator、hardware/firmware)
- hadoop学习;安装jdk,workstation虚拟机v2v迁移;虚拟机之间和跨物理机之间ping网络通信;virtualbox的centos中关闭防火墙和检查服务启动...
- 试图用Session Administration删除某用户的session时报错
- 【文献学习】矩阵投影
- 【自动驾驶】武汉全球首发自动驾驶商用牌照,无人驾驶的梦想照进现实?
- python操作系统课程设计_操作系统课程设计.pdf
- Matlab:批量文件命名
- Kernel Method核方法—基本概念
- SVN安装后创建仓库、用户、上传代码
- 没事不要在for循环期间增减迭代序列的成员
- 斯坦福与苹果基于Apple Watch检测心率异常,0.5%人群被检出,其中84%患有房颤...
- bat脚本监控tomcat并启动_windows使用批处理发布web到tomcat并启动tomcat脚本分享
- win10安装wsl2和图形化界面
- bulk interface驱动_【驱动】USB驱动·入门
- (原博客转移)诺基亚手机成板砖无法开机后,强刷修复手机系统的方法!本人亲测
- 【video】视频压缩编码和音频压缩编码的基本原理
- Ubuntu18.04安装GPU显卡驱动