let && const
let
let
所声明的变量,只在let
所在的代码块内有效。
for(let i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外:" + i);
const
const
声明的变量是常量,不能被修改;
const PI = 3.1415;
PI // 3.1415
PI = 3;
强行对其进行重新赋值会报错。
iterable类型
为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型,具有iterable类型的集合可以通过新的for … of循环来遍历。
Map
Map
本质是与Object类似的结构。不同在于Object强制规定key值只能是字符串。而Map
对象的key可以是任意对象:
- object是
<String, Object>
集合 - map是
<Object, Object>
集合
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
Set
Set
本质与数组类似。不同于Set中只能保存不同的元素,如果元素相同会被忽略
let set = new Set();
set.add(1); // [1]
let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5] /
set.add() // 添加,元素内容不可重复,重复会被忽略
set.clear() // 清空
set.delete(value) // 删除指定元素,删除的是元素内容,而不是下标
set.has(value) // 判断指定元素是否存在
set.forEach(function(){}) // 遍历
set.size // 元素个数
解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
数组结构
let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
对象结构
const person = {
name: "Tom",
age: 20,
language: ['Java','JavaScript','Python']
}
const {name,age,language} = person; // {}内的属性名必须是person的属性名
//等同于
let name="Tom"
let age=20
let language=['Java','JavaScript','Python']
字符串扩展
字符串API
- includes(“xxx”):返回布尔值,表示是否包含xxx
- startsWith(“xxx”):返回布尔值,表示是否以xxx开头
- endsWith(“xxx”):返回布尔值,表示是否以xxx结尾
字符串模板
ES6中提供了`来作为字符串模板标记。
let str = `
hello
Java
and
JavaScript
`;
console.log(str);
扩展运算符
扩展运算符(spread)是三个点(…),将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]); // 1 2 3
console.log(1,...[2,3,4],5); // 1 2 3 4 5
function add(x,y) {
return x+y;
}
const number = [1, 2];
console.log(add(...number)); // 3
let arr = [...[1,2,3],...[4,5,6]];
console.log(arr); //[1,2,3,4,5,6]
const [first,...rest] = [1,2,3,4,5,6];
console.log(first,rest); // 1 [2,3,4,5,6]
console.log([..."hello"]); // ["h","e","l","l","o"]
Promise
const promise = new Promise(function (resolve, reject) {
// 执行异步操作
if (/*异步操作成功*/){
// 调用resolve,代表Promise将返回成功的结果
resolve(value)
}else {
// 调用reject,代表Promise将返回错误的结果
reject(error)
}
})
promise.then(function(value)){
// 异步执行成功后的回调
}.catch(function(error)){
// 异步执行失败后的回调
}
函数优化
函数数默认值
function add(a,b = 1){
return a+b;
}
console.log(add(10)); //输出11
console.log(add(10,20)); //输出30
函数箭头
一个函数的简写方式
//一个参数
let print = function (obj){
console.log(obj);
}
// 简写为:
let print2 = obj => console.log(obj);
//多个参数
let sum = function(a,b){
return a + b;
}
// 简写为:
let sum2 = (a,b) => a + b;
//没有参数时
// 没有参数时,需要用()进行占位,代表参数部分
let hello = function(){
console.log("Hello ...")
}
// 简写为:
let hello2 = () => console.log("Hello ...")
map()
&& reduce()
map()
map()
:接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组返回。
let arr = ['1','2','3','4']
console.log(arr);
let newArr = arr.map(s => parseInt(s));
console.log(newArr);
reduce()
reduce():接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:
- 第一个参数是上一次reduce处理的结果,
- 第二个参数是数组中要处理的下一个元素
reduce()会从左至右依次把数组中的元素用reduce()处理,并把处理结果作为下一次reduce的第一个参数,如果是第一次,会把前两个元素作为计算参数,或者把传入的初始值参数作为起始值。
const arr = [2,5,-10,20];
arr.reduce((a,b)=>a+b) //17
const arr = [2,5,-10,20];
arr.reduce((a,b)=>a+b,1) //18
const arr = [2,5,-10,20];
arr.reduce((a,b)=>a+b,arr.reduce((a,b)=>a+b)) //34
Generator函数
generator
是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。
Generator
函数有两个特征
- function命令与函数名之间有一个*****号
- 函数体内部使用yield语句定义不同的内部状态
function * hello() {
yield "hello";
yield "world";
return "over"
}
let hi = hello();
console.log(hi.next());
console.log(hi.next());
console.log(hi.next());
console.log(hi.next());