ES6与ReactJS学习笔记

1.ES6

ES6,是ECMAScript 6 的简称，是JavaScript语言的下一代标准，已于2015年6月正式发布。

1.1. let于const

之前，我们在编写js定义变量的时候，只有一个关键字 var。var有一个问题，就是定义的变量会成为全局变量。

// var变量的作用域问题检查
for(var i = 0;i<5;i++){
   
    console.log(i);
}
console.log("循环外:"+i);

可以看出，在循环外部也可以获取到变量i的值。

1. let关键字 ：可以将i的作用域控制在循环内部。

//let 所声明的变量,只在let命令所在的代码块内有效.
for(let i = 0;i<5;i++){
   
    console.log(i);
}
//index.html:21 Uncaught ReferenceError: i is not defined
//console.log("循环外:"+i);

2. const关键字：声明的变量是常量，不能被修改，类似于java中的final关键字。

//const 所声明的变量是常量,不能被修改,类似于java中的final关键字
const a = 1;
console.log("a = ",a);
//给a重新赋值;Uncaught TypeError: Assignment to constant variable.
//a = 2;
console.log("a = ",a);

1.2.字符串扩展

ES6中,为字符串扩展了几个新的API

• includes():返回布尔值,标识是否找到了参数字符串

• startWith():返回布尔值,标识参数字符串是否在原字符串的尾部

• endWith():返回布尔值,标识参数字符串是否在原字符串的尾部

let str = "hello fechin";
console.log(str,"中是否包含了fechin ==>",str.includes("fechin"));
console.log(str,"中是否包含了fuck ==>",str.includes("fuck"));

1.3.字符串模板

ES6中提供了" ` "来作为字符串模板标记

 let str2 = `你好
 哈哈
 呵呵`;
 console.log("试一试",str2);   
 //在``之间的部分都会被认为是字符串的值,可以任意换行;

1.4.解构表达式

ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。

1. 数组解构

let arr = [1,2,3];
const [x,y,z] = arr; //x,y,z将与arr中的每个位置来对应
console.log(x,y,z);
//结果为[1,2,3]

const a = arr;
console.log("+++++",a);
//结果为[1,2,3]

const [b] = arr;
console.log("-----",b);
//结果为1

2. 对象解构

const person = {
   
    name : "fechin",
    age : "12",
    language : ["java","js","html"]
}

let {
   name,age,language} = person;
console.log(name,age,language);
//如果想要用其他变量接收，那么需要额外指定别名
//{name:na}:name是person中的属性名，冒号后面的n是解构后要赋值给的变量
let {
   name:na,age:ag,language:la} = person;
console.log("+-+-+-+-+-",na,ag,la);

1.5.函数优化

1.5.1.函数参数默认值

在ES6之前,我们无法给一个函数参数设置默认值，只能采用变通写法

function add(a,b){
   
    //判断b是否为空，为空就给默认值0
    if(!b){
   
        b = 0;
    }
    //判断b是否为空，为空就给默认值0
    // b = b || 0;
    return a + b;
}
console.log(add(1));

ES6之后，可以这么写

function add(a,b = 0){
   
    return a + b;
}
console.log(add(1));

1.5.2.箭头函数

//箭头函数
//没有参数
let sayHello = () => console.log("你好");
sayHello();

//一个参数
let print = a => console.log(a);
print("你好呀");

//多个参数
let sum = (a,b) => {
   return a+b;}
let result = sum(1,2);
console.log(result);

1.5.3.对象函数的属性简写

		let person = {
   
        name : "fechin",
        eat : function(food){<