码迷,mamicode.com
首页 > 其他好文 > 详细

es678910语法糖

时间:2019-12-14 09:48:37      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:value   res   intersect   语法糖   浅拷贝   text   author   总结   eject   

傲娇: 新es是js的进步,是编程的进步,es6已经过去了5年了,兼容率达到了90%,还是有10%的手机不兼容,那到底应不应该去照顾那些跟不上的人,我觉得是不应该的,新es能5行写出来的功能,我为什么要用旧的写50行,还那么难理解,难维护,但我还是兼容了,人在屋檐下,不得不低头

Label是es向下兼容的工具,这个在node分类下提及,这里不说

所有的内容都来自 阮一峰大神的博客 2019年11月09日中午12点,博客里的内容从【0前言到31参考链接】 经常用的api有

  • let和const
  • 解构赋值 和 拓展运算符
  • 字符串拓展
  • 数字的拓展
  • 函数的拓展 和 拓展运算符
  • 数组的拓展 和 Iterator
  • 对象的拓展
  • 新类型Set 和 Iterator
  • 新类型Map 和 Iterator
  • Reflect
  • Proxy观察者
  • Promise
  • async
  • class
  • module

let和const

  • let代替了var,let没有变量提升,也可以理解为解析js代码流程中,遇到let会自动跳过,在执行过程中才能识别
  • const不是变量,而是固定常亮,如果是基础数据类型第一次赋值后不能被修改值,如果是复杂数据类型,可以修改内部的内容,但是不能修改数据类型,而且一个函数作用域里只能声明一次,也就是不能声明两次aa,会报错,能保护这个值不轻易被另一个程序员重新声明或者改了 还有些详细内容放在下一篇写

解构赋值 解构赋值分为数组解构和对象解构

数组解构,是按顺序来的,并且左边用数组解构,右边一定要是数组

// 基础应用
// 可以理解为右边的数组是ajax请求来的res
let [a, b, c] = [1, 2, 3];
console.log(a,b,c)

// 跳过使用
let [ , , c] = ["foo", "bar", "baz"];
console.log(c)  // "baz"

// 二级数组
let [a, b, d] = [1, [2, 3], 4];
console.log(b)  //[2,3]

// 拓展运算符
// 拓展运算符一次赋值只能用一次,而且只能用在最后一位
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

对象解构 对象解构是用key赋值的,没有顺序 对象解构比数组解构用得多得多

// 基础应用
// 可以理解为右边的数组是ajax请求来的res
let { bar,foo,ceshi} = { foo: ‘aaa‘, bar: ‘bbb‘ };
console.log(bar,foo,ceshi)  // ‘bbb‘,‘aaa‘,undefined

// 上面的写法其实是对象的省略写法,因为key-value同名所以缩写
// 如果不缩写是 let { bar:bar,foo:foo,ceshi:ceshi} = { foo: ‘aaa‘, bar: ‘bbb‘ };
// 所以不缩写可以重命名
let { bar:newBar,foo:newFoo,ceshi:newCeshi} = { foo: ‘aaa‘, bar: ‘bbb‘ };
console.log(newBar,newFoo,newCeshi)  // ‘bbb‘,‘aaa‘,undefined

// 默认值
var {x = 1} = {};
console.log(x) //1

// 上面的默认值也是省略写法
var {x:newX = 1} = {x: 5};
console.log(newX) //5

//清除对象里不要的key
let {_internal, tooBig, ...cleanObject} = {el1: ‘1‘, _internal:"secret", tooBig:{}, el2: ‘2‘, el3: ‘3‘};
console.log(cleanObject); // {el1: ‘1‘, el2: ‘2‘, el3: ‘3‘}

字符串拓展 上代码自己理解

var basket = {
   count: 10,
   onSale: "aa"
}
// 原先的字符串拼接
$(‘#result‘).append(
  ‘There are <b>‘ + basket.count + ‘</b> ‘ +
  ‘items in your basket, ‘ +
  ‘<em>‘ + basket.onSale +
  ‘</em> are on sale!‘
);

