【记录】前端实战

0、数组和字符串相互转换

字符串转数组：

const array = str.split(',');    //关于split: 可以接收第二个参数，表示返回数组的最大长度

数组转字符串：

const str = array.toString();

const str = array.join('=');       //可以指定连接符。如果省略参数，将使用逗号作为分隔符

 toString() 和 join()区别：

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());         //默认用逗号隔开     
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

每个对象都有一个 toString() 方法.

let x;
console.log(x.toString());             //Error: Cannot read property 'toString' of undefined

var o = new Object();
o.toString();                         // [object Object]

1. 对数组调用map方法

Array.prototype.map()的功能：对原数组中的每个元素调用指定的方法（不会修改原数组），将每个返回值组合成新的数组

当时犯的傻：以为是对原数组进行修改，所以没有定义一个变量接收新的数组。

规范写法：（引用自MDN文档）

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

补充知识：不能用它来进行筛选，筛选的话要用filter()

2. antd dataIndex 嵌套字段

dataIndex 如果是嵌套的，需要用 String 数组 ['columns','id'] 而不是 columns.id

比如你想要将后端返回的数据显示在table中，但是数据格式如下：

result:{
  id:'001',   //可以直接取到
  columns:{
    columnId:'837542934',  //需要通过数组
    columnName:'address'
  }
}

 那么在写代码的时候就要写成：

const tableCol=[
  {
      title:'列ID',
      dataIndex:['columns','columnId'],
      render:(text)=>{<a onClick={()=>console.log(text)}></a>}    //这里的text就会对应columns中的columnId
  }
]

数组形式是antd v4才提出的，参考antd官方文档：https://ant.design/docs/react/migration-v4-cn#%E7%BB%84%E4%BB%B6%E9%87%8D%E6%9E%84

3. antd 中，Select 组件如何取到 label 的值

设置 labelInValue：(当然也要写 keyValue 和 labelValue)

<Select keyValue='id' labelValue='name' data={dataSource} labelInValue />

设置了这个属性之后，在设置初值的时候就要写成 {key: record.id, label:record.name}

const [form] = Form.useForm();
const {setFieldsValue} = from;

useEffect(()=>{
  const {id,name}= record;
  setFieldsValue({
    selectData: {key: id, label:name}
  });
},[]);

4. Object.keys()怎么用

Object.keys()返回对象自身的（可枚举）属性构成的数组。

补充：for in也可以遍历对象上的属性，不同的是它还会遍历原型链上的属性

4.1 判断对象是否为空：

const a={key:'1'};
const doSomething=(a)=>{
  const arr = Object.keys(a);
  if(arr.length>0){
    console.log('对象不为空');
  }
};

4.2 处理数组，返回索引值数组

const s = [111,222,333,444,555,666];
console.log(Object.keys(s));          //[ '0', '1', '2', '3', '4', '5' ]

4.3 遍历对象，取到每个属性的值

const obj = {id:'001', name:'Emma', age:'19', address:'britain'};

Object.keys(obj).map(item=>{
  console.log(item, obj[item])
});


打印出来的结果：

//id 001
//name Emma
//age 19
//address britain

 4.4 判断是否是对象的自身属性

let obj={name:'jack'} ;

console.log(obj.hasOwnProperty('name'));   //true

补充：Object.values()，它的返回值：

一个包含对象自身的所有可枚举属性值的数组。

5. null ，undefined 和 NaN

null的定义:  a null value represents a reference that points to a nonexistent or invalid object or address.

typeof null === 'object' // true

undefined: 当你声明一个变量但没有声明它的值时，JavaScript会给它赋值undefined

NaN:表示一个不是数字的东西，尽管它实际上是一个数字。  //typeof NaN ->  number
NaN 与任何值（包括其自身）相比得到的结果均是 false.
所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符,要用 isNaN(result)

6. indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

对大小写敏感。

如果要检索的字符串值没有出现，则该方法返回 -1。

stringObject.indexOf(searchvalue,fromindex)

//fromindex: 规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1

7.toLocalString()

可以将数字变成千分位格式：

var number = 3500;

console.log(number.toLocaleString());     //3,500

把Date对象转化成字符串：

var date = new Date();   

var str=d.toLocaleString(); console.log(str);

VM224:1 2020/9/28 上午9:53:29

 8. margin padding 分别带不同个数的参数

margin: 20px 40px;       //（上、下20px；左、右40px。）
margin: 20px 40px 60px;         //（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;      //（上20px；右40px；下60px；左80px。）

