1. 首页
  2. 文章中心
  3. es6

ES6学习笔记

90 阅读 0 评论
我是靠谱客的博主 自由黑裤，这篇文章主要介绍ES6学习笔记，现在分享给大家，希望可以做个参考。

Object对象方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 // 用变量做对象的键
let a = 'c'
let obj = {
[a]: 'b'
}
console.log(obj)// {c: "b"}
}
{
let obj = {a: 1, b: 2}
console.log(Object.keys(obj))// ["a", "b"]
console.log(Object.values(obj))// [1, 2]
console.log(Object.entries(obj))// [["a", 1], ["b", 2]]
for(let [a, b] of Object.entries(obj)) {
console.log(a, b)// a 1 b 2
}
}

Array对象方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
// 使用元素填充空数组
console.log(new Array(5).fill(0))// [0, 0, 0, 0, 0]
}
{
function foo(a, b, c) {
let argu = Array.from(arguments)// 将伪数组转换成数组(另外：[].slice.call(arguments)和[...arguments]也可以转换)
argu.forEach((val, key) => {
console.log(val)// 4 5 6
})
}
foo(4, 5, 6)
}
{
let arr = [4, 5, 6]
arr = arr.map((val, key) => {// 映射的使用
return val * 2
})
console.log(arr)// [8, 10, 12]
}
{
let arr = [4, 5, 6],
findVal = arr.find((val) => {// 寻找val大于4的值
return val > 4
}),
findIndex = arr.findIndex((val) => {// 寻找val大于4的值的下标
return val > 4
})
console.log(findVal, findIndex)// 5 1
}
{
// 在数组中寻找是否存在此值
let arr = [4, 5, 6]
console.log(arr.includes(5))// true
}
{
let a = 1,
d = 4
function fun(a, b = a, c = d) {// 注意作用域的范围
console.log(a, b, c)// 2 2 4
}
fun(2)
}

Math对象方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
// 0b开头用来表示一个二进制数
console.log(0b101)// 5
// 0o开头用来表示一个八进制数
console.log(0o101)// 65
}
{
// 判断一个数、字符串是负数、零、正数还是非数字
console.log(Math.sign(-5))// -1
console.log(Math.sign(0))// 0
console.log(Math.sign(5))// 1
console.log(Math.sign('-5'))// -1
console.log(Math.sign('hvb'))// NaN
}
{
// 求3次立方根
console.log(Math.cbrt(8))// 2
}

字符串方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
let str = 'logo.png',
a = str.includes('go'),// str是否包含'go'字符串
b = str.startsWith('lo'),// str是否以'lo'字符串开头
c = str.endsWith('.png')// str是否以'.png'字符串结尾
console.log(a, b, c)// true true true
}
{
let str = 'abc',
str2 = str.repeat(2)// 重复str字符串2次
console.log(str2)// abcabc
}
{
let str = '1',
a = str.padStart(2, '0')// 当str的长度不足2时，在前面自动补'0'
b = str.padEnd(2, '0')// 当str的长度不足2时，在后面自动补'0'
console.log(a, b)// 01 10
}
{
let month = `${(``+(new Date().getMonth()+1)).padStart(2, `0`)}月`// 获取当前月份，不足2位数时，自动补0
console.log(month)
}

解构赋值

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
// 数组解构
let a, b, rest
[a, b, c=3, ...rest] = [1, 2, 4, 5, 6]
console.log(a, b, c, rest)// 1 2 4 [5, 6]
}
{
// 对象解构
let a, b
({a, b: c} = {a: 1, b: 2})
console.log(a, b, c)// 1 undefined 2
}
{
let data = {
name: 'hvb',
course: [
{ title: 'chinese', score: 90 },
{ title: 'english', score: 80 }
]
}
for (let i = 0; i < data.course.length; i++) {
let { [i]: { title, score } } = data.course// 通过i来定位当前要解构的是数组的哪一项
console.log(title, score)// chinese 90 english 80
}
}
{
// 实现2个值的互换
let a = 1,
b = 2;
[a, b] = [b, a]
console.log(a, b)// 2 1
}
{
// 通过解构函数的参数方便赋值
function foo({a, b=2}) {
console.log(a, b)// 1 2
}
foo({a: 1})
}

