JavaScript中的模板直面量

模板直面量

javascript 复制代码
const book = {
            name: '你爱的书籍为'
        };
        console.log(`${book.name}`);//注意使用``来输出name的属性值
  • 我们可以省去function关键字,只用=>来表示

    javascript 复制代码
     let circle = r => {
                const name = 3.14;
                const area = name * r * r;
                return area;
            }
            console.log(circle(2));
  • 还可以省去return

javascript 复制代码
const name = r => 
    3.14 * r * r;
    console.log(name(4));
  • 如果不接任何的值,可以用一对空的圆括号,在ES5中经常使用

javascript 复制代码
const hello = () =>console.log('hello');
hello()//进行调用
  • arguments对象它是一个数组,包含函数被调用时传入的参数,即使不知道函数的,名称也可以动态获取这些参数

  • apply()函数额可以将数组转变为参数

javascript 复制代码
function sum (x,y,z){
    return x + y + z ;
}
let num = [3,5,6]; 
console.log(sum(...num));
//console.log(sum.apply(undefined,num));效果和上边一样
  • 调用sum方法可以将传入的参数用(....)来表示

  • 展开式运算符(...)也可以替代arguments,当作剩余的参数使用

javascript 复制代码
function rest(X , Y , ...a){
    return (x + y) * a.length;
}
console.log(rest(1,2,"hello",5));
上下代码效果一致
function rest (x , y){
    let a = Array.prototype.slice.call(argument,2);
    return (x + y) * a.length;
}
javascript 复制代码
let [x , y ] = [ ' a '  , ' b ' ] ;
上下的代码相同
let x = 'a';
let y = 'b';
----------------------------------
数组解构可以进行值的互换,而不需要创建临时变量
[x,y] = [y,x]
上下的代码相同
let temp = x ;
x = y ; 
y = temp ;
  • 属性简写功能,

javascript 复制代码
let [x,y] = ['a' , 'b'];
let obj = { x , y };
console.log(obj);
-----------------------
let x = 'a';
let y = 'b';
let obj2 = { x: x,y: y };
console.log(obj2)
//输出的结果是,{x:"a" , y: "b"}
  • 简写方法名

javascript 复制代码
const name = {
    name = 'absc',
    printHello (){
        console.log('Hello');
    }
};
console.log(name.printHello());
这个像java一样定义方法
--------------------------------
上下的代码一致
let name = {
    name: 'absds',
    printHello: function name (){
        console.log('Hello');
    }
};
console.log(name.printHello());
  • 更简洁的声明类的方式

javascript 复制代码
function Book(title, pages, isbn) { // {1} 
 this.title = title; 
 this.pages = pages; 
 this.isbn = isbn; 
} 
Book.prototype.printTitle = function() { 
 console.log(this.title); 
}; 
我们可以用 ES2015 把语法简化,如下所示。
class Book { // {2} 
 constructor(title, pages, isbn) { 
 this.title = title; 
 this.pages = pages; 
 this.isbn = isbn; 
 } 
 printIsbn() { 
 console.log(this.isbn); 
 } 
}
  • 属性存取器

javascript 复制代码
class Person {
     constructor(name) {
     this.name = name;
     }
​
     get name() {
     return this.name;
     }
     // set name(value) {
     //     this.name = value;
     // }
     }
     let main = new Person('小明');[1]
     console.log(main.name);
​
  • constructor是JS的构造器和java的构造器性质一致,有函数名与构造名一致的功能,故赋值为如[1]所示

  • get 和 set 是JS的关键字,在函数名前面加上get 或set 关键字

相关推荐
时光の尘4 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭18 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师19 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者23 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟24 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448041 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟42 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网