forEach()

forEach()方法对数组中的每一个元素执行一次提供的函数。
用于调用数组的每个元素，并将元素传递给回调函数。
注意：forEach()对于空数组是不会执行回调函数的。

返回值：undefined

  2. 例子：
  3. let arr = ['a','b','c']
  4. arr.forEach(ele=>console.log(ele))  //a  b  c    'string'类型

for…of

在可迭代对象（包括Array Map String等等） 上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

  1. 语法：for(variable of iterable){
  2.     //statements  
  3. }
  4. variable 在每次迭代中 将不同属性的值分配给变量
  5. iterable 被迭代枚举其属性的对象
  7. const arr = ['a','b','c']
  8.   for(let element of arr){
  9.       console.log(element)
  10.   }

for…in

以任意顺序遍历一个对象的除Symbol以外的可枚举属性。为遍历对象属性而构建。

  1. var obj = {a:1, b:2, c:3};
  3. for (var prop in obj) {
  4.   console.log("obj." + prop + " = " + obj[prop]);
  5. }
  7. // Output:
  8. // "obj.a = 1"
  9. // "obj.b = 2"
  10. // "obj.c = 3"

Object.values()

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值得顺序与使用for…in 循环的顺序相同。（区别在于 for in 循环会枚举原型链中的属性）

  1. var obj = { foo: 'bar', baz: 42 };
  2. console.log(Object.values(obj)); // ['bar', 42]
  5. // array like object with random key ordering
  6. // when we use numeric keys, the value returned in a numerical order according to the keys
  7. var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
  8. console.log(Object.values(an_obj)); // ['b', 'c', 'a']
  11. // non-object argument will be coerced to an object
  12. console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

  1. // simple array
  2. var arr = ['a', 'b', 'c'];
  3. console.log(Object.keys(arr)); // console: ['0', '1', '2']
  5. // array like object
  6. var obj = { 0: 'a', 1: 'b', 2: 'c' };
  7. console.log(Object.keys(obj)); // console: ['0', '1', '2']
  9. // array like object with random key ordering
  10. var anObj = { 100: 'a', 2: 'b', 7: 'c' };
  11. console.log(Object.keys(anObj)); // console: ['2', '7', '100']

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）

  1. const obj = { foo: 'bar', baz: 42 };
  2. console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
  4. // array like object with random key ordering
  5. const anObj = { 100: 'a', 2: 'b', 7: 'c' };
  6. console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
  8. // iterate through key-value gracefully
  9. const obj = { a: 5, b: 7, c: 9 };
  10. for (const [key, value] of Object.entries(obj)) {
  11.   console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
  12. }
  14. // Or, using array extras
  15. Object.entries(obj).forEach(([key, value]) => {
  16. console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
  17. });

indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

  2. const arr = [1,2,3,4,5]
  3. console.log(arr.indexOf(1))  //0 第0位
  4. console.log(arr.indexOf(8))  //-1

setTimeout()

setTimeout 传参数
除了前面两个参数 setTimeout 还允许添加更多的参数,它们将被传入推迟执行的函数(回调函数)

apply/call

区别所在： apply：数组形式 / call:参数列表

func.apply(thisArg, [argsArray])

注: thisArg 在func函数运行时使用的this值.可以为null会自动替换指向全局对象,

注意：返回值 调用有指定this和参数的函数的结果

  1. var a =  function(){
  2.     console.log(1)
  3. }
  4. console.log(a.apply(this))   //1 undefined  这里的undefined 就是a函数的返回值
  1. var a =  function(){
  2.     console.log(1)
  3.     return 1
  4. }
  5. console.log(a.apply(this))  //1  1

实际应用：将类数组对象转换为数组

  1. function exam(a, b, c, d, e) {
  2.     console.log(arguments)
  3.     var arg = [].slice.call(arguments)
  4.     // var arg = Array.from(arguments)    //方法二
  5.     console.log(arg)
  6. }
  8. exam(1, 2, 3, 4)

Math.floor()向下取整

  1. Math.floor( 45.95); 
  2. // 45

Math.ceil()向上取整

  1. console.log(Math.ceil(.95));
  2. // 1

Math.random()四舍五入

parseInt 取整

将字符串转化为整数，如果字符串不以整数开头，将返回NaN

  1. 在第一个非整数位停止解析，并且返回前面读到的所有整数
  3. var a = 1.8;
  4. var b = parseInt(a)
  5. console.log(b)   //1

