ES6基础练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script> // ES6新增了let命令，用来声明变量。 // let a; // let a,b,c; // let a = 1,b = 'hello',c = []; // 1. let 声明的变量只在其所在的代码块内有效，var声明 // 的变量在全局范围内有效: // { // let a = 1; var b = 2; // } // console.log("a",a); // ReferenceError: a is not defined // console.log("b",b); // 2 //2. let 不可重复声明变量。 // let a=1; // let a=2; // var b=3; // var b=4; // console.log("a",a); // Identifier 'a' has already been declared // console.log("b",b); // 4 // 3. let 不存在变量提升，存在暂时性死区，必需先声明、 // 后使用。 // console.log(a); //ReferenceError: a is not defined // let a = "apple"; // console.log(b); //undefined // var b = "banana"; //3. 块级作用域 block // ES5 只有全局作用域和函数作用域，没有块级作用域。 // 这带来很多不合理的场景。 // 用来计数的循环变量泄露为全局变量 // ES6中，let 实际上新增了块级作用域。 // var s='hello'; // for(var i=0;i<s.length;i++){ // console.log("i",i);// 0 1 2 3 4 // } // console.log("i",i);// 5 // 三. const命令 // 1. 基本用法 // const 声明一个只读变量，声明之后不允许改变。 // const PI = 3.1415; // console.log(PI); // 3.1415 // PI = 3; // Assignment to constant variable. // 2.特点 // 1. let 具备的特点、block 作用域 const 同样具备，可以 // 将 const 看做一个具备更多特性的 let // 2. const一旦声明变量，就必须立即初始化，不能在后续 // 赋值。 // const PI; // SyntaxError: Missing initializer in const declaration // 3. 对于复合类型的变量，变量名不指向数据，而是指向 // 数据所在的地址。const命令只保证变量名指向的地址 // 不变，并不保证该地址的数据不变。 // 数组 // const a=[]; // a.push('Hello'); // a.push('World'); // console.log(a) // ["Hello", "World"] // a = ['tanglb']; // Assignment to constant variable. // 对象 // const foo={}; // foo.prop=123; // console.log(foo.prop) // 123 // foo = {}; // Assignment to constant variable. // 四. 解构赋值 // 1. 概述 // 解构赋值是对赋值运算符的扩展。 // 他是一种针对数组或者对象进行模式匹配，然后对其中 // 的变量进行赋值。 // 在代码书写上简洁且易读，语义更加清晰明了；也方便 // 了复杂对象中数据字段获取。 // ES6以前，为变量赋值，只能直接指定值。 // var a = 1; // var b = 2; // var c = 3; // var a = 1,b = 2,c = 3; // ES6允许通过相同的结构，解构赋值 // “模式匹配”，只要等号两边的模式、结构相同，左边的变量 就会被赋予对应的值。 // var [a, b, c] = [1, 2, 3]; // 解构失败（等号两边的模式不同）： // let [a, [b]] = [1,2]; //undefined is not a function // console.log(a); // console.log(b); // 2. 数组模型的解构赋值（Array） // 基本结构 // let [a, , c] = [1, 2, 3]; //a = 1,c = 3 // 嵌套结构 //let [a, [[b], c]] = [1, [[2], 3]]; // a = 1, b = 2, c = 3 // 忽略值 //let [a, , b] = [1, 2, 3]; // a = 1, b = 3 //不完全解构，左右两边的模式相同，但需要被赋值变量的数量 和解构的值的数量不同 //let [a, b] = [1]; // a = 1, b = undefined //let [a, b] = [1, 2, 3]; // a = 1, b = 2 // rest 剩余运算符 //let [a, ...b] = [1, 2, 3]; //a = 1, b = [2, 3] // 解构默认值 // let [a = 1] = []; // a = 1 // let [a = 2] = [undefined]; // a = 2 // let [a = 3, b = a] = []; // a = 3, b = 3 // let [a = 3, b = a] = [1]; // a = 1, b = 1 // let [a = 3, b = a] = [1, 2]; // a = 1, b = 2 //在数组的解构中，解构的目标若为可遍历对象(即实现 Iterator 接口的对象,字符串等)，皆可进行解构赋值。 //let [a, b, c, d, e] = 'hello'; // a = 'h',b = 'e',c = 'l',d = 'l',e = 'o' // 3. 对象模型的解构（Object） // 基本结构 // let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa', bar = 'bbb' // let { baz : 'ccc' } = { baz : 'ddd' }; // foo = 'ddd' // 基本结构 //let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa', bar = 'bbb' //let { baz : 'ccc' } = { baz : 'ddd' }; // foo = 'ddd' // 忽略值 //let obj = {p: ['hello', {y: 'world'}] }; //let {p: [x, { }] } = obj; // x = 'hello' // 不完全解构 //let obj = {p: [{y: 'world'}] }; //let {p: [x, { }] } = obj; // x = undefined, y = 'world' // 剩余运算符 //let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10,b = 20,rest = {c: 30, d: 40} // 解构默认值 //let {a = 10, b = 5} = {a: 3}; // a = 3; b = 5; //let {a: aa = 10, b: bb = 5} = {a: 3}; // aa = 3; bb = 5; //在对象的解构中，解构的目标若可视为对象(字符串)，皆可进行解构赋值。 // let {length : len} = 'hello'; // console.log(len);//5 // 4.解构赋值的用途 // 1.交换变量 // let [x, y] = [111,222]; // [x, y] = [y, x]; // console.log([x, y]); // [222, 111] // 2.获取函数的多个返回值 // 返回一个数组 // function example() { // return [1, 2, 3]; // } // let [a, b, c] = example(); // console.log([a, b, c]);//(3)=[1,2,3] // 返回一个对象 // function example() { // return { // a: 1, // b: 2 , // }; // } // var { a, b } = example(); // console.log({a, b});//{a:1,b:2} //3.提取JSON数据 //解构赋值对提取JSON对象中的数据，尤其有用。 // let jsonData = { // id: 42, // status: "OK", // data: [867, 5309] , // }; // let { id, status, data } = jsonData; // console.log(id); //42 // console.log(status); //ok // console.log(data);//(2)[867, 5309] // let [a,b] = data; // console.log(a); //867 // console.log(b);//5309 // 五. Map 与 Set // 1.Map 对象 // Map 对象保存键值对。 // Maps 和 Objects 的区别： // 一个 Object 的键只能是字符串或者 Symbols， // 一个 Map 的键可以是任意值(对象或者原始值) 。 // Object 都有自己的原型，原型链上的键名有可能和你 // 自己在对象上的设置的键名产生冲突。 // let myMap = new Map(); // key 是 String 类型 // let keyString = "a string"; // myMap.set(keyString, "和键'a string'关联的 值"); // myMap.get(keyString); // "和键'a string'关联的值" // myMap.get("a string"); // "a string" => "和键'a string'关联的值" // 2.Map 的迭代 // key 是 Object 类型 // let keyObj = {}; // myMap.set(keyObj, "和键 keyObj 关联的值"); // myMap.get(keyObj); // "和键 keyObj 关联的 值" // myMap.get({}); // undefined, 因为 keyObj !== {} // key 是函数 // let keyFun = function () {}; // 函数 // myMap.set(keyFun, "和键 keyFun 关联的值"); // myMap.get(keyFun); // "和键 keyFun 关联的 值" // myMap.get(function() {}) // undefined, 因 为 keyFunc !== function () {} // 2.Map 的迭代 // 任何原生支持Iterator接口的对象，都可以用for...of循 环遍历。 // console.log(Map.prototype) //Map {constructor: ƒ, get: ƒ, set: ƒ, has: ƒ, delete: ƒ, …} // let map = new Map(); // map.set('first', 'hello'); // map.set('second', 'world'); // for (let [key, value] of map) { // console.log(key + " : " + value);//first:hello second:world // } // 配合解构赋值，获取键名和键值就非常方便。 // 只获取键名 // for (let [key] of map) { // // ... // } // // 只获取键值 // for (let [value] of map) { // // ... // } // 3.Map 对象的操作（了解） // Map 与 Array的转换 //var kvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 构造函数可以将一个 二维 键值对 Array 转换成一个 Map 对象 //var myMap = new Map(kvArray) // 使用 Array.from 函数可以将一个 Map 对象转换成一个 二维键值对数组 //var outArray = Array.from(myMap); //Map 的克隆 // var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); // var myMap2 = new Map(myMap1); // Map 的合并 // var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]); // var second = new Map([[1, '1'], [2, '2']]); // 4.Set 对象 // Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 // let mySet = new Set(); // mySet.add(1); // Set(1) {1} // mySet.add(5); // Set(2) {1, 5} // mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性 // mySet.add("some text"); // Set(3) {1, 5, "some text"} 这里体现了类型的多样性 // var o = {a: 1, b: 2}; // mySet.add(o); // mySet.add({a: 1, b: 2}); // Set(5) {1, 5, "some text", {…}, {…}} // 这里体现了对象之间引用不同不恒等，即使值相同，Set 也 能存储 // 5.Set 对象作用 // Array 转 Set //var mySet = new Set(["value1", "value2", "value3"]); // 用...扩展操作符，将 Set 转 Array //var myArray = [...mySet]; //数组去重 //var mySet = new Set([1, 2, 3, 4, 4]); //[...mySet]; // [1, 2, 3, 4] //数组并集 //var a = new Set([1, 2, 3]); //var b = new Set([2, 3, 4]); ///var union = new Set([...a, ...b]); // {1, 2, 3, 4} //数组交集 //var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3} //数组差集 //var difference = new Set([...a].filter(x => !b.has(x))); // {1} <body> </body> </html>
今日练习笔记
