四 JS 进阶

Posted 2023-04-02 博客zhu虎康

文章目录

• I、字符串
• • 1. 某个字符串出现的位置及次数
  • 2. 根据位置返回字符
  • 3. 统计出现最多的字符和次数
  • 4. 拼接以及截取字符串
• 简单类型与复杂类型
• • 1. 值类型 / 基本数据类型
  • 2. 引用类型 / 复杂数据类型
• II、Web APIs
• • 一、基础
  • • 1. Web APIs 是什么
    • 2. 排他思想实现指定元素变化
    • 3. 网页实现换肤效果
    • 4. 密码输入框显示隐藏密码
    • 5. 设置移除自定义属性
    • • 5.1 获取元素的属性值
      • 5.2 设置元素的属性值
  • 二、事件
  • • 1、常见事件对象的属性和方法

js进阶四(mapreducefiltersort箭头函数class继承yield)

文章目录

• • • map
    • reduce
    • filter
    • sort
    • 箭头函数
    • class继承
    • yield

map

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var s = arr.map(String);
  console.info(s)


  function pow(x) 
    return x * x;
  

  var results = arr.map(pow);
  console.info(results)

输出如下：

(9) ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
(9) [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce

这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

var func = function (x, y) 
    return x + y;
  

  var arr = [1, 3, 5, 7, 9];
  var result = arr.reduce(func);

  console.info(result)

结果是25

filter

和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

  var arr = [1, 2, 4, 5, 6, 9, 10, 15];

  var r = arr.filter(function (x) 
    return x % 2 !== 0;
  );

  console.info(r)

输出如下：

(4) [1, 5, 9, 15]

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var arr = ['A', 'B', 'C'];

  var r = arr.filter(function (element, index, self) 
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    // console.log(self); // self就是变量arr
    return true;
  );
  console.info(r)

输出如下：

A
0
B
1
C
2
 (3) ["A", "B", "C"]

sort

这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。

  var arr = [10, 20, 1, 2];

  arr.sort(function (x, y) 
    if (x < y) 
        return -1;
    
    if (x > y) 
        return 1;
    
    return 0;
);
console.info(arr)

输出如下：

(4) [1, 2, 10, 20]

sort()方法会直接对Array进行修改，它返回的结果仍是当前Array

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象

箭头函数

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

x => x * x

上面的箭头函数相当于：

function (x) 
    return x * x;

我们还可以这样用

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => 
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) 
        sum += rest[i];
    
    return sum;

如果要返回一个对象

x => ( foo: x )

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

var obj = 
    birth: 1990,
    getAge: function () 
        var b = this.birth; // 1990
        var fn = function () 
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        ;
        return fn();
    
;

var ret = obj.getAge()
console.info(ret)

结果输出：NaN

var obj = 
    birth: 1990,
    getAge: function () 
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    
;
var ret = obj.getAge(); 
console.info(ret)

结果输出：28

class继承

<script>

  class Student 
    constructor(name) 
      this.name = name;
    

    hello() 
      console.info('Hello, ' + this.name + '!')
    
  
  var xiaoming = new Student('小明');
  xiaoming.hello();


  class PrimaryStudent extends Student 
    constructor(name, grade) 
      super(name); // 记得用super调用父类的构造方法!
      this.grade = grade;
    

    myGrade() 
      console.info('I am at grade ' + this.grade)
    
  


  var xiaohua = new PrimaryStudent('小华', 1);
  xiaohua.myGrade();
</script>

输出如下：

Hello, 小明!
I am at grade 1

yield

  function* fibonacci() 
    yield 1;
    yield 2;
    return 2;
  

  var it = fibonacci();
  console.log(it);          // "Generator   "
  console.log(it.next());   // 1
  console.log(it.next());   // 2
  console.log(it.next()); //undefined


  var itt = fibonacci();
  //而且Iterator的return的值不会被for...of循环到 ， 也不会被扩展符遍历到
  for (var per of itt) 
    console.info(per)
  

输出如下：

fibonacci <suspended>
 value: 1, done: false
 value: 2, done: false
 value: 2, done: true
 1
 2

我们来看下面一个例子：

  function* foo() 
    yield 0;
    yield 1;
  
  function* bar() 
    yield 'x';
    yield* foo();
    yield 'y';
  
  for (let v of bar()) 
    console.log(v);
  ;

输出如下：
x 0 1 y