美文网首页
(五)ES6字符串模板箭头函数字面量

(五)ES6字符串模板箭头函数字面量

作者: 我拥抱着我的未来 | 来源:发表于2018-06-12 10:52 被阅读0次

本节知识点

  • 字符串模板
  • 箭头函数
  • 字面量

字符串模板

  • 在ES6里面字符串模板就是为了不用再把字符串拼接起来,省的有加号
    let a = "今天天气真好啊";
    let str = `<h1>33333</h1><p>${a}</p>`;
    document.getElementById("div1").innerHTML = str;

箭头函数

  • 缩减代码
  • 改变this指向
//老版本
function abc(num) {
    return num * 2;
}
console.log(abc(2));
//新版本
let a = (num) => num * 2;
console.log(a(2));
//要是有多个语句怎不能不写括号了
let b = (num) => {
    let sum = num * 2;
    return sum;
}
console.log(b(2));
(2)改变this指针

箭头函数中的this找的是他父元素的上一级,切记切记!!!

var x = 11;
var obj = {
    x: 22,
    say: function() {
        console.log(this.x)
    }
}
obj.say();
//console.log输出的是22

var x2 = 11;
var obj2 = {
    x2: 22,
    say: () => {
        console.log(this.x2);
    }
}
obj2.say();
//输出的值为11

字面量

  • 简写模式 原始模式是这样
function createBookShop(obj2) {
    return {
        obj2: obj2,
        inventoryValue: function() {
            return this.obj2.reduce(function(total, book) {
                return total + book.price
            }, 0)
        },
        priceForTitle: function() {
            return this.obj2.find(function(item, index) {
                return item.price > 10
            })
        }

    }

}

const obj2 = [
    { title: "value", price: 10 },
    { title: "Angular", price: 15 }
];
const bookShop = createBookShop(obj2);
console.log(bookShop.priceForTitle());
console.log(bookShop.inventoryValue());
  • 字面量模式
function createBookShop(obj2) {
    return {
        obj2,
        inventoryValue() {
            return this.obj2.reduce(function(total, book) {
                return total + book.price
            }, 0)
        },
        priceForTitle() {
            return this.obj2.find(function(item, index) {
                return item.price > 10
            })
        }

    }

}

const obj2 = [
    { title: "value", price: 10 },
    { title: "Angular", price: 15 }
];
const bookShop = createBookShop(obj2);
console.log(bookShop.priceForTitle());
console.log(bookShop.inventoryValue());

相关文章

  • (五)ES6字符串模板箭头函数字面量

    本节知识点 字符串模板 箭头函数 字面量 字符串模板 在ES6里面字符串模板就是为了不用再把字符串拼接起来,省的有...

  • ES6~ES8 新功能

    ES6: 1. 箭头函数 2. 类class 3. 增强的对象字面量 4. 模板字符串 5. 解构 6. 默认值+...

  • Vue常用模式

    组件定义 SFC 单文件组件 SFC 字符串模板或 ES6 模板字面量 渲染函数 JSX 语法糖 Vue 类组件装...

  • js中函数和箭头函数

    定义函数的方式 (1)定义函数的方式:function (2)对象字面量中定义函数 (3)es6中的箭头函数 箭头...

  • 箭头函数

    一、函数的定义方式 1、function 2、对象字面量中定义函数 3、ES6中的箭头函数 二、箭头函数参数和返回...

  • ES6系列 (三)模板字面量

    特性 模板字面量实现字符串插值 模板字面量实现多行字符串 模板字面量实现可重用的模板 理解标记模板字面量如何自定义...

  • es6学前准备(一)

    ES6优势 1、 对象拷贝2、函数默认参数3、字符串模板 ES6使用频率高: 结构赋值箭头函数set map异步操...

  • ES6在企业中的应用

    模板字符串 解构赋值解构赋值最常用的在于函数。 数组spread es6浅拷贝 函数新特性之箭头函数 函数新特性之...

  • 使用 Vue.js + Easyui,嵌入已有项目开发

    work in progress 前置知识 ES6 语法let, var解构赋值模板字符串函数,参数默认值,箭头函...

  • ES6-字符串模板与字符串新增的方法

    ES6模板字面量(template literal) 多行字符串 ES5情况下多行字符串 多行的字符串以 逗号 '...

网友评论

      本文标题:(五)ES6字符串模板箭头函数字面量

      本文链接:https://www.haomeiwen.com/subject/vrbqeftx.html