常用Js css

1、 Array.map()

使用.map() 方法，可以创建一个基于原始数组的修订版数组。.map() 方法接受一个函数，该函数遍历数组中的所有项并进行相应的修改。

当需要更新数组中的所有项并将其存储到一个新数组中时，.map() 方法就可以派上用场了。

例如有一个文章列表的数组，如下：

const articles = [    {        article_id: "6976209276364652558",        title: "如何在 vue 的计算属性中传递参数",        views: 1258,    },    {        article_id: "6976113133358153736",        title: "Angular数据状态管理框架：NgRx/Store",        views: 2258,    },    {        article_id: "6975722363241365534",        title: "Angular管道PIPE介绍",        views: 1568,    },];

现在基于上面文章列表数组，获取所有 title 组成的数组，如下：

const arrayTitles = articles.map((item) => item.title);console.log(arrayTitles);

输出的结果如下：​​​​​​​

[  '如何在 Vue 的计算属性中传递参数',  'Angular数据状态管理框架：NgRx/Store',  'Angular管道PIPE介绍']

当然，只要是数组都可以使用 .map() ，接下来就基于上面标题数组，增加作者信息，如下：

const arrayTitlesWithAuthor = arrayTitles.map(    (title) => `《${title}》作者：天行无忌`);console.log(arrayTitlesWithAuthor);

输出结果如下：​​​​​​​

[  '《如何在 Vue 的计算属性中传递参数》作者：天行无忌',  '《Angular数据状态管理框架：NgRx/Store》作者：天行无忌',  '《Angular管道PIPE介绍》作者：天行无忌']

.map() 方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。

2、Array.filter()

从方法名称可以很容易知道其用途，没错用于过滤数组元素。

filter()方法根据特定条件获取数组中的元素，像 .map() 方法一样，它将返回一个新数组，并保持原始数组不变。

基于上面的 articles 数组，分别获取 views 小于 2000 的和大于 2000 的文章列表：​​​​​​​

const lessArticles = articles.filter((item) => item.views < 2000);const muchArticles = articles.filter((item) => item.views > 2000);console.log(lessArticles);console.log("\r\n==========================================\r\n");console.log(muchArticles);

输出的结果如下：​​​​​​​

[  {    article_id: '6976209276364652558',    title: '如何在 Vue 的计算属性中传递参数',    views: 1258  },  {    article_id: '6975722363241365534',    title: 'Angular管道PIPE介绍',    views: 1568  }]
==========================================
[  {    article_id: '6976113133358153736',    title: 'Angular数据状态管理框架：NgRx/Store',    views: 2258  }]

当需要从数组中删除不符合特定条件的元素时，可以使用 .filter() 。

3、Array.find()

.find() 方法看起来很像前面介绍的.filter()方法。跟 .filter()方法一样，将匹配的条件的元素返回，区别在于，.find() 将只返回与提供的条件匹配的第一个元素，不是数组。

将上面的 .filter() 方法改为 .find()，如下：​​​​​​​

const lessArticle = articles.find((item) => item.views < 2000);const muchArticle = articles.find((item) => item.views > 2000);console.log(lessArticle);console.log("\r\n==========================================\r\n");console.log(muchArticle);

输出结果如下：​​​​​​​

{  article_id: '6976209276364652558',  title: '如何在 Vue 的计算属性中传递参数',  views: 1258}
==========================================
{  article_id: '6976113133358153736',  title: 'Angular数据状态管理框架：NgRx/Store',  views: 2258}

**什么时候使用 Array.find() ？**当需要获取数组通过定义条件的第一个元素时。

4、Array.forEach()

.forEach() 方法的工作方式很像常规的 for 循环，遍历一个数组并在每个元素上执行一个函数。.forEach() 的第一个参数是回调函数，它包含循环数组的当前值和索引。

如下：​​​​​​​

articles.forEach((item, index) => {    console.log(`文章索引 ${index} 的标题为《${item.title}》`);});

输出结果如下：​​​​​​​

文章索引 0 的标题为《如何在 Vue 的计算属性中传递参数》文章索引 1 的标题为《Angular数据状态管理框架：NgRx/Store》文章索引 2 的标题为《Angular管道PIPE介绍》

 

8、Array.reduce()

.reduce() 方法接受一个回调函数作为其第一个参数，一个可选的初始值作为其第二个参数。

如果没有提供初始值，则使用第一个数组元素作为值。回调函数提供一个累加器 accumulator 和 currentValue 参数，用于执行 reduce 计算。

