ES6学习:es6.ruanyifeng.com/#README
es2015(es6) 、es2016(es7)、es2017(es8) 、es2018(es9) 、es2019(es10)
(es6为基础,进行兼容扩展)
value 、let变量声明
// 块级区域
{
var value=10;
let count=20;
}
console.log(value); //10
console.log(count); //引用错误
// let在块级区域有效 var全局有效(容易混乱)
声明:
console.log(value); //undefined
var value;
console.log(count); //引用错误
let count;
//var声明在后 会引起逻辑混乱
//let声明在后 直接报错
tdz:临时死区
if(true){
// 死去开始
value=10;
console.log(value);
// 死区结束
let value;
}
框架简图:
解构赋值:
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意,ES6 内部使用严格相等运算符(
===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
如果一个数组成员是
null
,默认值就不会生效,因为null
不严格等于undefined
。
对象结构:
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
json:
// *******************************简化
var json={
aaaaaaaaaa:"张三",
eat:function(){
console.log("吃饭了");
}
}
const{aaaaaaaaaa:name,sex="男",eat}=json;
eat();
console.log(name,sex);
let obj={
p:[
'hello',
{y:'world'}
]
};
let { p: [x, { y }] } = obj;
console.log(x,y);
注意,这时
p
是模式,不是变量,因此不会被赋值。如果p
也要作为变量赋值,可以写成下面这样。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
函数参数:
function sum([a=0,b=0]=[]){
console.log(a+b);
}
sum();
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
函数
move
的参数是一个对象,通过对这个对象进行解构,得到变量x
和y
的值。如果解构失败,x
和y
等于默认值。
交换值:
let x = 1;
let y = 2;
[x, y] = [y, x];
//交换变量值(数组结构)
json值的快速提取:
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
函数参的定义:
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
Set:
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set
本身是一个构造函数,用来生成 Set 数据结构。
简单去重:
//去重
const arr=[1,2,3,4,5,3];
const newArr=[];
for(let i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])<0){
newArr.push(arr[i]);
}
}
console.log(newArr);
set(数据结构)去重:
const arr=[1,2,3,4,5,3];
const s= new Set(arr);
const[...newArr]=s;
console.log(newArr);
Map k-v 键值对结构:
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
const map=new Map();
map.set("name","张三");
map.set("sex","男");
map.set("age",20);
console.log(map);
// 遍历数组forof k =key v =vlue
for (const [k,v] of map) {
console.log(k,v);
}