ES6学习总结

最新推荐文章于 2023-02-01 18:05:34 发布

牛爷爷lxl

最新推荐文章于 2023-02-01 18:05:34 发布

阅读量503

点赞数 2

分类专栏： javascript 文章标签： es6

本文链接：https://blog.csdn.net/liuxilei66/article/details/79327761

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ES6学习总结

第一部分：let、const命令

作用域部分：

在es6之前，es5有两个作用域:全局作用域和函数作用域

function test() {
   for (var i = 1;i < 3;i++) {
       console.log(i);
   }
   console.log(i);
}
test(); //输出结果1 2 3

function test() {
   for (let i = 1;i < 3;i++) {
       console.log(i);
   }
   console.log(i);
}
test(); //报错:ReferenceError: i is not defined

es6的块级作用域 es6中一段代码是用{}包起来的，这个大括号里面就是一个块级作用域，在这个作用域里面声明的变量在这个外面就不存在了，可以理解成这个变量的生命周期结束了;es6中强制开启了严格模式, es5中”use strict”;来开启严格模式。

let、const部分：

let 声明变量不能再次声明

function test() {
   let a = 1;
   let a = 2;
}
test();//报错:Error:Duplicate declaration(重复声明)

const声明的常量是不能修改的

function test() {
   const PI = 3.1415926;
   PI = 8;
   console.log(PI);
}
test();//报错："PI" is read-only(PI是一个只读属性)

const声明时必须赋值

function test() {
   const PI;
   PI = 3.1415926;
}
//报错:Error:Unexpected token(代码不完整)

补充：const声明的常量是不能修改的，这句话不严谨
解释：

function test() {
    const PI = 3.1415926;
    const k = {
        a: 1
    }
    k.b = 3;
    console.log(PI,k);
}
test();

const声明的k对象是引用类型，返回值是对象存储内存中的指针，声明的k是指向对象中存储的指针，这个指针是不变的，但是对象本身是可变的。

第二部分：解构赋值

什么是解构赋值：
本质就是一种赋值，赋值操作符左边一种结构，右边一种结构，然后一一对应。
解构赋值的分类

数组解构赋值	对象解构赋值	字符串解构赋值
布尔值解构赋值	函数参数解构赋值	数值解构赋值

数组解构赋值（左右都是数组）、对象解构赋值（左右都是对象）、字符串解构赋值（左边是数组，右边是字符串）、布尔值解构赋值（对象解构赋值中的一种）、函数参数解构赋值（数组解构赋值在函数参数这里的应用）、数值解构赋值（对象解构赋值中的一种）

//数组解构赋值（常见）
let a,b,rest;
[a,b] = [1,2];
console.log(a,b);//1，2

let a,b,rest;
[a,b,...rest] = [1,2,3,4,5,6];
console.log(a,b,rest); //1，2，[3,4,5,6]

//对象解构赋值（常见）
let a,b;
({a,b} = {a: 1,b: 2}) //注意这里的括号
console.log(a,b); //1，2

数组解构赋值、对象解构赋值使用的基本方法、默认值和应用场景

//默认值
let a,b,c,rest;
[a,b,c = 3] = [1,2];
console.log(a,b,c); //1，2，3

let a,b,c,rest;
[a,b,c] = [1,2];
console.log(a,b,c); //1，2，undefined (默认值的设定就是为了放置这种情况)

数组解构赋值的应用场景：

//变量的交换
let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b); //2，1

//接收函数返回值 
function f() {
    return [1,2];
}
let a,b;
[a,b] = f();
console.log(a,b); //1，2

function f() {
    return [1,2,3,4,5];
}
let a,b;
[a,,,b] = f();
console.log(a,b); //1，4

function f() {
    return [1,2,3,4,5];
}
let a,b;
[a,,...b] = f();
console.log(a,b); /1，[3,4,5]

//对象解构赋值基本使用方法
let o = {p: 42,q: true}
let {p,q} = o;
console.log(p,q); //42，true
//默认值
let {a = 10,b = 5} = {a: 3};
console.log(a,b); //3，5

对象解构赋值应用场景

//模拟服务端给前端的JSON对象    
let metaData = {
    'title': 'abc',
    'test' : [{
        title: 'test',
        desc: 'description'
    }]
}
let {title: esTitle,test: [{title: cnTitle}]} = metaData;
console.log(esTitle,cnTitle);

第三部分：正则扩展

正则新增特性

构造函数的变化	正则方法的扩展	u修饰符
y修饰符	s修饰符

构造函数的变化

//es5创建正则的方式
let regex = new RegExp('xyz','i');
let regex2 = new RegExp(/xyz/i);
console.log(regex.test('xyz123'),regex2.test('xyz123'));//true true
//es6扩展的方式
let regex3 = new RegExp('/xyz/ig','i'); 
console.log(regex3.flags); //i

