一、前置知识

一、前置知识

速写属性与速写方法

速写属性:

将定义的变量作为对象属性的属性值

var name = "abc";
var age = 13;
var obj = {
  name:name,
  age:age,
};

当属性名和属性值相同时，可以使用速写属性

var name = "abc";
var age = 13;
var obj = {
  name,
  age,
};

速写方法:

obj对象方法如下:

var obj = {
  name: "张三",
  say: function () {
    console.log(this.name);
  },
};

通过ES6速写方法可以简化为:

var obj = {
  name: "张三",
  say() {
    console.log(this.name);
  },
};
obj.say();//调用对象方法

数组与数组相关函数

请查看我的博客下面几章内容

模板字符串

在 ECMAScript 6 中新增了模板字面量。这可以看作是增强版的字符串，它用反引号 ` 进行标识：

let str = `Hello World`;
console.log(str); // Hello World
console.log(typeof str); // string
console.log(str.length); // 11

以上代码中，使用模板字面量语法创建一个字符串，并赋值给 str 变量，这时变量的值与一个普通的字符串无异。

如果想在字符串中包含反引号，只需使用反斜杠\转义即可。

ECMAScript 6 的模板字面量使得多行字符串更加容易创建，因为它不需要特殊的语法，只需要在想要的位置直接换行即可，如下：

let str = `Hello 
World`;
console.log(str);
// Hello
// World
console.log(typeof str); // string
console.log(str.length); // 12

在反引号之内的所有空白符都是字符串的一部分，因此需要特别留意缩进。

模板字面量看上去仅仅是普通 JavaScript 字符串的升级版，但二者之间真正的区别在于模版字面量存在变量占位符。变量占位符允许将任何有效的 JavaScript 表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分。

变量占位符由起始的${与结束的}来界定，之间允许放入任意的 JavaScript 表达式。示例如下：

let name = "yingside";
console.log(`Hello,${name}`);
// Hello,yingside

占位符${name}会访问本地变量name，并将其值插入到字符串中。

既然占位符是可以是 JavaScript 表达式，那么可替换的就不仅仅是简单的变量名，可以轻易嵌入运算符、函数调用等，示例如下：

let count = 10,price = 0.25;
console.log(`${count} items cost $${(count*price).toFixed(2)}`);
// 10 items cost $2.50

箭头函数

请查看我的博客箭头函数

解构

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

数组解构赋值：

let arr = ["我是字符窜","app","3"];
//1.传统方式赋值
// var a=arr[0],b=arr[1],c=arr[2]
//2.解构赋值
let [a,b,c] = arr;

console.log(a,b,c)//我是字符窜 app 3

嵌套数组解构：

let arr = [["我是字符串","app","3"],["12","34",56],["aa","bb","cc"]]

let  [[a,b,c],d,e] = arr;
console.log([a,b,c,d,e])//["我是字符串", "app", "3", Array[3], Array[3]]

函数传参解构：

let arr = ["我是字符串","app","3"];

function fn([a,b,c]){
    console.log(a,b,c)//我是字符串 app 3
}

fn(arr)

for循环解构：

let arr = [["我是字符串","app","3"],["12","34",56],["aa","bb","cc"]]

for(let [a,b,c] of arr){
   console.log(a,b,c);//我是字符串 app 3   12 34 56   aa bb cc

    /*console.log(b);
    console.log(c)*/
}

对象赋值解构：

let obj = {
    name:"小明",
    sex:"男",
    age:"18",
    hobby:{
      hobby1:"篮球",
      hobby2:"游泳",
      hobby3:"唱歌"
    }
};

let {name,sex,age,hobby}=obj;
console.log(name+","+sex+","+age+","+hobby)//小明,男,18,[object Object]
console.log(hobby);//Object {hobby1: "篮球", hobby2: "游泳", hobby3: "唱歌"}
let {hobby1,hobby2,hobby3}=hobby;
console.log(hobby1,hobby2,hobby3)//篮球 游泳 唱歌*/

对象传参解构：

let obj = {
    name: '小头爸爸',
    sex: '男',
    age: 26,
    son: {
      sonname: '大头儿子',
      sonsex: '男',
      sonage: 1
    }
};

function fn({name,sex,age,son}){
      console.log(name+"--"+sex+"--"+age+"--"+son);//小头爸爸--男--26--[object Object]

      console.log(son)//Object {sonname: "大头儿子", sonsex: "男", sonage: 1}
}

fn(obj)

变量名与对象属性名不一致解构：

let obj = {
    name:"jack",
    age:12,
    sex:"男"
};
let {name:newName,age:newAge,sex:newSex} = obj;
//相当于
//      let newName = obj.name;
//      let newAge = obj.age;
//      let newSex = obj.sex;

//当属性名等于属性变量名可以简写如{name:name}<==>{name}


console.log(newName+","+newAge+","+newSex)//jack,12,男

嵌套对象解构：

let obj = {
   name: '小头爸爸',
   sex: '男',
   age: 26,
   son: {
　　　　 sonname: '大头儿子',
　　　　 sonsex: '男',
　　　　 sonage: 1
   }
};
let {name,sex,age,son:{sonname,sonage,sonsex}} = obj;

console.log(sex+"--"+sonage)//男--1

嵌套对象属性重名，解构时需要更改变量名：

let obj = {
    name: '小头爸爸',
    sex: '男',
    age: 26,
    son: {
      name: '大头儿子',
      sex: '男',
      age: 1
    }
};

let {name,sex,age,son:{name:sonName,age:sonAge,sex:sonSex}} = obj;
console.log(name+"|"+sonName)//小头爸爸|大头儿子

//传参解构
function fn({name,sex,age,son:{name:sonName,age:sonAge,sex:sonSex}}){
    console.log(name+","+age+","+sonName+","+sonAge)//小头爸爸,26,大头儿子,1
}

fn(obj)

循环解构对象：

let arr = [{name: '小明', age: 22}, {name: 'jack', age: 23}, {name: 'misa',age: 26}];

for(let {name,age} of arr){

  console.log(name+"|"+age) //小明|22 jack|23 misa|26
}

解构的特殊应用场景：

//1.字符串解构
let str = "happy";
let [a,b,c,d,e] = str;
console.log(a+"--"+b+"--"+c+"--"+d+"--"+"--"+e)  //h--a--p--p----y
//2.变量互换
let x =1, y = 2;
[x,y]=[y,x];
console.log(x,y)  //2 1

扩展运算符...

扩展运算符用三个点号（...）表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

var fn = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

//传统写法
fn(arr[0], arr[1], arr[2]);

//使用扩展运算符
fn(...arr);

//1
//2
//3

特殊应用场景：

//数组深拷贝
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组

//把一个数组插入另一个数组字面量
var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//[1, 2, 3, 4, 5, 6]

//字符串转数组
var str = 'love';
var arr5 = [...str];
console.log(arr5);//[ 'l', 'o', 'v', 'e' ]

rest运算符...

rest运算符也是三个点号(...)，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

//主要用于不定参数，所以ES6开始可以不再使用arguments对象
let  bar = function(...args) {
    for (let el of args) {
      console.log(el);
    }
}

bar(1, 2, 3, 4);
//1
//2
//3
//4

bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}

bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]

rest运算符配合解构使用：

let  [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

Mr.Yan

Vue实战（一）-- 前置知识