JavaScript 学习笔记
目录
文章目录
- JavaScript 学习笔记
- 目录
- 参考教程
- 对象
- symbol 类型
- 字符串
- 数组
- 判断是否是数组 Array.isArray(list)
- 从后取元素方法 at,老系统需要polyfills
- 添加与删除数据 pop/push, shift/unshift
- 添充元素 fill
- 循坏之查找 find / findIndex(indexOf) / findLastIndex / findLast
- 循坏之操作数组 [forEach](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- 循坏之返回指定字段 map
- 循坏之返回满足需要的数组 [filter](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- 循坏之 some
- 循坏之 every
- 循坏之归并 reduce
- 操作数组的瑞士军刀: splice,删除、插入、改写
- 数组深拷贝
- 正则
参考教程
对象
遍历对象元素保留原来顺序
用非数字作为key,就不会把“1” 排在最前面了
let codes = {
"+49": "Germany",
"+41": "Switzerland",
"+44": "Great Britain",
// ..,
"+1": "USA"
};
for (let code in codes) {
alert( +code ); // 49, 41, 44, 1
}
判断是否是空对象
方法1:
const isEmpty = (obj) => {
for (let key in obj) {
return false
}
return true
}
方法2:
const isEmpty = (obj) => JSON.stringify(obj) === '{}'
方法3:
const isEmpty = (obj) => Object.keys(obj).length === 0
对象浅拷贝
即,当对象属性为基本类型时,可以用如下方法进行对象拷贝;一旦含有引用类型属性时,下面的方法将失效。
const obj = {
"type": "1",
"title": "Criss",
"phone": "+86-10-84556681",
}
const obj2={}
Object.assign(obj2, obj)
或缩写
let clone = Object.assign({}, obj);
对象深拷贝
let clone =JSON.parse(JSON.stringify(obj))
不会拷贝: function、属性值为undefined、
属性值变为null: 属性值为-Infinity、属性值为Infinity、属性值为NaN
或
使用 lodash 库的 _.cloneDeep(obj)。
对象的方法不能这样写成箭头函数,否则找不到title
const obj = {
"title": "Criss",
fun:()=>{
console.log(this.title)
}
}
对象的方法这样写,才能找到title
const obj = {
"title": "Criss",
fun(){
console.log(this.title)
}
}
可选链
user.address && user.address.street && user.address.street.name
user.address?.street?.name
?
对其前面的属性进行可选性校验,第一级写了不起作用,所以不用写
obj.method?.()
obj下有方法method才执行
vue 举例
title() {
return this.list?.[0]?.['title'];
},
symbol 类型
- 唯一性
const { log } = console
const user = {
id:1,
}
let id = Symbol("id");
let id2 = Symbol("id");
user[id]=2
user['id']=3
user[id2]=4
log(user)// { id: 3, [Symbol(id)]: 2, [Symbol(id)]: 4 }
- symbol 属性在 for…in 循环内不输出。
let id = Symbol("id");
let user = {
[id]: 123,
name:'1111'
};
for (let key in user) {
log(key)
}
// name ,忽略了symbol
- Object.keys(user) 也会忽略symbol
let id = Symbol("id");
let user = {
[id]: 123,
name:'1111'
};
let clone=Object.keys(user)
log( clone ); // [ 'name' ],忽略了symbol
- 相反,Object.assign({}, user)可以克隆
const { log } = console
let id = Symbol("id");
let user = {
[id]: 123
};
let clone = Object.assign({}, user);
log( clone ); // { [Symbol(id)]: 123 },symbol依然存在
- symbol 总是不同的值,即使它们有相同的名字。如果我们希望同名的 symbol 相等,那么我们应该使用全局注册表:Symbol.for(key) 返回(如果需要的话则创建)一个以 key 作为名字的全局 symbol。使用 Symbol.for 多次调用 key 相同的 symbol 时,返回的就是同一个 symbol
let id = Symbol.for("id");
let id1 = Symbol.for("id");
let user = {
[id]: 123,
[id1]: 234,
name:'1111'
};
log(user)// { name: '1111', [Symbol(id)]: 234 } 只有一个symbol
字符串
字符串的查找 includes
注意:
1. 找字符串的时候区分大小写
2. 返回值为true / false
const { log } = console
// 在字符串内查找
const str = 'hello world'
log(str.includes('hello'))
// 在数组内查找
const arr1 = ['hello world']
log(arr1.includes('hello'))
// 在数组对象内查找
const arr = [
{
name:'hello'
},
{
name:'world'
},
]
let flag = arr.some(item => item.name.includes('hello') )
log(flag)
字符串截取 slice
slice(indexStart)
slice(indexStart, indexEnd)
字符串截取 substring
substring(indexStart)
substring(indexStart, indexEnd)
数组
判断是否是数组 Array.isArray(list)
从后取元素方法 at,老系统需要polyfills
let fruits = ["Apple", "Orange", "Plum"];
log( fruits.at(-1) );// 取最后一个元素
fruits.at(0)与fruits[0]一样效果,负数的时候从后向前取
添加与删除数据 pop/push, shift/unshift
注意:
1. push/pop 方法运行的比较快,而 shift/unshift 比较慢。
后入 / 后出 push / pop
前入 / 前出 unshift / shift
添充元素 fill
// 实用案例:拿到后台返回数据后,前端需要控制某条数据被选中
let list = [
{
title: '111',
},
{
title: '222',
},
{
title: '333',
},
]
let flag = new Array(list.length).fill(false)
log(flag)
循坏之查找 find / findIndex(indexOf) / findLastIndex / findLast
// find 找出满足需求的元素
const list = [
{
title: '111',
},
{
title: '222',
},
{
title: '333',
},
]
const flag = list.find(item => item.title === '222')
log(flag) // { title: '222' }
循坏之操作数组 forEach
- forEach() 方法是一个迭代方法。它按索引升序地为数组中的每个元素调用一次提供的 callbackFn 函数(同for循环)。
- 与 map() 不同,forEach() 总是返回 undefined,而且不能继续链式调用。
- 其典型的用法是在链式调用的末尾执行某些操作。
- 除非抛出异常,否则没有办法停止或中断 forEach() 循环,有类似需求请使用for循环。
- forEach() 期望的是一个同步函数,它不会等待 Promise 兑现。
循坏之返回指定字段 map
1. 去除不必要的字段,仅保留数据中需要的字段
const list = [
{
title: '111',
},
{
title: '222',
age:18
},
{
title: '333',
},
{
title: '222',
age:20
},
]
const arr = list.map(item =>{
return {
title:item.title
}
} )
log(arr)
/* [
{ title: '111' },
{ title: '222' },
{ title: '333' },
{ title: '222' }
]
*/
2. 将某些字段进行一些操作后返回
const arr = list.map(item =>{
return {
title:'标题 '+item.title
}
})
3. 将某些字段进行一些操作后返回
const arr = list.map(item =>{
return {
...item,
title:'标题 '+item.title
}
})
4. 将某字段(title)值生成一个新的数组
const arr = list.map(item => item.title)//[ '111', '222', '333', '222' ]
5. 返回某字段满足需求的 boolean值
const arr = list.map(item => item.age>18) // [ false, false, false, true ]
循坏之返回满足需要的数组 filter
1. 返回某字段满足需求的所有数据
// 返回age<20的数据
const isYoung = item => item.age<20
const arr = list.filter(isYoung) // [ { title: '222', age: 20 } ]
循坏之 some
循坏之 every
循坏之归并 reduce
操作数组的瑞士军刀: splice,删除、插入、改写
数组深拷贝
let numbers=[1,2,3,4,5]
let new_numbers = [...numbers]
new_numbers[0]='aaa'
console.log(numbers,new_numbers) // [ 1, 2, 3, 4, 5 ] [ 'aaa', 2, 3, 4, 5 ]