JavaScript 学习笔记 对象属性 symbol 数组常用方法

JavaScript 学习笔记

目录

参考教程

javascript
developer.mozilla

对象

遍历对象元素保留原来顺序

用非数字作为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 类型

1. 唯一性

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 }

2. symbol 属性在 for…in 循环内不输出。

let id = Symbol("id");
let user = {
    [id]: 123,
    name:'1111'
};
for (let key in user) { 
    log(key)
}
// name ,忽略了symbol

4. Object.keys(user) 也会忽略symbol

let id = Symbol("id");
let user = {
    [id]: 123,
    name:'1111'
};
let clone=Object.keys(user)
log( clone ); // [ 'name' ]，忽略了symbol

5. 相反，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依然存在

6. 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

1. forEach() 方法是一个迭代方法。它按索引升序地为数组中的每个元素调用一次提供的 callbackFn 函数（同for循环）。
2. 与 map() 不同，forEach() 总是返回 undefined，而且不能继续链式调用。
3. 其典型的用法是在链式调用的末尾执行某些操作。
4. 除非抛出异常，否则没有办法停止或中断 forEach() 循环，有类似需求请使用for循环。
5. 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，删除、插入、改写

正则