y修饰符

//y也是全局搜索
let s = 'bbb_bb_b';
let a1 = /b+/g;
let a2 = /b+/y;
console.log('one',a1.exec(s),a2.exec(s));   //one ["bbb", index: 0, input: "bbb_bb_b"] ["bbb", index: 0, input: "bbb_bb_b"]
console.log('two',a1.exec(s),a2.exec(s)); //two ["bb", index: 4, input: "bbb_bb_b"] null
//sticky判断是否带y修饰符
console.log(a1.sticky,a2.sticky); //false true

u修饰符

console.log('u-1',/^\uD83D/.test('\uD83D\uDC2A')); //u-1 true
console.log('u-2',/^\uD83D/u.test('\uD83D\uDC2A')); //u-2 false

console.log(/\u{61}/.test('a'));
console.log(/\u{61}/u.test('a'));

console.log(`\u{20BB7}`);

//待补充…

第四部分：字符串扩展

字符串新增特性

Unicode表示法	遍历接口
模板字符串	新增方法（10种）

Unicode表示方法

console.log('a',`\u0061`); //a a
console.log('s',`\u20BB7`); //乱码

console.log('s',`\u{20BB7}`);

let s = '?'; 
console.log('length',s.length);
console.log('0',s.charAt(0));
console.log('1',s.charAt(1));
console.log('at0',s.charCodeAt(0));
console.log('at1',s.charCodeAt(1));

let s1 = '?a';
console.log('length',s1.length);
console.log('code0',s1.codePointAt(0));
console.log('code0',s1.codePointAt(0).toString(16));
console.log('code1',s1.codePointAt(1));
console.log('code2',s1.codePointAt(2));

//理解怎么用就ok
console.log(String.fromCharCode('0x20bb7'));
console.log(String.fromCodePoint('0x20bb7'));

字符串遍历器接口

let str = '\u{20bb7}abc';
for (let i = 0;i < str.length;i++) {
    console.log('es5',str[i]);
}
//es5 乱码
//es5 乱码
//es5 a
//es5 b
//es5 c
for (let code of str) {
    console.log('es6',code);
}
//es6 吉
//es6 a
//es6 b
//es6 c

//判断字符串是否包含某个字符串，或者以某个字符串开始或结束的
let str = 'string';
console.log('includes',str.includes('c')); //includes false
console.log('start',str.startsWith('str')); //start true
console.log('end',str.endsWith('ng')); //end true

//把某个字符串重复两遍
let str = 'abc';
console.log(str.repeat(2)); //abcabc

模板字符串（很重要）

let name = 'list';
let info = 'hello world';
let m = `i am ${name},${info}`; 
console.log(m); //i am list,hello world

//es7草案
//补白
console.log('1'.padStart(2,'0')); //01
console.log('1'.padEnd(2,'0')); //10

//标签模板(很重要)
//作用：过滤html字符串，防止xss攻击;处理多语言转换，通过不同的return返回不同的语言
let user = {
    name: 'list',
    info: 'hello world'
};
console.log(abc`i am ${user.name},${user.info}`); 
function abc(s,v1,v2) {
    console.log(s,v1,v2);
    return s + v1 + v2;
}

//用的不多，了解即可 raw
console.log(String.raw`Hi\n${1+2}`); //Hi\n3
console.log(`Hi\n${1+2}`);
\\Hi
\\3

第五部分：数值扩展

数值处理新增特性

新增方法
方法调整

console.log(0b111110111); //503 (二进制)
console.log(0o767); //503 (八进制)

//使用频率不高，了解即可
console.log('15',Number.isFinite(15));  //15 true
console.log('NaN',Number.isFinite(NaN)); //NaN false
console.log('1/0',Number.isFinite('true'/0)); //1/0 false
console.log('NaN',Number.isNaN(NaN)); NaN true

//判断这个数是不是一个整数
console.log('25',Number.isInteger(25)); //25 true
console.log('25.0',Number.isInteger(25.0)); //25.0 true
console.log('25.1',Number.isInteger(25.1)); //25.1 false
console.log('25字符串',Number.isInteger('25')); //'25' false

console.log('最大上限:',Number.MAX_SAFE_INTEGER,'最小下限:',Number.MIN_SAFE_INTEGER);
console.log('10',Number.isSafeInteger(10)); //10 true
console.log('a',Number.isSafeInteger('a')); //a false

//取小数的整数部分(常用)
console.log('4.1',Math.trunc(4.1)); // 4.1 4
console.log('4.9',Math.trunc(4.9)); //4.9 4

//判断是否为正数、负数、0 返回值分别为1、-1、0
console.log('-5',Math.sign(-5)); //-5 -1
console.log('0',Math.sign(0)); //0 0
console.log('5',Math.sign(5)); //5 1
console.log('50',Math.sign('50'));//自动把'50'字符串转换为数值再进行判断 //'50' 1
console.log('foo',Math.sign('foo')); //foo NaN

