코드 25 자바 스크립트의 기존의 단일 라인 개발

코드 25 자바 스크립트의 기존의 단일 라인 개발

여기에 자바 스크립트 코드에 특별한 순서없이 30 한 줄의 개발에 나의 마음에 드는를 소개합니다.

1. 강제 부울 값

값을 변경하지 않고 부울 변수로 전송하려면 다음 단계를 따르세요

const myBoolean = !! myVariable;
!!null // false
!!undefined // false
!!false // false
!!ture // ture
!!"" // false
!!"string" // true
!!0 // false
!!1 // true
!!{} // true
!![] // true

2. 조건에 따라 개체의 속성을 설정합니다

조건부 확산 연산자를 사용하여 객체에 속성을 설정하려면 :

const myObject = {... myProperty && {propName：myPoperty}};

let myProperty = 'Jhon'
const myObject = {...myProperty && {propName: myProperty}}; // {propName: "Jhon"}
let myProperty = ''
const myObject = {...myProperty && {propName: myProperty}}; // {}

myProperty 결과가 거짓 인 경우, && 실패하고 새 속성을 설정하지, 그렇지 않으면 당신이하지 않으면, && 새 속성이 비어 설정하고 원래 값을 덮어 쓰게됩니다.

3. 병합 객체

const mergedObject = { ...objectOne, ...objectTwo };

const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name1: 'jhon1', age1: '12'}};
// {name: "Jhon", age: "18", name1: "jhon1", age1: "12"}

const mergedObject = { ...{name: 'Jhon', age: '18'}, ...{name: 'jhon1', age:'12'}};
// {name: "jhon1", age: "12"}

결합 무제한 지원하지만, 같은 속성이 객체 사이에 존재하는 경우, 재산 뒤에 전면 커버 속성. *이는 얕은 통합 적용 있습니다.

4. 변수 교환

상기 중간 변수를 사용하지 않고, 두 변수의 값을 바꿔 :

[varA，varB] = [varB，varA];
let a = 1;
let b = 2;
[a, b] = [b, a] // a = 2 b = 1

5. 부울 값이 거짓 삭제

const clean = dirty.filter(Boolean);
const clean = [0, false, true, undefined, null, '', 12, 15].filter(Boolean);
// [true, 12, 15]

, 널 (null), 정의, 거짓, 0, 빈 문자열 ( '') :이 같음을 제거합니다.

6. 변환 소자 형

문자열 요소 요소의 수에 :

const stringArray = numberArray.map(String);
const stringArray = [1, 2, 3].map(String);
["1", "2", "3"]

배열 문자열이 포함 된 경우 그대로, 문자열 떠났다. 이것은 또한 문자열 요소 번호 형식을 변환 할 수 있습니다 :

const numberArray = stringArray.map(Number);
const stringArray = ["1", "2", "3"].map(String);
// [1, 2, 3]

7. JSON 포맷 오브젝트 코드 그

JSON은 읽을 수있는 형식의 코드를 표시합니다 :

const formatted = JSON.stringify(myObj, null, 4);

const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
/*
{
    "name": "Jhon",
    "age": 18,
    "address": "sz"
}
*/

이 명령은 문자열의 세 가지 매개 변수가 있습니다. 첫 번째는 자바 스크립트 객체입니다. 두번째 경우 JSON의 캐릭터 조작을 수행하는데 사용될 수있는 선택 기능이다. 마지막 매개 변수는 JSON 서식을 들여 쓰기로 추가 할 공간의 양을 나타냅니다. 마지막 매개 변수는 JSON은 긴 줄을 반환 생략하기로한다. 순환 기준 myObj로 존재하는 경우, 포맷은 실패 할 것이다.

8. 신속 번호 배열을 생성

배열을 생성하고 숫자를 채우려면 인덱스는 0입니다 :

