30天JavaScript挑战笔记

1.window.addEventListener(type:String, listener:Function)

作用
　　侦听事件并处理相应的函数。

参数
        type:String 　　事件的类型（去掉前面的on）。(右键点击检查在console中输入window即可查看全部事件)

        ‘click’：监听点击鼠标事件。

        'transitionend':监听状态转换结束。

        ‘change’:内容改变

举例
        window.addEventListener('keydown',function(e){ console.log(e.keyCode);  })
        e为时间对象

2.console.log()

作用
　　方便调式javascript用的。你可以看到你在页面中输出的内容。

举例
       console.log(audio);

补充
       谷歌的console.log()输出是以文本的形式输出，可以通过加[ ]变成数组，以对象的形式输出。

3.document.querySelector('类型[元素=“ ”]') JS选择器

作用
       通过元素class，标签名获取元素；会返回给定 CSS 选择器的第一个元素

举例
       document.querySelector('audio[data-key="'+e.keyCode+'"]');

4.setTimeout（）

作用
      一般用来做时间延迟。

举例
       setTimeout(function(){
        key.classList.remove('playing');
    },3070)

注意
      setTimeout（）为异步控制

4.更改按钮状态时，可通过改变Class实现，通过时间延迟函数，等改变结束时，移除该类。

const key = document.querySelector('div[data-key="'+e.keyCode+'"]');
key.classList.add('playing');（playing类写在CSS文件里）
setTimeout(function(){
        key.classList.remove('playing');
    },3070)

key.classList.toggle('playing'); //toggle实现的是：当所在类没有playing时加上，当条件不满足时自动删去playing

5.把数组所有东西遍历出来的方法

数组.forEach

6.分针旋转HTML元素

 transform: rotate(90deg);  //控制旋转角度
 transform-origin: 100%;  //控制旋转分针原点在最右侧
 transition: all .05s;  //控制所有属性状态切换速度为0.05s
 transition-timing-function: cubic-bezier(0.42, 0, 0.43, 0.99); //控制动画效果为快慢快

7.setInterval（）

作用
      实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

举例
      setInterval(function,1000);

注意
      1000毫秒为1秒

8.字符串模板

`${   }`       //注意`为反引号标识

9.利用JS改变CSS属性值

实现方法：
第一步、利用JS选择器获取HTML控件和CSS属性
第二步、对获取的HTML 控件进行监听’change’元素判断控件是否改变值
第三步、若改变值，利用this.属性进行更改

实例：

const inputs = document.querySelectorAll('.controls input');
const img = document.querySelector('img');

    function handUpdate(){
        console.log(`${this.name} = ${this.value}`);
        if(this.name === 'spacing')
        {
            img.style.padding =`${this.value}px`;    
        }
        if(this.name === 'blur')
        {
            img.style.filter =`blur(${this.value}px)`;
        }
        if(this.name === 'base')
        {
            img.style.background =this.value;    
        }
    }

inputs.forEach(input => input.addEventListener('change',handUpdate));

10.JS箭头函数

11.Array数组函数

a.Array.filter(function( ){ }); 返回满足函数的新数组
b.Array.map();返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map()函数可以return HTML

举例：

const html = matchAarray.map(place => {
        return `
        <li>
            <span class="name">${place.city},${place.state}</span>
            <span class="population">${place.population}</span>
        </li>
        `
    });

c.Array.sort();比较函数应该具有两个参数 a 和 b，若结果大于0，升序排序；若结果小于0，降序排序。
d.Array.ruduce();求和函数;对数组的遍历,返回一个单个返回值

Array.reduce((acc, cur, idx, src) => {

}, initialValue)

callback回调函数接收4个参数:

Accumulator (acc) (累计器) 如果传入了initialValue,Accumulator的初始值就是initialValue,没传入就是数组的第一个值

Current Value (cur) (当前值)

Current Index (idx) (当前索引)如果传入了initialValue,索引从0开始,没传入从1开始

Source Array (src) (源数组)

initialValue 指定的初始值,初始值可以是数字,数组,对象

e.Array.some():用于检测数组中的元素是否满足指定条件. 只要有一个满足条件返回true

f.Array.every():所有元素满足条件返回true

g.Array.find():返回符合条件的元素

h.Array.findIndex():返回符合条件索引

12.NodeList转换成Array的方法：

[...NodeList]即可转变成Array,三个点代表展开。

13.数组转换成字符串的方法

Array .join(' ');//空字符会把数组中的，替换成空字符。

14.Array删除符合条件的元素

1.通过Array.findIndex():返回符合条件索引

2.通过Array.slice(a,b)//用来截取数组 原数组不发生变化 返回一个新数组;a代表开始截取的位置，b代表停止截取的位置，b不写的话默认成一直截取到数组的结束

eg:

const commentIndex = comments.findIndex(comment => comment.id=== 1);

const newcommnet = [

        ...comments.slice(0,commentIndex ),   //slice返回数组，使用展开符号...提取数组内容

        ...comments.slice(commentIndex +1)

];