一、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. 【学习】Unity手游之路<十二>手游资源热更新策略探讨

    http://blog.csdn.net/janeky/article/details/17666409 =============================================== ...

  2. Android模拟器访问本机服务器

    Android模拟器访问本机服务器,用127.0.0.1访问不到,因为127.0.0.1已经被映射到模拟器了. 可以用以下两种方式访问 1. 用 10.0.2.2 2. 直接用 本机的IP地址,如:1 ...

  3. [shell基础]——echo命令

    echo命令:在shell中主要用于输出 1. -n     不换行的显示结果(默认是换行的) 2. -e " "  支持双引号中使用一些特殊字符 常用的特殊字符有 \a 发出警告 ...

  4. VMware装Linux系统全屏问题

    在VMware上出装Linux,有强迫症的患者总是无法接受它不能全屏的问题,当然网上也有该问题的解决方案,但是搜索出来的答案总是零零散散,让很多初学者望而却步!今天笔者根据自己的机遇总结一遍最完备的解 ...

  5. Hashtable(哈希表)

    简体字繁体字转化: class Program { static void Main(string[] args) { Hashtable ht = new Hashtable(); ; i < ...

  6. select支持多查询，获取分页count

    在我们使用mybatis 时,当我们根据分页去查询数据集时,需要传入的参数有page(页码)和size(每页的条数),而我们期望获取到的数据有,小于或等于size的list数据集,同时我们还需要得到一 ...

  7. zookeeper入门教程

    zookeeper使用场景,不是很难了解,感觉zk监听节点变化,这个功能比较厉害.zk存储的节点组织结构有点像unix文件系统 1.安装zk 运行环境 centos 7 java 8 zookeepe ...

  8. PAT 1037 Magic Coupon

    #include <cstdio> #include <cstdlib> #include <vector> #include <algorithm> ...

  9. pId的数据结构转children 数据结构(JS)；

    在工作中经常遇到需要把带有pId的的list数据转换为children格式的树形结构,一直都没有找到太好的工具函数.偶然间看到了这个函数,研究了下,感觉这个函数很强大,所以记录下来,作为备用,同时也贴 ...

  10. Strom入门

    Worker.Executor.Task详解: Storm在集群上运行一个Topology时,主要通过以下3个实体来完成Topology的执行工作:1. Worker Process(工作进程)——S ...