不知道的一些es6新语法

一骑绝尘蛙
196 阅读7分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

近期在一些摸鱼群中发现了还是有好多童鞋不知道一些新的es6语法，所以我在这里进行一些记录方便童鞋们用来查阅

ECMAScript 6.0

介绍

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版

反正就是一些新技术，能让我们代码写的飞起的新语法，所以还是有必要学一下的

新增语法

let, const, var

  • let 声明变量，其作用域在代码块内，且不存在变量提升
  • var 声明变量，其作用域在函数内，且存在变量提升
  • const 声明常量，定义的常量不可再次修改,且在声明的时候就必须赋值
// 块级作用域
if (true) { let a = 10; } 
console.log(a) // a is not defined
// 变量提升
console.log(a); // a is not defined 
let a = 20;
// 利用let声明的变量会绑定在这个块级作用域，不会受外界的影响
var tmp = 123;
 if (true) { 
     let tmp = 0; 
     console.log(tmp);//  0
 }
 console.log(tmp);// 123

拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person = {name: "jack", age: 15};
let someone = { ...person };
someone;  //{name: "jack", age: 15}

自定义的属性和拓展运算符对象里面属性的相同的时候：自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉

解构赋值

  • 解构赋值就是把数据结构分解，然后给变量进行赋值
  • 如果解构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
  • 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
  • 利用解构赋值能够让我们方便的去取对象中的属性跟方法

数组

// 常见解构赋值
let [a, b, c] = [1, 2, 3];
// a = 1 
// b = 2 
// 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 = 1, b] = []; 
// a = 1, 
// b = undefined

// 展开运算符用法
let [a, ...b] = [1, 2, 3];
// a = 1, 
// b = [2,3]

对象

// 常见解构赋值
let {name,age} = {name:'jack',age:18};
// name=jack 
// age=18
let {name:newName} = {name:'jack'};
// newName=jack

// 嵌套用法
let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, { y }] } = obj; 
// x = 'hello' 
// y = 'world'

// 展开运算符用法
let {name,...other} = {name:'jack',age:18,sex:'男'}
// name = jack
// other = {age:18,sex:'男'}

提供默认值写法

只需要在赋值前加等号赋值即可，如果解构对象里面没有则用默认值

let [a,b,c=3] = [1,2]
// a = 1
// b = 2
// c = 3

let {name='rose',age} = {age:19}
// name = rose
// age = 19

set

常用去重

let mySet = new Set([1, 2, 2, 3, 4, 4]); 
[...mySet]; // [1, 2, 3, 4]

Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 Null 和 Undefined ，还新增了 Symbol 。

let name = Symbol("KK");
console.log(name);   // Symbol(KK)
typeof(name);        // "symbol"

// 相同参数 Symbol() 返回的值不相等
let name1 = Symbol("kk"); 
name === name1;       // false

每一个Symbol的值都是不相等的，所以当业务需要有重名是时候可以合理使用Symbol

Proxy

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作

let target = {
    name: 'jack',
    age: 24
}
let handler = {
    get: function(target, key) {
        console.log('getting '+key);
        return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+ key);
        target[key] = value;
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set

一般我们了解的就是vue3内部proxy的代理方法，vue源码对数据跟踪处理就是利用的这个

字符串方法

includes, startsWith, endsWith, repeat, padStart ,padEnd
  • includes()：返回布尔值，判断是否找到参数字符串。
  • startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
  • endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
  • repeat()：返回新的字符串，表示将字符串重复指定次数返回。
  • padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
  • padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
// 上面三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引
string.startsWith("banana",6)  // true

console.log("Hello".repeat(2)); // "HelloHello,"

console.log("h".padStart(5,"o")); // "ooooh" 
console.log("h".padEnd(5,"o")); // "hoooo" 
console.log("h".padStart(5)); // " h"
// 以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

模板字符串

在模板字符串内可以使用变量，通过$符号加{}，在大括号内加入变量名，并且还能加入表达式

let name = 'jack'
console.log(`我的名字叫${name}`) // 我的名字叫jack
console.log(`我的名字叫${name}今年${10+2}岁`) // 我的名字叫jack今年12岁

数值表达式

二进制表示法新写法: 前缀 0b 或 0B，八进制表示法新写法: 前缀 0o 或 0O

console.log(0b11 === 3); // true 
console.log(0B11 === 3); // true
console.log(0o11 === 9); // true 
console.log(0O11 === 9); // true

Number的isFinite方法

用于检查一个数值是否为有限的（ finite ），即不是 Infinity

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
console.log( Number.isFinite(NaN)); // false
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
// 非数字全部返回false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

指数运算符

1 ** 2; // 1 相当于1的2次方
// 右结合，从右至左计算
2 ** 2 ** 3; // 256 相当于 先计算2的三次方，在算2的（2的三次方），相当于2的八次方

属性名表达式

ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内。

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"

Object.assign

用于将源对象的所有可枚举属性复制到目标对象中

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// 第一个参数是目标对象，后面的参数是源对象
target;  // {a: 1, b: 2, c: 3}

// 如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。
// 如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回
Object.assign(3);  
typeof Object.assign(3); // "object"

 // null 和 undefined 不能转化为对象，会报错
Object.assign(null);       // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object

//当参数不止一个时，null 和 undefined 不放第一个，即不为目标对象时，会跳过 null 和 undefined ，不报错
Object.assign(1,undefined);  // Number {1}
Object.assign({a: 1},null);  // {a: 1}

assign 的属性拷贝是浅拷贝，当后面有相同属性名时后面会覆盖前面的

数组创建

  • Array.of()将参数中所有值作为元素形成数组
  • Array.from()将类数组对象或可迭代对象转化为数组
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
 
// 参数为空时返回空数组
console.log(Array.of()); // []

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
 
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

结尾

还有部分常见的在这里没写上，但是有些不常见的这里已经整理上去了。欢迎大家给予评论以及其它我未收集的新方法

avatar
文章
阅读
粉丝