ES6学习笔记

数据类型:Number, String, Boolean, array , tuple,enum,any,Null, Undefined, Object, void, never

扩展运算符...

数据结构:Array, Set, Map

装饰器是一种函数,写成@ + 函数名

类的装饰:

@testable

class MyTestableClass {

// ...

}

let rand = Math.floor(Math.random() * (max - min + 1) + min)

this.bar2Lbl.string = `sprite进度条:${this.progress2.fillRange.toFixed(2)}`

解构赋值:let [a, b, c] = [1, 2, 3]; //a=1,b=2,c=3

Set结构也可以解构赋值:let [x, y, z] = new Set(['a', 'b', 'c']);

let 和var的区别:

let是块级作用域,同一作用域内,let 不能重复声明

var是函数级作用域,可以重复声明,存在变更提升

x > 0 ? 1 : 2

剩余参数:...rest

模块:

import { func1, func2 } from 'moduleA';

解构赋值:交换2个数值:

let x = 1;

let y = 2;

[x, y] = [y, x];

console.log(x,y) //2, 1

---------Set, Map-------

Set类似于数组,但是成员的值都是唯一的,没有重复的值。

const set = new Set([1, 2, 3, 4, 4]);

Set中两个对象总是不相等的,Set属性有:size,add,delete,has,clear

s.add(1).add(2).add(2);

4个遍历Set的方法:keys(),values(),entries(),forEach()

for (let item of set.entries()) {

console.log(item[0]);

}

Set 结构的键名就是键值,2个是一样的:

let set = new Set([1, 4, 9]);

set.forEach((value, key) => console.log(key + ' : ' + value))

使用...去除重复元素:

let arr = [3, 5, 2, 2, 5, 5];

let unique = [...new Set(arr)];

遍历并改变原Set里的值:

let set = new Set([1, 2, 3]);

set = new Set(Array.from(set, val => val * 2)); // set的值是2, 4, 6

使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference):

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

filter:数组过滤

let arr = [1,3,9,6,2,8,5,7,4]

let newArr = arr.filter(a => a > 5) //6, 8, 7, 9

reduce:对数组中的元素累加或累乘,并返回结果。2个参数:当前累计值,当前元素

let arr = [1,3,5]

let sum = arr.reduce((total, item)=>total + item) //9

// 并集

let union = new Set([...a, ...b]);

// Set {1, 2, 3, 4}

// 交集

let intersect = new Set([...a].filter(x => b.has(x)));

// set {2, 3}

// (a 相对于 b 的)差集

let difference = new Set([...a].filter(x => !b.has(x)));

// Set {1}

Map:set(key, value),get(key),has(key),delete(key),clear()

let map = new Map()

.set(1, 'a')

.set(2, 'b')

.set(3, 'c');

遍历Map:

for (let key of map.keys()) {

console.log(key);

}

for (let value of map.values()) {

console.log(value);

}

for (let item of map.entries()) {

console.log(item[0], item[1]); //key, value

}

map.forEach(function(value, key, map) {

console.log("Key: %s, Value: %s", key, value);

});

Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)

const map = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

[...map.keys()] // [1, 2, 3]

[...map.values()] // ['one', 'two', 'three']

