React学习知识点收集

箭头函数

写法总结

• 没有参数

//es5
function sum () {
    return 1+2;
}
//箭头函数
let sum = ()=> 1+2;

• 有一个参数

//es5
function sum (a) {
    return a;
}
//箭头函数
let sum = a=> a;

• 有多个参数

//es5
function sum (a,b) {
    return a+b;
}
//箭头函数
let sum = (a,b)=> a+b;
//或者
let sum = (a,b)=> {return a+b;};

• 返回值为对象

//es5
function sum (a,b) {
    return {
        plus:[a,b],
        result: a+b
    }
}
//箭头函数,加一个括号
let sum = (a,b)=> ({
    plus:[a,b],
    result: a+b
});

• 参数为一个对象的特殊写法

//es5
function sum (plus) {
    return plus.first+plus.second;
}
var plus = {
    first: 1,
    second: 2
};
sum(plus);
//箭头函数
let sum = ({first,second})=> first+second;
let plus = {
    first: 1,
    second: 2
};
sum(plus);

学习到的新方法

js的map方法

//实例,采用箭头函数写callback
let arr = [1,1,1];
let newArr=arr.map((val,index)=>val*index);
//newArr= [0,1,2]

val	index
数组元素的值	数组元素的索引

js的forEach()方法

let sum = 0;
let arr = [1,2,3];
arr.forEach(function (value,index) {
    sum += value;
});
//sum = 6
//value与index同map

forEach与map的区别：map可以生成新数组二forEach不可以！

Object.keys

/* Array 对象 */ 
let arr = ["a", "b", "c"];
console.log(Object.keys(arr)); 
// ['0', '1', '2']

/* Object 对象 */ 
let obj = { foo: "bar", baz: 42 }, 
    keys = Object.keys(obj);
// ["foo","baz"]

修改对象的新方法：[]法

let entry = {
    name: 'jack',
    sex: 'man',
    age: '1'
};
const newEntry = {};
for (let name in entry) {
    newEntry[name] = entry[name];
}
// newEntry = {
//     name: 'jack',
//     sex: 'man',
//     age: '1'
// };

数组实例的 find() 和 findIndex()

[1, 4, -5, 10].find((n) => n < 0)  
// -5  
[1, 5, 10, 15].find(function(value, index, arr) {  
return value > 9;  
}) // 10  
[1, 5, 10, 15].findIndex(function(value, index, arr) {  
return value > 9;  
}) // 2  

数组的深拷贝

//es5
var oldArr = [0,1,2];
//利用slice();
var newArr = oldArr.slice();
//利用concat
var newArr = oldArr.concat();
//或者通过for循环
for (var i=0;i<oldArr.length;i++){
    newArr[i] = oldArr[i];
}

//es6
let oldArr = [0,1,2];
//Array.from
let newArr =Array.from(oldArr);
//...
let newArr =[...oldArr ];

对象的深复制

var json1={"name":"鹏哥","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"李鹏"},{"job":"前端开发"}]};
var json2={};
function copy(obj1,obj2){
  var obj2=obj2||{}; //最初的时候给它一个初始值=它自己或者是一个json
  for(var name in obj1){
    if(typeof obj1[name] === "object"){ //先判断一下obj[name]是不是一个对象
      obj2[name]= (obj1[name].constructor===Array)?[]:{}; //我们让要复制的对象的name项=数组或者是json
      copy(obj1[name],obj2[name]); //然后来无限调用函数自己 递归思想
    }else{
      obj2[name]=obj1[name];  //如果不是对象，直接等于即可，不会发生引用。
    }
  }
  return obj2; //然后在把复制好的对象给return出去
}
json2=copy(json1,json2)
json1.arr1.push(6);
alert(json1.arr1);  //123456
alert(json2.arr1);  //12345

解析构值

//es6新增
let prop = {
  index: 1,
  value: 'good',
  state: 'open'
}
const {index,value} = prop;
console.log(index);//1
console.log(value);//good

默认什么都不做的函数

f => f

reduce函数

arr.reduce(callback,[initialValue])

//例子
let arr = [1,2,3];
const sum = arr.reduce((a,b) => a+b , 0);
console.log(sum) // 6

1. callback （执行数组中每个值的函数，包含四个参数
   • previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
   • currentValue （数组中当前被处理的元素）
   • index （当前元素在数组中的索引）
   • array （调用 reduce 的数组）
2. initialValue （作为第一次调用 callback 的第一个参数。）

Object.assign
Object.assign()解释整理

...扩展运算符
阮一峰
es6 扩展运算符 三个点（...）

promis
ES6 promise用法详解

组合继承

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
   alert(this.name);
};
function SubType(name, age){
//继承属性
  SuperType.call(this, name);
  this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27