es6常用方法总结

Posted 2020-10-31 lhl66

1.let, const 都是块级作用域，其有效范围仅在代码块中。
//es5
if(a==1){
  var b = ‘xxx‘;
}
console.log(b);//xxx

//es6
if(a==1){
  let b = ‘xxx‘;
}
console.log(b);//undefined
----------------------------------------
const sum = {num1:1,num2:2};
sum.num2 = 6;
console.log(sum);//{num1:1,num2:6}
常量只是指向了对象的指针，对象本身的内容却依然可以被修改
-------------------------------------------------------------
2.模板字符串
//es5
$(‘#mark‘).append(
  ‘出售中 <span>‘ + obj.num + ‘</span> ‘ +
  ‘剩下的, ‘ +‘<span>‘ + obj.showNum +‘</span> 卖完了!‘);
//es6
//在es6中，内容模板，可以定义在 `` 包起来的字符串中，其中的内容会保持原有格式
//另外可以在字符串中直接使用模板语言进行变量填充，优雅而简洁
$(‘#mark‘).append(`
  出售 <span>${obj.num}</span> 剩下 <span>${obj.showNum}</span>`);
-------------------------------------------------------------
3.字符串遍历输出,补全
for(let item of ‘str‘){
  console.log(item);
}
//s
//t
//r
-----------------------------------------------
//参数1：[number] 目标字符串长度
//参数2：[string] 进行补全的字符串
‘123‘.padStart(5, ‘0‘)//00123 - 字符串不足5位，在头部补充不足长度的目标字符串
‘345‘.padEnd(5, ‘0‘)//34500 - 在尾部进行字符串补全
-------------------------------------------------------------
4.数组扩展
let a = [1, 2];
let b = [2，3];
let c = [...a, ...b];//[1, 2, 2, 3] 所有内容合并，但并不会去除重复
---------------------------------------------------
Array.of(3,4,5)//快速转换为数组 [3,4,5]
-------------------------------------------------------------
.keys() - 获得数组中所有元素的键名（实际上就是下标索引号）
.values() - 获得数组中所有元素的数据
.entries() - 获得数组中所有数据的键名和数据
for (let i of [‘x‘, ‘y‘].keys()) {
  console.log(i); //0 1
}
-----------------------------------
for (let elem of [‘x‘, ‘y‘].values()) {
  console.log(elem); //x y
}
-----------------------------------
for (let [index, elem] of [‘x‘, ‘y‘].entries()) {
  console.log(index, elem); // 0 "x"    1 "y"
}
-------------------------------------------------------------
5.对象扩展
//直接使用变量/常量的名称个为对象属性的名称
let a = ‘abc‘;
let b = {a};//{a: ‘abc‘}
-----------------------------------
判断对象是否为数组
if(Object.isArray(obj)){}
-----------------------------------
对象内容合并
Object.keys() - 获得对象中所有的键名，以数组的形式返回
var obj = { a:1,b:2 };
var names = Object.keys(obj);//[‘a‘, ‘b‘]
-----------------------------------
Object.values() - 获得对象中所有的值内容，以数组的形式返回
var obj = { a:1,b:2 };
var values = Object.values(obj);//[1, 2]
-----------------------------------
Object.entries() - 获得对象中所有的成员数据，以数组的形式返回，成员的内容也是数组形式
var obj = { a:1,b:2 };
var values = Object.entries(obj);//[[‘a‘,1], [‘b‘,2]]
-------------------------------------------------------------
解构赋值
let [a, …b] = [1,2,3];
//这里 b 的值为[2，3]，这样可以快速使用剩余的数据赋值给变量，
let [a, b, c] = [1, 2, 3];
//定义了三个变量，并对应赋了值；如果值的个数与变量名个数不匹配，没有对应上的变量值为 undefinedlet obj = {a: 1, b: 2};
let {a, b} = obj;//a=1,b=2
使用变量的方式进行结构赋值，需要严格匹配名称，数组的模式是严格匹配下标
-------------------------------------------------------------
6.模块化
//app.js
let act = {a:1,b:2,c:3};
export default act;

//index.js
import act from ‘app.js‘;//假设 app.js 与index.js 同在一个目录中
console.log(act.a);//1