js循环的几种方式
1.普通的for12345var arr = [1, 2, 3]for(let i = 0; i < arr.length; i++) { // 这里的i是代表数组的下标 console.log(i); // 0, 1, 2};最简单的一种,正常用的话也不会出现什么问题,想中断也可以中断,性能上也还可以
2.for…of…遍历(这种遍历支持ES61234567var arr = [1, 2, 3]for(var item of arr) { // item代表数组里面的元素 console.log(item); // 1, 2, 3}; 与forEach()不同的是,它可以正确响应break、continue和return语句性能要好于forin,但仍然比不上普通for循环这个方法避开了for-in循环的所有缺陷
3. forEach()1234567var arr = [1, 2, 3];arr.forEach((item, index, arr) => { // item为arr的元素,index为下标 ...
ES6模块
特点ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 **use strict;**。
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
export 与 import基本用法模块导入导出各种类型的变量,如字符串,数值,函数,类。
导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。
不仅能导出声明还能导出引用(例如函数)。
export 命令可以出现在模块的任何位置,但必需处于模块顶层。
import 命令会提升到整个模块的头部,首先执行。
12345678910111213141516171819/*-----export [test.js]-----*/ let myName = "Tom"; let myAge = 20; let myfn = function(){ return "My nam ...
js之var let及const区别
对于这个问题,我们应该先来了解提升(hoisting)这个概念
12console.log(a) // undefinedvar a = 1
从上述代码中我们可以发现,虽然变量还没有被声明,但是我们却可以使用这个未被声明的变量,这种情况就叫做提升,并且提升的是声明。
我们已经了解了 var 声明的变量会发生提升的情况,其实不仅变量会提升函数也会被提升。
123console.log(a) // ƒ a() {}function a() {}var a = 1
对于上述代码,打印结果会是 ƒ a() {} ,即使变量声明在函数之后,这也说明了函数会被提升,并且优先于变量提升。说完了这些,想必大家也知道 var 存在的问题了,使用 var 声明的变量会被提升到作用域的顶部,接下来我们再来看 let 和 const 。
我们先来看一个例子:
123456789101112var a = 1let b = 1const c = 1console.log(window.b) // undefinedconsole.log(window. c) // u ...
js判断数据类型方法
判断js中的数据类型有一下几种方法:typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type(),接下来主要比较一下这几种方法的异同。
先举几个例子:
123456var a = "helloworld";var b = 222;var c= [1,2,3];var d = new Date();var e = function(){alert(111);};var f = function(){this.name="22";};
1、最常见的判断方法:typeof1234567891011121314alert(typeof a) ------------> stringalert(typeof b) ------------> numberalert(typeof c) ------------> objectalert(typeof d) ------------> objecta ...
js 基本类型和引用类型区别
一、JavaScript全部数据类型
内置类型
空值 null
未定义 undefined
布尔值 boolean
数字 number
字符串 string
对象 object
符号 symbol
长整型 bigInt
1.基本数据类型
undefined null number boolean string symbol(ES新增) bigint(ES10新增)
基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值
1.1基本数据类型的值是不可变的
1.2基本数据类型不可以添加属性和方法
1.3基本数据类型的赋值是简单赋值
1.4基本数据类型的比较是值的比较
1.5基本数据类型是存放在栈区的
2.引用类型
JS中除了上面的基本类型之外就是引用类型了,也可以说是object 对象,比如:object array function data等
2.1引用类型的值是可以改变
2.2引用类型可以添加属性和方法
2.3引用类型的赋值是对象引用
2.4引用类型的标胶是引用的比较
2.5引用类型是同时存在栈区和堆区的
二、基本数据类型和引用数据类型的区别
1. ...
js之闭包
闭包定义:函数 和 函数内部能访问到的变量 就是一个闭包常用方式示例:
1234567891011 function foo() { var num = 10; return function () { var age= 20; console.log(++num); console.log(++age); } }var f = foo(); f(); //11 21 f(); //12 21
通过闭包就可以让外部作用域访问函数内部作用域的变量,我们知道当函数执行完以后,会立即销毁,但 foo 函数内的 num 属性被内部的匿名函数引用着,而内部函数又被外部变量 f 引用着,所以函数 foo 在执行完以后虽然会立即销毁,但它内部的匿名函数在创建的时候就会随之创建一个特殊的容器,用于保存 上层作用域 中 变量 的引用,所以foo 函数中的 num 并不会销毁,当执行第一次 f() 时,会创建 f( ...
apply call bind 区别
this 的指向在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,记住这句话,this 你已经了解一半了。
下面我们来看一个最简单的例子:例 1:
123456789 var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window } a(); console.log("outer:" + this) // outer: Window12345678
这个相信大家都知道为什么 log 的是 windowsName,因为根据刚刚的那句话“this 永远指向最后调用它的那个对象”,我们看最后调用 a 的地 ...
防抖与节流
一、应用场景
input输入框,用户频繁操作输入框内容匹配关键词或者请求接口。
窗口resize或者页面scroll滚动调整后需要回调做的事情,例如图片懒加载、页面组件大小变动等。
socket推送数据,例如股票买卖盘口数据,并不是后台推送啥就完全展示啥,适当的漏掉一部分也是合理的。例如100ms内后台推送了几百条数据,实时操作DOM不仅会带来性能上的浪费,造成页面卡顿、假死,而且对用户感官上来说200ms渲染一次跟实时渲染,区别不是很大。
mousedown、mousemove、keyup、keydown等频繁的鼠标操作。
其他需要限制频率,不需要实时操作的场景。
防抖与节流的共同特点是用于高频次触发的场景,将高频降为低频达到性能优化的目的。
防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
节流:就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
区别是前者用一定手段将最后一次操作落地执行,后者是间隔300ms时间内最多执行一次。
二、什么是防抖以input输入框输入内容并请求http接口为例。用 ...
js深浅拷贝
js深浅拷贝解析一. 赋值原理: 当原对象/数组自身赋值给新对象/数组时, 只是将自身在堆内存中引用地址赋值给新对象/数组 , 当原对象/数组或新对象/数组改变自身一级乃至多级属性时,会相互影响并改变对方的属性
赋值是将某一数值或对象赋给某个变量的过程,分为:
1、基本数据类型( Number数值、String字符串、Boolean布尔值、Null空值、 Undefined未定义、Symbol(ES6)(原始数据类型,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法) ) :
赋值,赋值之后两个变量互不影响 , 基本数据类型是指存放在栈中的*简单数据段,数据大小确定,内存空间大小可以分配,**它们是直接按值存放的,所以可以直接**按值访问*
12345678910111213141516//对基本类型进行赋值操作,两个变量互不影响。let a = "saucxs";let b = a;console.log(b); // saucxs//改变a的值,并不会影响b的值a = "c ...
ES6 知识点汇总
ES6 知识点汇总1.let代码块内有效不能重复声明不存在变量提升
2.const声明一个只读变量,声明之后不允许改变
3.解构赋值a. 数组模型解构i. 基本\1) let [ a , b , c ] = [ 1 , 2 , 3 ]ii. 可嵌套\1) let [ a , [ [ b ] , c ] ] = [ 1 , [ [ 2 ] , 3 ] ]iii. 可忽略\1) let [ a , , c ] = [ 1 , 2 , 3 ]iv. 不完全解构\1) let [ a = 1 , b ] = [ ] // a = 1 , b = undefiendv. 剩余运算符\1) let [ a , b , c , d , e ] = ‘hello’ // a = ‘h’ , b = ‘e’ 等等vi. 解构默认值\1) let [ a = 2 ] = [ undefiend ] // a = 2b. ...