[...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']]

[...map] // [[1,'one'], [2, 'two'], [3, 'three']]

结合数组的map方法、filter方法,可以实现 Map 的遍历和过滤:

const map0 = new Map().set(1, 'a').set(2, 'b').set(3, 'c');

const map1 = new Map(

[...map0].filter(([k, v]) => k < 3)

);

---------string字符串--------

repeat方法返回一个新字符串,表示将原字符串重复n次。s.repeat(3) //sss

字符串补全长度:第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

'x'.padStart(5, 'ab') //"ababx"

'x'.padEnd(5, 'ab') //"xabab"

'abc'.padStart(10, '0123456789') //0123456abc

消除空格:trim(),trimStart(),trimEnd()

const s = ' abc '

trim(s) //"abc"

//实例方法:at()

const str = 'hello';

str.at(1) // "e"

str.at(-1) // "o"

---------string字符串 end--------

tt.toFixed(2):保留2位小数,会四舍五入

Number.isFinite(),用来检查一个数值是否为有限的,如果参数类型不是NaN,Number.isNaN一律返回false。

isFinite(25) // true

isFinite("25") // true

Number.isFinite(25) // true

Number.isFinite("25") // false

Number.parseInt('12.8') //12 不会四舍五入

Number.parseFloat('123.68#') // 123.68

Number.isInteger(25.1) // false //isInteger用来判断一个数值是否为整数,如果对数据精度的要求较高,

不建议使用Number.isInteger()判断一个数值是否为整数。

-----------------Math start------------

Math.trunc方法用于去除一个数的小数部分,返回整数部分, 不会四舍五入。

Math.trunc(4.9) // 4

Math.sign方法用来判断一个数到底是正数、负数、还是零。

Math.sign(-5) // -1

Math.sign(5) // +1

Math.sign(0) // +0

Math.sign(-0) // -0

Math.sign(NaN) // NaN

Math.max(...[14, 3, 77]) //取最大值

rest 参数只能最后一个参数,否则会报错。function(a, ...b)

-----------------Math end------------

箭头函数:()=>

如果箭头函数直接返回一个对象,必须在对象外面加上括号.

// 普通函数写法

var result = values.sort(function (a, b) {

return a - b;

});

// 箭头函数写法

var result = values.sort((a, b) => a - b);

var sum = (num1, num2) => { return num1 + num2; }

-----------------数组Array start------------

Math.max(...[14, 3, 77]) //77

arr1.push(...arr2) //将arr2添加到arr1的尾部

数组的拷贝:使用...扩展运算符, 改变a2不会改变a1里的值

const a1 = [1, 2];

// 写法一

const a2 = [...a1];

// 写法二

// const [...a2] = a1;

数组合并:[...a1, ...a2, ...a3],a1.concat(a2).concat(a3) 注意:这2个方法都是浅拷贝,改变a1的值也会同步到a2

扩展运算符还可以将字符串转为真正的数组:[...'hello'] // [ "h", "e", "l", "l", "o" ]

Array.from():转为真正的数组

let arr = [1,2,3]

let newArr = Array.from(arr, (n) => n+1) //[2, 3, 4]

Array.of()总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

Array() // []

Array(3) // [, , ,]

Array(3, 11, 8) // [3, 11, 8]

以上3个,只有当参数个数大于 2 个时,Array()才会返回由参数组成的新数组,否则返回数组的长度。

用Array.of()可解决上面的问题。

find(),findIndex(),findLast(),findLastIndex() 方法:

[1, 4, -5, 10, -8].find((n) => n < 0) // -5

findIndex()返回的是位置

参数依次为当前的值、当前的位置和原数组。

[1, 5, 10, 15].find(function(value, index, arr) {

if(value > 5){

console.log(value)

}

}) // 10,15

fill方法使用给定值,填充一个数组,有3个参数:给定值,用于指定填充的起始位置,结束位置。

['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

['a', 'b', 'c'].fill(7) // [7, 7, 7]

entries(),keys() 和 values():

let arr = ['a', 'b']

for (let index of arr.keys()) { }

for (let elem of arr.values()) { }

for (let [index, elem] of arr.entries()) {

console.log(index, elem);

}

includes:某个数组是否包含给定的值:要查找的值,查找的起始位置

[1, 2, 3].includes(2) // true

[1, 2, 3].includes(3, 3); // false

Map 和 Set 数据结构有一个has方法:Map.has(value),Set.has(value)

flat() 拉平数组,默认拉平1层

[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]

const arr = [5, 12, 8, 130, 44];

arr.at(2) // 8

arr.at(-2) // 130

-----------------数组Array end------------

对象:Object.keys(),Object.values(),Object.entries()

const obj = { 100: 'a', 2: 'b', 7: 'c' };

Object.values(obj)

// ["b", "c", "a"] values的key会从小到大遍历的

求次方:2 ** 3 = 8

join()方法可以将数组中的所有的元素放入到一个字符串内,并以指定的字符进行分割。

反转字符串:

let str = 'abc'

方法一 [...str].reverse().join('')

方法二 str.split('').reverse().join('') //cba

-----------Set-------------

去除数组的重复成员:

[...new Set(array)]

去除字符串里面的重复字符:

[...new Set('ababbc')].join('') // "abc"

//去除数组中重复值

const myArr = [1,3,2,6,2,6]

const mySet = new Set(myArr)

const finalArr = Array.from(mySet) //[1, 3, 2, 6]

方法二:

let arr = [3, 5, 2, 2, 5, 5];

let unique = [...new Set(arr)]; // [3, 5, 2]

let set = new Set([1, 2, 3, 4, 5]);

set = new Set([...set].filter(x => (x % 2) == 0)); // 返回Set结构:{2, 4}

let set = new Set([1, 2, 3]);

set = new Set([...set].map(x => x * 2)); // 返回Set结构:{2, 4, 6}

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

// 并集

let union = new Set([...a, ...b]); // Set {1, 2, 3, 4}

// 交集

let intersect = new Set([...a].filter(x => b.has(x)));

const finalArr = Array.from(intersect) // set {2, 3}

如果想在遍历操作中,同步改变原来的 Set 结构:

// 方法一

let set = new Set([1, 2, 3]);

set = new Set([...set].map(val => val * 2)); // set的值是2, 4, 6

// 方法二

let set = new Set([1, 2, 3]);

set = new Set(Array.from(set, val => val * 2)); // set的值是2, 4, 6

-----------Set end-------------

slice,split,splice :

slice(start, end) : 返回截取的部分,

"123456".slice(1,3);//返回 23

split:将字符串分割为数组

console.log("1234".split("")) //["1", "2", "3", "4"]

console.log("1234".split(",")) //["1234"] 如果split括号里加了字符就会全部连起来

splice:字符串截取

let arr = ['a','b','c','d']

arr.splice(1,2) // ["b", "c"]

Map 结构的has方法,是用来查找键名的

Set 结构的has方法,是用来查找值的

flat():拉平数组:

[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数:

[1, [2, [3]]].flat(Infinity) // [1, 2, 3]

如果原数组有空位,flat()方法会跳过空位

[1, 2, , 4, 5].flat() [1, 2, 4, 5]

let arr = [1,2,3,4]

let newArr = arr.flatMap((x) => [x * 2])

console.log(newArr) // [2, 4, 6, 8]

允许对数组进行操作时,不改变原数组,而返回一个原数组的拷贝:

toReversed(),toSorted(),toSpliced(),with()

arr.reverse() //数组反转

排序: a - b //从小到大排序 b - a //从大到小排序

let arr = [1,3,9,6,2,8,5,7,4]

arr.sort((a,b) => a - b) //1, 2, 3, 4, 5, 6, 7, 8, 9

冒泡排序:

let arr = [1,6,5,9,8,2,3,7,4,0]

let len = arr.length - 1

for(let i = 0;i < len;i++ ){

for(let j=0;j<len-i;j++)

if(arr[j]>arr[j+1]){

[arr[j], arr[j+1]]=[arr[j+1], arr[j]];

}

}

快速排序:

function qSort (arr) {

if (arr.length <= 1) { return arr }

const mVal = arr.shift() // 这是基准数,比这小的放左边数组, 比这大的放在右边

let [left, right] = [[], []]

arr.forEach(item => item > mVal ? left.push(item) : right.push(item))

return [...qSort(left), mVal, ...qSort(right)]

}

Module 的语法:export,import

import { stat, exists, readFile } from 'fs'; //stat=fs.stat

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名:

import { lastName as surname } from './profile.js';

------------------编程风格:------------------

let 取代 var

尽量用const [a, b, c] = [1, 2, 3];

const a = 'foobar';

const b = `foo${a}bar`;

const [first, second] = arr;

使用扩展运算符(...)拷贝数组:const itemsCopy = [...items];

使用 Array.from 方法,将类似数组的对象转为数组:const nodes = Array.from(foo);

立即执行函数可以写成箭头函数的形式

[1, 2, 3].map(x => x * x);

使用import取代require():import { func1, func2 } from 'moduleA';

相关推荐
小华同学ai2 分钟前
vue-office:Star 4.2k,款支持多种Office文件预览的Vue组件库,一站式Office文件预览方案,真心不错
前端·javascript·vue.js·开源·github·office
APP 肖提莫3 分钟前
MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)
java·前端·算法
爱学习的白杨树6 分钟前
MyBatis的一级、二级缓存
java·开发语言·spring
OTWOL11 分钟前
两道数组有关的OJ练习题
c语言·开发语言·数据结构·c++·算法
问道飞鱼15 分钟前
【前端知识】强大的js动画组件anime.js
开发语言·前端·javascript·anime.js
拓端研究室15 分钟前
R基于贝叶斯加法回归树BART、MCMC的DLNM分布滞后非线性模型分析母婴PM2.5暴露与出生体重数据及GAM模型对比、关键窗口识别
android·开发语言·kotlin
k093316 分钟前
vue中proxy代理配置(测试一)
前端·javascript·vue.js
Code成立16 分钟前
《Java核心技术I》Swing的网格包布局
java·开发语言·swing
傻小胖18 分钟前
React 脚手架使用指南
前端·react.js·前端框架
Auc2421 分钟前
使用scrapy框架爬取微博热搜榜
开发语言·python