ES6(var、let、const)和解构赋值

1,001 阅读3分钟

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; 
           }

框架简图: image.png

解构赋值:

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的参数是一个对象,通过对这个对象进行解构,得到变量xy的值。如果解构失败,xy等于默认值。

交换值:

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);
}