9. 将变量作为key取出对象的属性值

场景:从对象中找到某个变量对应的值

const obj={title:'book 1'};

const myFunc=(val)=>{
  // let result = obj.val;   //不能这样写，js会去取obj的val属性，结果是undefined
  let result = obj[val];     //正确，打印结果："book 1"
  console.log(result)
};

myFunc('title');

10. Math.max() 的用法

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max

//注意参数格式。之前我以为是传个数组进去就行了，结果返回的是NaN

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

const array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

11.使用filter()和indexOf()去掉数组中的重复数据

const func = (val)=>{
  if(typeof val === 'string')
   {arr = val.split('');} 
  else{ arr = val}
  const result = arr.filter(
    (item,index)=>{
      return arr.indexOf(item)===index;          //过滤条件：当前的位置就是第一次出现的位置
    });
  return result;
}

console.log(func('AAAAAWWWREFSSSS'))             //> Array ["A", "W", "R", "E", "F", "S"]

12.选出数组中那个“与众不同”的元素

题目来源：https://www.codewars.com/kata/585d7d5adb20cf33cb000235/train/javascript 

There is an array with some numbers. All numbers are equal except for one. Try to find it!

findUniq([ 1, 1, 1, 2, 1, 1 ]) === 2
findUniq([ 0, 0, 0.55, 0, 0 ]) === 0.55

我的答案：

function findUniq(arr) {
  let newArr=arr.filter((item)=>{
    return arr.indexOf(item)!==0;    如果unique number是arr[0]，数组长度是arr.length-1，如果不是，数组长度为1
  });
  if(newArr.length>1){
    return arr[0]；}          如果数组长度大于1，就说明原数组第一个数就是unique number
  else{
    return newArr[0]；
  }
};

其他人的解答：

function findUniq(arr) {
  return arr.find(n => arr.indexOf(n) === arr.lastIndexOf(n));
}

lastIndexOf()

引用：https://www.w3school.com.cn/jsref/jsref_lastIndexOf.asp

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置

lastIndexOf() 方法对大小写敏感

如果要检索的字符串值没有出现，则该方法返回 -1

stringObject.lastIndexOf(searchvalue,fromindex)        
//fromindex:规定在字符串中开始检索的位置。如省略该参数，则将从字符串的最后一个字符处开始检索

补充：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

13.进制转换

Number.toString(radix)

var count = 10;

console.log(count.toString());    // 输出 '10'
console.log((17).toString());     // 输出 '17'
console.log((17.2).toString());   // 输出 '17.2'

var x = 6;

console.log(x.toString(2));       // 输出 '110'
console.log((254).toString(16));  // 输出 'fe'

console.log((-10).toString(2));   // 输出 '-1010'
console.log((-0xff).toString(2)); // 输出 '-11111111'

parseInt(string, radix)   

引用：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt

解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。

参数

string

要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用  ToString 抽象操作)。字符串开头的空白符将会被忽略。

radix 可选

从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意，10不是默认值！

14.填充字符串，使其达到目标长度:padStart() padEnd()

引用：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

padStart()

str.padStart(targetLength [, padString])

const str1 = '5';

console.log(str1.padStart(2, '0'));
// expected output: "05"

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// expected output: "************5581"

padEnd()

str.padEnd(targetLength [, padString])

const str1 = 'Breaded Mushrooms';

console.log(str1.padEnd(25, '.'));
// expected output: "Breaded Mushrooms........"

const str2 = '200';

console.log(str2.padEnd(5));
// expected output: "200  "

实战：

RGB To Hex Conversion

题目来源：https://www.codewars.com/kata/513e08acc600c94f01000001/train/javascript

The rgb function is incomplete. Complete it so that passing in RGB decimal values will result in a hexadecimal representation being returned. Valid decimal values for RGB are 0 - 255. Any values that fall out of that range must be rounded to the closest valid value.

Note: Your answer should always be 6 characters long, the shorthand with 3 will not work here.

The following are examples of expected output values:

rgb(255, 255, 255) // returns FFFFFF
rgb(255, 255, 300) // returns FFFFFF
rgb(0,0,0) // returns 000000
rgb(148, 0, 211) // returns 9400D3

我的答案：

function rgb(r, g, b){
  const arr  = Object.values(arguments);
  const result = arr.map((item)=>{
    if(item<0)return '00';
    if(item>255)return 'FF';
    return item.toString(16).toUpperCase().padStart(2,'0'); 
  });  
  
  return result.join('');
}

TO BE CONTINUED