ES6 学习笔记一

2020-09-28 136 阅读2分钟

let & var 的作用域

let & var

○ let：常量

○ var：变量
let & var 的作用域

○ let：块作用域

○ var：全局作用域

○ 用 let 定义的属性只能在 { } 大括号里面能使用。

○ 用 var 定义的属性能在 { } 大括号外面也能使用。

if (true) { var str = 'dzm'; } console.log(str); // 输出 dzm

if (true) { let str = 'dzm'; } console.log(str); // 输出 str is not defined

const

const 是衡量表示只能初始化一个的，类似于java中final。
const 强调的是赋值的过程，并不是具体的那个值的大小。

const index = 1; var index = 2; console.log(index)

这样就会报错。

当然const 也可以进行填写值的，用push方法：

const index = [1, 2, 3];
index.push(1);
index.push(2)
console.log(index)；

解构赋值

数组的方式

function strs() { return ['d','z', 'm']; }

var strs = strs(), d = strs[0], z = strs[1], m = strs[2]; console.log(d,z,m); // d z m

let [d,z,m] = strs(); console.log(d,z,m); // d z m

字典的方式

function strs() { return {d: 'd', z: 'z', m: 'm'}; }

var strs = strs(), d = strs['d'], z = strs['z'], m = strs['m']; console.log(d,z,m); // d z m

let {d: d, z: z, m: m} = strs(); console.log(d,z,m); // d z m

let {d, z, m} = strs(); console.log(d,z,m); // d z m

... 符号的使用

扩展运算符（spread）是三个点（...）。
支持在函数里面代替更多的值，可以看上面《函数正常使用》的例子。

let strs = ['d', 'z', 'm']; strs1 = ['>', ...strs]; console.log(strs); // ["d", "z", "m"] console.log(...strs); // d z m console.log(strs1); // [">", "d", "z", "m"]

`` 符号的使用

字符串

let d = 'd', z = 'z', m = 'm';

let str = d + '+' + z + '+' + m + '=' + d + z + m; console.log(str); // d+z+m=dzm

let str = ${d}+${z}+${m}=${d}+${z}+${m}; console.log(str); // d+z+m=dzm

let str = ${d} + ${z} + ${m} = ${d} + ${z} + ${m}; console.log(str); // d + z + m = d + z + m

函数 `` 的使用

let d = 'd', z = 'z', m = 'm';

// 调用函数，如果 `` 里面包含换行符，空格...也会被输出 test(${d}+${z}+${m});

function test(strs, ...values) { // 会输出非参数的数组，也就是 ${xx} 以外的数据分割，开头结尾如果没有则是空字符串，我这里开头结尾使用了（）所以能输出，默认是 "" 空字符串。 console.log(strs); // ["(", "+", "+", ")", raw: Array(4)] // 会输出参数的数组，也就是使用$ {xx} 包裹的值才会出现在这里。 console.log(values); // ["d", "z", "m"] }

函数正常使用

let d = 'd', z = 'z', m = 'm';

// 调用函数 test('>', d,z,m);

function test(strs, ...values) { console.log(strs); // > console.log(values); // ["d", "z", "m"] }

函数的默认值

function test(d = 'd', z = 'z', m = 'm') {
  return `${d}${z}${m}`;
}
console.log(test()); // dzm
console.log(test('x','y','q')); // xyq

函数的 name 属性

function test() {}
console.log(test.name); // test

let fn = function test() {}
console.log(fn.name); // test

let fn = function () {}
console.log(fn.name); // fn

箭头函数的使用

正常函数

var test = function test(desc) { return desc; } console.log(test('dzm')); // dzm

箭头函数

○ 用法一

let test = desc => desc;
console.log(test('dzm')); // dzm

○ 用法二

let test = (desc, desc1) => desc + desc1;
console.log(test('dzm','xyq')); // dzmxyq

○ 用法三

let test = (desc, desc1) => {
  return desc + desc1
};
console.log(test('dzm','xyq')); // dzmxyq

缩写

let dzm = 'dzm', xyq = 'xyq';
// let dict = {
//   dzm: dzm,
//   xyq: xyq,
//   test: function () {}
// }
let dict = {
  dzm,
  xyq,
  test () {}
}
console.log(dict); // {dzm: "dzm", xyq: "xyq", test: ƒ}