Objcet.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

  1. 语法：
  2. Object.assign(target,...sources)
  3. 参数 ：
  4.     target: 目标对象（比如说我定义了一个 copy 为空，我要把obj复制过来，此时copy 就是目标对象）
  5.   sources: 源对象 
  6. 返回值： 目标对象  
  7. 补充 ： target可以理解为 新拷贝的对象
  9. 例子 复制一个对象 
  10. const obj = { a: 1 };
  11. const copy = Object.assign({}, obj);
  12. console.log(copy); // { a: 1 }
  15. 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
  17. let obj = {a:1}
  18. let obj2 = {a:2}
  19. let copy = Object.assign(obj2,obj)
  20. console.log(copy)  //{a: 1}
  1.  Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
  3.  也就是源对象中的对象的引用，那么这个是不会改变的，也就是浅拷贝 
  5.  例子说明
  6. const obj = {
  7.     a: 1,
  8.     b:{
  9.         name:"chu"
  10.     }
  11. };
  12. const copy = Object.assign({}, obj);
  13. copy.b.name = "zhangsan"
  14. copy.a="2"
  15. console.log(obj); 
  16. console.log(copy)

image.png

  1. // Deep Clone
  3. JSON.stringify  类型 字符串
  4. JSON.parse      类型 Object
  7. obj1 = { a: 0 , b: { c: 0}}; 
  8. let obj3 = JSON.parse(JSON.stringify(obj1)); 
  9. obj1.a = 4; 
  10. obj1.b.c = 4; 
  11. console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

文档 ： http://es6.ruanyifeng.com/#docs/object-methods

https://juejin.im/post/5c31e5c4e51d45524975d05a#heading-0

常见用途：
1）为对象添加属性（不会 ）

  1. class Point {
  2.   constructor(x, y) {
  3.     Object.assign(this, {x, y});
  4.   }
  5. }
  7. 上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

2）克隆对象
（不会保持origin 的属性特性（可写 可枚举等 ））

  1. function clone(origin){
  2.       return Object.assign({}, origin);
  3. }

toUpperCase()

  1. str.toUpperCase() 返回一个大写的字符串
  3. let str = "Hello";
  4. alert( str.toUpperCase() ); // HELLO

toFixed(n)

  1. let n = 1.23456;
  2. alert( n.toFixed(2) ); // 1.23

toString()

toString() 方法返回一个表示该对象的字符串

  1. var num = 15
  2. num.toString() //15
  3. typeof a       //string

每个对象都有一个toString() 方法，toString()方法被每个Object 对象继承。

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

split() — 字符串

使用指定的分隔符字符串将一个String对象分割成字符串数组

  1. let str = 'chu'
  2. console.log(str.split(""))  // ["c", "h", "u"]

join

用于把数组中的所有元素放入一个字符串

  1. 数组反转
  3. var a = "hello"
  4. a.split("").reverse().join("")  //olleh

Array.from()

从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

  1. console.log(Array.from('foo'));
  2. // ["f", "o", "o"]

补充 该 方法会将一个可迭代对象（如字符串）转换为数组：

  1. let a = "hello"
  2. Array.from(a)
  4. => 等同于
  6. [...a]

ES6 去重

  1. var arr =[1,2,3,4,5,6,3,2,3]
  2. function unique(arr){
  3.     return Array.from(new Set(arr))
  4. }
  5. console.log(unique(arr))

image.png

reduce()

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

**accumulator**
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值

currentValue
数组中正在处理的元素。

index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。

array可选
调用reduce()的数组

