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(item0);

}

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(item0, item1); //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(arrj>arrj+1){

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

}

}

快速排序:

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

相关推荐
萧戈18 小时前
c++条件变量的使用
开发语言·c++
问心无愧051318 小时前
ctf show web入门260
android·前端·笔记
之歆18 小时前
Day22_CSS 函数完全指南:从变量到数学计算的现代样式编程
开发语言·前端·javascript·css·tensorflow·less
lichenyang45318 小时前
#鸿蒙基础复盘:生命周期、启动链路、路由跳转与真实需求定位
前端
ZengLiangYi18 小时前
Prompt 工程:让 LLM 输出结构化 JSON
前端·javascript·后端
Asmewill18 小时前
LangGraph学习笔记四(Node和Edge)
前端
何乐乐18 小时前
【Taro 5.0 技术与实践】 - 高性能 iOS 渲染层与 TaroUI 跨端框架介绍
android·前端·ios
米丘18 小时前
React19.x 一个示例来看 Diff 算法
javascript·react.js
猩球中的木子18 小时前
什么是DNS解析
前端·vue.js·面试
Ticnix18 小时前
从零封装 Ollama AI 服务:TypeScript 流式对话工具开发
前端·ollama