ES6-箭头函数 0.为什么会出现箭头函数? 1.传统的javascript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {},这至少会出现两个问题,ES6箭头函数都圆满解决了它, 第一个问题:代码输入快了容易输错成 funciton或者functoin或者其它,但是=>这个玩意你要是再写错就只能说有点过分了. 第二个问题:节省大量代码,我们先不用管下面的ES6代码为什么这样的语法能实现同样的功能,我们就直观的感受一下代码量. ES5写法: fu
javascript技巧
ES6标准 Arrow Function（箭头函数=>）
js根据后缀判断文件文件类型的代码
核心代码 <script> function getFileType(fileName) { // 后缀获取 let suffix = ''; // 获取类型结果 let result = ''; try { const flieArr = fileName.split('.'); suffix = flieArr[flieArr.length - 1]; } catch (err) { suffix = ''; } // fileName无后缀返回 false if (!suffix) {
JavaScript进阶（一）变量声明提升实例分析
本文实例讲述了JavaScript变量声明提升.分享给大家供大家参考,具体如下: 如下代码输出的结果是? var num = 123; function foo1(){ console.log( num ); //undefined var num = 456; console.log( num ); //456 } foo1(); Javascript代码执行分为两个大步: 预解析的过程 代码的执行过程 1.预解析与变量声明提升 程序在执行过程中,会先将代码读取到内存中检查,会将所有的声明在此
JS数组的常用10种方法详解
数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法: 在数组末尾插入元素 arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度. 例如: let arr=[1,2,3,4,5] var longth=arr.push(6,7); console.log(arr, longth); 数组的arr的值变为arr[1,2,3,4,5,6,7]; length接收返回的是修改后数组的长度7; 删除数组末尾的元素 arr.pop()删除索
JS图片预加载三种实现方法解析
预加载基本概念:当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染:在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验: 一张图片的预加载 var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width): functio
如何实现js拖拽效果及原理解析
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置).然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽. 一开始先监听鼠标按下事件mousedown,事件触发执行mouseHandler函数: div.addEventListener("mousedown",mo
JavaScript中的各种宽高属性的实现
在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scrollHeight.availHeight.scrollLeft.scrollTop.style.height.innerHeight.outerHeight.scree.height等等......这么多,傻傻分不清也正常啊. 本文的目标: 理清js及jquery的各种width和height 对width和高度做一些实际的应用 window和document 首先我们来高清两个概念:
JavaScript进阶（四）原型与原型链用法实例分析
本文实例讲述了JavaScript原型与原型链用法.分享给大家供大家参考,具体如下: 一句话说明什么是原型:原型就是一个JavaScript对象,原型能存储我们的方法,构造函数创建出来的实例对象能够引用原型中的方法. 一.传统构造函数的问题 有如下代码 function Foo(){ this.sayHello = function(){ } } 由于对象是调用new Foo()所创建出来的,因此每一个对象在创建的时候,函数 sayHello 都会呗创建一次 那么有没一个对象都含有一个独立的,不
JavaScript交换变量的常用方法小结【4种方法】
本文实例讲述了JavaScript交换变量的常用方法.分享给大家供大家参考,具体如下: 许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1. 解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a;
VSCode搭建React Native环境
安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的
JavaScript中的this妙用实例分析
本文实例讲述了JavaScript中的this妙用.分享给大家供大家参考,具体如下: JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数. 我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
JavaScript面向对象核心知识与概念归纳整理
本文实例讲述了JavaScript面向对象核心知识与概念.分享给大家供大家参考,具体如下: 一.面向对象 1.1 概念 面向对象就是使用对象.面向对象开发就是使用对象开发. 面向过程就是用过程的方式进行开发.面向对象是对面向过程的封装. 1.2 三大特性 抽象性 所谓的抽象性就是:如果需要一个对象描述数据,需要抽取这个对象的核心数据 提出需要的核心属性和方法 不在特定的环境下无法明确对象的具体意义 封装性 对象是将数据与功能组合到一起,即封装 JS对象就是键值对的集合,键值如果是数据(基本数据.
JS控制下拉列表左右选择实例代码
使用JS控制下拉列表左右选择 需求分析 在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品 技术分析 ondblclick="selectOne()":双击事件 select标签的属性multiple="multiple": 代码实现 <!DOCTYPE html> <html> <head> <meta charset=&
基于JavaScript实现表格隔行换色
表格隔行换色 需求分析 我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色 技术分析 table对象 集合 cells[]:返回包含表格中所有单元格的一个数组. rows[]:返回包含表格中所有行的一个数组. tBodies[]:返回包含表格中所有tbody 的一个数组. 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改
Javascript查看大图功能代码实现
功能与实现 点击小图片可以查看大图 实现就是把大图放置在顶层(z-index大于当前页面的),并且还可以加一些额外的比如透明度什么的. 大图以动画的形式出现 动画就是css动画样式了,可以自定义动画,将图片一点点变大,发挥想象了. 代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
JS原形与原型链深入详解
本文实例讲述了JS原形与原型链.分享给大家供大家参考,具体如下: 前言 在JS中,我们经常会遇到原型.字面上的意思会让我们认为,是某个对象的原型,可用来继承.但是其实这样的理解是片面的,下面通过本文来了解原型与原型链的细节,再顺便谈谈继承的几种方式. 原型 在讲到原型之前,我们先来回顾一下JS中的对象.在JS中,万物皆对象,就像字符串.数值.布尔.数组等.ECMA-262把对象定义为:无序属性的集合,其属性可包含基本值.对象或函数.对象是拥有属性和方法的数据,为了描述这些事物,便有了原型的概念.
Javascript幻灯片播放功能实现过程解析
javascript实现幻灯片播放 实现原理 step1 设置容器,包含图片.翻页.下标等元素,通过相对定位来布局. step2 将幻灯片变化,需要改变的元素放在一个字容器内,display设为none,并且采取动画来变化. step3设置js函数,将应该播放的元素样式激活,其他的元素仍为未激活状态或者不展示类的隐藏. 代码 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript cookie原理及使用实例
什么是cookie? cookie 是本地计算机的临时存储. 作用:在浏览器中进行数据的存储,用户名.密码(比如:保存页面信息,自动登录等). 特点: cookie需要在服务器环境下运行: cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数不同: cookie以字符串类型存储,不同域名存储的数据是无法共享: cookie默认是临时存储的,当浏览器关闭时,自动销毁: cookie可以被禁用也可以删除,且安全性不高. 可以对cookie值进行加密(MD
JS面试题中深拷贝的实现讲解
在面试中你是否遇到过如下场景: Q:小朋友,你是否了解如何拷贝一个对象? R:此时,机智的你可能会想到 Object.assign({}, obj); Q:那如何深拷贝一个对象呢? R:机智的你 JSON.parse(JSON.stringify(obj)); Q:使用stringify这种方式有何弊端? 性能问题,stringify再解析其实需要耗费较多时间,特别是数据量大的时候. 一些类型无法拷贝,例如函数(不输出),正则(输出空对象),时间对象(输出时间字符串),Undefiend(不输出
JavaScript ES6 Class类实现原理详解
JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数. 例如: function Mold(a,b){ this.a=a; this.b=b; } Mold.prototype.count=function(){ return this.a+this.b; }; let sum=new Mold(1,2); console.log(sum.count()) //3 这中写法跟传统的面向对象语言差异较大,写起来也比较繁杂. ES6提供了更加接近其他语言的