JS es6
-
let 不能重复声明,块级作用域,没有变量提升
-
const 大写,赋初值,不能修改,块级作用域,const TEAM=[],对他修改不报错,TEAM地址
-
解构赋值
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' };
-
模板字符串,可以换行
let str =我是一个字符串
=$ -
简化对象写法
const age = 12;
let change = function(){};
const person = {
age,
change
};
以前
const person = {
age : age,
change : change
};
- 箭头函数
//所有函数都可以写成箭头函数
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
-
this
函数形参及内部的this指向: 调用函数者
setTimeOut的this是window -
形参初始值
function fn( a, b, c=10){}
let connect = {username:'li', age:11} function fn(username, age){} -
rest参数 //rest休息剩余
function fn(a,b,...args ) -
关于扩展运算符...
//将数组转化为以逗号分割的参数序列
const tf = ['易烊千玺' , '王源' , '王俊凯'] => '易烊千玺' , '王源' , '王俊凯'
function fn(){} fn(...tf); =>fn( '易烊千玺' , '王源' , '王俊凯' )
//用法:
数组合并/克隆: const tt = [...tf , ...tf];
将伪数组转化为真数组:
const divs = document.querySelectorAll('div');
const divArr = [...div];
-
迭代器
for ...of
const arr = ['易烊千玺' , '王源' , '王俊凯']
for ( let a in arr) a是键名 ,0 1 2
for ( let a of arr) a是键值 , '易烊千玺' '王源' '王俊凯' -
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
});
- 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))
- 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]);
- 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); // 第一个参数是目标对象,后面的参数是源对象
- 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);
- 模块化
-
在模块化之前,我们写js文件用(函数,对象,立即执行函数)封装变量
但存在以下问题:
在js文件不支持引入其他js文件, html不但要引入自己需要的js文件,还需要引入js文件需要的js文件。必须考虑引入js文件的顺序问题以及异步加载问题。 -
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';
- 函数参数为对象
定义
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);