const numArray = Array.from(new Array(10), (x, i)=> i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

임의로 생성 된 제 6 자리 코드

const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
// 942377

10. 정기적으로 ID 카드

const IDReg= /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;

JS 객체를 반전 11.window.location.search

URL 시작 (쿼리 부분) 때때로 우리는 물음표에서,되는 URL 쿼리 매개 변수를 변환해야 (?) 후

const searchObj = search => JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);

// 假如请求url为
// 'https://www.baidu.com?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
// 那么 window.location.search 就为：
let search = '?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
searchObj(search)

다음 개체를 얻을 쿼리 문자열을 포맷 :

12. JS 객체는 쿼리 문자열 URL을 이동

const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})
// name=Jhon&age=18&address=beijing

13. 교차 배열을 가져

const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2]

14. 검출 장치 유형

navigator.userAgent 속성 결정 장치를 검색하는 정규 표현식을 사용하여 모바일 장치 또는 데스크탑 / 랩탑 PC에서집니다.

const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

15. 디지털 형식으로 변환 천분

const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909"

1 차원 배열로 (16)는 다차원 어레이

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

17. 객체 필터 어레이

const reducedFilter = (data, keys, fn) =>data.filter(fn).map(el =>keys.reduce((acc, key) => {acc[key] =el[key];return acc;}, {}));
const data = [
  {
    id: 1,
    name: 'john',
    age: 24
  },
  {
    id: 2,
    name: 'mike',
    age: 50
  }
];

let a = reducedFilter(data, ['id', 'name'], item => item.age > 24); // [{ id: 2, name: 'mike'}]

18 혹 단어 문자열 포맷

특정 형식의 문자열 변환 혹 맞춤법.

() 밑줄, 하이픈 및 공백을 제거하려면 string.replace를 사용하고 형식 혹 철자 단어는 모두 소문자로 변환합니다. 두번째 파라미터 세퍼레이터 기본 _ 분리, 생략한다.

const fromCamelCase = (str, separator = '_') =>str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2').replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2').toLowerCase();

fromCamelCase('someDatabaseFieldName', ' '); // 'some database field name'
fromCamelCase('someLabelThatNeedsToBeCamelized', '-'); // 'some-label-that-needs-to-be-camelized'
fromCamelCase('someJavascriptProperty', '_'); // 'some_javascript_property'

19. 여부 절대 어드레스

const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);

isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false

20. 두 날짜 사이의 날짜 차이의 수를 가져옵니다

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

(21) 배열의 중복 제거

const deDupe = (myArray) => [... new Set(myArray)];
deDupe([1, 1, 2, 1, 3, 3, 4])
// [1, 2, 3, 4]

22. 무거운 사물의 배열

const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);

uniqueElementsBy([{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, {id: 1, name: 'Jhon'}], (a, b) => a.id == b.id)
// [{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}]

23. RGB 컬러 진수 변색

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

24. 공통 암호 조합의 정식

const passwordReg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,20}$/;
// -长度8~20位字符，支持大小写字母、数字、符号三种字符中任意两种字符的组合

25. 분석 DOM 요소는 클래스 명을 보유

const  hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className

마지막으로, 나는 추천 프런트 엔드 학습 교환기 685 910 553 고급에 푸시 ( 프런트 엔드 정보 공유 ), 상관없이 당신이 지구에있는 어느 방향으로
당신은 당신이에 정착 몇 년 동안 작업에 오신 것을 환영합니다 여부를! (그룹 내에서 정기적으로 무료 학습 자료 및 얼굴 질문과 답변 문서 정돈 책의 주요 그룹의 일부의 무료 모음을 제공합니다!)

이 문서에 이의가있는 경우 문서에 코멘트에, 당신의 의견을 적어주세요.

이 문서가 흥미 경우, 공유 및 전달, 또는 당신이 볼 수하십시오, 당신은 인정하고 우리의 기사의 격려.

멀리 멀리 프로그래밍의 모든 사람이 도로를 바랍니다.