function foo([a,b]) {
console.log(a+b); // 3
}
foo([1,2]);
function bar({c,d}) {
console.log(c+d); // 7
}
bar({c:3,d:4});
function foo(a,b=10) {
console.log(a+b); // 1+10=11 => 11
}
foo(1);
function bar([a,b=10]) {
console.log(a+b); // 3+10=13 => 13
}
bar([3]);
function fn({a,b=10}) {
console.log(a+b); // 5+10=15 => 15
}
fn({a:5});
function bar([a,b=10] = [20]) {
console.log(a+b); // 20+10=20 => 20
}
bar();
function fn({a,b=10} = {a:20}) {
console.log(a+b); // 20+10=30 => 30
}
fn();
但如果传入实参,那么就会把预设的覆盖。
function bar([a,b=10] = [20]) {
console.log(a+b);
}
bar([100]); // 100+10 => 110
bar([100, 200]); // 100+200 => 300
function fn({a,b=10} = {a:20}) {
console.log(a+b);
}
fn({a:100}); // 100+10 => 110
fn({a:100,b:200}); // 100+200 => 300
function getB() {return 10};
function foo(a,b=getB()) {
console.log(a+b); // 1+10=11 => 11
}
foo(1);
语法:参数=>函数体
// 传统写法(无参数)
let fn = function() {return 1;}
// 箭头函数写法
let fn = ()=>(1);
let fn = ()=>1;
// 传统写法(一个参数)
let bar = function(a) {return 2};
// 箭头函数写法
let bar = (a)=>2;
let bar = a=>2;
// 传统写法(多个参数)
let fn = function(a,b) {return a+b};
// 箭头函数写法
let fn = (a,b)=>a+b;
// 多行语句时不可省略花括号
let br = function(a,b) {
let res = a+b;
return res;
}
let br = (a,b)=>{
let res = a+b;
return res;
}
函数体内的this对象是固定的,就是定义时所在的对象,而不是使用时所在的对象。
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(function(){
alert(this.id); // 10
},1000)
}
}
obj.fn();
分析:1秒后执行window.setTimeout(),this指向window,因此返回的结果是全局下的id:10
如果想要获取obj内的id,一般采用_this = this的办法。
var id = 10;
let obj = {
id: 15,
fn: function(){
_this = this; // 调用后,这里的this指向obj
setTimeout(function(){
alert(_this.id); // 15
},1000)
}
}
obj.fn();
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 15
obj.fn.call({id:123}); // 123
分析:setTimeout()中用了箭头函数,因此箭头函数内的this对象就固定在父级作用域下的this上。(这里就是函数fn)
也就是说,fn函数内的this指向了谁,箭头函数的this就指向了谁。
当被obj调用时,fn函数的this指向了obj,所以返回obj下的id:15
当被对象{id:123}调用时,fn函数的this指向了{id:123},所以返回该对象下的id:123
var id = 10;
let obj = {
id: 15,
fn: ()=>{
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 10
obj.fn.call({id:123}); // 10
分析:当obj下的fn方法也用箭头函数,那么就会沿着作用域链往上找它的父级作用域的this,这里找到的是全局window。
于是this就固定在了window上,不管谁去调用它,它都只会返回window下的id:10
普通函数在初始化的过程中,会产生一个arguments对象用来保存实参。
但是在箭头函数中是不存在的,如果要使用实参列表,那么用rest参数来代替。
// 普通函数
let fn = function(a,b,c) {
console.log(arguments);
}
fn(1,2,3);
// 箭头函数
let bn = (...args)=> {
console.log(args);
}
bn(1,2,3);
let Person = (name)=> {
this.name = name;
}
let p = new Person('mm'); // TypeError: Person is not a constructor
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 15
let person = {
name: 'mm',
say: ()=>{
console.log(this.name); // 'gg'
}
}
var name = 'gg';
person.say();
let box = document.getElementById('box');
box.addEventListener('click', function(){
if(this.classList!='red') {
this.classList = 'red';
}else {
this.classList = 'green';
}
console.log(this); // box
});
box.addEventListener('click', ()=>{
if(this.classList!='red') {
this.classList = 'red';
}else {
this.classList = 'green';
}
console.log(this); // window
});
箭头函数是ES6中非常重要的性特性。它最显著的作用就是:更简短的函数,并且不绑定this,arguments等属性,它的this永远指向其上下文的 this。它最适合用于非方法函数,并且它们不能用作构造函数。
js模块化的开发并不是随心所欲的,为了便于他人的使用和交流,需要遵循一定的规范。目前,通行的js模块规范主要有两种:CommonJS和AMD
ES6中添加了一个新属性解构,允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途:交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...
ES6中let变量的特点:1.let声明变量存在块级作用域,2.let不能先使用再声明3.暂时性死区,在代码块内使用let命令声明变量之前,该变量都是不可用的,4.不允许重复声明
ES6的7个实用技巧包括:1交换元素,2 调试,3 单条语句,4 数组拼接,5 制作副本,6 命名参数,7 Async/Await结合数组解构
ES6装饰器(Decorator)是一个函数,用来修改类的行为 在设计阶段可以对类和属性进行注释和修改。从本质上上讲,装饰器的最大作用是修改预定义好的逻辑,或者给各种结构添加一些元数据。
Query作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落。用ES6写了一个基于class简化版的jQuery,包含基础DOM操作,支持链式操作...
ES6 中的一些技巧:模版字符串、块级作用域、Let、Const、块级作用域函数问题、扩展运算符、函数默认参数、解构、对象字面量和简明参数、动态属性名称、箭头函数、for … of 循环、数字字面量。
Rest/Spread 属性:rest操作符在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。
ES6使您的代码更具表现力和可读性。而且它与React完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平!嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!