JS es6

  1. let 不能重复声明,块级作用域,没有变量提升

  2. const 大写,赋初值,不能修改,块级作用域,const TEAM=[],对他修改不报错,TEAM地址

  3. 解构赋值

let [a, b, c] = [1, 2, 3];  let [a, b, c, d, e] = 'hello';
let [a = 2] = [undefined]; // a = 2   
let [a, , b] = [1, 2, 3];  let [a, ...b] = [1, 2, 3];
也可对象:
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
  1. 模板字符串,可以换行
    let str = 我是一个字符串 =$

  2. 简化对象写法

const age = 12;
let change = function(){};
const person = {
	age,
	change
};
以前
const person = {
	age : age,
	change : change
};
  1. 箭头函数
//所有函数都可以写成箭头函数
let fn = function(a,b){return a+b;}    let fn = (a,b)=>{return a+b}
//一个参数可省略(),一条语句可省略{}
let fn = function(a){return a+1;}    let fn = a=> a+1
// 箭头函数的this=定义时外层对象的this,因为它根本没有自己的this,导致内部的this就是外层代码块的this。 箭头函数的this=定义时外层对象的this,因为它根本没有自己的this,导致内部的this就是外层代码块的this。
//不能当构造函数,不能用arguments
  1. this
    函数形参及内部的this指向: 调用函数者
    setTimeOut的this是window

  2. 形参初始值
    function fn( a, b, c=10){}
    let connect = {username:'li', age:11} function fn(username, age){}

  3. rest参数 //rest休息剩余
    function fn(a,b,...args )

  4. 关于扩展运算符...

//将数组转化为以逗号分割的参数序列
const tf = ['易烊千玺' , '王源' , '王俊凯']   =>  '易烊千玺' , '王源' , '王俊凯' 
function fn(){}  fn(...tf);    =>fn( '易烊千玺' , '王源' , '王俊凯'  )
//用法:
数组合并/克隆: const  tt = [...tf , ...tf];
将伪数组转化为真数组: 
const divs =  document.querySelectorAll('div');
const divArr = [...div]; 
  1. 迭代器
    for ...of
    const arr = ['易烊千玺' , '王源' , '王俊凯']
    for ( let a in arr) a是键名 ,0 1 2
    for ( let a of arr) a是键值 , '易烊千玺' '王源' '王俊凯'

  2. filter

array.filter(function(currentValue,index,arr), thisValue)
//`Array`的`filter()`也接收一个函数。和`map()`不同的是,`filter()`把传入的函数依次作用于每个元素,然后根据返回值是`true`还是`false`决定保留还是丢弃该元素。

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
     return x % 2 !== 0;
 });
 r; // [1, 5, 9, 15]
 
 其实是:
 var r = arr.filter(function (x) {
     if(x % 2 !== 0)  return true;
	 else return false
 });
  1. set, 集合, 是对象
let s = new Set();
let s = new Set ( [ 1,2,3,3,3 ] );   //s里1,2,3自动去重
方法:  add  delete  has  


类型转换
var mySet = new Set(["value1", "value2", "value3"]);  // Array 转 Set
var myArray = [...mySet];  //Set 转 Array
var mySet = new Set('hello');  // String 转 Set {"h", "e", "l", "o"}


let arr1 = [1,2,3,3,3];
let arr2 = [3,4,5];

数组去重:  let arr = [...new Set(arr)]
并集:     let arr = [...new Set(arr1),...new Set(arr2)]
交集:     let arr = [...new Set(arr1)].filter(item => new Set(arr2).has(item))
差集:     let arr = [...new Set(arr1)].filter(item => !new Set(arr2).has(item))  
  1. map 是对象, 包含key和walue ,但key不仅可以是字符串,还可以是别的,比如对象,函数
let m = new Map();
m.set('name','li');  m.get('name');   m.delete('name');  m.size
遍历:
for (var [key, value] of m){ 
	console.log(key + " = " + value); 
}
//forEach(function(currentValue,index,arr), thisValue)	
m.forEach(function(value, key) {   
  console.log(key + " = " + value);
}, myMap)

**Map 与 Array的转换**
var kvArray = [["key1", "value1"], ["key2", "value2"]]; 
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象 
var myMap = new Map(kvArray); 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 
var outArray = Array.from(myMap);

**Map 的克隆**
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); 
var myMap2 = new Map(myMap1); 
console.log(myMap1 === myMap2); 
// 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

**Map 的合并**
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]); 
var second = new Map([[1, 'uno'], [2, 'dos']]); 
// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos,three 
var merged = new Map([...first, ...second]);
  1. Number.EPSILON=2^(-52)
    0.1 + 0.2 === 0.3; // false
    // 在误差范围内即视为相等
    equal = (Math.abs(0.1 - 0.3 + 0.2) < Number.EPSILON); // true

16.对象方法的扩展assign

//用表达式作为属性名,但是一定要将表达式放在方括号内
const n = "name"; 
const obj = { [n] : "Tom" };

 //复制,有同名属性,则后面的属性会覆盖前面的属性
let target = {a: 1}; let object2 = {b: 2}; let object3 = {c: 3}; Object.assign(target,object2,object3); // 第一个参数是目标对象,后面的参数是源对象
  1. localStorage与sessionStorage
  • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
    可使用的API都相同,常用的有如下几个(以localStorage为例):
  • 保存数据:localStorage.setItem(key,value); //JSON.stringify(object)
  • 读取数据:localStorage.getItem(key); //JSON.parse(string)
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);
  1. 模块化
  1. 在模块化之前,我们写js文件用(函数,对象,立即执行函数)封装变量
    但存在以下问题:
    在js文件不支持引入其他js文件, html不但要引入自己需要的js文件,还需要引入js文件需要的js文件。必须考虑引入js文件的顺序问题以及异步加载问题。

  2. ES6中新增的模块化
    导入(import):导入就是把其它js文件引入到当前js文件里。
    导出(export):导出就是对外开放的,可以导出变量,常量,函数,对象等等。

export str
export {str,fun,p} 
export default {str,fun,p} 

import {str} from './person.js'; 
import {str,fun,p} from './person.js';
import default as Person from './person.js'; =import Person from './person.js'; 
  1. 函数参数为对象
定义
async changeCheckState({commit},{skuId:a,isChecked:b}){
    let result = await reqChangeCheckState(a,b)
    ...
}
调用
this.$store.dispatch('changeCheckState', {skuId:1,isChecked:true);
   									  
*定义和调用时经常这样写*
//{skuId:skuId,isChecked:isChecked}是对象的简写形式
async changeCheckState({commit},{skuId,isChecked}){
    let result = await reqChangeCheckState(skuId,isChecked)//变量
    ...
}
this.$store.dispatch('changeCheckState', {skuId,isChecked);
posted @ 2022-02-23 23:03  波吉国王  阅读(161)  评论(0编辑  收藏  举报