//立方根
console.log('-1',Math.cbrt(-1)); //-1 -1
console.log('8',Math.cbrt(8)); //8 2

第六部分：数组扩展

数组新增特性

Array.from	Array.of	copyWithin
find\findIndex	fill	entries\keys\values
includes

//把一组数据转成数组
let arr = Array.of(3,4,7,9,11);
console.log('arr=',arr); //arr= [3,4,7,9,11]

let empty = Array.of();
console.log('empty',empty); //empty []

//Array.from:把一些伪数组、集合转换为真正的数组
let p = document.querySelectorAll('p');
let pArr = Array.from(p);
console.log(pArr);
pArr.forEach(function(item) {
    console.log(item.textContent);
})
//类似与map的作用
console.log(Array.from([1,3,5],function(item) {
    return item * 2;
}));

//填充数组
console.log('fill-7',[1,'a',undefined].fill(7)); //fill-7 [7,7,7]
console.log('fill,pos',['a','b','c'].fill(7,1,3)); //fill,pos ['a',7,7]

//遍历新方法
for (let index of ['1','c','ks'].keys()) {
    console.log('keys',index);
}
//keys 0
//keys 1
//keys 2
//要babel-polyfill，不然不支持
for (let value of ['1','c','ks'].values()) {
    console.log('values',value);
}
//values 1
//values c
//values ks
for (let [index,value] of ['1','c','ks'].entries()) {
    console.log('values',index,value);
}
//values 0 1
//values 1 c
//values 2 ks

//在当前数组内部把指定位置的成员复制到其他位置（使用场景不多，使用频率不高）
console.log([1,2,3,4,5].copyWithin(0,3,4)); //[4,2,3,4,5]

//查找 功能更强
console.log([1,2,3,4,5,6].find(function(item) {
    return item > 3;
})); //4（找到第一个满足条件的数组成员，不继续往后查找）
console.log([1,2,3,4,5,6].findIndex(function(item) {
    return item > 3;
})); //3 （找到第一个满足条件的数组成员，不继续往后查找，返回这个成员的索引位置）

//和find差不多的作用，不过实用效果更好,可以判断NaN
console.log('number',[1,2,NaN].includes(1)); //number true
console.log('number',[1,2,NaN].includes(NaN)); //number true

第七部分：函数扩展

函数新增特性

参数默认值	rest参数	扩展运算符
箭头函数	this绑定	尾调用

参数默认值

//默认值后面不能再有没有默认值的变量!!!
function test(x,y = 'world') {
    console.log('默认值',x,y);
}
test('hello'); //hello world
test('hello','kill'); //hello kill

与作用域相关的

let x = 'test';
function test2(x,y = x) {
    console.log('作用域',x,y);
}
test2('kill'); //作用域 kill kill
test2(); //作用域 undefined undefined

function test3(c,y = x) {
    console.log('作用域',c,y);
}
test3('kill'); //作用域 kill test

rest参数

function test4(...arg) {
    for (let v of arg) {
        console.log('rest',v);
    }
}
test4(1,2,3,4,'a'); 
//rest 1
//rest 2
//rest 3
//rest 4
//rest a

扩展运算符

console.log(...[1,2,4]); //1 2 4
console.log('a',...[1,2,4]); //a 1 2 4

箭头函数

//箭头函数注意this绑定
let arrow = v => v*2;
let arrow2 = () => 5;
console.log('arrow',arrow(3)); //arrow 6
console.log('arrow2',arrow2()); //arrow2 5

尾调用：好处（提升性能）

//存在于函数式编程
//函数的最后一句话是不是一个函数
function tail(x) {
    console.log('tail',x);
}
function fx(x) {
    return tail(x);
}
fx(123); //tail 123

第八部分：对象扩展

函数新增特性

简洁表示法	属性表达式
扩展运算符	Object新增方法

简洁表示法

let o = 1;
let k = 2;
let es5 = {
    o: o,
    k: k
};
let es6 = {
    o,
    k
}
console.log(es5,es6); //{k:2,o:1} {k:2,o:1}

let es5_method = {
    hello: function() {
        console.log('hello');
    }
};
let es6_method = {
    hello() {
        console.log('hello');
    }
};
es5_method.hello(); //hello
es6_method.hello(); //hello

属性表达式

let a = 'b';
let es5_obj = {
    a: 'c',
    b: 'c'
};
let es6_obj = {
    [a]: 'c'
};
console.log(es5_obj,es6_obj); {a:'c',b:'c'} {b:'c'}

