ES6学习记录

简介: ES6学习记录

变量申明

引入let,const来区分作用域

  • let:适用于块级作用域,"{}"之间有效,尽量使用let替换原来的var
  • const:常量申明,申明之后就必须初始化,且不能进行修改

赋值-解构化赋值,详情

数组

let [a,b] = [1,2];
//a = 1
//b = 2

说明:左侧可以和右侧不是一一对应的关系例如[,b] b也会被赋值2。

对象

let {a,b} = {a:1,b:2};
//a = 1
//b = 2

说明: 左侧变量名需要和右侧属性名一致,如改成别的名字则会赋值失败

默认值

let [a=3,b] = [undefined,2];
//a = 3
//b = 2

说明:当右侧数组或对象没有左侧对应值时会取默认值进行赋值操作,可以用在方法的参数传递上,需注意只有undefined或者对象中没有左侧变量同名的内容时才会取默认值,如右侧结果为null,那么会赋值为null

别名

let {a:aa,b} = {a:1,b:2};
//a:VM81:1 Uncaught ReferenceError: a is not defined
//aa = 1
//b = 2

说明:适用于对象赋值

剩余赋值

let [a,...b] = [1,2,3,4];
//a = 1
//b = [2,3,4]
let {a,...b} = {a:1,t1:1,t2:2,t3:3}
//a = 1
//b = {t1:1,t2:2,t3:3}

动态赋值

let test = "a";
let {[test]:temp} = {a:1,b:2};
// temp= 1
等号右侧可以是固定对象,也可以是函数的返回值,且操作会在代码中混合使用,需牢记

其它

等号右侧会优先转换为js对象进行处理

let [a,...b] = "test"
// a="t"
// b = "est"
let {length:len} = "test";
// len = 4

字符串

新增一些常用方法

函数名 说明
includes(str) 是否包含
startsWith(str) 是否以参数开始
endsWith(str) 是否以参数结束
padStart(int,str) 补全原字符串,常用于补全编号,
padEnd(int,str) 是否以参数结束
matchAll 返回一个正则表达式在当前字符串的所有匹配

模板字符串

使用反引号` 键盘上1左边那个键,包裹的内容可以字符串与变量混用

let test = "my test"
let str = `in ${test}`
// str = "in my test"

说明:

  1. ${}中可以是函数,表达式
  2. ``包裹的内容可以换行符等
  • 带标签的模板字符串

模板字符串可以和函数一起使用:函数名模板字符串,详细请看例子

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;

}
var output = myTag`that ${ person } is a ${ age }`;
//等价于myTag(["that ","is a "],person,age)
console.log(output);
// that Mike is a youngster
  • 在标签函数中第一个参数可以通过strings.raw[0]来访问原始模板字符串

箭头函数

let a = function (t){return t+1;};
//等价于
let a = t=>t+1;

说明:

  • 与lamda表达式类似,如函数体有多行需要使用{}包裹,需返回时需显示使用return
  • 箭头函数中this继承上层,如上层也为箭头函数则一直向上找
  • 箭头函数中this为申明时绑定的,不会动态变化,例如onClick如用箭头函数则函数体中this为window对象而不是触发onClick的事件源对象
  • 当箭头函数只包含一个返回的json对象时不能直接写:{a:1} 因为{}是关键字会参与解析,需使用括号包裹var func = () => ({foo: 1});

箭头函数嵌套使用

const add = (a) => (b) => a + b;
//等价于
function add(a) {
    return function(b) {
        return a + b;
    }
}
// 使用
// add(1)(3)
柯里化:又译为卡瑞化或加里化,是把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术。这个技术由克里斯托弗·斯特雷奇以逻辑学家哈斯凯尔·加里命名的。

参考资料

http://es6.ruanyifeng.com/

目录
相关文章
|
4月前
|
存储 前端开发 JavaScript
|
7月前
|
JavaScript 前端开发
|
JSON JavaScript 前端开发
【编程指南】ES2016到ES2023新特性解析一网打尽(一)
【编程指南】ES2016到ES2023新特性解析一网打尽(一)
102 0
|
前端开发 JavaScript Java
【编程指南】ES2016到ES2023新特性解析一网打尽(二)
【编程指南】ES2016到ES2023新特性解析一网打尽(二)
152 0
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性1
前端学习笔记202306学习笔记第四十二天-Es8-ES8和ES9新增特性1
60 0
|
前端开发 JavaScript 小程序
每天3分钟,重学ES6-ES12(十七)模块化历史
每天3分钟,重学ES6-ES12(十七)模块化历史
91 0
|
监控 前端开发 JavaScript
每天3分钟,重学ES6-ES12(十五)异步代码处理方案
每天3分钟,重学ES6-ES12(十五)异步代码处理方案
101 0
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
158 0
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
|
JavaScript 前端开发 数据库
再不学ES6你就out了 —— 一文搞懂ES6
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版 虽然15年就有正式版本了,但是国内普遍商用是在2018年之后去了,甚至到现在有很多前端仍然搞不懂ES6
175 0
再不学ES6你就out了 —— 一文搞懂ES6
|
网络架构
es6基础(2)| 青训营笔记
es6基础(2)| 青训营笔记
105 0