es6常用的语法,和不得不知的es6小技巧

原创 黎云锐 教程 前端 410阅读 7 天前 举报

1. 强制要求参数

ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数。
在下面的例子中,我们写了一个required()函数作为参数a和b的默认值。这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误。

2. 强大的reduce

数组的reduce方法用途很广。它一般被用来把数组中每一项规约到单个值。但是你可以利用它做更多的事。

2.1 使用reduce同时实现map和filter

假设现在有一个数列,你希望更新它的每一项(map的功能)然后筛选出一部分(filter的功能)。如果是先使用map然后filter的话,你需要遍历这个数组两次。
在下面的代码中,我们将数列中的值翻倍,然后挑选出那些大于50的数。有注意到我们是如何非常高效地使用reduce来同时完成map和filter方法的吗?

2.2 使用reduce取代map和filter

如果你认真阅读了上面的代码,你应该能理解reduce是可以取代map和filter的。

2.3 使用reduce匹配圆括号

reduce的另外一个用途是能够匹配给定字符串中的圆括号。对于一个含有圆括号的字符串,我们需要知道(和)的数量是否一致,并且(是否出现在)之前。
下面的代码中我们使用reduce可以轻松地解决这个问题。我们只需要先声明一个counter变量,初值为0。在遇到(时counter加一,遇到)时counter减一。如果左右括号数目匹配,那最终结果为0。

var cars = [``'BMW'``,``'Benz'``, 'Benz'``, 'Tesla'``, 'BMW'``, 'Toyota'``];
var carsObj = cars.reduce(``function (obj, name) {
obj[name] = obj[name] ? ++obj[name] : 1;
return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

let {_internal, tooBig, ...cleanObject} = {el1: '1'``, _internal:``"secret"``, tooBig:{}, el2: '2'``, el3: '3'``};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

var car = {
model: 'bmw 2018'``,
engine: {
v6: true``,
turbo: true``,
vin: 12345
}
}
const modelAndVIN = ({model, engine: {vin}}) => {
console.log(model: ${model} vin: ${vin});
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...``new Set(arr)] // [1, 2, 3]

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

async function getFullPost(){
return await Promise.all([
fetch(``'/post'``),
fetch(``'/comments'``)
]);
}
const [post, comments] = getFullPost();
欢迎加入全栈开发交流划水交流圈:582735936
面向划水1-3年前端人员
帮助突破划水瓶颈,提升思维能力

function test() {
if``(``true``) {
console.log(a)``//TDZ,俗称临时死区,用来描述变量不提升的现象
let a = 1
}
}
test() // a is not defined
function test() {
if``(``true``) {
let a = 1
}
console.log(a)
}
test() // a is not defined

function test() {
if``(``true``) {
let a = 1
console.log(a)
}
}
test() // 1
欢迎加入全栈开发交流划水交流圈:582735936
面向划水1-3年前端人员
帮助突破划水瓶颈,提升思维能力

const type = {
a: 1
}
type.a = 2 //没有直接修改type的值,而是修改type.a的属性值,这是允许的。
console.log(type) // {a: 2}

for``(``var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i) //5, 5, 5, 5, 5
}, 0)
}
console.log(i) //5 i跳出循环体污染外部函数
//将var改成let之后
for``(let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i) // 0,1,2,3,4
}, 0)
}
console.log(i)``//i is not defined i无法污染外部函数

var mySymbol=Symbol();
console.log(``typeof mySymbol) //"symbol"

// 以前的多行字符串我们这么写:
console.log(``"hello world 1\n\
hello cala"``);
// "hello world
// hello cala"
//有了模板字符串之后
console.log(hello world string text line 2);
// "hello world
// hello cala"

