JavaScript知识总结 ES6篇

2. const对象的属性可以修改吗

const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量。

但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

3. 如果new一个箭头函数的会怎么样

箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数。

new操作符的实现步骤如下：

1. 创建一个对象
2. 将构造函数的作用域赋给新对象（也就是将对象的__proto__属性指向构造函数的prototype属性）
3. 指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
4. 返回新的对象

所以，上面的第二、三步，箭头函数都是没有办法执行的。

4. 箭头函数与普通函数的区别

（1）箭头函数比普通函数更加简洁

• 如果没有参数，就直接写一个空括号即可
• 如果只有一个参数，可以省去参数的括号
• 如果有多个参数，用逗号分割
• 如果函数体的返回值只有一句，可以省略大括号
• 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常见的就是调用一个函数：

let fn = () => void doesNotReturn();

var id = 'GLOBAL'; var obj = {   id: 'OBJ',   a: function(){     console.log(this.id);   },   b: () => {     console.log(this.id);   } }; obj.a();    // 'OBJ' obj.b();    // 'GLOBAL' new obj.a()  // undefined new obj.b()  // Uncaught TypeError: obj.b is not a constructor

var id = 'Global'; let fun1 = () => {     console.log(this.id) }; fun1();                     // 'Global' fun1.call({id: 'Obj'});     // 'Global' fun1.apply({id: 'Obj'});    // 'Global' fun1.bind({id: 'Obj'})();   // 'Global'

// ES6  const obj = {    getArrow() {      return () => {        console.log(this === obj);      };    }  }

// ES5，由 Babel 转译 var obj = {     getArrow: function getArrow() {       var _this = this;       return function () {          console.log(_this === obj);       };     }  };

let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 }

let bar = { a: 1, b: 2 }; let baz = Object.assign({}, bar); // { a: 1, b: 2 }

let bar = {a: 1, b: 2}; let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

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 numbers = [1, 2]; add(...numbers) // 3

• 复制数组

const arr1 = [1, 2]; const arr2 = [...arr1];

const arr1 = ['two', 'three']; const arr2 = ['one', ...arr1, 'four', 'five']; // ["one", "two", "three", "four", "five"]

• 扩展运算符与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest  // [2, 3, 4, 5]

需要注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...rest, last] = [1, 2, 3, 4, 5];         // 报错 const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 报错

• 将字符串转为真正的数组

[...'hello']    // [ "h", "e", "l", "l", "o" ]

// arguments对象 function foo() {   const args = [...arguments]; }

const numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1 Math.max(...numbers); // 9

let p = new Proxy(target, handler)

let onWatch = (obj, setBind, getLogger) => {   let handler = {     get(target, property, receiver) {       getLogger(target, property)       return Reflect.get(target, property, receiver)     },     set(target, property, value, receiver) {       setBind(value, property)       return Reflect.set(target, property, value)     }   }   return new Proxy(obj, handler) } let obj = { a: 1 } let p = onWatch(   obj,   (v, property) => {     console.log(`监听到属性${property}改变为${v}`)   },   (target, property) => {     console.log(`'${property}' = ${target[property]}`)   } ) p.a = 2 // 监听到属性a改变 p.a // 'a' = 2

const [a, b, c] = [1, 2, 3]

数组里的0、1、2索引位的元素值，精准地被映射到了左侧的第0、1、2个变量里去，这就是数组解构的工作模式。还可以通过给左侧变量数组设置空占位的方式，实现对数组中某几个元素的精准提取：

const [a,,c] = [1,2,3]

const stu = {   name: 'Bob',   age: 24 }

const { name, age } = stu

注意，对象解构严格以属性名作为定位依据，所以就算调换了 name 和 age 的位置，结果也是一样的：

const { age, name } = stu

9. 如何提取高度嵌套的对象里的指定属性？

有时会遇到一些嵌套程度非常深的对象：

const school = {    classes: {       stu: {          name: 'Bob',          age: 24,       }    } }

const { name } = school

const { classes } = school const { stu } = classes const { name } = stu name // 'Bob'

const { classes: { stu: { name } }} = school         console.log(name)  // 'Bob'

function mutiple(...args) {   let result = 1;   for (var val of args) {     result *= val;   }   return result; } mutiple(1, 2, 3, 4) // 24

这里，传入 mutiple 的是四个分离的参数，但是如果在 mutiple 函数里尝试输出 args 的值，会发现它是一个数组：

function mutiple(...args) {   console.log(args) } mutiple(1, 2, 3, 4) // [1, 2, 3, 4]

这就是 … rest运算符的又一层威力了，它可以把函数的多个入参收敛进一个数组里。这一点经常用于获取函数的多余参数，或者像上面这样处理函数参数个数不确定的情况。

11. ES6中模板语法与字符串处理

ES6 提出了“模板语法”的概念。在 ES6 以前，拼接字符串是很麻烦的事情：

var name = 'css'    var career = 'coder'  var hobby = ['coding', 'writing'] var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]

var name = 'css'    var career = 'coder'  var hobby = ['coding', 'writing'] var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

function add(a, b) {   const finalString = `${a} + ${b} = ${a+b}`   console.log(finalString) } add(1, 2) // 输出 '1 + 2 = 3'

const son = 'haha'  const father = 'xixi haha hehe' father.includes(son) // true

const father = 'xixi haha hehe' father.startsWith('haha') // false father.startsWith('xixi') // true

const father = 'xixi haha hehe' father.endsWith('hehe') // true

const sourceCode = 'repeat for 3 times;' const repeated = sourceCode.repeat(3)  console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;