// 新版的字符串拼接,两端是``斜点
// 数据是${...},
// 可以用默认值 ${ name || "pdt" }
// 可以用简单的方法${ time2date(time) }
$(‘#result‘).append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

数字的拓展 之前把字符串转数字用的是减零

Number("123")

// 转不了的就是NaN
Number("123a")  //NaN

函数的拓展 有参数默认值,参数解构,参数拓展运算符,箭头函数

// 参数默认值
// 以往的参数默认值是这样的
function init(name){
   var name = name || "pdt"
}

// es6可以
function init(name = "pdt"){ ... }
// 参数解构
// 老版本
function init(arr,obj){ ... }
init([1,2],{name:"pdt",age:18})

// 新写法
function init([,b],{name="无名"}){
   //比如我只需要数组的第二个和name属性
   console.log(a,b,name)
}
init([1,2],{name:"pdt",age:18})

//参数必填
const required = () => {throw new Error(‘Missing parameter‘)};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
// 箭头函数,是function的缩写
// 但是不能作为对象的value,不能作为数组的值,不能作为构造函数
// 箭头函数没有自己的this
// 箭头函数没有三个改变this的方法
// 箭头函数没有arguments

// 声明
var init = () => { ... }

// 作为参数
function init(cb){
   cb(111)
}
// 旧版
init(function(num){ console.log(num )})
// 箭头函数
init((num)=>{ console.log(num })

箭头函数是用来留住this的,具体查看下一篇

数组的拓展 新es给给数组增加了一个叫Iterator的东西,这个查看《遍历总结》 新增了大量的遍历方式,这个查看《遍历总结》 还有拓展运算符代替function的apply方法(apply是什么查看《上下文和作用域》)

// ES5取数组的最大值
Math.max.apply(null, [14, 3, 77])
// ES6取数组的最大值
Math.max(...[14, 3, 77])

// ES5合并数组
arr1.concat(arr2, arr3);
// [ ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘ ]
// ES6合并数组
[...arr1, ...arr2, ...arr3]

// ES5把伪数组转成数组
Array.prototype.slice.apply(null,ArrayLike)
// ES6把伪数组转成数组
[...ArrayLike]
// 或者新api
Array.from(ArrayLike)

// ES5查看是否含有,返回第一个出现的位置,没有是-1
arr.indexOf("xx")
// ES6查看是否含有,返回true/false
arr.include("xx")

对象的扩展

// 最后一个key-value可以加逗号了
var obj = {
   name: "name",
   age: 18,  //以前这里结束加逗号是不行的
}

// key-value同名可以省略
// 比如要ajax传个参数
var name = "name",age = 18;
ajax({
   // 以前
   // data:{ name: name, age:  gae }
   // 现在可以
   data:{name,age}
})

// 对象的value是function的写法优化
// 老写法
var obj = {
   say: function(){ ... }
}
// 新写法
var obj = {
   say(){ ... }
}

// 对象的遍历,查看《遍历的总结》
// 增加可Obj.vaules() 和 Object.entries()

// 对象的合并assign,这个api是浅拷贝
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
// 也可以
let target = {...target, ...source1}

新类型Set【集合】 Set跟数组差不多,同样是一个畸形的对象 他会自动去重,但只能去重基础数据类型

// 需要通过new去创建,参数是一个数组或者伪数组
let set = new Set([undefined,undefined,NaN,NaN,"",""]); //  set{"undefined",NaN,""}

// set的长度属性
set.size  //3

// 添加某个值,返回set本身,所以可以无限add()
set.add(value)
// 删除某个值,返回一个布尔值,表示删除是否成功
set.delete(value)
// 返回一个布尔值,表示该值是否为Set的成员
set.has(value)
// 清除所有成员,没有返回值
set.clear()

// Set没有办法取值,只能转数组再取值
[...set]
// 或者
Array.from(set)

// Set的遍历,set.keys(),set.values(),set.entries()
// 具体查看《遍历总结》

// 还有一个WeakSet,不重要
// 他跟Set一样,只是他只能存对象,并且带有垃圾回收功能,面试题来着
const ws = new WeakSet();

集合的几个特性

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)));//ES6
var intersect = new Set([...a].filter(function(x){
    return b.has(x);
}))
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

新类型Map【字典】 Map 结构提供了value-value的对应,相比于Object,他的key可以是任一类型

