JS相关知识总结

扩展运算符三个点`...`

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

js中三种定义变量的方式const， var， let的区别

1.const定义的变量不可以修改，而且必须初始化。
2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。var 非块级作用域。

js删除数组中的元素delete和splice的区别

区别，第一种是点击回车手再调用，第二种是程序初始化时就调用

<SearchBar placeholder="Search" onSubmit={() => this.onSearchSubmit()} />

<SearchBar placeholder="Search" onSubmit={this.onSearchSubmit()} />

定义成员变量es6

在构造函数中 ,在其他函数中可以吗？

this.aa = [];

button 还可以这么写

<button className="hover-button" >
                        <a href="#" style={{color:'#000'}}>back</a>
                </button>

函数参数

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

变量的解构赋值

模板字符串

全局对象

Number

扩展运算符

Promise

Promise中构造函数的参数执行函数的resolve，会调用then方法的成功回调。无论这个Promise有多少个then的成功回调都会被调用。
reject方法同样。

var promise = new Promise(function (resolve, reject) {
    // 2秒后置为接收状态
    setTimeout(function () {
        resolve('success');
    }, 2000);
});

promise
    .then(function (data) {
        // 上一个then()调用了resolve，置为fulfilled态
        console.log(`第一个then ${data}`);
        return '2';
    })
    .then(function (data) {
        // 此时这里的状态也是fulfilled, 因为上一步返回了2
        console.log(`第二个then ${data}`);  // 2

        return new Promise(function (resolve, reject) {
            reject('把状态置为rejected error'); // 返回一个rejected的Promise实例
        });
    }, function (err) {
        // error
    })
    .then(function (data) {
        /* 这里不运行 */
        console.log(`第三个then ${data}`);
        // ....
    }, function (err) {
        // error回调
        // 此时这里的状态也是fulfilled, 因为上一步使用了reject()来返回值
        console.log('出错：' + err); // 出错：把状态置为rejected error
    })
    .then(function (data) {
        // 没有明确指定返回值，默认返回fulfilled
        console.log('这里是fulfilled态');
    });

promise.then(function (data) {
    console.log(`与第一个同级的then ${data}`);  // 2
});

打印结果：

第一个then success
与第一个同级的then success
第二个then 2
出错：把状态置为rejected error
这里是fulfilled态

参考

Promise all 和 Promise race

参考链接

js对象

js对象中的属性默认都是字符串，就算定义的是数字也会转成字符串

//这三种方法是等效的，没有任何区别
var obj = {1:"first"}
obj[2]="second";
obj["3"]="third";

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。
点表示法的对象的属性名是标识符，而后者的属性名则是一个字符串。

function Person() {
  this.name=" 张三 "; // 定义一个属性 name
  this.sex=" 男 "; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨！大家好，我的名字是 " + this.name + " ，性别是 " + this.sex + "，今年 " + this.age +"岁！";
  }
}
var zhangsan=new Person();
alert("姓名："+zhangsan.name); // 使用“.”来访问对象属性
alert("性别："+zhangsan.sex);
alert("年龄："+zhangsan["age"]); // 使用“[ ]”来访问对象属性
alert(zhangsan.say);  // 使用“.”来访问对象方法

参考

js对象的构造方法
- 字面量
- 构造函数

function对象

bind() 方法

数组操作

初始化方法
遍历
删除元素
pop：原数组中尾部删除元素
splice：数组中添加/删除元素。例如：arrayObject.splice(index,howmany,item1,.....,itemX)。index是必选的，规定添加/删除项目的位置。howmany必须项，表示删除项目的个数，如果为0表示不删除元素。splice()可删除从index开始的howmany个元素，并可以用item元素替代删除的元素。item可选参数，表示新添加的项。

var arr = new Array(5);
arr[0] = "amy";
arr[1] = "elice";
arr[2] = "divi";
arr[3] = "lvy";
arr[4] = "marry";
arr.splice(1, 0, "willian");
console.log(arr);
//输出：amy，willian,elice,divi,lvy，在数组第一个位置增加一个元素，其值是"willian"

shift:原数组中删除头部元素

增加元素
concat：返回新的数组
push：在尾部增加元素，原数组中进行操作
unshift:在头部增加元素，对原数组进行操作
筛选
filter：返回符合条件的新的数组。
slice：返回一个新的数组，该方法可从已有的数组中返回选定的元素。例如：arrObject(start，end)，start是必选的。规定从何处开始选取，如果是负数，则是从数组元素尾部选取，也就是说-1指最后一个元素，-2指倒数第二个元素；end是可选元素。规定从何处结束选取。该参数没有，表示从开始位置截取到数组末尾，如果是负数，表示从数组末尾向前截取元素。该方法不会修改原数组

const squares = this.state.squares.slice();

对象操作

Object.assign:合并多个JavaScript的对象

var target  = {a : 1}; //目标对象
var source1 = {b : 2}; //源对象1
var source2 = {c : 3}; //源对象2
var source3 = {c : 4}; //源对象3，和source2中的对象有同名属性c
Object.assign(target,source1,source2,source3);

对象扩展
{...owner, name: 'Jason'}

真值假值

js中除了:false,0,‘’（空字符串），null,undefinded，NAN ”六个是假值，其他的都是真值，这里需注意： '0'、'null'、'false'、{}、[]也都是真值。

表达式“&&”左右都是真值：返回右边的值
表达式“&&”左右有一个是假值是：返回假值
表达式“&&”左右都是假值：返回左边值
表达式“||”左右都是真值，返回左边操的值
表达式“||”左右有一个是假值，返回真值
表达式“||”左右都是假值，返回右边的值