默认参数

复制代码
1
2
3
4
5
6
7
8
9
// 检查参数是否必填
function check() {
throw new Error('该参数必填')
}
function foo(a=check(), b=2) {
console.log(a + b)
}
foo(1)// 3
foo()// 抛出错误

块级作用域{}

  • 块级作用域易犯错误

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 使用var声明变量
var funArr = []
for(var i=0; i<2; i++) {// var声明变量使i变量提升且由于循环，最终会变成2
funArr.push(function() {// 这里添加到数组中的匿名函数在执行的时候，拿到的i是变量提升的那个值
console.log(i)
})
}
funArr[0]()// 2
funArr[1]()// 2
// 使用let声明变量
let funArr2 = []
for(let j=0; j<2; j++) {// let声明变量，会在每次循环中都创建一个块作用域，这个块作用域中的i每次都能确定
funArr2.push(function() {// 这里添加到数组中的匿名函数在执行的时候，拿到的i是当前块作用域中的i
console.log(j)
})
}
funArr2[0]()// 0
funArr2[1]()// 1

  • es6中可以直接使用{}创建一个块级作用域

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    {
let a = 1
console.log(a)// 1
{
let a = 2
console.log(a)// 2
}
}

独一无二的值Symbol

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
let a = Symbol()
let b = Symbol()
let c = Symbol.for('e')// 用'e'来标记这个独一无二的值
let d = Symbol.for('e')
console.log(a==b, c==d)// false true
}
{
// 用Symbol做的键不会重复
let a = Symbol.for('abc')
let obj = {
[a]: 1,
abc: 2
}
console.log(obj)// {abc: 2, Symbol(abc): 1}
// 直接遍历obj无法得到Symbol类型的键
for(let key in obj) {
console.log(key)// abc
}
let symbol = Object.getOwnPropertySymbols(obj)// 通过这个方法只可以拿到Symbol数组，然后可以正常遍历
console.log(symbol)// [Symbol(abc)]
let all = Reflect.ownKeys(obj)// 通过这个方法可以拿到既包含普通的键又包含Symbol键的数组，然后可以正常遍历
console.log(all)// ["abc", Symbol(abc)]
}

新增数据结构set和map

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
 // 声明时直接传入数组，用来生成组员
let a = new Set([1, 2])
 // 通过add添加组员
a.add(3)
console.log(a)// Set(3) {1, 2, 3}
 // 通过has验证是否含有此组员
console.log(a.has(2))// true
 // 通过delete删除组员
a.delete(1)
console.log(a)// Set(2) {2, 3}
 // 通过clear清空组员
a.clear()
console.log(a)// Set(0) {}
 // 实例：数组去重
let arr = [1, 2, 3, 1]
let res = [...new Set(arr)]
console.log(res)// [1, 2, 3]
}
{
 // 声明时直接传入二维数组，用来生成组员
let a = new Map([[1, 2], [3, 4]])
 // 通过set添加组员
a.set('a', 'b')
console.log(a)// Map(3) {1 => 2, 3 => 4, "a" => "b"}
console.log(a.get(1))// 2
 // 通过has验证是否含有此组员
console.log(a.has(3))// true
}
{
 // obj set map作对比
let item = {a: 1},// 缓存的对象
obj = {},// 空对象(用来对比)
set = new Set(),// 空set(用来对比)
map = new Map()// 空map(用来对比)
 // 添加一个组员
obj.a = 1
set.add(item)
map.set('a', 1)
console.log(obj, set, map)// {a: 1} Set(1) {Object {a: 1}} Map(1) {"a" => 1}
 // 查看一个组员
console.log('a' in obj, set.has(item), map.has('a'))// true true true
 // 修改一个组员
obj.a = 2
item.a = 2
map.set('a', 2)
console.log(obj, set, map)// {a: 2} Set(1) {Object {a: 2}} Map(1) {"a" => 2}
 // 删除一个组员
delete obj.a
set.delete(item)
map.delete('a')
console.log(obj, set, map)// {} Set(0) {} Map(0) {}
 // 由此可看，map和set的操作比较方便，所以建议在开发过程中，优先使用map数据结构，如果数据要求唯一性，那么使用set，放弃使用传统的数组和对象
}

