一、ECMAScript 6

ECMAScript 6.0，简称ES6，第一个版本是在2015年6月进行发布，所以也称之为《ECMAScript 2015 标准》（简称 ES2015）。

JavaScript是ECMAScript的一种实现（分支），遵循ECMAScript标准的。目前主流浏览器已经可以完美兼容和使用ES6。

​

二、let 和 const

var 存在的问题：

  • var 不能用于定义常量
  • var可以重复声明变量
  • var 前两存在变量提升
  • var 不支持块级作用域

let 和 const 可以解决以上问题

​

(1) 不可以重复声明变量

let name = 'Astro';

let name = 'nurato';

console.log(name);

//运行结果：Identifier 'name' has already been declared

​

(2)不存在变量提升

console.log(name);

let name = 'Astro';

// 运行结果：ReferenceError: name is not defined

​

(3)可以定义常量

不能给常量重新赋值，但如果是引用类型的话可以进行修改。

const PI = 3.14;

PI = 3;

console.log(pi);

//运行结果：Assignment to constant variable.

​

//引用类型

const  GD= {

name:'Astro',

intro:'Astro 就是阿童木'

};

GD.name = '阿童木';

console.log(GD);

// 运行结果：{name: "阿童木", intro: "Astro 就是阿童木"}

//intro: "Astro 就是阿童木"

//name: "阿童木"

//__proto__: Object...........

​

(4)块级作用域

如果用var定义变量，变量是通过函数或者闭包拥有作用域；但，现在用let定义变量，不仅仅可以通过函数/闭包隔离，还可以通过块级作用域隔离。

块级作用域用一组大括号定义一个块，使用 let 定义的变量在大括号的外部是访问不到的，此外，let声明的变量不会污染全局作用域。

{

	let a = '鸣人';

}

console.log(a);

// 执行结果：ReferenceError: a is not defined


if(1){

let str = '123';

}

console.log(str);

// 执行结果：ReferenceError: str is not defined

​

(5)高级排他（不使用闭包）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            width:820px ;

            list-style: none;

            margin: 100px auto;

        }

        ul li{

            width: 100px;

            height: 30px;

            border: 1px solid #CCCCCC;

            float: left;

            text-align: center;

            line-height: 30px;

        }

        .current{

            background-color: orangered;

            color: white;

            font-weight: bold;

        }

    </style>

</head>

<body>

<ul>

    <li class="current">1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

</ul>

<script id="高级排他">

    window.addEventListener('load',function () {

        //1.获取标签

        let allLis = document.querySelectorAll('li');

        //2.遍历

        let preIndex = 0;

        for(let i = 0;i<allLis.length;i++){

            allLis[i].addEventListener('mouseover',function () {

                allLis[preIndex].className = '';

              this.className = 'current';

                preIndex = i;

            });

        }

    })

</script>

</body>

</html>

​

三、解构赋值

用于分解js中对象的机构

(1)用于数组结构

let nameArr = ['张三','李四','王五'];

// 普通写法

let name1 = nameArr[0];

let name2 = nameArr[1];

let name3 = nameArr[2];

//结构写法

let[name1,name2,name3] = nameArr;

​

(2)对象的解构

//写法1

let{name,age,sex} = {name:'张三',age:1,sex:'男'}

console.log(name, age, sex);

//运行结果：张三 1 男


//写法2：结构重命名

let{name:gName,age:gAge,sex:gSex} = {name:'张三',age:1,sex:'男'};

console.log(gName, gAge, gSex);

//运行结果：张三 1 男


//  写法3： 可以设置默认值

let{name,age,sex='女'} = {name:'李四',age:18}

console.log(name, age, sex);

// 运行结果：李四 18 女


// 写法4 省略结构

let [,,sex] = ['王五',20,'男'];

console.log(sex);

// 运行结果: 男

​

(3)应用场景举栗子

在封装ajax的GET和POST请求时, 就可以运用到解构的知识点，代码如下：

// 普通写法

function ajax(options) {

let method = options.method || 'GET';

let data = options.data || {};

// ..........

}

// 结构写法

function ajax({method="GET", data}) {

console.log(method, data);

}

ajax({

method:"POST",

data:{"id":1,"name":"张三"}

});

​

四、延展操作符

(1)延展数组

let arr1 = [ 'a', 'b', 'c'];

