一、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. java读取excel（只是读取）

      最近做项目需要读取excel,在网上找了几个,都需要下载各种jar,下载好之后还是不能用,而且还分(xls xlsx)这两种格式, 最后找到个这个,不需要下载jar包,格式通吃,不过只是简单的读取 ...

  2. Coursera 机器学习 第6章（上） Advice for Applying Machine Learning 学习笔记

    这章的内容对于设计分析假设性能有很大的帮助,如果运用的好,将会节省实验者大量时间. Machine Learning System Design6.1 Evaluating a Learning Al ...

  3. IE67不兼容display:inline-block，CSS hack解决

    追加以下代码:*display:inline.*zoom:1 ;} 块元素变为内联块, IE67不兼容:内联元素变为内联块,所有浏览器都支持 发现问题:当然,变为内联块后,有一个特性就是如果元素换行, ...

  4. .Net下Redis使用注意事项

    .Net下Redis使用注意事项 注:Redis的安装方法和桌面端工具很多,不在本文讨论范围内. 一:不结合适用场景的技术都是耍流氓,Redis主要适用场景: 简单字符串缓存 简单队列 简单发布订阅 ...

  5. 选择排序——Java实现

    一.排序思想 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理是: 从待排序列中选出最小(或最大)的一个元素,记录其下标(数组)的位置: 将记录的下标值与待排序列的第一个 ...

  6. 用单例模式解决临界区(CRITICAL_SECTION)的使用问题

    一.前言 最近,在项目中涉及到多线程访问临界资源的问题.为了保护临界资源,可以是使用互斥量或者是使用临界区.由于,我不需要在多进程中同步,又为了效率的考量,所以选择了使用临界区的方式.但是,在使用临界 ...

  7. js之箭头函数

    原文 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: ...

  8. java参数传递之值传递

    一 概述 1.什么是参数传递? 调用方法时向形参传递数据的过程叫做参数传递.在编程语言中有两种传递方式:值传递与引用传递.必须强调的是,这里提到的两种传递方式不是仅限于java使用到的传递方式,而是出 ...

  9. Android性能优化之渲染篇

    下面是渲染篇章的学习笔记,部分内容和前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Why Rendering Performance Matters 现在有不少App为了达到很华丽的视觉效果, ...

  10. 怎样在vs2013和vs2015中实现自动编译sass

    Visual Studio不论是2013版本还是2015版本要自动编译都需要添加扩展. 添加扩展的方法,路径“工具”->“扩展和更新”,在打开的窗口“搜索”你需要的扩展根据提示“下载”和“安装” ...