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

随机推荐

phpcms V9自定义分页函数
大家做网站的时候,可能很多时候分页样式都得根据模板的要求来控制的,这时很多人都会去修改全局文件phpcms\libs\functions\global.func.php里的pages()函数,这样问题 ...
[板子]快速幂&矩阵快速幂
不会的来这看:https://www.cnblogs.com/CXCXCXC/p/4641812.html 简单的一说:当转换为二进制的时候有位运算这种黑科技,&相当于%2判断奇偶性. x&a ...
原生js 通用事件绑定
/*原文地址:http://ejohn.org/blog/flexible-javascript-events/*/ http://blog.csdn.net/qi1271199790/article ...
FreeSql配合仓储实现软删除
该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前段时间使用FreeSql作为ORM,写了一个简单的CMS,在这里总结一下其中的使用心得. 仓储配合全局过滤器 1. 统一的删除标志如:数据库字 ...
POJ3237 Tree 树链剖分边权
POJ3237 Tree 树链剖分边权传送门:http://poj.org/problem?id=3237 题意: n个点的,n-1条边修改单边边权将a->b的边权取反查询a-> ...
WCF 服务应用程序
1. 创建 WCF 服务程序和客户端程序,参考如下: https://docs.microsoft.com/zh-cn/dotnet/framework/wcf/getting-started-tut ...
22.json&pickle&shelve
转载:https://www.cnblogs.com/yuanchenqi/article/5732581.html json 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...
Visio数据视觉化处理
形状数据的查看的两种方式定义形状数据:右键单击数据窗口打勾的代表可以显示其他没有打勾的就必须要在开发模式才会显示出来开发模式就是打开开发工具面板注意其中类型的设置类型与格式是一一对应的不 ...
Python中的[...]是什么？
...就是好几个冒号 array[...] 就是array[:,:,:]
Java中的变量、数据类型和运算符
1. java语言是一种强类型的语言,对各种数据类型都有明确的区分,而计算机使用内存来记忆大量运算时需要使用的数据,而当声明一个变量时,即在内存中划分一块空间存储数据,而变量类型决定划分内存空间的大小 ...

JS ES6补充

JS ES6补充的更多相关文章

随机推荐

热门专题