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';

相关推荐
JUNAI_Strive_ving6 分钟前
番茄小说逆向爬取
javascript·python
落落落sss10 分钟前
MybatisPlus
android·java·开发语言·spring·tomcat·rabbitmq·mybatis
看到请催我学习15 分钟前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
简单.is.good28 分钟前
【测试】接口测试与接口自动化
开发语言·python
twins352034 分钟前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
Yvemil71 小时前
MQ 架构设计原理与消息中间件详解(二)
开发语言·后端·ruby
程序员是干活的1 小时前
私家车开车回家过节会发生什么事情
java·开发语言·软件构建·1024程序员节
qiyi.sky1 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~1 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒1 小时前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od