这里就简单举个例子，对 articles 数组的 views 进行累加求和：​​​​​​​

const sumViews = articles.reduce(    (accumulator, current) => accumulator + current.views,    0);console.log(sumViews); // 5084

使用 .reduce() 方法可以用于展平一个数组，当然已经有很多方法可以做到这一点，这就是其中的方法之一。​​​​​​

const flattened = [    [0, 1],    [2, 3],    [4, 5],].reduce((accumulator, current) => accumulator.concat(current), []);console.log(flattened); // [ 0, 1, 2, 3, 4, 5 ]

当需要通过操作其值将数组向下转换为单个值时，可以使用 .reduce() 方法

 

1、if

你是否对使用大量 if 语句感到厌烦？让我们检查一些可以在这里提供帮助的选项。

//longhandif (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {    //logic}//shorthandif (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {   //logic}

2、 If... else 简写

当我们想使用 if-else 语句时，这个会对你有所帮助。当你使用 2-3 个 if.. else 时，它会降低你代码的可读性。

// Longhandlet mychoice: boolean;if (money > 100) {    mychoice= true;} else {    mychoice= false;}// Shorthandlet mychoice= (money > 10) ? true : false;//or we can use directlylet mychoice= money > 10;console.log(mychoice);

嵌套条件如下所示：​​​​​​​

let salary = 300,checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(checking); // "greater than 100"

3、变量声明

当我们有相同类型的变量时，我们可以避免写入两次。​​​​​​​

//Longhand let data1;let data2= 1;//Shorthand let data1, data2= 1;

 

8、赋值​​​​​​​

//Longhand let data1, data2, data3;data1 = 1;data2 = 2;data3 = 3;//Shorthand let [data1, data2, data3] = [1, 2, 3];

9、赋值运算符

它主要在我们处理算术运算符时使用，就个人而言，我喜欢这里的简写，因为它更具可读性。​​​​​​​

// Longhanddata1 = data1 + 1;data2 = data2 - 1;data3 = data3 * 30;// Shorthanddata1++;data2--;data3 *= 30;

 

5、扩展运算符

你可以使用扩展运算符 (...) 将一个数组的元素“扩展”到另一个数组中。例如，让我们连接两个数字数组：​​​​​​​

const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];
// LONG FORMlet newArray = nums1.concat(nums2);
// SHORTHANDnewArray = [...nums1, ...nums2];

也可以使用此语法代替将值推送到数组：​​​​​​​

let numbers = [1, 2, 3];
// LONGER FORMnumbers.push(4);numbers.push(5);
// SHORTHANDnumbers = [...numbers, 4, 5];

 

7、从数组中删除重复项​​​​​​​

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

 

13、 箭头函数​​​​​​​

//Longhand function add(a, b) {    return a + b; } //Shorthand const add = (a, b) => a + b;

让我们再看一个例子。​​​​​​​

function function(value) {  console.log('value', value);}function= value => console.log('value', value);

14、短函数调用

我们可以使用三元运算符来实现这些功能。​​​​​​​

// Longhandfunction data1() {    console.log('data1');};function data2() {    console.log('data2');};var data3 = 1;if (data3 == 1) {    data1();} else {    data2();} //data1// Shorthand(data3 === 1 ? data1 : data2)(); //data1

 

 

18、默认参数值​​​​​​​

//Longhandfunction add(data1, data2) {    if (data1 === undefined) data1 = 1;    if (data2 === undefined) data2 = 2;    return data1 + data2;}//shorthandadd = (data1 = 1, data2 = 2) => data1 + data2;console.log(add()); //output: 3

 

20、模板文字  字符串

如果你正在寻找以在字符串中附加多个值的技巧的话，那么此技巧适合你。​​​​​​​

//longhandconst literal = 'Hi ' + data1 + ' ' + data2 + '.'//shorthandconst literal= `Hi ${data1} ${data2}`;

 

22、对象属性赋值​​​​​​​

let data1 = 'abcd'; let data2 = 'efgh';//Longhand let data = {data1: data1, data2: data2}; //Shorthand let data = {data1, data2};

 

11、对象属性赋值

如果你希望对象键与值具有相同的名称，则可以省略对象文字：​​​​​​​

const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";
// LONGER FORMconst person = {  name: name,  city: city,  age: age,  favoriteFood: favoriteFood};
// SHORTHANDconst person = { name, city, age, favoriteFood };

 

