js常用方法

前记

记录下常用到的方法。

字符串转换为小写——str.toLowerCase()

• 不论原字符串大小写，返回全小写的新字符串，且不改变原字符串。

const str = 'HeLlO';   	
console.log(str.toLowerCase()); // "hello"
console.log(str); // "HeLlo"

字符串转换为大写——str.toUpperCase()

• 不论原字符串大小写，返回全大写的新字符串，且不改变原字符串。

const str = 'HeLlO';
console.log(str.toUpperCase()); // "HELLO"
console.log(str); // "HeLlo"

字符串转换为首字母大写

• 将第一个字符使用toUpperCase()转换为大写，然后将其连接到字符串的其余部分。

const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); // "Hello"

• 将句子中每个首字母大写

function toTitleCase (str) {
  if (!str) {
    return '';
  }
  const strArr = str.split(' ').map((word) => {
    return word[0].toUpperCase() + word.substring(1).toLowerCase();
  });
  return strArr.join(' ');
}

const str = 'hello world';
console.log(toTitleCase(str)); // "Hello World"

判断是否存在对象链深处的属性的值

• 通常判断几层引用时，比如想使用str[‘student’][‘project’]，一般还需要判断student是否存在，(如果不存在就调用下一级会报错)即：

if (str['student']){
    str['student']['project'] = 100
}

• ES6的新特性：可选链运算符（?.）
  1、 可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
  2、意思就是无须判断前个是否存在，就可以直接判断最深层且不会报错。
  3、如果判断的是常量，可以写为：str[‘student’]?.grades。如果判断的是变量，前面的方法不适用，可以使用**str[student]?.[project ]**进行判断。使用该方法，如果student不存在，也不会报错影响使用，可以直接使用 **if (str[‘student’]?.grades)**进行一次判断即可。
  4、该方法可以判断多级，例如：class?.zhangsan?.math?.grades

str = {}
str['student']?.grades
// 如果查询的是变量 可以这样使用
str = {}
student = 'zhangsan'
project = 'math'
str[student]?.[project]

查找是否包含某属性

str={'zhangsan': 100, 'lisi':'99'}
if(Object.keys(str).includes('zhangsan')){
}

通过对象key找到另一个dict

比如通过查找学生ID找到某科成绩。

//分别给数学和英语的统计项创建一个页面，但是想自适应统计项
// porject= {'math': '数学','English':'英语'}
all_statistic = [{key: 'average',value:'平均值'},
				{key:'sum',value:'总和'},
				{key:'max',value:'最大值'},
				{key:'min',value:'最小值'}]
statistic = {'math': 'average','sum','English':'max','min'}
// 通过project的统计项筛选并拿到对应筛选项的中文及字段
fields = []
choosed_project='math'
init_fields() {
    all_statistic.forEach(item => {
        if (statistic[choosed_project].indexOf(item.key) != -1){
            fields.push(item)
        }
    })
},

JS中通过对象某一属性查找另一属性

const arr = [
    {id: 1, name: 'zhangsan', project: 'math'},
    {id: 2, name: 'lisi', project: 'music'},
    {id: 3, name: 'wangwu', project: 'art'}
  ]
// 通过name属性找到project
arr.find(item => item.name === name).project

反序输出新数组

• js的reverse() 修改的是原数组的顺序，会将原数组修改。
• 期望原数组不动，将反序放入新数组中。
• 将原数组拷贝新数组，反序新数组并赋值，实现方法如下：

version = [1,2,3]
new_version= [...version].reverse()  // 输出[3, 2, 1]

注：数组赋值指向的是地址

a=[1,2]
b=[100,200]
a=b 			//a=[100,200],b=[100,200]
b.reverse() 	//改变原区域a=b=[200,100]
b= [300] 	 	//将b改到其他地址，b= [300]  a=[200,100]

引用

如何在 JavaScript 中转换字符串的字符大小写-执宁
可选链运算符（?.）
ES6 对象的新增方法
Javascript中你需要知道的最出色的新特性：Optional Chaining
展开语法
JS中通过对象某一属性查找另一属性