JS ES6补充

补充点：1、let const 　　2、字符串模板　　3、箭头函数　　4、对象的单体模式　　5、面向对象

一、定义变量

A、var

特点：

1、定义全局变量

2、可以重复定义

3、变量名提升

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>声明变量</title>

</head>

<body>

    <script>

        {

            var a =66;

            console.log('in'+ a);

        }

        // 在块级作用域的变量，可以在全局中使用

        // 1.var 定义的是全局变量

        console.log('out'+ a);

        // 2.var可以重新定义变量

        var a = 88;

        console.log('new'+a);

        // 3.变量名提升

        // 过程 var b -> 提升， 打印 b, b没有赋值，结果：undefined

        console.log(b);     //undefined

        var b = 10;

    </script>

</body>

</html>

B、let

特点：

1、块级变量

2、在同一作用域中，不可以重新定义

3、不支持变量名提升

{

    let b = 5;

    console.log('b1', b)

}

// 1.let 声明块级变量

// console.log('b2', b);    // b is not defined

let b = 10;

console.log('b3', b)

// 2.let 不能重新声明变量

// let b = 20;

// console.log('b4', b)    // Identifier 'b' has already been declared

// 3. let不支持变量提升

console.log(c);     // Cannot access 'c' before initialization

let c = 2;

C、const

特点：

1、定义常量

2、在同一作用域中，不能重复定义

3、不支持变量提升

const a = 10;

// 1.const 定义的是常量，常量不能被修改

// a = 20;

// console.log(a)  // Assignment to constant variable.

// 2. 不能重复声明

// const a = 20;

// console.log(a)  // Identifier 'a' has already been declared

// 3. const 定义变量，不支持变量提升

console.log(b);

const b = 30;   // Cannot access 'b' before initialization

二、字符串模板

1、反引号(table键，上面的键)

2、格式：${变量名}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>字符串模板</title>

</head>

<body>

    <script>

    var name = 'tom';

    var age = 24;

    // 注意：

    // 1. 反引号

    // 2.${变量名}

    var info = `${name},今年${age}岁!!!`;

    console.log(info)    

    </script>

</body>

</html>

三、箭头函数

A、简介

格式：

f = function(a, b){} ---> f = (a, b)=>{}

注意：

1、形参为一个数时，括号可以省略不写

2、{}中只要return 时，{}也可以省略不写

B、箭头函数的坑

1、this

传统函数的this，指向调用的对象

箭头函数的this，指向声明对象的对象

// 字面量方式创建对象

var person = {

    name: 'tom',

    age: 24,

    inf0: function(){

        // 1. 普通函数 this 指向 调用 对象 既 person

        console.log(this);   // {name: "tom", age: 24, inf0: ƒ}

    }

};

person.inf0();

// 字面量方式创建对象

var person2 = {

    name: 'alex',

    age: 43,

    info: ()=>{

        // 1.箭头函数 this 指向 声明 对象 及 windows

        console.log(this);  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

    }

};

person2.info();

2、arguments

    // 2.箭头函数不能使用 arguments

    var foo = function(){

        console.log(arguments);  // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

    }

    foo(1, 2, 3);

    var bar = ()=>{

        console.log(arguments);     // Uncaught ReferenceError: arguments is not defined

    }

    bar(3, 2, 1);

四、对象的单体模式

目的：解决箭头函数的this坑

// 字面量方式创建对象

var person = {

    name: 'tom',

    age: 34,

    // 格式对比：

    // info: ()=>{}

    // info(){}

    info(){

        console.log(this.name);     // tom

    }

}

person.info();

五、面向对象

1、ES5

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

    // 构造函数的方法创建对象，注意名字要大写

    function Person(name, age){

        self.name = name;

        self.age = age;

    }

    // 创建该对象的方法

    Person.prototype.showname = function(){

        console.log(self.name);

    }

　　 // 实例化对象

    var p1 = new Person('tom', 24);

    p1.showname();      // tom

    </script>

</body>

</html>

ES6

// 定义类

class Person{

    // 构造方法

    constructor(name, age){

        self.name = name;

        self.age = age;

    }

    // 自定义方法

    showname(){

        console.log(self.name);

    }

}

// 实例化对象

var p2 = new Person('tom', 24);

// 调用方法

p2.showname();  // tom

注意：ES6面向对象的语法比ES5面向对象的语法更像面向对象

JS ES6补充的更多相关文章

js es6 map 与原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是字符串: map的键的类型是可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
js 对象补充
js 对象普通对象与对象简写 js 没有字典类型,只有对象类型,对象可以完全替代字典来使用 js 中对象的属性名,都采用字符串类型,所以就可以省略字符串的引号标识对象中属性值为函数时,称之为方法, ...
js ES6 多行字符串连接字符串
1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...
js ES6 Set和Map数据结构详解
这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下本 ...
JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)
1. 程序异常 ① try-catch语法测试异常 try-catch语法代码如下: try { 异常代码; try中可以承重异常代码, console.log(“try”) 出现异 ...
2019.7月-前端面试总结（H5+C3+JS+ES6+Vue+浏览器）
第二次面试 HTML HTML5中的新标签,举例一下 canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date, ...
js原型补充
js定义函数: <script> function A() {} let a1 = new A(); let a2 = new A(); // 为A类添加原型 => 类似于类属性 A ...
JS&ES6学习笔记（持续更新）
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升暂时性死区不允许重复声明块级作用域级作用域 ...
js/es6 元素拖动
元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...

随机推荐

Character.digit()的意义
最近在阅读Integet.parseInt()源码时,遇到了Character.digit()这个方法,以前没有遇到过,更没使用过,这里查了资料就记录一下. 官方说法是: java.lang.Char ...
H3C 根据子网数划分子网
Nginx的三种应用场景介绍
配置虚拟主机就是在一台服务器启动多个网站. 如何区分不同的网站: 1.域名不同 2.端口不同 1.1. 通过端口区分不同虚拟机 Nginx的配置文件: /usr/local/nginx/conf/n ...
MockMvc control层单元测试参数传递问题
GET: 1.路径参数@PathVariable 2.表单参数@RequestParam POST: 1.JSON请求体参数 @RequestBody 放: 1.路径参数@PathVariable 2 ...
neo4j-查询示例
查找名为"Cloud Atlas"的电影 match(cloudAtlas {title:"Cloud Atlas"}) return cloudAtlas 查 ...
对“TD信息树”的使用体验
在本次同2017级学长进行的软件交流会上,我们有幸使用学长们开发的软件与成果,进过27个不尽相同的软件的使用,让我初步意识到了学习软件工程这门学科的实用价值.最终我选择了"TD信息树&quo ...
slim的中间件
slim中间件的作用简单来说就是过滤数据,request过来的数据要经过中间件才能到达内部,然后内部数据要到达外部的时候,也要经过中间件,正常通过才能到达外部
slim中的参数获取
官方文档中对于get和post的参数有以下获取方式 $app->get('/', function (Request $req, Response $res, $args = []) { $my ...
23.logging
转载:https://www.cnblogs.com/yuanchenqi/article/5732581.html 一 (简单应用) import logging logging.debug('de ...
【一起学源码-微服务】Nexflix Eureka 源码十二：EurekaServer集群模式源码分析
前言前情回顾上一讲看了Eureka 注册中心的自我保护机制,以及里面提到的bug问题. 哈哈转眼间都2020年了,这个系列的文章从12.17 一直写到现在,也是不容易哈,每天持续不断学习,输出博 ...

JS ES6补充

JS ES6补充的更多相关文章

随机推荐

热门专题