زیاد پیش میاد که وجود یا عدم وجود یک زیررشته را چک کنیم. برای اینکار از
این تیپ با استفاده از اپراتور
کاربرد:
()indexOf و مقایسه با عدد 1- استفاده می کنیم.این تیپ با استفاده از اپراتور
~ کار رو ساده تر می کنه:String.prototype.includes =
function (search, start) {
return !!~this.indexOf(search, start);
}
بدلیل نمایش 32بیتی اعداد در جاوااسکریپت، 1-~ و 4294967295~ (1 - 32 ^ 2) برابر با 0 هستندکاربرد:
"TipCode".includes("T"); //true
"TipCode".includes("T", 1); //false
#سطح_متوسط #javascriptاگر ابزار #DevTools رو روی فیسبوک باز کرده باشید در تب کنسول لاگ هایی مشابه در تصویر می بینید (لاگی که استایل دهی شده)
برای استایل دهی باید از
دستور پایین را در کنسول چک کنید:
برای استایل دهی باید از
c% استفاده کنیددستور پایین را در کنسول چک کنید:
console.log('%c Tip Code',
'color: green; font-size: 48px')
حتی می تونید چند تا استایل برای یک لاگ تعریف کنید:console.log('%c Tip Code | %c Tip Code',
'color: white; background: black',
'color: green;border:2px dashed blue');
#سطح_متوسط👍1
یکی از ویژگی های پرکاربرد که سال ها قبل به #ES2015 اضافه شد و بیشتر موتورهای #javascript و مرورگرها ساپورت می کنند، معرفی Template literals بود. رشته هایی (string) که با استفاده از کاراکترهای
#سطح_مبتدی
`` بجای " یا ' تعریف می کنیم. با استفاده از این ویژگی می تونیم رشته ها را قالب بندی کنیم و رشته های چند سطری داشته باشیم:var name = 'foo';
console.log(
`Go to the next two lines
print ${name}!`);
// Output:Go to the next two lines
print foo!#سطح_مبتدی
Tip Code
یکی از ویژگی های پرکاربرد که سال ها قبل به #ES2015 اضافه شد و بیشتر موتورهای #javascript و مرورگرها ساپورت می کنند، معرفی Template literals بود. رشته هایی (string) که با استفاده از کاراکترهای `` بجای " یا ' تعریف می کنیم. با استفاده از این ویژگی می تونیم…
Tag Functions - #javascript
امکان پیشرفته تری که Template literals فراهم می کنند، قابلت Tagged templates هستند. تگ ها امکان پارس کردن template literals را از طریق توابع (Tag functions) فراهم می کنند.
نحوه صدا زدن این توابع فرق می کنند ( بدون پرانتز) و مقدار ورودی این تابع به این شکل پارس میشه: پارامتر اول آرایه ای از مقدار رشته ها (strings) و پارامترهای یعدی متغیر های استفاده شده در رشته هستند:
امکان پیشرفته تری که Template literals فراهم می کنند، قابلت Tagged templates هستند. تگ ها امکان پارس کردن template literals را از طریق توابع (Tag functions) فراهم می کنند.
نحوه صدا زدن این توابع فرق می کنند ( بدون پرانتز) و مقدار ورودی این تابع به این شکل پارس میشه: پارامتر اول آرایه ای از مقدار رشته ها (strings) و پارامترهای یعدی متغیر های استفاده شده در رشته هستند:
let Person = {
name: 'foo',
age: 30
};
function tag(str,name, age) {
console.log('output:');
console.log(str[0]);
console.log(str[1]);
console.log(name);
console.log(age);
};
let {name, age} = Person;
/*
Tagged template is a function call
that get its arguments from a
template literal.
*/
tag`Name: ${name}, age:${age}`;
// output:
// Name:
// , age:
// foo
// 30
#سطح_پیشرفته❤1
روش ساده تر برای حذف یک آیتم از آرایه با حفظ #immutability در #javascript
const newArr =
[...arr.slice(0, index),
...arr.slice(index + 1)];
#سطح_متوسط #immutableاین #تیپکد خیلی ساده است و احتمالا همه شما آن را میدانید. اما برای توضیح تیپ کد بعدی لازمه که ذکر شود.
کد زیر را ملاحظه کنید:
در #php حلقه #foreach اطلاعات را در متغییر
اگر قصد دارید که کد فوق در آرایه اصلی تغییر ایجاد کند باید از عملگر
در پست بعدی مشکلی که در استفاده از این روش اتفاق خواهد افتاد را ذکر میکنیم
#بکاند #سطح_مبتدی
کد زیر را ملاحظه کنید:
$arr = array(1, 2, 3);خروجی:
foreach ($arr as $item) {
$item += 100;
}
print_r($arr);
Array ( 1, 2, 3 )
در #php حلقه #foreach اطلاعات را در متغییر
item$ کپی میکنند. پس با تغییر دادن item$ تغییری در آریه اصلی اتفاق نخواهد افتاد.اگر قصد دارید که کد فوق در آرایه اصلی تغییر ایجاد کند باید از عملگر
& استفاده کنید تا اطلاعات ByRef به item$ پاس داده شود:$arr = array(1, 2, 3);خروجی:
foreach ($arr as &$item) {
$item += 100;
}
print_r($arr);
Array ( 101, 102, 103 )
در پست بعدی مشکلی که در استفاده از این روش اتفاق خواهد افتاد را ذکر میکنیم
#بکاند #سطح_مبتدی
مشکلی که در استفاده
یکی از مواردی که سهوا اتفاق میافتد و تیم برنامه نویسی ما نصف روز درگیر رفع این مشکل بود، استفاده از یک حلقه دیگر اما بدون علامت
هماهنطور که ملاحظه میکنید، اطلاعات عنصر آخر آرایه تغییر کرده است.
برای اینکه این اتفاق پیش نیاید راه حل های ساده ای وجود دارد. ساده ترین روش این است که برای حلقه دوم اسم متفاوت انتخاب کنید.
یا اینکه بعد از خروج از حلقه اول، متغییر آن را از بین ببرید:
ByRef از حلقه foreach به وجود میآید این است که متغییر item$ بعد از خروج از حلقه، همچنان به آخرین عنصر آرایه اشاره دارد و هر تغییر در آن منجر به تغییر در آرایه اصلی میشود.$arr = array(1, 2, 3);خروجی:
foreach ($arr as &$item) {
$item += 100;
}
$item = 0;
print_r($arr);
Array ( 1, 2, 0 )
یکی از مواردی که سهوا اتفاق میافتد و تیم برنامه نویسی ما نصف روز درگیر رفع این مشکل بود، استفاده از یک حلقه دیگر اما بدون علامت
& است:$arr = array(1, 2, 3);خروجی:
foreach ($arr as &$item) {
$item += 100;
}
foreach ($arr as $item){...}
print_r($arr);
Array ( 101, 102, 102 )
هماهنطور که ملاحظه میکنید، اطلاعات عنصر آخر آرایه تغییر کرده است.
برای اینکه این اتفاق پیش نیاید راه حل های ساده ای وجود دارد. ساده ترین روش این است که برای حلقه دوم اسم متفاوت انتخاب کنید.
یا اینکه بعد از خروج از حلقه اول، متغییر آن را از بین ببرید:
unset($item);#بکاند #php #سطح_پیشرفته
از این به بعد بجای
اگر خواستید حداقل یک جای کدتون با برنامه نویس ارشد فرق داشته باشه 😁
#سطح_مبتدی #fun
++i از i-=-1 استفاده کنیم؟!اگر خواستید حداقل یک جای کدتون با برنامه نویس ارشد فرق داشته باشه 😁
#سطح_مبتدی #fun
👍1
سریعترین راه تبدیل Float به Int
console.log( 12.9 | 0); // 12
console.log(-12.1 | 0); //-12
console.log(~~12.1); //12
console.log(~~-12.1); //-12
#javascript #سطح_متوسط👍2
با این کد ساده، پاس دادن مقدار برای پارامترهای تابع را در #javascript اجباری کنید!
const isRequired = (argName) => {
throw new Error(`|${argName}| is a required arg!`);
};
استفادهconst aFunc = (name = isRequired('name')) => { /* body */ };
نتیجه// Error: name is a required arg!
aFunc();
aFunc(undefined);
// No error
aFunc('TipCode');
aFunc(null);
@TipCode👍1
اپراتور "
بعضی از دولوپرها از این شکل استفاده می کنند چون علامت
<--" در #javascript چه کاری میکنه؟!let x = 10;
while(x --> 0)
console.log(x);
با استفاده از امکان space بین اپراتورهای ++ , -- و اپرند، <-- فقط تلفیق دو اپراتور -- و < هست.بعضی از دولوپرها از این شکل استفاده می کنند چون علامت
<-- از نظر بصری مثل اشاره گر به عدد انتهایی هست.👍1
const name = 'foo', family = 'bar';برای راحت دیباگ کردن از Object Initializer استفاده کنید:
console.log({name, family});
بجای:console.log(`name: ${name}, family: ${family}`);
#javascriptاگر در #vuejs نیاز دارید که تمام props را به یک کامپوننت دیگه پاس بدین!
خیلی کاربردیه زمانی که از یک کامپوننت بعنوان wrapper برای یک کامپوننت دیگه استفاده می کنید.
خیلی کاربردیه زمانی که از یک کامپوننت بعنوان wrapper برای یک کامپوننت دیگه استفاده می کنید.
<template>
<child v-bind="$props"/>
</template>
بجای:<template>
<child
:prop1="prop1"
:prop2="prop2"
.
.
.
/>
</template>
Tip Code
اگر در #vuejs نیاز دارید که تمام props را به یک کامپوننت دیگه پاس بدین! خیلی کاربردیه زمانی که از یک کامپوننت بعنوان wrapper برای یک کامپوننت دیگه استفاده می کنید. <template> <child v-bind="$props"/> </template> بجای: <template> <child :prop1="prop1"…
مشابه با این تیپ ولی برای پاس دادن تمام event listeners از یک کامپوننت (parent) به زیرکامپوننت (child component)
<template>
<child v-on="$listeners"/>
</template>
#vuejsبا فرض این آرایه
let arr = [1,2,3,...,999];با استفاده از #object_destructuring
const {0: first,
10: tenth,
50: fiftieth,
1000: thousandth = 1000} = arr;
بجای این دستورات:const first = arr[0],
tenth = arr[10],
fiftieth= arr[50],
thousandth = arr[1000] || 1000;
#javascript👍1
Tip Code
با فرض این آرایه let arr = [1,2,3,...,999]; با استفاده از #object_destructuring const {0: first, 10: tenth, 50: fiftieth, 1000: thousandth = 1000} = arr; بجای این دستورات: const first = arr[0], tenth = arr[10], fiftieth= arr[50], …
و با استفاده از #computed_property_names کد های مختصر و بهتری تولید میشه:
const {length: len,
[len / 2 | 0]: mid = 0,
[len - 1]: last } = arr;
بجای:const len = arr.length,
mid = arr[parseInt(arr.length / 2)] || 0,
last = arr[arr.length - 1];
#javascript