ES6笔记01
一、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的更多相关文章
- ES6笔记（5）-- Generator生成器函数
系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还 ...
- ES6笔记系列
ES6,即ECMAScript 6.0,ES6的第一个版本是在2015年发布的,所以又称作ECMAScript 2015 如今距ES6发布已经一年多的时间,这时候才去学,作为一个JSer,羞愧羞愧,还 ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!
<30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...
- ES6笔记（1） -- 环境配置支持
系列文章 -- ES6笔记系列 虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度 ...
- ES6笔记（2）-- let的块级作用域
系列文章 -- ES6笔记系列 一.函数级作用域 我们都知道,在ES6以前,JS只有函数级作用域,没有块级作用域这个概念 没有块级作用域,有利有弊,利于方便自由,弊于作用域内的变量容易被共享,例如这个 ...
- ES6笔记（3）-- 解构赋值
系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...
- ES6笔记（4）-- Symbol类型
系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...
- ES6笔记（6）-- Set、Map结构和Iterator迭代器
系列文章 -- ES6笔记系列 搞ES6的人也是够无聊,把JS弄得越来越像Java.C++,连Iterator迭代器.Set集合.Map结构都出来了,不知道说什么好... 一.简单使用 1. iter ...
随机推荐
- java io 学习笔记（三） 字符流读写
1.字符流读取 字符流读取的所有类都是从Reader这个超类继承的,都是用于读取字符的,这些类分别是InputSteamReader(从字符流读取).FileReader(继承与InputStream ...
- 环境搭建：JDK--SSH--VIM--Hadoop--SybaseIQ
放假闲来无事,就自己搭建了一套环境,包含: 工具:ssh,vim 环境:Jdk,Hadoop 在此记录,下次使用 1.工具类 ssh和vim两个常用的工具就是两条命令: vim命令:sudo a ...
- multiprocessing 模块
multiprocessing模块 进程对象 创建 p = Process(target=foo, args=(param,)) 属性 p.daemon: True为守护进程, 守护进程内无法再开启子 ...
- Python 进阶
高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量) ...
- Java 的版本历史与特性
Java SE 8[2014-03-14发行] Lambda表达式 Pipelines和Streams Date和Time API Default方法 Type注解 Nashhorn JavaScri ...
- poi学习
需要节点 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...
- C# 矩阵运算和一些基本的几何运算
以前工作中写的,这里备个份,有可能用到 基本的矩阵运算类,测试20阶以内应该没啥问题,超过20阶不好使... /// <summary> /// 矩阵 异常 512索引 1024无解 20 ...
- javascript 权威指南
1.对象 1.1.序列话对象 JSON.stringify() 和 JSON.parse() 用来序列化和还原 javascript 对象. var o = {x:1, y:{z:[false,nul ...
- Learn by pictures on Computer Fields
- Ubuntu(Debian)apt-get
Ubuntu(Debian)的aptitude与apt-get的区别和联系 最近在使用Puppet快速部署Openstack,看到一些没见过的工具,例如aptitude,在Ubuntu上有强大的a ...