2020.11.14——数组、块级格式化上下文BFC

JS基础 && CSS面试题 -2020.11.14

• a. JS基础

   i. 了解JS中的数组，什么是数组，怎么判断是不是数组，数组的创建形式，获取数组元素的方法，修改的方法，添加数组元素的方法，遍历数组元素的方法，如何判断元素在不在数组内，如何删除数组元素
  

  数组

   ECMAScript 数组跟其他编程语言的数组有很大区别。
   跟其他语言中的数组一样，ECMAScript 数组也是一组有序的数据，
   但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。
   这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。
   ECMAScript 数组也是动态大小的，会随着数据添加而自动增长。
  

  判断数组

  使用 instanceof 操作符
  if (value instanceof Array){
  	// 操作数组
  }
  

  创建数组

  1、使用Array构造函数
  
  let colors=new Array(3);//创建长度为3的数组
  let colors=new Array("red","blue","green");//创建包含3个字符串值得数组
  
  注意：其中new可以省略
  

  2、使用数组字面量（array literal）表示法
  
  let colors = ["red", "blue", "green"]; // 创建一个包 含 3 个元素的数组
  let names = []; // 创建一个空数组
  let values = [1,2,]; // 创建一个包含 2 个元素的数组
  
  注意：与对象一样，在使用数组字面量表示法创建数组不会调用 Array 构造函数
  
  另外：可以使用一串逗号来创建空位（hole），元素的值为undefined
  
  const options = [,,,,,]; // 创建包含 5 个元素的数组
  console.log(options.length); // 5
  console.log(options); // [,,,,,]
  

  3、使用Array.from()静态方法
  	3.1.Array.from() 的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构。
  		这种方式可用于很多场合：
  	// 字符串会被拆分为单字符数组
  	console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
  	
  	// 可以使用 from()将集合和映射转换为一个新数组
  	const m = new Map().set(1, 2)
  						.set(3, 4);
  	const s = new Set().add(1)
  						.add(2)
  						.add(3)
  						.add(4);
  	console.log(Array.from(m)); // [[1, 2], [3, 4]]
  	console.log(Array.from(s)); // [1, 2, 3, 4]
  	
  	// Array.from()对现有数组执行浅复制
  	const a1 = [1, 2, 3, 4];
  	const a2 = Array.from(a1);
  	console.log(a1); // [1, 2, 3, 4]
  	alert(a1 === a2); // false
  	
  	// 可以使用任何可迭代对象
  	const iter = {
  		*[Symbol.iterator]() {
  				yield 1;
  				yield 2;
  				yield 3;
  				yield 4;
  		}
  	};
  	console.log(Array.from(iter)); // [1, 2, 3, 4]
  	
  	// arguments 对象可以被轻松地转换为数组
  	function getArgsArray() {
  		return Array.from(arguments);
  	}
  	console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
  	
  	// from()也能转换带有必要属性的自定义对象
  	const arrayLikeObject = {
  		0: 1,
  		1: 2,
  		2: 3,
  		3: 4,
  		length: 4
  	};
  	console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]
  	
  	3.2.Array.from() 还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用 Array.from().map() 那样先创建一个中间数组。
  		还可以接收第三个可选参数，用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。
  	const a1 = [1, 2, 3, 4];
  	const a2 = Array.from(a1, x => x**2);
  	const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2});
  	console.log(a2); // [1, 4, 9, 16]
  	console.log(a3); // [1, 4, 9, 16]
  

  4、使用Array.of()静态方法把一组参数转换为数组
  
  console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
  console.log(Array.of(undefined)); // [undefined]
  

  获取数组元素

   ECMAScript 提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索。
  

  1、严格相等搜索方法：indexOf()、lastIndexOf()和includes()
  	indexOf() 和 lastIndexOf() 都返回要查找的元素在数组中的位置，如果没找到则返回1。
  	includes() 返回布尔值，表示是否至少找到一个与指定元素匹配的项。
  let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  
  alert(numbers.indexOf(4)); // 3
  alert(numbers.lastIndexOf(4)); // 5
  alert(numbers.includes(4)); // true
  
  alert(numbers.indexOf(4, 4)); // 5
  alert(numbers.lastIndexOf(4, 4)); // 3
  alert(numbers.includes(4, 7)); // false
  
  let person = { name: "Nicholas" };
  let people = [{ name: "Nicholas" }];
  let morePeople = [person];
  
  alert(people.indexOf(person)); // -1
  alert(morePeople.indexOf(person)); // 0
  alert(people.includes(person)); // false
  alert(morePeople.includes(person)); // true
  
  2、断言函数
  	断言函数接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。
  	断言函数返回真值，表示是否匹配。find() 和 findIndex() 方法使用了断言函数。这两个方法都从数组的最小索引开始。
  	find() 返回第一个匹配的元素，findIndex() 返回第一个匹配元素的索引。
  	这两个方法也都接收第二个可选的参数，用于指定断言函数内部 this 的值。
  	
  const people = [
  {
  name: "Matt",
  age: 27
  },
  {
  name: "Nicholas",
  age: 29
  }
  ];
  alert(people.find((element, index, array) => element.age < 28));
  // {name: "Matt", age: 27}
  alert(people.findIndex((element, index, array) => element.age < 28));
  // 0
  找到匹配项后，这两个方法都不再继续搜索。
  const evens = [2, 4, 6];
  // 找到匹配后，永远不会检查数组的最后一个元素
  evens.find((element, index, array) => {
  console.log(element);
  console.log(index);
  console.log(array);
  return element === 4;
  });
  // 2
  // 0
  // [2, 4, 6]
  // 4
  // 1
  // [2, 4, 6]
  

  修改数组元素

   let colors = ["red", "green", "blue"];
   let removed = colors.splice(0,1); // 删除第一项
   alert(colors); // green,blue
   alert(removed); // red，只有一个元素的数组
   
   removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
   alert(colors); // green,yellow,orange,blue
   alert(removed); // 空数组
   
   removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
   alert(colors); // green,red,purple,orange,blue
   alert(removed); // yellow，只有一个元素的数组
  

• b. CSS面试题

   如何创建块级格式化上下文(block formatting context),BFC有什么用
  

  创建块级格式上下文

   根元素（<html>）
   浮动元素（元素的 float 不是 none）
   绝对定位元素（元素的 position 为 absolute 或 fixed）
   行内块元素（元素的 display 为 inline-block）
   表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
   表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
   匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-		group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
   overflow 值不为 visible 的块元素
   display 值为 flow-root 的元素
   contain 值为 layout、content 或 paint 的元素
   弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
   网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
   多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
   column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）
  

  BFC作用

   1、让浮动内容和周围的内容等高
   2、外边距合并
   3、防止高度塌陷
   4、宽度自适应
   ……