JS实用篇复习笔记（9）

前端付豪
334 阅读6分钟

1、说说 Methods of primitives 基本类型

1、首先基本类型 有哪些 ？ （经典 面试问题）

number, string,boolean, bigint, symbol, null , undefined

2、这些基本类型 为啥会有方法 ？

  • 最关键的点在于 每个基本类型后面都有一个对应的包装类型 （除了null , undefined ）
  • 特别重要的一件事情 包装类型会在本次执行后 立即销毁，啥意思 ？ 拿不到包装类型上的 key/value
  • 这样看起来好像 给包装类型添加了 属性和方法 但实际 无法取得 并进行使用

3、举几个 简单例子说明这个事情 ？

1、 字符串方法str.toUpperCase()返回大写的str

  • 这个是怎么实现的呢 ？
  • 关键在于 访问其属性的那一刻，会创建一个特殊对象，该对象知道字符串的值，并且具有有用的方法，例如toUpperCase()
let str = "Hello";

alert( str.toUpperCase() ); // HELLO
  • 过程详细展示出来
  1. 字符串str会产生包装类型。因此，在访问其属性的那一刻，会创建一个特殊对象，该对象知道字符串的值，并且具有有用的方法，例如toUpperCase().
  2. 该方法运行并返回一个新字符串（由 显示alert）。
  3. 特殊对象被销毁，只留下原始对象str

4、null/undefined 没有方法

alert(null.test); // error

5、一个重要的事情

// 这个打印结果是什么 ？
let str = "Hello";
str.test = 5; 
alert(str.test);
  • 详细展示
  1. 当str访问的属性时，会创建一个“包装对象”。
  2. 在严格模式下，写入它是一个错误。
  3. 否则，对属性进行操作，对象得到test属性，但之后“包装对象”消失，所以最后一行str没有属性的踪迹。

6、四舍五入

  • Math.floor

  • 向下舍入：3.1变成3，-1.1变成-2

  • Math.ceil

  • 四舍五入：3.1变成4，-1.1变成-1。

  • Math.round

  • 四舍五入到最接近的整数：3.1变成3，3.6变成4，中间情况：也3.5向上取整4

7、其他

  • toFixed（n） 保留几位小数
let num = 11.34;
alert( num.toFixed(1) ); // "11.3"
  • parseInt parseFloat
alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5
  • Math.random()

  • 返回一个从 0 到 1（不包括 1）的随机数。

    alert( Math.random() ); // 0.1234567894322
  • Math.max(a, b, c...) / Math.min(a, b, c...)

  • 从任意数量的参数中返回最大/最小。

    alert( Math.max(3, 5, -10, 0, 1) ); // 5
alert( Math.min(1, 2) ); // 1

  • Math.pow(n, power)

    n^power

```

alert( Math.pow(2, 10) ); // 2 in power 10 = 1024
```
  • 注意 处理分数时会损失精度

2、string

1、单引号 双引号 没有区别

2、`` 可以换行

3、字符串长度 .length

4、字符串 不能直接修改 值

let str = 'Hippx';

str = 'h' + str[1]; // replace the string

alert( str ); // Hippx

5、可改变字符串大小写

alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface

6、查找字符串 方法 str.indexOf(substr,pos) 第一个参数找啥 ，第二个参数从那个地方开始找

7、获取字符串部分字符

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', the substring from 0 to 5 (not including 5)
alert( str.slice(0, 1) ); // 's', from 0 to 1, but not including 1, so only character at 0

如果没有第二个参数，则slice一直到字符串的末尾：

let str = "stringify";
alert( str.slice(2) );

8、神奇的事情 小写字母总是大于大写字母：

```
alert( 'a' > 'Z' ); // true
```
  • str.trim() – 从字符串的开头和结尾删除（“修剪”）空格。
  • str.repeat(n)– 重复字符串n次数

9、有用的案例 1、 "$120" 怎么取出数字

function extractCurrencyValue(str) {
return +str.slice(1); 
}

2、创建一个新字符串，第一个字符大写

  • 这个比较有 意思 首字母大写 然后 将后面部分拿到 一起输出
let newStr = str[0].toUpperCase() + str.slice(1);

3、Array

1、介绍一下

  • 存储有序集合 可以存储任何类型的元素 常规用在 存储用户、商品、HTML 元素

  • 创建空数组有两种语法：

let arr = new Array();
let arr = [];
  • 可以使用 索引 操作数组 进行新增编辑 .length 可以获取数组长度
  • 使用alert来显示整个数组

2、数组常用方法

image.png

image.png

  • 注意的部分 方法push/pop运行得很快，而shift/unshift速度很慢