映射Reflect

复制代码
1
2
3
4
5
6
7
{
let obj = {a: 1}
console.log(Reflect.get(obj, 'a'))// 1
Reflect.set(obj, 'a', 2)
console.log(obj)// {a: 2}
console.log(Reflect.has(obj, 'a'))// true
}

对象代理new proxy()

  • 简单示例

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 原对象
let Person = {
name: 'hvb',
sex: 'male'
}
// 代理对象
let person = new Proxy(Person, {
get(target, key) {
return Reflect.get(target, key)// target[key]
},
set(target, key, value) {
if(key == 'sex') {
throw new Error('性别不允许修改')
}else {
return Reflect.set(target, key, value)
}
}
})
person.name = 'hwj'
console.log(person.name)// hwj
person.sex = 'female'// 抛出错误

  • 通过对象代理给类属性增加验证规则

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    // 创建验证代理
function createValidator(target, rule) {
return new Proxy(target, {
set(target, key, value) {
if(rule[key]) {
if(rule[key].validate(value)) {
return Reflect.set(target, key, value)
}else {
throw new Error(rule[key].message(key, value))
}
}else {
throw new Error(`属性${key}不存在`)
}
}
})
}
// 定义验证规则
let rule = {
age: {// 年龄只能为数字
validate(val) {
return /d/.test(val)
},
message(key, val) {
return `属性${key}是年龄，不能为${val}`
}
}
}
class Person {
constructor(name, age) {
this.name = name
this.age = age
return createValidator(this, rule)
}
}
let person = new Person('hvb', 22)
person.age = 12
console.log(person.age)// 12
person.age = 'qwe'// 抛出错误

类class

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
class Person {
constructor(name='hvb') {
this.name = name
}
// getter
get longName() {
return 'long '+ this.name
}
// setter
set longName(value) {
return this.name = value
}
// 静态方法
static say() {
console.log('I am '+ this.name)// I am Person
}
}
// 静态属性
Person.age = 22
let person = new Person()
console.log(person.longName)// long hvb
person.longName = 'hwj'
console.log(person.longName)// long hwj
Person.say()
}

