ES6基本常用语法

2023年2月26日 74次阅读 来源: Wheeler

一、Let 和 const

更加优先使用let 和 const去取代var

二、变量的解构赋值

变量对象数组赋值

/*
let a=1;
let b={x:'test'};
let c=[1,2,3];
*/
let [a, b, c] = [1, {x: 'test'}, [1, 2, 3]];
console.log(a);  //1
console.log(b.x);  //test
console.log(c.length);  //3

默认值

let [x = '1'] = [];
console.log(x);  //1

let [y, z = '2'] = ['1'];
console.log(y);  //1
console.log(z);  //2

用途

  • 交换变量的值
let [x, y] = [1, 2];
[x, y] = [y, x];
console.log(`x=${x} y=${y}`);  //x=2 y=1
  • 提取 JSON 数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data } = jsonData;

console.log(id, status, data);  // 42, "OK", [867, 5309]
  • 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");

三、字符串

  • 字符串遍历
let str='hello';
for(let i of str){
    console.log(i); 
}
/*
h
e
l
l
o
 */
  • includes(), startsWith(), endsWith()
let str='hello';
console.log(str.startsWith('he'));  //true
console.log(str.endsWith('lo'));  //true
console.log(str.includes('ll'));  //true
  • 模板字符串
let a="test";
console.log(`I am ${a}`);  //I am test

四、函数

  • rest参数
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

console.log(add(2, 5, 3)) // 10
  • 箭头函数
/*
function test(x,y){
    return x+y;
}
*/

const test=(x,y)=>x+y;

使用箭头函数可以避免ES5函数this的问题，箭头函数this在方法内和方法外是一样的

五、数组

  • 拓展运算符

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

六、对象

  • Object.is() 比较两个值相等

解决==类型转换和===的NaN不等于自身，以及+0等于-0。

  • Object.assign

对象的浅拷贝

  • 对象深拷贝
JSON.parse(JSON.stringify(data));
    原文作者：Wheeler
    原文地址: https://segmentfault.com/a/1190000015927214
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