let arr2 = [1, 2, 3];

let result = [...arr1, ...arr2];

console.log(result); 

//  [ "a", "b", "c", 1, 2, 3 ]

(2)延展对象

let smallDog = {name:'小黑', age: 1};

let bigDog = {name: '大白', age: 2};

let dog = {...smallDog, ...bigDog};

console.log(dog); 

// {name: "大白", age: 2}

// 注意:  如果对象中的属性一致, 会被覆盖

​

(3)应用场景

function getMinValue() {

console.log(Math.min(...arguments));

}

getMinValue(1,2,7)

// 1

​

五、ES6字符串操作

(1)新增字符串方法

[1]startsWith()

let url = 'http://www.fesco.com.cn';

console.log(url.startsWith('http'));// true

​

[2]endsWith

let url = 'http://www.fesco.com.cn';

console.log(url.endsWith('cn'));//true

​

[3]includes() 判断字符串中是否包含 XX

let str = 'skyblue and astro';

console.log(str.includes('ast')); //true

​

[4]repeat() 拷贝n份

let str = 'hello';

console.log(str.repeat(20)); //打印出50个hello

​

[5]padStart() / padEnd()

  • padStart()用于头部补全，padEnd()用于尾部补全;

  • 第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

let y1 = '2030'.padEnd(10, '1');

console.log(y1);//2030111111

let y2 = '11-22'.padStart(10, '2030-MM-DD');

console.log(y2); //2030-11-22

ES6笔记01的更多相关文章

  1. ES6笔记（5）-- Generator生成器函数

    系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还 ...

  2. ES6笔记系列

    ES6,即ECMAScript 6.0,ES6的第一个版本是在2015年发布的,所以又称作ECMAScript 2015 如今距ES6发布已经一年多的时间,这时候才去学,作为一个JSer,羞愧羞愧,还 ...

  3. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  4. 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!

    <30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...

  5. ES6笔记（1） -- 环境配置支持

    系列文章 -- ES6笔记系列 虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度 ...

  6. ES6笔记（2）-- let的块级作用域

    系列文章 -- ES6笔记系列 一.函数级作用域 我们都知道,在ES6以前,JS只有函数级作用域,没有块级作用域这个概念 没有块级作用域,有利有弊,利于方便自由,弊于作用域内的变量容易被共享,例如这个 ...

  7. ES6笔记（3）-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

  8. ES6笔记（4）-- Symbol类型

    系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...

  9. ES6笔记（6）-- Set、Map结构和Iterator迭代器

    系列文章 -- ES6笔记系列 搞ES6的人也是够无聊,把JS弄得越来越像Java.C++,连Iterator迭代器.Set集合.Map结构都出来了,不知道说什么好... 一.简单使用 1. iter ...

随机推荐

  1. 接收sql语句的返回值

    首先,简要介绍一下我们需要什么? 我们想在sql中用 try...catch,如果成功,就返回我们查询的值,如果失败就返回-1 所以有了以下sql语句(写在后台的) string myInsert = ...

  2. 9、搜索 ：ion-searchbar

    /* ---html----*/ <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event ...

  3. js控制字符处理

    使用js在对json字符串转json对象时,如果遇到一些控制(特殊)字符会出现转化失败的情况 处理方法:通常我们可以把这些控制字符替换成空 function character(str) { retu ...

  4. Vue2.0以后，有哪些变化

    最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...

  5. 弹性布局学习-详解flex-wrap(五)

    目录 弹性布局学习-介绍(一)  弹性布局学习-详解 flex-direction[决定主轴的方向](二) 弹性布局学习-详解 justify-content(三) 弹性布局学习-详解 align-i ...

  6. Spring课程 Spring入门篇 4-4 Spring bean装配（下）之Autowired注解说明3 多选一 qualifier

    本节主要讲述以下内容: 1 简述 2 代码演练 2.1 注解qualifier运用 1 简述 1.1 何种情况使用qualifier注解? a 按类型自动装配多个bean实例,可以用@qualifie ...

  7. GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  8. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  9. POJO对象

    POJO(Plain Old Java Objects)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和 EJB混淆起来, 而且简 ...

  10. 采用C/C++语言如何实现复数抽象数据类型Complex

    记录一下! 采用C/C++语言如何实现复数抽象数据类型Complex #include <stdio.h> typedef struct Complex { double e1; // 实 ...