python 文章

es6 常用的剪头函数，声明方式，导入导出，新的一些遍历方法，map，foreach,模板字符串，解构赋值

vue全家桶、路由，组件，axios,cli

移动端就用rem

es6新特性

1、多了两个新的变量声明，const、let,避免变量提升

2、模板字符串

3、箭头函数

4、函数参数默认值

5、遍历方式，for...of和for...in

箭头函数

var a=(param)=>{

return param;

}

1、没有this，super，arguments，new.target绑定

2、this指向外层this对象，即window

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

function fn(){

  setTimeout(()=>{

    // 定义时，this 绑定的是 fn 中的 this 对象

    console.log(this.a);

  },0)

}

var a = 20;

// fn 的 this 对象为 {a: 19}

fn.call({a: 18});  // 18

不可以作为构造函数，也就是不能使用 new 命令，否则会报错

var Person1 = {

    'age': 18,

    'sayHello': function () {

  console.log(this.age);//18

      setTimeout(()=>{

        console.log(this.age);//18

      });

    }

};

var age = 20;

Person1.sayHello()

var Person1 = {

    'age': 18,

    'sayHello': ()=> {

  console.log(this.age);//20

      setTimeout(()=>{

        console.log(this.age);//20

      });

    }

};

var age = 20;

Person1.sayHello()

声明方式

1、let 声明的变量只在 let 命令所在的代码块内有效。

2、const 声明一个只读的常量，一旦声明，常量的值就不能改变。

3、let与var的区别

1.let只在代码块内有效，var是全局范围有效

2.let只能声明一次，var可以多次声明

3.不存在变量提升即打印的变量是下行定义的，如果打印的是let声明方式的会报错（不会像var一样会提前将变量定义好），如果是使用var什么的，变量已经定义完成不过没有赋值，不会报错

for 循环计数器很适合用 let

for (var i = 0; i < 10; i++) {

  setTimeout(function(){

    console.log(i);

  })

}

// 输出十个 10

for (let j = 0; j < 10; j++) {

  setTimeout(function(){

    console.log(j);

  })

}

// 输出 0123456789

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10。

变量 j 是用 let 声明的，当前的 i 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

const

1、声明只读变量，声明之后不允许修改（特指简单类型，复杂类型数据是可修改），声明必须初始化，否则会报错。

2、ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。

暂时性死区:

var PI = "a";

if(true){

  console.log(PI);  // ReferenceError: PI is not defined

  const PI = "3.1415926";

}

3、const声明初始化之后不允许改变，不是指变量的值不变，而是保证变量指向的内存地址所存的数据不允许改变，对于简单类型的数据是不可改变值的，对于复杂类型(object，array，function)，变量所指向的内存地址是一个保存了指向实际数据的指针，只能保证const是固定的，指针所指的数据结构不变无法控制。

导入导出

1、导出部分数据 （文件a.js export var num =100） ,引用 import {num} from './a.js'

2、引入的变量想要重命名  import {aa as num} from './a.js'

3、导入模块里所有  import * as module from './a.js'

3、导入的文件没有任何输出  import 'a.js'

4、导出 export {num,.......}  或 export var num=100

5、导出重命名 export { getorderinfromdatabasebyHttp as getOrderInfo}

遍历

iterator(ederuide)

1、通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置

2、lterator 用于遍历数据结构元素的指针，使用next方法向下迭代下一个位置并返回下个位置的数据，返回的数据中有done属性为true为遍历结束了并且值为undefined

3、只有map和set能使用iterator遍历方法获取到key和value

let arr = ["zero","one","two"];

let it = arr[Symbol.iterator]();

it.next();// >{value: "zero", done: false}

it.next();// >{value: "one", done: false}

it.next();// >{value: "two", done: false}

it.next();// >{value: undefined, done: true}

创建一个Symbol.iterator方法创建一个迭代器，不断调用next方法对数组内部项进行访问，当熟悉done为true时候访问结束。顺序遍历，一次返回一个值

for...of