24、解构赋值​​​​​​​

//longhandconst data1 = this.data.data1;const data2 = this.data.data2;const data2 = this.data.data3;//shorthandconst { data1, data2, data3 } = this.data;

 

21、使用一行分配多个值

你可以使用解构来一次性分配多个值：​​​​​​​

let num1, num2;
// LONGER FORMnum1 = 10;num2 = 100;
// SHORTHAND[num1, num2] = [10, 100];

这也可以在处理对象时使用：​​​​​​​

student = {  name: "Matt",  age: 29,};
// LONGER FORMlet name = student.name;let age = student.age;
// SHORTHANDlet { name, age } = student;

22、在没有第三个变量的情况下交换两个变量

在 JavaScript 中，您可以使用解构从数组中提取值。这也可用于在没有第三个帮助程序的情况下交换两个变量：​​​​​

let x = 1;let y = 2;
// LONGER FORMlet temp = x;x = y;y = temp;
// SHORTHAND[x, y] = [y, x];

 

16、声明变量

你可以像这样巧妙地将变量声明组合成一行：​​​​​​​

// LONGER FORMlet name;let age;let favoriteFood = "Pizza";
// SHORTHANDlet name, age, favoriteFood = "Pizza";

 

 

25、 Array.find 方法

从数组中找到第一个匹配值的方法之一。​​​​​​​

const data = [{        type: 'data1',        name: 'abc'    },    {        type: 'data2',        name: 'cde'    },    {        type: 'data1',        name: 'fgh'    },]function datafinddata(name) {    for (let i = 0; i < data.length; ++i) {        if (data[i].type === 'data1' && data[i].name === name) {            return data[i];        }    }}//ShorthandfilteredData = data.find(data => data.type === 'data1' && data.name === 'fgh');console.log(filteredData); // { type: 'data1', name: 'fgh' }

26、按位索引

如果我们可以将 indexof 方法与速记结合起来会怎样？按位 indexof 方法为我们做同样的工作。​​​​​​​

//longhandif (data.indexOf(item) > -1) { // item found}if (data.indexOf(item) === -1) { // item not found}//shorthandif (~data.indexOf(item)) { // item found}if (!~data.indexOf(item)) { // item not found}

我们也可以使用包含功能。​​​​​​​

if (data.includes(item)) { // true if the item found}

 

 

31、查找数组中的最大值和最小值​​​​​​​

const data = [1, 4, 3]; Math.max(…data); // 4Math.min(…data); // 1

32、从字符串中获取字符​​​​​​​

let str = 'test';//Longhand str.charAt(2); // s//Shorthand Note: this is only works if we know the index of matched characterstr[2]; // c

 

4、 获取当前网址

此代码段将有助于获取运行 javascript 的当前 URL。这在前端调试中派上用场。​​​​​​​

const currentURL = () => window.location.href;currentURL() // https://medium.com/@codedev10

 

16、重定向到网址

这个片段是我最喜欢的片段，它会将你重定向到 URL。当你重定向到网站时，这在 Web 开发中会派上用场。当用户执行任何操作时。​​​​​​​

const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);redirect('https://medium.com/')redirect('https://codedev101.medium.com/')

 

 

 

 

 

CSS

2、代码复用

很多开发人员在谈到CSS时都觉得代码重复性很高，在项目开发中这不是一个好的做法。

好在现在有CSS预处理器（sass/scss、less、stylus、Turbine），能够让我们可以更好的规划CSS代码，提高其复用性。

当然需要提高代码复用，还是需要一定的CSS的基础，来设计好代码结构，如下：​​​​​​​

/* 不提倡 */.container {    background-color: #efefef;    border-radius: 0.5rem;}
.sidebar {    background-color: #efefef;    border-radius: 0.5rem;}
/* 建议 */.container,.sidebar {    background-color: #efefef;    border-radius: 0.5rem;}

 

3、文字阴影

text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。

属性与值的说明如下：

text-shadow: [X-offset,Y-offset,Blur,Color];

X-offset:指阴影居于字体水平偏移的位置。
Y-offset:指阴影居于字体垂直偏移的位置。
Blur:指阴影的模糊值。
color:指阴影的颜色；​​​​​​​

h1{text-shadow: 5px 5px 5px #FF0000;}

 

15、文字之间的间距

单词text-indent抬头距离，letter-spacing字与字间距​​​​​​

p{  text-indent：10px；//单词抬头距离  letter-spacing：10px；//间距}