import from (详见#12)

  • import和export需要babel编译之后才能在浏览器运行，如果不想这么麻烦配置编译器，也可以直接写<script type="module"></script>，这样可以直接在script标签里面正常使用
复制代码
1
2
import a from 'a.js';// node会在node_modules文件夹下寻找相应的模块
import a from './a.js;// node会在同级目录文件夹下寻找相应的模块

rest和spread使用的都是…，但是注意其区别 (详见#3)

Object.assign是浅拷贝 (详见#4)

  • 使用扩展运算符实现浅拷贝
复制代码
1
2
3
4
5
6
7
8
9
10
var obj1 = {
a: 1,
b: 2
}
var obj2 = {
a: 3,
c: 4
}
var obj = { ...obj1, ...obj2 }
console.log(obj)// {a: 3, b: 2, c: 4}
  • jquery深度拷贝extend方法封装
  • deep-assign

使用let重复声明同一个变量会报错 (详见#5)

箭头函数=>(lambda表达式) (详见#10)

  • this指向是不可改变的

    • 正常函数写法

      复制代码
      1
      2
      3
      4
      5
      var sex = 'male';
function Foo() {
console.log(this.sex);
}
Foo.call({sex: 'female'});// => female

    • 箭头函数写法

      复制代码
      1
      2
      3
      var sex = 'male';
var Foo = () => {console.log(this.sex)};
Foo.call({sex: 'female'});// => male // Foo的this指向全局，由于函数使用箭头函数写法，所以使用call无法改变this指向，依然输出male

  • 直接返回对象要加()

    复制代码
    1
    2
    var Foo = x => ({x: x});
console.log(Foo(2).x);// => 2

  • 箭头函数可以嵌套使用

    • 正常函数写法

      复制代码
      1
      2
      3
      4
      5
      6
      7
      8
      function A(a) {
return {
B: function(b) {
return a+b;
}
}
}
console.log(A(1).B(2));// => 3

    • 箭头函数写法

      复制代码
      1
      2
      var A = a => ({B: b => a+b});
console.log(A(1).B(2));// => 3

  • 函数简写 (详见#11)

    复制代码
    1
    2
    3
    4
    5
    6
    7
    var obj = {
sex: 'male',
say: () => {
console.log(this.sex);
}
}
obj.say();// => undefined // 箭头函数的this指向它定义时所在的作用域，即全局
    复制代码
    1
    2
    3
    4
    5
    6
    7
    var obj = {
sex: 'male',
say() {
console.log(this.sex);
}
}
obj.say();// => male // 简写函数的this指向对象obj本身

  • 其他

    • es6写法

      复制代码
      1
      2
      3
      4
      5
      6
      7
      8
      var sex = 'male',
age = 22,
say = function(a, b) {
return a+b;
};
var f1 = () => ({sex, age});
var f2 = () => (sex, age);
var f3 = () => (sex, age) => say(sex, age);

    • 编译成es5写法

      复制代码
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      var sex = 'male',
age = 22,
say = function say(a, b) {
return a + b;
};
var f1 = function f1() {
return { sex: sex, age: age };
};
var f2 = function f2() {
return sex, age;
};
var f3 = function f3() {
return function (sex, age) {
return say(sex, age);
};
};

      这里写图片描述

参考文章

[#1] shim和polyfill有什么区别
[#2] shim和polyfill有什么区别?
[#3] ES6 Rest参数
[#4] ES2015系列(二) 理解Object.assign
[#5] 在JavaScript ES6中使用let和const定义变量
[#6] ES6详解六：赋值语法糖 destructing & spread
[#7] ES6中新增的数据结构Set与Map
[#8] 深入解读JavaScript中的Iterator和for-of循环
[#9] ES6详解八：模块（Module）！
[#10] ES6中箭头函数的使用
[#11] es6对象方法简写?
[#12] 关于ES6的 模块功能 Module 中export import的用法和注意之处
[#13] babel的polyfill和runtime的区别
[#14] 触摸ES6 - 模板字符串

async/await流程控制

  • 给class添加异步方法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Foo {
log() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(111)
}, 1000)
})
}
async say() {
return await this.log()
}
}
let f = new Foo()
f.say()
.then(data => {
console.log(data)
})

  • promise化

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    var Promise = require('bluebird')
var async = Promise.promisifyAll(require('async'))
async.seriesAsync([(cb) => {
cb(null, 1)
}])
.then((data) => {
console.log(data, 11)
})

caolan/async
Async使用简介之流程控制
体验异步的终极解决方案-ES7的Async/Await

最后

以上就是自由黑裤最近收集整理的关于ES6学习笔记的全部内容，更多相关ES6学习笔记内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(60)

相关文章

对于 let _this = this的理解
对于 let _this = this的理解
如何理解 if let 与guard let
如何理解 if let 与guard let
Linux中let以及（（））与$（（））
Linux中let以及（（））与$（（））
Swift 基本语法-
Swift 基本语法-"if let"和"guard let"Swift 基本语法01-Swift简介
ES6学习笔记
ES6学习笔记
es6重要知识点总结
es6重要知识点总结
为什么let this=that
为什么let this=that
ES6的基本知识点ES6ES6的数据类型数组的解构ES6 字符串ES5 字符串
ES6的基本知识点ES6ES6的数据类型数组的解构ES6 字符串ES5 字符串

评论列表共有 0 条评论

立即
投稿
返回
顶部