1、可迭代数据结构 array,String,map,set，不能遍历对象

2、遍历字符串，遍历的是unicode码(采用双字节对字符进行编码；统一的字符编码标准)

for (let item of ["zero", "one", "two"]) {

  console.log(item);

}

// output:

// zero

// one

// two

---------------------------------------------

for (const c of 'zuD83DuDC0A') {

    console.log(c);

}

// output:

// z

// uD83DuDC0A

--------------------------------------------

const map = new Map();

map.set(0, "zero");

map.set(1, "one");

for (let item of map) {

  console.log(item);

}

// output:

// [0, "zero"]

// [1, "one"]

-------------------------------------

map

let myMap=new Map();

myMap.set(0,"0");

myMap.set(1,"1");

myMap.keys()//获取到key

myMap.values()//获取到value

set

1、keys方法和values方法获取的值是一样的

let mySet=new Set();

mySet.add("0");

mySet.add("1");

mySet.keys();//获取到key

mySet.values();//获取到values

forEach

let arr=["zero","one","two"];

arr.forEach((item,index,arr)=>{

console.log(item,index);

})

output:

zero 0

one 1

two 2

数组遍历方式map

arr.map((item,index)=>{return item}); //遍历数组，item是数组的每一个值，index是下标索引，returm是修改的值

filter

进行数据筛选

var result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];

let jige=result.filter((x)=>{

return x>=60; //return false删除此数据

})

console.log(jige)

模板字符串

let aa=123;let bb=`牛逼${aa}`; bb;   //"牛逼123"

${aa}  可以是变量可以是方法 

解构赋值-----

数组解构

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

let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3

let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]

let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3

let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2

对象解构

接下来再让我们一起看看对象解构的基本用法：

let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'

let obj = {d: 'aaaa', e: {f: 'bbbb'}}

let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'

let g;

(g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'

let [h, i, j, k] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e'

变量赋值

const {userName, password} = {userName: 'aaaa', password: 123456}

console.log(userName)

console.log(password)

const [userName1, password1] = ['aaaa', 123456]

console.log(userName1)

console.log(password1)

函数参数定义

function personInfo({name, age, address, gender}) {

  console.log(name, age, address, gender)

}

personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

交换变量的值

let a=1, b=2;

[b, a] = [a, b]

console.log(a, b)

函数的默认参数

function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {

  console.log(name, age, address, gender)

}

saveInfo()

...表示获取到之后的全部数据

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a); // 10

console.log(b); // 20

console.log(rest); // [30, 40, 50]

解析一个从函数返回的数组

function f() {

  return [1, 2];

}

var a, b; 

[a, b] = f(); 

console.log(a); // 1

console.log(b); // 2

忽略某些返回值

function f() {

  return [1, 2, 3];

}

var [a, , b] = f();

console.log(a); // 1

console.log(b); // 3

用正则表达式匹配提取值

function parseProtocol(url) { 

  var parsedURL = /^(w+)://([^/]+)/(.*)$/.exec(url);

  if (!parsedURL) {

    return false;

  }

  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;

  return protocol;

}

console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"

给新的变量名赋值

var o = {p: 42, q: true};

var {p: foo, q: bar} = o;

console.log(foo); // 42 

console.log(bar); // true

给新的变量命名并提供默认值

var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa); // 3

console.log(bb); // 5

For of 迭代和解构

var people = [

  {

    name: 'Mike Smith',

    family: {

      mother: 'Jane Smith',

      father: 'Harry Smith',

      sister: 'Samantha Smith'

    },

    age: 35

  },

  {

    name: 'Tom Jones',

    family: {

      mother: 'Norah Jones',

      father: 'Richard Jones',

      brother: 'Howard Jones'

    },

    age: 25

  }

];

for (var {name: n, family: {father: f}} of people) {

  console.log('Name: ' + n + ', Father: ' + f);

}

// "Name: Mike Smith, Father: Harry Smith"

// "Name: Tom Jones, Father: Richard Jones"