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

相关推荐
Chh071518 分钟前
《R语言SCI期刊论文绘图专题计划》大纲
开发语言·r语言
Yeats_Liao20 分钟前
Go 语言 TCP 端口扫描器实现与 Goroutine 池原理
开发语言·tcp/ip·golang
Mikey_n28 分钟前
前台调用接口的方式及速率对比
前端
周之鸥34 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉39 分钟前
HTMLCSS模板实现水滴动画效果
前端·css·css3
Thomas_YXQ1 小时前
Unity3D IK解算器技术分析
开发语言·搜索引擎·unity·全文检索·unity3d·lucene
机器视觉知识推荐、就业指导1 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow1 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷1 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题