2021/10/19 北京-------js操作数组的7个方法，定时器,document对象-CSDN博客

本文链接：https://blog.csdn.net/m0_56799642/article/details/120844897

js数组

1、code runner

在vs code右侧工具栏的 extensions 里搜索 “code runner”，并安装；

此时vs code右上角有一个三角形状按钮，是运行js文件用的，点击即可运行；

问题：code runner 默认是不会清除之前的输出结果的，并且每次运行之前需要自己手动保存刚才编辑的js文件才能使得修改生效；
file -> preferences ->settings->选择workspace ->找到 Run Code configuration -> 

找到"Clear previous output"并勾选，
找到 “Save all files before run”并勾选 
关闭Settings ->再次修改js文件然后运行发现设置生效。

2、push

JavaScript 数组的长度和元素类型都是非固定的

push，目前为止用的最多的方法

let fruits = ['Apple', 'Banana']
let newLength = fruits.push('Orange')   // ["Apple", "Banana", "Orange"]

3、indexOf

indexOf,找某一个元素在数组中的索引，索引从0开始。如果元素不存在，则返回-1

let pos = fruits.indexOf('Banana')  // 1   ["Apple", "Banana", "Orange"]

4、splice

splice,删除数组元素：

let removedItem = fruits.splice(pos, 1) //   ["Apple", "Orange"]

splice,多个参数，实现数组插入元素和替换数组元素：

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);  //删除第一项，返回值removed是删除的元素。此时["green", "blue"]

removed = colors.splice(1, 0, "yellow", "orange");  //从位置1开始，删除0个元素，插入两项(插入在当前元素之前，删除向后删)  此时["green","yellow","organge","blue"]

removed = colors.splice(1, 1, "red", "purple");  //在位置1处，删除一个。再添加俩个元素red和purple  此时["green","red","purple"，"organge","blue"]

5、unshift

unshift,添加元素到数组的头部：

let newLength = fruits.unshift('Strawberry') //  ["Strawberry","Apple", "Orange"]

6、shift和pop

shift删除数组头部元素：

let first = fruits.shift() //  ["Apple"]

pop,删除数组末尾的元素：

let last = fruits.pop() //  ["Strawberry","Apple"]

7、数组遍历

forEach

接收三个参数，项目值、索引、数组本身
let arr = [1, 2, 3, 4]
arr.forEach((item, index, arr) => {
	console.log(item, index, arr)
})

map

每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组arr
let arr = [1, 2, 3, 4]
arr.map((item, index, arr) => {
	console.log(item, index, arr)
})

有什么区别呢？forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回

8、对象遍历

for in

for in 方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。
let user = {name: 'Helen', age: 18}
 
for (var i in user) { 
    console.log('键名：', i); 
    console.log('键值：', user[i]); 
}

Object.keys()、Object.values()、Object.entries()

数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性。

Object.keys()：返回包含对象键名的数组；
Object.values()：返回包含对象键值的数组；
Object.entries()：返回包含对象键名和键值的数组。
let user = {name: 'Helen', age: 18}
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));

定时器

1、js回调函数

js回调函数粗俗理解：你定义的，你没有调，但最终它执行了。

常见回调函数
dom事件回调函数	定时器回调函数
ajax请求回调函数	生命周期回调函数

document.getElementById('btn').onclick=function(){
alert((this.innerHTML)//dom事件回调函数
}

2、setTimeout

setTimeout在指定的毫秒数后调用函数或计算表达式。

//超时定时器,timeout直译超时
setTimeout(function(){
alert("到点了")//定时器回调函数
},2000)

3、setInterval

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

var myVar;
 
function myFunction() {
    myVar = setInterval(alertFunc, 3000);//第一个参数是一个函数
}
 
function alertFunc() {
    alert("Hello!");
}



      var interval = setInterval(async function(){
            if(new Date().getTime() - startTime > 3000){
                clearInterval(interval);
                flag=false;
                return;
            }
            const res = await checkSocket();
            console.log('校验结果',res);
            // if(res.data.localSocket == 'yes'){
            //     flag=false;
            // }
        }, 400);

其他

1、匿名函数

匿名函数：自己调用自己

function要先把它用（）包起来看做一个整体，“整体（）”实现自调用

(function(){
var a=3
console.log(a+3)
})()

`2、Object.assign()`

Object.assign(target,...sources)

官方：用于将对象自身所有的可枚举属性从一个或者多个源对象上复制到目标对象

两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出TypeError错

target：目标对象   sources：源对象
返回值：目标对象
如果和目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖，
后面的源对象的属性将覆盖前面的源对象的属性.

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);   // {a:1, b:2, c:3}