image.png

  • 为什么？
  • 以shift 为例子 shift操作必须做3两件事：
  1. 删除带有索引的元素0。
  2. 将所有元素向左移动，将它们从索引重新编号1为0、从2至1等。
  3. 更新length属性

image.png

  • 数组中的元素越多，移动它们的时间就越多，内存中的操作也就越多

  • 但 pop方法不需要移动任何东西，因为其他元素会保留它们的索引。这就是为什么它非常快

image.png

3、常规循环方式

1、map / forEach 这两个在react render中 常用

2、for (let i=0; i<arr.length; i++) – 运行速度最快，兼容旧浏览器

3、for (let item of arr)

4、for (let i in arr) – 从不使用

5、 不要用 == 比较数组

== 常规会进行 类型转化

例如：

alert( [] == [] ); // false
alert( [0] == [0] ); // false

6、删除 数组

let arr = ["I", "go", "home"];

delete arr[1]; // remove "go"

7、切片 arr.slice(a,b) arr.splice(a,b,c) 8、连接数组 arr.concat(arg1, arg2...) 9、在数组中搜索

  • arr.indexOf(item, from)–item从 index 开始查找from，并返回找到的索引，否则返回-1。
  • arr.lastIndexOf(item, from) – 相同，但从右向左查找。
  • arr.includes(item, from)–item从 index 开始查找from，true如果找到则返回。

10、 filter返回所有匹配元素的数组：

let results = arr.filter(function(item, index, array) {
  // if true item is pushed to results and the iteration continues
  // returns empty array if nothing found
});

11、排序

arr.sort();

比较两个任意值并返回：

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15

12、判断 是否为数组

alert(Array.isArray({})); // false

13、降序排序

let arr = [5, 2, 1, -10, 8];
arr.sort((a, b) => b - a); 
alert( arr );

14、工作常用 对日期或者年龄排序，这样在渲染时 可以 将部分内容展示在不同位置 * 当然此处需要考虑多种情况

function sortByAge(arr) {
arr.sort((a, b) => a.age - b.age);
}

15、怎么打乱数组 ？ 1、 简单的解决方案可能是：

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

2、 复杂方法，比较好的解决方案：

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

3、貌似另外一种方式 数组去重？ 我也觉得会比较常用

例如：

function unique(arr) {
  let result = [];

  for (let str of arr) {
    if (!result.includes(str)) {
      result.push(str);
    }
  }

  return result;
}

let strings = ["ppx", "ppx", "ppc", "ppc", "cpt", "clg"];

alert( unique(strings) ); //ppx,ppc,cpt,clg

4、几个经典例子加深理解

1、

let fruits = ["ppx", "ppx1", "ppx2"];

let shoppingCart = fruits;

shoppingCart.push("ppx3");

alert( fruits.length ); // 4

2、

let arr = ["a", "b"];

arr.push(function() {
  alert( this );
})

arr[2](); // a,b,function(){...}

3、编写如下函数sumInput()：

  • 向用户询问使用prompt的值并将值存储在数组中。
  • 完成询问用户何时输入非数字值、空字符串或按下“取消”。
  • 计算并返回数组项的总和。

PS 零0是有效数字，请不要在零上停止输入。

function sumInput() {
        let numbers = [];
        while (true) {
          let value = prompt("this is a number ?", 0);
          if (value == "" || value == null || !isFinite(value)) break;
          numbers.push(+value);
        }
        let sum = 0;
        for (let item of numbers) {
          sum += item;
        }
        return sum;
      }
      alert(sumInput());

4、Map and Set

  • Map

  • new Map() – 创建地图。

  • map.set(key, value) – 通过键存储值。

  • map.get(key)–undefined如果key在地图中不存在，则通过键返回值。

  • map.has(key)–true如果key存在false则返回，否则返回。

  • map.delete(key) – 通过键删除值。

  • map.clear() – 从地图中删除所有内容。

  • map.size – 返回当前元素计数

  • map.keys() – 返回一个可迭代的键，

  • map.values() – 返回一个可迭代的值，

  • map.entries()– 返回一个可迭代的条目[key, value]，默认情况下在for..of.

  • Set Set – 是独特价值的集合
  • new Set(iterable)– 创建集合，如果iterable提供了一个对象（通常是一个数组），则将其中的值复制到集合中。
  • set.add(value) – 添加一个值，返回集合本身。
  • set.delete(value)– 删除值，true如果value在调用时存在则返回，否则返回false。
  • set.has(value)–true如果该值存在于集合中则返回，否则返回false。
  • set.clear() – 从集合中删除所有内容。
  • set.size – 是元素计数。
avatar
文章
阅读
粉丝