一、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. spring 3.0 @ResponseBody注解返回中文问号乱码解决办法

    前几天给公司做项目,很久没接触java项目的我,遇到了一个问题,就是我在利用异步到控制器中查询,然后返回jaon字符串到前台,字符串中包含中文,于是我直接用了@ResponseBody注解,来返回到前 ...

  2. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  3. HTML的注释方式对JSP的JSTL不管用

    <fmt:parseNumber var="y" integerOnly="true" type="number" value=&qu ...

  4. 深入理解JavaScript系列（37）：设计模式之享元模式

    介绍 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 享元模式可以避免大量非常相似类的开销,在程序设 ...

  5. javascript window.open in safari

    在ios系统中,无法使用 window.open 打开url,经过一番尝试终于找到了解决办法 var url='http://www.baodu.com'; var deviceAgent = nav ...

  6. VS2008、 VS2010 、 VS2012、 VS2013 都能用的快捷键

    VS2008.  VS2010  . VS2012.  VS2013 都能用的快捷键 Ctrl+E,D             --格式化全部代码 Ctrl+K,F              --格式 ...

  7. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  8. windows默认共享的打开和关闭？

    windows默认共享的打开和关闭?   Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置 ...

  9. 框架页面jquery装载

  10. 初次撸Python，踩平些小坑～

    [转义字符] os.path.isdir(targetPath)总是报错,以为字符串不行而是要转成file类型,尝试了很多方法还是没解决,最后发现,windows下的路径中字符串中需要转义(例子在网上 ...