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 元素拖动
元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...

随机推荐

Koa搭建简单服务器
1. dependencies "co-mysql": "^1.0.0", "koa": "^2.7.0", " ...
jQuery 工具类函数-检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模 ...
手把手教你用ngrx管理Angular状态
本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理 :ngrx/store——Angular的响应式Redux.本文将会完成一个小型简单的Angular应用,最终代码可以在这 ...
[板子]Kruskal
众所周知求最小生成树的两种方法: 1.Kruskal 2.Prim 这里只挂第一种,因为noip掌握第一种就够了. 两种做法的区别可以参考这个博客:http://blog.csdn.net/molln ...
（转载）window安装mysql
一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Comp ...
C++学习——输入输出及头文件
C++学习 ——输入输出及头文件一.输入输出 (1)cin与cout C++中也可以用printf与scanf,但是相对于这个,cin与cout更加方便一点.让我们先来看一段代码. 运行结果: 这里 ...
Web的大趋势：Java+大前端
前后端分离,是目前Web开发的主流模式.而Java无疑是后端开发的王者,PHP和.NET目前仍处于水深火热之中,更像是在夹缝中求生存.而大前端,强势崛起!Java+大前端这一强强组合,面对其他Web领 ...
APP数据采集--基础配置
一.首先需要下载fiddler,可以直接在官网下载最新版呢二.设置允许抓取HTTPS数据: 打开已经下载好了的fiddler,打开在工具栏中的Tools,之后在HTTPS的工具栏下面进行如下的设置 ...
VC++取MD5算法记录下以后用得到（转）
这个是网上扒下来的作者已经无法知道是谁了 MD5.h #ifndef MD5_H #define MD5_H #include <string> #include <fstream ...
C++简单项目--贪吃蛇
在800*600的地图上,蛇的初始长度为3节,用数组记录每一节的位置(每个正方形左上角的坐标),每一节为长度为10的正方形,初始方向向右.随机生成30个障碍物的的位置,随机生成食物的位置.吃到食物之后 ...

JS ES6补充

JS ES6补充的更多相关文章

随机推荐

热门专题