//新增API
//is 判断两个值是否相等
console.log('字符串',Object.is('abc','abc'),'abc' === 'abc'); //true true
console.log('数组',Object.is([],[]),[] === []); //false false 注意数组是引用类型
//浅拷贝（只拷贝自身的属性，继承的不拷贝、还有不可枚举的属性也不拷贝）
console.log('拷贝',Object.assign({a: 'a'},{b: 'b'})); //{a:'a',b:'b'}

let test = {k: 123,o: 456};
for (let [key,value] of Object.entries(test)) {
    console.log([key,value]);
}
// ['k',123]
// ['o',456]

//babel不支持，实用性也用不到
//扩展运算符
let {a,b...c} = {a: 'test',b: 'kill',c: 'ddd',d: 'ccc'};
//c的值如下：
//c = {
//    c: 'ddd',
//    d: 'ccc'
//}

第九部分：Symbol

Symbol的概念

这种数据类型提供一个独一无二的值

Symbol的作用

//声明
let a1 = Symbol();
let a2 = Symbol();
console.log(a1 === a2); //false
//另一种声明方式
//这里a3是一个key值，用Symbol.for声明这个独一无二的值时会先去全局注册，如果注册过，返回那个值，如果没注册，则调用Symbol生成一个独一无二的值。
let a3 = Symbol.for('a3');
let a4 = Symbol.for('a3');
console.log(a3 === a4); //true

应用场景：

let a1 = Symbol.for('abc');
let obj = {
    [a1]: '123',
    'abc': 345,
    'c': 456
};
console.log('obj',obj); //obj {Symbol(abc):'123',abc:345,c:456}
//通过Symbol定义的属性，for in 和let of取不到该属性
for (let [key,value] of Object.entries(obj)) {
    console.log('let of',key,value);
}
// let of abc 345
// let of c 456
API:getOwnPropertySymbols获取到的是一个数组（只拿到Symbol类型的属性）
Object.getOwnPropertySymbols(obj).forEach(function(item) {
    console.log(obj[item]);
});
// 123
//取到所有属性，包括Symbol类型
Reflect.ownKeys(obj).forEach(function(item) {
    console.log('ownKeys',item,obj[item]);
});
//ownKeys abc 345
//ownKeys c 456
//ownKeys Symbol(abc) 123

第十部分：数据结构

Set的用法	WeakSet的用法
Map的用法	WeakMap的用法

Set的定义：

let list = new Set();
list.add(5);
list.add(7);
console.log('size',list.size); //size 2

let arr = [1,2,3,4,5];
let list = new Set(arr);
console.log('size',list.size); //size 5

//Set数据类型中元素必须唯一的
let list = new Set();
list.add(1);
list.add(2);
list.add(1);
console.log('list',list); //list  Set{1，2}

//去重
let arr = [1,2,3,1,'2'];
let list2 = new Set(arr);
console.log('unque',list2); //unque Set{1，2，3,'2'}

//Set的添加、删除、清空
let arr = ['add','delete','clear','has'];
let list = new Set(arr);
console.log('has',list.has('add')); //has true
console.log('delete',list.delete('add'),list); //delete true Set{"delete","clear","has"}
list.clear();
console.log('list',list); //list Set{}

//Set的遍历
let arr = ['add','delete','clear','has'];
let list = new Set(arr);

for (let key of list.keys()) {
    console.log('keys',key);
}
//keys add
//keys delete
//keys clear
//keys has
for (let value of list.values()) {
    console.log('values',value);
}
//values add
//values delete
//values clear
//values has
for (let [key,value] of list.entries()) {
    console.log('entries',key,value);
}
//entries add add
//entries delete
//entries clear
//entries has
list.forEach(function(item) {
    console.log(item);
});
//add
//delete
//clear
//has

WeakSet

//WeakSet中的元素只能是对象 对象都是弱引用，不会被垃圾回收机制检测
//没有size属性,没有clear方法，不能遍历
let weaklist = new WeakSet();
let arg = {};
weaklist.add(arg);
console.log('weakList',weaklist);//weakList WeakSet{Object{}}

Map

//Map的基本定义
var map = new Map();
let arr = ['123'];
map.set(arr,456);
console.log('map',map,map.get(arr)); //map Map{['123'] => 456} 456

//第二种定义方法
let map = new Map([['a',123],['b',456]]);
console.log('map',map); //map Map{"a" => 123,"b" => 456}
console.log('size',map.size); //size 2
console.log('delete',map.delete('a'),map); //delete true Map{"b" => 456}
console.log('clear',map.clear(),map); //clear undefined Map{}

遍历和Set一样

WeakMap

//接收的key值必须是对象，也没有size属性，没有clear方法，不能遍历
let weakmap = new WeakMap();
let o = {};
weakmap.set(o,123);
console.log(weakmap); //WeakMap {{…} => 123}
console.log(weakmap.get(o)); //123