reduce() 方法对数组中的每个元素执行一个由你提供的reduce函数（升序执行），将其结果汇总为单个返回值

  1. [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
  4. 也就是先将 1 2项的值进行操作，可以是 加 或者是 做其它处理，然后所获取的值在与第3项值 进行操作
  1. let arr = [1,2,3,4]
  2. let reducer = (a,b)=>a+b
  3. console.log(arr.reduce(reducer))  //10

去重应用

  1. var arr =[1,2,3,4,5,5,5]
  2.         var res = arr.reduce(function(pre,cur){
  3.             if(!pre.includes(cur)){
  4.                 return pre.concat(cur)
  5.             }else{
  6.                 return pre
  7.             }
  8.         },[])
  9.         console.log(res)

Number

Number 对象主要用于

  • 如果参数无法被转换为数字 则返回NaN

isNaN

isNaN()函数用来确定一个值是否为NaN
NaN不能通过相等操作符（== 和 ===）来判断 ，因为 NaN == NaN 和 NaN === NaN 都会返回 false

如果函数的参数不是Number类型,那么会将参数转换为数值在进行与NaN的判断. 空字符串和布尔值分别会被强制转换为数值 0 和 1

  1. 0/0   =>   NaN
  3. isNaN("")  //false 空字符串被转换成0
  4. isNaN(" ") //包含空格的字符串被转换为0

parseFloat

会被解析成浮点数,如果不能则会返回NaN

  1. parseFloat(true) //NaN

break 和 continue 语句

break 语句会立即退出循环，强制继续执行循环后面的语句
containue 立即退出循环 但退出循环后会从循环的顶部继续执行

JSON.parse()

补充（2021.8.18）：JSON.parse() 报错场景
image.png
当我们不能确定服务端返回的数据类型时

  1. // 判断数据是否存在
  2. var str = str && JSON.parse(str) || {};
  4. // 判断数据类型
  5. var str = typeof str == "string" ? JSON.parse(str) : {};
  7. // 通过 try catch 捕捉异常，防止代码报错
  8. var c = null;
  9. try {
  10.     c = JSON.parse(str)
  11. } catch (d) {}
  14. var g = "";
  15. try {
  16.     g = JSON.stringify(a)
  17. } catch (u) {}
  19. "object" == typeof a ? JSON.stringify(a) : a

2021.11.9 补充
报错提示 Unexpected token o in JSON at position 1
stackoverflow
可以使用下方进行转换操作

  1. JSON.parse(JSON.stringify(userData))

parse 解析
用来解析JSON 字符串 构造由字符描述的JavaScript值或对象

  1. let arr = '["111","222"]'
  2. console.log(JSON.parse(arr))  //["111", "222"]

JSON.stringify()

stringify 字符串化

  1. JSON.stringify({ x: 5 }); 
  3. // '{"x":5}'

every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，返回一个布尔值
注意：若是空数组 返回true

  1. array.every(function(currentValue,index,arr),this.value)

例子

  1. [12, 5, 8, 130, 44].every(x => x >= 10); // false
  4. var arr = [1,2,3,4]
  5. var res = arr.every(function(item){
  6.     return item < 5
  7. })
  8. console.log(res) //true
  10. 注意：every 是测试数组中的每一个值是否满足你所写的函数测试，返回一个布尔值。

场景：全选按钮的实现

  1. data(){
  2.  return {
  3.      list:[
  4.         {
  5.             id:1,
  6.             name:'水果',
  7.             price:12,
  8.             num:1,
  9.             checked:false
  10.         },
  11.         {
  12.             id:2,
  13.             name:'苹果',
  14.             price:15,
  15.             num:1,
  16.             checked:false
  17.         }
  18.     ],
  19.  }
  20. }
  23. // 全选按钮
  24. checkAll(){
  25.       //返回值都是true时 说明商品都是选中状态
  26.     if(this.list.every(item=>item.checked)){
  27.         this.list.forEach((item)=>item.checked = false)
  28.         this.allChecked = false
  29.     }else{
  30.         this.list.forEach((item)=>item.checked = true)
  31.         this.allChecked = true
  32.     }
  33. },

some

some()方法测试数组中是不是至少有一个元素通过了被提供的函数测试，他返回的是一个boolean类型的值
注意：若是空数组 返回false

  1. [2, 5, 8, 1, 4].some(x => x > 10);  // false

filter

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素
主要是过滤作用 不会改变原数组

补充：原理：如果返回值为true或能转化为true的值，那么传递给判定函数的元素就是这个子集的成员，它将被添加到一个作为返回值的数组中。

  1. var words = ['hello','morning','evening','afternoon','breakfest']
  2. var result = words.filter(word => word.length > 6)
  3. console.log(result)  //["morning", "evening", "afternoon", "breakfest"]

map

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个函数提供的函数后返回的结果
返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
注意:map()不会对空数组进行检测
map()不会改变原始数组

语法 : array.map(function(currentValue,index,arr),thisValue)

参数 : 函数 必须 数组中的每个元素都会执行这个函数
currentValue 必须 当前元素的值
index 可选 当前元素的索引值
arr 可选 当前元素属于的数组对象

  1. const arr1 = [1,4,9,16]
  3. //x 就是当前元素的值
  4. const map1 = arr1.map(x=>x*2)
  5. console.log(map1); //Array [2, 8, 18, 32]

object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象现有属性，并返回这个对象。

  1. Object.defineProperty(obj, prop, descriptor)
  2. obj
  3. 要在其上定义属性的对象
  4. prop
  5. 要定义或修改的属性的名称
  6. descriptor
  7. 将被定义或修改的属性描述符

instanceof

检测构造函数的prototype属性是否出现在某个实例对象的原型链上

  1. function C(){}
  2. console.log(C instanceof Object) //true

parseInt

语法： parseInt (string,radix)

  1. radix 表示要解析的数字的基数，2-36之间。
  2. 如果省略该参数或其值为0 ，则数字将以10为基数来解析、
  3. 如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
  4. 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

可解析一个字符串，并返回一个整数

  2. parseInt("10");            //返回 10
  3. parseInt("19",10);        //返回 19 (10+9)
  4. parseInt("11",2);        //返回 3 (2+1)
  5. parseInt("17",8);        //返回 15 (8+7)
  6. parseInt("1f",16);        //返回 31 (16+15)
  7. parseInt("010");        //未定：返回 10 或 8

MDN定义

parseInt(string, radix)

可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

算这个进制的方法

如果parseInt的字符不是指定基数中的数字(基数大于 10 时，用字母表中的字母来表示大于9 的数字。例如十六进制中，使用 A到 F。)，则忽略该字符和所有后续字符，并返回解析到该点的整数值。parseInt将数字截断为整数值。允许使用前导空格和尾随空格。

意思就是比如 15 那么就看成1

除了“0、1”外，其它数字都不是有效二进制数字

  2. parseInt('123', 5) // 将'123'看作5进制数，返回十进制数38 => 1*5^2 + 2*5^1 + 3*5^0 = 38
  4. 计算过程
  5. 因为固定是返回十进制数,所以只需要记住方法就可以
  7. 3*5^0 + 2*5^1 + 1*5^2  = 38

charCodeAt

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码

语法 ： string.charCodeAt(index)

若大于255即为中文字符

while

while语句可以在某个条件表达为真的前提下，循环执行制定的一段代码，直到那个表达式不为真时结束循环

  1. let n = 0
  2. while(n<3){
  3.     n++
  4. }
  5. console.log(n) //3
  7. 另一种使用方法
  8. 使用场景:根据这个值执行多少次数
  9. var n = 5
  10. while(n--){
  11.     console.log(n)  //4 3 2 1 0
  12. }

setInterval

setInterval()会一直调用函数，关闭它需要将这个 定时器 的id 传给 clearInterval() 方法

场景： 验证码倒计时

  1. <span v-if="count == 0" @click="sendCode">发送验证码</span>
  2. <span v-else>已发送{{count}}s</span>
  5. data() {
  6.   return {
  7.     count:0
  8.   };
  9. },
  12. sendCode(){
  13.         this.count = 60
  14.         this.timeIntervalId = setInterval(() => {
  15.             this.count --
  16.             if(this.count == 0){
  17.                 clearInterval(this.timeIntervalId)
  18.             }
  19.         }, 1000);
  20.     }

find

返回数组中满足条件的第一个元素的值。否则返回 undefined

  1. const names = ["Kai", "Katharina", "Tim"];
  2. const shortName = names.find(name=>name.length < 4)
  3. console.log(shortName) //Kai
  1. <script>
  2.     const characters = [{
  3.             id: 1,
  4.             name: 'ironman',
  5.             env: 'marvel'
  6.         },
  7.         {
  8.             id: 2,
  9.             name: 'black_widow',
  10.             env: 'aaa'
  11.         },
  12.         {
  13.             id: 3,
  14.             name: 'wonder_woman',
  15.             env: 'dc_comics'
  16.         },
  17.     ];
  19.     function hasFrom(env) {
  20.         return character => character.env === env
  21.     }
  23.     console.log(characters.find(hasFrom('marvel'))) //返回数组中的第一个满足条件的值 这里返回的是数组的第一个对象
  24. </script>

findIndex()

满足数组中满足提供的条件的第一个元素的索引，否则返回-1

  1. <script>
  2.     const characters = [{
  3.             id: 1,
  4.             name: 'ironman',
  5.             env: 'marvel'
  6.         },
  7.         {
  8.             id: 2,
  9.             name: 'black_widow',
  10.             env: 'aaa'
  11.         },
  12.         {
  13.             id: 3,
  14.             name: 'wonder_woman',
  15.             env: 'dc_comics'
  16.         },
  17.     ];
  19.     function hasFrom(env) {
  20.         return character => character.env === env
  21.     }
  23.     console.log(characters.findIndex(hasFrom('marvel'))) //0
  24. </script>

逻辑运算符 &&

image.png

通常情况下： 返回一个布尔值
&& 和 || 会返回一个指定操作数的值，可用于非布尔值

  1. const a = 3
  2. const b = -2
  4. console.log(a>0&&b>0)     //false
  5. console.log(a>0||b>0)     //true
  6. console.log(!(a > 0 || b > 0)) //false
  1. function getValue() {
  2.     console.log("执行了")
  3. }
  4. const a = 3
  5. const b = -2
  6. a > 0 && getValue()  //执行了

会被转换为false的表达式

  • 空字符串
  • null
  • NaN
  • undefined
  • 0

短路计算
因为逻辑运算是从左到右边。分为两种情况.右边的代码不会被执行
（ false ）&& （expr） false
（ true ）|| (expr) true

删除嵌套的小括号

and

  1. bCondition1 || (bCondition2 && bCondition3)
  3. 等价于
  5. bCondition1 || bCondition2 && bCondition3

splice

返回值 由被删除的元素组成的一个数组

  1. array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  3. deleteCount 可选
  6. 当为0时候，或者是负数，则不移除元素。这种情况下，至少会添加一个元素。
  1. const months = ['Jan', 'March', 'April', 'June'];
  2. months.splice(4,2,'six')
  3. console.log(months)   //["Jan", "March", "April", "June", "six"]
  6. 从第四项开始 删除后面的一个元素，在添加元素进来
  7. const months = ['Jan', 'March', 'April', 'June','5','6'];
  8. months.splice(4,1,'six')
  9. console.log(months)   //["Jan", "March", "April", "June", "six", "6"]

Array.from

https://segmentfault.com/a/1190000004450221

ArrayLike 指的是对象具有数组某些行为的对象，有length属性，看下面

  1. var obj = {
  2.     "0":1,
  3.   length:1
  4. }
  6. obj.map  //undefined

问题：这一类对象不能调用数组的方法（push/forEach/map），常见的有两种，DOM中的NodeList和函数中的arguments。

平常开发中：

  1. var args = [].slice.call(arguments);
  2. var imgs = [].slice.call(document.querySelectorAll('img'));

Array.from 写法

  1. var args = Array.from(arguments);
  2. var imgs = Array.from(document.querySelectorAll('img'));

注意：类数组对象中必须是需要有length 属性的，不然转换为数组的时候是空

Set

Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。set中的元素只会出现一次

Array 相关

  1. let myArray = ["value1", "value2", "value3"];
  3. // 用Set构造器将Array转换为Set
  4. let mySet = new Set(myArray);
  6. mySet.has("value1"); // returns true
  8. // 用...(展开操作符)操作符将Set转换为Array
  9. console.log([...mySet]); // 与myArray完全一致

数组去重

  1. const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
  2. console.log([...new Set(numbers)]) 
  3. // [2, 3, 4, 5, 6, 7, 32]

instanceof

检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

  1. function C(){}
  2. function D(){}
  3. var o = new C()
  4. console.log(o instanceof C)  //true  Object.getPrototypeOf(o) === C.prototype

sort

  1. arr.sort([compareFunction])

默认按照 Unicode 位点排序 (字典序即 默认规则就是按照字母顺序)
返回值:排序后的数组,原地排序,并且不进行复制

  1. function compare(a,b){
  2.     return a - b
  3. }

对象可以按照某个属性排序

  1. var items = [{
  2.         name: 'Edward',
  3.         value: 21
  4.     },
  5.     {
  6.         name: 'Sharpe',
  7.         value: 37
  8.     },
  9.     {
  10.         name: 'And',
  11.         value: 45
  12.     },
  13.     {
  14.         name: 'The',
  15.         value: -12
  16.     },
  17.     {
  18.         name: 'Magnetic',
  19.         value:1111
  20.     },
  21.     {
  22.         name: 'Zeros',
  23.         value: 37
  24.     }
  25. ];
  27. var newArr = items.sort(function(a,b){
  28.     return (a.value - b.value)
  29. })
  30. console.log(newArr)
  32. 疑问:如果某个属性的值没有的话,该如何进行比较

switch case

语法格式

  1. switch(expression){
  2.     case value :
  3.        //语句
  4.        break; //可选
  5.     case value :
  6.        //语句
  7.        break; //可选
  8.     //你可以有任意数量的case语句
  9.     default : //可选
  10.        //语句
  11. }
  2. switch(i){
  3.     case 25:
  4.       console.log("25")
  5.       break;
  6.     case 35:
  7.       console.log("35")
  8.       break;
  9.     default:
  10.       console.log('other')
  11. }

区别：与 else if 的区别

  • switch … case… 会占用较多的代码空间，因为要生成跳表。
  • 当分支较多的时候，使用switch效率更高，if … else 是遍历所有的值找到符合条件的分支。

Object.create()

**Object.create()**方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

有时候拿不到构造函数，只能拿到一个现有的对象，希望以这个现有的对象作为模板，生成新的实例对象。

  1. var person1 = {
  2.     name: "chu",
  3.     age: 20,
  4.     greeting: function () {
  5.         console.log(this.name)
  6.     }
  7. }
  8. var person2 = Object.create(person1)
  9. console.log(person2.name) //chu

concat

var new_array = old_array.concat(value1[, value2[, …[, valueN]]]) value 可选 注:如果省略了所有的valueN参数 则concat会返回调用此方法的现存数组的一个浅拷贝

用于合并两个或多个数组，此方法不会更改现有数组，而是返回一个新数组

  1. const array1 = ["1", "2", "3"]
  2. const array2 = ["4", "5"]
  3. const array3 = array1.concat(array2)
  4. console.log(array3) // ["1", "2", "3", "4", "5"]

稀松数组

定义：稀松数组并不含有从0开始的连续索引，一般length属性值比实际元素个数大。
遍历稀松数组时用in操作符或者判断是否为undefined

面试题

arr[3] = 1 打印 arr.length = 4 稀松数组

  1. var arr = new Array(4)
  2. arr[3] = 1

addEventListener 函数

  1. element.addEventListener(event, function, useCapture)

第三个参数涉及冒泡和捕获. true时为捕获,false为冒泡

Object.keys

遍历对象的方法。会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

  1. let obj = {1: 2, 2: 2, a: 6, s: 8, b: 2}
  2. Object.keys(obj)
  4. ["1", "2", "a", "s", "b"]

2021.9.6 补充:关于自身可枚举的属性

  1. let animal = {
  2.   eats: true
  3. };
  5. let rabbit = {
  6.   jumps: true,
  7.   __proto__: animal
  8. };
  10. // Object.keys 只返回自己的 key
  11. alert(Object.keys(rabbit)); // jumps

hasOwnProperty

**hasOwnProperty()** 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）

下面的例子演示了如何在遍历一个对象的所有属性时忽略掉继承属性.

  1. var buz = {
  2.   fog: 'stack'
  3. };
  5. for (var name in buz) {
  6.   if (buz.hasOwnProperty(name)) {
  7.     console.log('this is fog (' +
  8.       name + ') for sure. Value: ' + buz[name]);
  9.   }
  10.   else {
  11.     console.log(name); // toString or something else
  12.   }
  13. }

Map.set()

set() 方法为 Map 对象添加或更新了一个指定键（key）和值（value）的（新）键值对

  1. const map1 = new Map();
  2. map1.set('bar', 'foo');
  4. console.log(map1.get('bar'));
  5. // expected output: "foo"
  7. console.log(map1.get('baz'));
  8. // expected output: undefined

补充说明:
Map 中可以存 ‘2,3’ 这样的键，举例说明

  1. let cache = new Map()
  2. cache.set('2,3',15)
  4. console.log(cache)  //Map(1) { '2,3' => 15 }
  5. console.log(cache.get('2,3'))  //15

案例来源
https://zh.javascript.info/call-apply-decorators

flat

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var newArray = arr.flat([depth])

depth 可选
默认深度为 1 

  1. const arr1 = [0, 1, 2, [3, 4]];
  3. console.log(arr1.flat());
  4. // expected output: [0, 1, 2, 3, 4]
  6. const arr2 = [0, 1, 2, [[[3, 4]]]];
  8. console.log(arr2.flat(2));
  9. // expected output: [0, 1, 2, [3, 4]]
  11. //使用 Infinity，可展开任意深度的嵌套数组
  12. var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
  13. arr4.flat(Infinity);
  14. // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

替代方案
使用 reduce 和 concat 

  1. var arr = [1, 2, [3, 4]];
  3. // 展开一层数组
  4. arr.flat();
  5. // 等效于
  6. arr.reduce((acc, val) => acc.concat(val), []);
  7. // [1, 2, 3, 4]
  9. // 使用扩展运算符 ...
  10. const flattened = arr => [].concat(...arr);