// 通过new创建,参数是一个数组,数组里的值必须都是两个长度的数组
const map = new Map([
  [‘name‘, ‘张三‘],
  [‘title‘, ‘Author‘]
]);

// map的长度属性
map.size // 2


// 添加某个值,返回set本身,所以可以无限add()
map.set(key, value)
// 返回一个布尔值,表示该值是否为Set的成员
set.has(key)
// 
map.get(key) 
// 删除某个值,返回一个布尔值,表示删除是否成功
map.delete(key)
// 清除所有成员,没有返回值
map.clear()

// Map的遍历,map.keys(),map.values(),map.entries()
// 具体查看《遍历总结》

// Map转数组,其实map挺好用的,没必要转,除非是要传给后端
[...map]


// 还有一个WeakMap,不重要
// 只接受对象作为键名(null除外),不接受其他类型的值作为键名
const wm = new WeakMap();

其实Set和Map也非常的稀有,因为数组和对象就已经很好用了,而且还要去兼容,而且还要去转格式转来转去的

Reflect Reflect是ES6为了操作对象而新增的API,配合proxy对数据进行操作简直完美

Reflect.get(target, name, receiver)
Reflect.set(target,name,value,receiver)
Reflect.apply(target,thisArg,args)
Reflect.construct(target,args[, newTarget])
Reflect.defineProperty(target,name,desc)
Reflect.deleteProperty(target,name)
Reflect.has(target,name)
Reflect.ownKeys(target)
Reflect.preventExtensions(target)
Reflect.isExtensible(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

Proxy观察者 这个一般来说是用不到的,是属于架构层面的api了,Vue3.0就是以这个为基础架构的,跟Object.defineProperty一样,这个放在《vue的原理设计》说

// 贴个基础代码
var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

Promise 查看《promise篇》 Promise里装的都应该是异步函数,如果是同步的反而是产生BUG

// 贴个基础代码
new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}).then((value)=>{ ... },(error)=>{ ... })

Async 查看《promise篇》 await后面跟着的都是promise异步函数,如果是同步的反而是产生BUG

// 贴个基础代码
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);
    console.log(‘Final: ‘, val3);
  }
  catch (err) {
    console.error(err);
  }
}

class 查看《class》篇 class就是一个新型的构造函数

// 贴个基础代码
class A {
  constructor(name) {
     // 静态属性/方法
    this.name = name;
  }
  // 相当于原型方法,class不支持原型属性
  print() {
    console.log(this.name);
  }
  // 带有static是私有方法/属性,通过A.myMethod()执行
  static myMethod() {
    console.log(‘static‘);
  }
}

class B extends A {
  constructor(name,age) {
    //继承的
    super();
    this.name = name;
    this.age= age;
  }
  m() {
    console.log(this.age);
  }
}

let b = new B("pdt",18);
b.m() // 18
b.print() // "pdt"

module 查看《模块化》篇 引入js文件的新api但是不被支持,浏览器没支持连nodejs都没支持

// 开放多个,只能全是export,不能有export default
// fs.js
export function A(){ ... }
export B = { ... }
export C = []
export D = "D"

// 引入并且解构赋值
import { A, B, C, D } from ‘fs‘;
// 只能出现一个export default,并且不能有其他export
// default就不需要名字了
// fs.js
export default function(){ ... }
// 或者对象,其他格式都行
export default {}

// 引入并且解构赋值
import fs from ‘fs‘;

除了上面常用的 还有Symbol,Decorator【装饰器】

装饰器文章

  1. Method Decorator 函数装饰器
  2. Property Decorators 熟悉装饰器
  3. Class Decorator 类装饰器
  4. Parameter Decorator 参数装饰器 将来装饰器会变成新的框架,会被制造出像Spring的框架

说几句 这些api升级了js的难度,生产出了大量的玩法和框架,他让前端不再是个jq打天下的菜鸡,他需要学的东西越来越多,这些api高仿自很多的语言,特别是java 比如说拓展运算符,Iterator遍历器,Set,Map,await的原生就是一个yeild,这个也是java的,还有class,model的import,Decorator就是java的注解以及NodeJs的stream流等等

es678910语法糖

标签:value   res   intersect   语法糖   浅拷贝   text   author   总结   eject   

原文地址:https://www.cnblogs.com/pengdt/p/12037960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!