js知识点整理

js知识点(一)

记录一些js的小而碎的知识点,没有什么顺序,想到什么了就记下来了,帮助以后复习总结。

数组的一些常用方法?

find()

1)find方法会返回数组中第一个为true的数组元素,否则返回undefined
2)可以传一个箭头函数作为参数。
例子:

1
2
3
4
5
6
7
8
 //查找id为3数组元素:

messageDetail:[
{id:1,title:'message0001',content:'content11'},
{id:2,title:'message0002',content:'content22'},
{id:3,title:'message0003',content:'content33'}
]
const md = messageDetail.find((md)=> md.id ===3 )

map()

1)map方法返回一个新数组,数组中的元素为原始元素调用函数处理后的值。
2)map不会改变原始数组。

例子:

1
2
3
4
5
6
7
8
9
10
1) messages.map((message,index)=>(
<li key={index}>{message}</li>
))

2) messages.map( (message,index)=>{
return (
<li key={index}>{message}</li>
)
}
)

两种写法是一样的, 箭头后的函数体有两种写法:第一种: 大括号,需要加return() ;第二种:小括号,不需要加return语句。

push()

添加元素到末尾,可以添加任意多个。

arr.push(“Jack”,”Sean”)

pop()

删除数组最后一项.

arr.pop()

unshift()

添加元素到开头,

arr.unshift(“Jack”,”Sean”)

shift()

删除数组的第一项,

arr.shift()

sort()

排序数组,可以接收一个函数作为参数 , 注意: 不能给数字数组排序,不过可以接收一个比较函数。 arr.sort(function(a,b){return a-b;})

reverse()

反转数组,原数组会被改变

slice()

截取数组, 一个参数的话是开头;两个参数的话不包括第二个参数的值。

splice() 可以实现对数组的删除、插入、和替换。

删除: 可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。

例如, splice(0,2)会删除数组中的前两项。

插入: 可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。

例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

修改: 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的

项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

concat()

用于连接多个数组,返回一个新数组。

例如, var arr = [1,2,3]; var arr2 = [4,5,6]; arr.concat(arr2) // arr数组的值为:[1,2,3,4,5,6]

join()

把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔,默认为逗号。

filter()

方法创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原数组。

如:

1
2
3
4
5
var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done)) // [{id: 1, text: "aa", done: true}]

Object的一些方法?

Object.assign(target,source1,source2,…)

该方法主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性,不拷贝继承的属性。

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

注意:Object.assign 方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const target = {
x : 0,
y : 1
};
const source = {
x : 1,
z : 2 ,
fn : {
number : 1
}
};
Object.assign(target, source);
// target {x : 1, y : 1, z : 2, fn : {number : 1}} // 同名属性会被覆盖
// source {x : 1, z : 2, fn : {number : 1}}
target.fn.number = 2; // 拷贝为对象引用
// source {x : 1, z : 2, fn : {number : 2}}


function Person(){
this.name = 1
};
Person.prototype.country = 'china';
let student = new Person();
student.age = 29 ;
const young = {insterst : 'sport'};
Object.assign(young,student);
// young {instest : 'sport' , age : 29, name: 1} // 只能拷贝自身的属性,不能拷贝prototype


Object.assign([1, 2, 3], [4, 5]) // 把数组当作对象来处理
// [4, 5, 3]var target = {};
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // { b:2, c:3}

Object.keys()

返回由key组成的数组。

1
2
3
4
5
6
var data={a:1,b:2,c:9,d:4,e:5};
console.log(data); //{a: 1, b: 2, c: 9, d: 4, e: 5}
console.log(Object.keys(data)); //["a", "b", "c", "d", "e"]
Object.keys(data).map((key,item)=>{
console.log(key,data[key]);//key=>属性名 data[key]=>属性值
});

Object.create(prototype[,propertiesObject])

使用指定的原型对象及其属性去创建一个新的对象

1
2
3
4
5
6
7
8
9
10
11
12
var parent = {
x : 1,
y : 1
}
var child = Object.create(parent,{
z : { // z会成为创建对象的属性
writable:true,
configurable:true,
value: "newAdd"
}
});
console.log(child);

结果如下:

Object.values()

方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

Object.values会过滤属性名为 Symbol 值的属性。

1
2
3
4
5
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

Object.entries()

返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

1
2
3
4
5
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

const simuArray = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

Object.is()

判断两个值是否相同。

1
2
3
4
5
6
Object.is(0, -0);            // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Object.is(null, null); // true
var test = { a: 1 };
Object.is(test, test); // true

Object.freeze()

冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。

Object.isFrozen()

判断一个对象是否被冻结.