var name=``"cala"``;
var age=22;
console.log(hello,I'am ${name},my age is ${age}`)` `//hello,I'am cala,my age is 22 includes(str, index):如果在字符串中检测到指定文本,返回true,否则false let t =`'abcdefg'
if``(t.includes(``'cde'``)) {
console.log(2)
}
//true
startsWith(str, index):如果在字符串起始部分检测到指定文本,返回``true``,否则返回``false``。
let t = 'abcdefg'
if``(t.startsWith(``'ab'``)) {
console.log(2)
}
//true
endsWith(str, index):如果在字符串的结束部分检测到指定文本,返回``true``,否则返回``false``。
let t = 'abcdefg'
if``(t.endsWith(``'fg'``)) {
console.log(2)
}
//true

function a(num, callback) {
num = num || 6
callback = callback || function (data) {console.log(``'ES5: '``, data)}
callback(num * num)
}
a() //ES5: 36,不传参输出默认值
//你还可以这样使用callback
a(10, function``(data) {
console.log(data * 10) // 1000, 传参输出新数值
})

function a(num = 6, callback = function (data) {console.log(``'ES6: '``, data)}) {
callback(num * num)
}
a() //ES6: 36, 不传参输出默认值
a(10, function``(data) {
console.log(data * 10) // 1000,传参输出新数值
})

const arr = [5, 10]
const s = arr.reduce((sum, item) => sum + item)
console.log(s) // 15

const s = a => a
cosole.log(s(2)) // 2

//ES5普通函数
function Man(){
this``.age=22;
return function``(){
this``.age+1;
}
}
var cala=``new Man();
console.log(cala())``//undefined
//ES6箭头函数
function Man(){
this``.age=22;
return () => this``.age+1;
}
var cala=``new Man();
console.log(cala())``//23

//没有arguments
var foo=(a,b)=>{``return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
//没有原型
var Obj = () => {};
console.log(Obj.prototype);
// undefined
//不能使用new 关键字
var Obj = () => {``"hello world"``};
var o = new Obj();
// TypeError: Obj is not a constructor

const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]

//新型尾优化写法
"use strict"``;
function a(n, p = 1) {
if``(n <= 1) {
return 1 * p
}
let s = n * p
return a(n - 1, s)
}
//求 1 x 2 x 3的阶乘
let sum = a(3)
console.log(sum) // 6

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };
var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
欢迎加入全栈开发交流划水交流圈:582735936
面向划水1-3年前端人员
帮助突破划水瓶颈,提升思维能力

let set = new Set()
// Set转化为数组
let arr = Array.from(set)
let arr = [...set]
// 实例属性(继承自Set)
set.constructor === Set
set.size
// 操作方法
set.add(1) // 添加一个值
set.``delete``(1) //删除一个值
set.has(1) //判断是否有这个值(Array中的indexOf)
set.clear() //清除所有值
// 获取用于遍历的成员方法(Set的遍历顺序就是插入顺序)
set.keys() // 返回键名的遍历器
set.values() // 返回键值得遍历器
set.entries() // 返回键值对的遍历器
set.forEach() // 循环遍历每个值(和Array的方法一致)
for (let key of set.keys()){}
for (let val of set.values()){}
for (let entry of set.entries()){}
// 使用数组方法来处理set值
set = new Set(arr)
set = new Set([...set].map((x) => x = x * 2))
set = new Set([...set].filter((x) => x > 2))

let map = new Map()
// 实例属性(继承自Map)
map.constructor === Map
map.size
// 操作方法
map.set(1,2)
map.get(1)
map.``delete``(1)
map.has(1)
map.clear()
// 遍历方法
map.keys()
map.values()
map.entries()
map.forEach()
// Map和数组的转换
map = new Map([[``'key'``,``'val'``],[2,1]]) // 要求双成员数组
let arr = [...map]
// 值得注意的是Map的键是跟内存绑定的
map.set([1], 's'``)
map.get([1])
let arr = [1]
let arr1 = [1]
map.set(arr, 's'``)
map.get(arr)
map.set(arr1, 's'``)
map.get(arr1)

//数组
const arr = [``'a'``, 'b'``, 'c'``];
for``(let v of arr.entries()) {
console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']
//Set
const arr = new Set([``'a'``, 'b'``, 'c'``]);
for``(let v of arr.entries()) {
console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']
//Map
const arr = new Map();
arr.set(``'a'``, 'a'``);
arr.set(``'b'``, 'b'``);
for``(let v of arr.entries()) {
console.log(v)
}
// ['a', 'a'] ['b', 'b']

//数组
const arr = [``'a'``, 'b'``, 'c'``];
for``(let v of arr.values()) {
console.log(v)
}
//'a' 'b' 'c'
//Set
const arr = new Set([``'a'``, 'b'``, 'c'``]);
for``(let v of arr.values()) {
console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set(``'a'``, 'a'``);
arr.set(``'b'``, 'b'``);
for``(let v of arr.values()) {
console.log(v)
}
// 'a' 'b'

//数组
const arr = [``'a'``, 'b'``, 'c'``];
for``(let v of arr.keys()) {
console.log(v)
}
// 0 1 2
//Set
const arr = new Set([``'a'``, 'b'``, 'c'``]);
for``(let v of arr.keys()) {
console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set(``'a'``, 'a'``);
arr.set(``'b'``, 'b'``);
for``(let v of arr.keys()) {
console.log(v)
}
// 'a' 'b'

const obj = {
a: 1,
b: 2,
*[Symbol.iterator]() {
for``(let i in obj) {
yield [i, obj[i]]
}
}
}
for``(let [key, value] of obj) {
console.log(key, value)
}
// 'a' 1, 'b' 2

const str = 'abc'``;
for``(let v of str) {
console.log(v)
}
// 'a' 'b' 'c'

const arr = [1, "2"``, 3, 3, "2"``]
console.log(arr.find(n => typeof n === "number"``)) // 1

const arr = [1, "2"``, 3, 3, "2"``]
console.log(arr.findIndex(n => typeof n === "number"``)) // 0

arr.fill(value, start, end)

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替换成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为 1,所以4, 5被替换成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,结束位置为2,所以4被替换成2

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复