demo-复习补充及前端常用插件
2021/4/15 10:56:16
本文主要是介绍demo-复习补充及前端常用插件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
前端笔记
- 复习补充及前端常用插件
复习补充及前端常用插件
复习补充
复习：
1.{}:
1.封闭作用域
2.代码结构
3.作用域
2.():
表达式:变量 常量 或 运算符
判断条件:只要是表达式就行
ture false 其他
其他:
数字:非0即真
字符串:非空即真
undefined,null --> false
if(判断条件){}
循环条件:能够让循环因子持续不停发生改变的
1.必须有循环因子
2.必须让循环因子改变
3.必须确定(可触)阈值
for(循环条件){}
参数:
1.实参 和 形参(可以随便起名)
形参：定义函数的时候
(参数)称为:形参
实参：调用函数的时候
(参数)称为:实参
2.实参 到 形参的 传递过程
是一个 值 拷贝的 过程
深拷贝 浅拷贝
深拷贝:内容拷贝传递过去 eg:传递一个数字 字符串 数组中的某个值
浅拷贝:地址拷贝传递过去 eg:传递数组,对象等需要new创建的
function(参数){}
return:
1.只能出现在函数内
2.后面跟的是函数的返回值
3.提前结束函数
3.new
1.new 只能出现在函数名称前面
2.用来生成新对象
构造函数：用来创建对象的函数称为 构造函数
1.构造函数默认：首字母大写
function Xxx(){
this.name = "zhangsan"
var a = 111
}
函数的调用: xxx()
函数对象的创建: new xxx()
new:步骤
1.创建一个新对象 {}
2.xxx.call({})
3. {}.__proto__ = Xxx.prototype
4.this
1.谁调用谁就是this
2.改变this指向
1.函数.call(对象,参数1,参数2,参数3......)
2.函数.apply(对象,[参数1,参数2,参数3......])
3.函数.bind(对象)
3.this只能出现在函数中
var a = 9
window.a = 9
var ren = {
run:function(){
this -->ren
}
}
function xxx(){
this -- > window
}
window.xxx = function(){
this -- > window
}
5.object --> null
NaN 不等于任何人(包括他自己)
1.运算结果参与 -*/%
并且得到 非数字结果的时候，
就会出现 NaN
6.函数的回调
1.把函数当成参数
2.把参数进行函数调用
7. Ajax
1. 请求数据
2. 把 数据的结果 展示到 界面
8. JSON
1. 将 json 字符串 ----> 数组或对象
JSON.parse(json 字符串)
2. 将 对象 或 数组 ----> 字符串
JSON.stringify(对象 或 数组)
9. 什么是: json 字符串
符合 数组 或 对象 或 他们嵌套格式的 字符串
10. DOM 操作
1. 获取 界面(文档: document)的 DOM 元素
1. document.getElementsByClassName()[0]
2. document.querySelector(".one")
2. DOM 元素的基础修改 和 事件监听
2.1 基础修改:
样式的修改
元素.style.样式
left, top
内容的修改
元素.innerHTML
元素.innerText
元素.value <input />
元素宽高获取:
元素.offsetWidth
元素.clilentWidth
特有属性的修改
元素.src =
关系的修改和访问
元素.append(小元素)
元素.innerHTML = ""
元素.childRen
元素.previousElementSibling
元素.nextElementSibling
元素.parent....
删除元素:
元素.innerHTML = "" // 删除自己内部的
元素.remove() // 删除自己
通过js创建元素
document.createElement("div")
2.2 事件监听:
事件: 肯定 需要监听
只要是监听: 肯定是 on
var xxx = function () {
console.log(event)
}
点击事件
元素.onclick = xxx
window.xxx()
键盘事件
元素.onkeydown = function () {
}
css插件:bootsrrap
使用bootstrap
1. https://www.bootcss.com/
2. bootstrap3 中文文档
3. 起步
4. 下载 bootstrap 核心 css 文件
5. 在我们的html文件中引入该文件
6. 全局css样式
7. 看 表格 表单 按钮 图片 辅助类
js插件:jquery
jquery
属性:
属性:
attr(name|pro|key,val|fn)
查找，修改，添加元素的属性值
removeAttr(name)
删除元素的某个属性
css类：
addClass(class|fn)
添加类名
removeClass([class|fn])
删除类名
toggleClass(class|fn[,sw])
类名切换
类名如果存在就删除
类名如果不存在添加这个类名。
HTML代码\文本\值
html([val|fn])
修改查询HTML
类似js对象的 .innerTHML
取得第一个匹配元素的html内容
text([val|fn])
类似js对象的 .innerText
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
val([val|fn|arr])
类似js中的 .value
适用对象为input
获得匹配元素的当前值
CSS
css(name|pro|[,val|fn])
批量修改元素的样式。
eg: $("xxx").css({"user-select", "none"})
位置
offset([coordinates])
获取匹配元素在当前视口的相对偏移。
position()
获取匹配元素相对父元素的偏移。
文档处理
内部插入：
append(content|fn)
向每个匹配的元素内部追加内容。
A.append(B) 即为 B加到A中内容的后面
appendTo(content)
反向添加
A.appendTo(B) 即为 A加到B中内容的后面
prepend(content|fn)
类似append添加到指定元素内容后 这个是添加到指定元素的内容前
prependTo(content)
反向添加
外部插入：
after(content|fn)
在每个匹配的元素之后插入内容。
before(content|fn)
在每个匹配的元素之前插入内容。
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
包裹
wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。
eg:
把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
unwrap()
移出元素的父元素。
取代父元素的位置
wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
eg:
用一个生成的div将所有段落包裹起来
$("p").wrapAll("<div></div>");
wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
替换
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。
eg:
用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。
HTML 代码:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果：
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
eg:
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
删除
empty()
删除匹配的元素集合中所有的子节点。
remove([expr])
从DOM中删除所有匹配的元素。
效果
无动画的版本：
show()
隐藏的显示(只有隐藏的元素可用)
eg：show(1000)
1000代表隐藏所用时间
hid()
显示的隐藏(只有显示的元素可用)
toggle()
切换(隐藏的显示,显示的隐藏)
滑动版本：(依次对应上面)
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出版本：(依次对应上面)
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
事件
事件处理：
on(eve,[sel],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
eg：
给p绑定一个点击事件,事件触发回调函数
$("p").on("click", function(){
alert( $(this).text() );
});
事件:
blur([[data],fn])
元素失去焦点时触发 //用于input
change([[data],fn])
元素内容改变时触发
click([[data],fn])
点击时触发
dblclick([[data],fn])
双击时触发
focus([[data],fn])
元素获得焦点时触发 //于blur()相反
focusin([data],fn)
元素获得焦点时触发 //focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
focusout([data],fn)
元素失去焦点时触发 //focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
keydown([[data],fn])
当键盘或按钮被按下时发生
keypress([[data],fn])
当键盘或按钮被按下时发生 //keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。
它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件
keyup([[data],fn])
按钮被松开时发生 //它发生在当前获得焦点的元素上
mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时会发生
//mousedown与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生
筛选：
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
查找
children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find(e|o|e)
搜索所有与指定表达式匹配的元素 //这个函数是找出正在处理的元素的后代元素的好方法
next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr])
查找当前元素之后所有的同辈元素
nextUntil([e|e][,f])
找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） //可以通过一个可选的表达式进行筛选
prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr])
查找当前元素之前所有的同辈元素
jQuery:
jQuery 核心函数:
jQuery([sel,[context]]) //等同$([sel,[context]])
jQuery对象访问
each()
遍历 类似for(in)
index()
查找元素下标 (搜索匹配的元素，并返回相应元素的索引值，从0开始计数)
get()
取得其中一个匹配的元素
eg: $("div")[0] = $("div").get(0) 得到的都是js对象
length
jQuery 对象中元素的个数
selector
返回传给jQuery()的原始选择器。//$(".body").selector() -->body
eg：
jQuery 代码:
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果:
ul
ul li
div#foo ul:not([class])
context
回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。
如果没有指定，那么context指向当前的文档(document)。
eg:
jQuery 代码:
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
结果:
[object HTMLDocument] //如果是IE浏览器，则返回[object]
BODY
数据缓存:
data()
在元素上存放或读取数据
(自己添加的在元素上看不见
但是可以用 data-name直接添加到元素上
然后用data("name")查看
eg：
HTML 代码:
<div data-test="this is test" ></div>
jQuery 代码:
$("div").data("test"); //this is test!;
)
eg：
HTML 代码:
<div></div>
jQuery 代码:
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
removeDate()
在元素上移除存放的数据
扩展函数
$.extend()
扩展jQuery对象本身
eg：
jQuery 代码:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
结果:
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
延迟对象
def.done()
当延迟成功时调用一个函数或者数组函数.
eg：
jQuery 代码:
$.get("test.php").done(function() {
alert("$.get succeeded");
});
工具
$.brower.version
显示当前 IE 浏览器版本号
$.each()
通用遍历方法，可用于遍历对象和数组
eg：
遍历数组，同时使用元素索引和内容。
jQuery 代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
$.extend()
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
eg：
jQuery 代码:
var a={name："张"}
var b={age:12}
$.extend(a, b);
结果:
a == {name："张",age:12}
$.grep()
使用过滤函数过滤数组元素
eg:
过滤数组中小于 0 的元素。
jQuery 代码:
$.grep( [0,1,2], function(n,i){
return n > 0;
});
结果:
[1, 2]
$.when()
提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件
类似于done done是完成后执行 when是达到某个条件后执行
$.makeArray()
将类数组对象转换为数组对象。
$.map()
将一个数组中的元素转换到另一个数组中
eg：
将原数组中每个元素加 4 转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return n + 4;
});
结果:
[4, 5, 6]
$.inArray()
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
//查找元素在数组中的下标
$.toArray()
把jQuery集合中所有DOM元素恢复成一个数组。
//把jQuery对象化为数组
eg：
得到所有li的元素数组
jQuery 代码:
alert($('li').toArray());
结果:
[<li id="foo">, <li id="bar">]
$.merge()
合并两个数组
eg:
合并两个数组到第一个数组上。
jQuery 代码:
$.merge( [0,1,2], [2,3,4] )
结果:
[0,1,2,2,3,4]
$.uniqueSort()
通过搜索的数组对象，排序数组，并移除任何重复的节点
eg:
删除重复 div 标签。
jQuery 代码:
$.uniqueSort(document.getElementsByTagName("div"));
结果:
[<div>, <div>, ...]
$.proxy()
强制设置函数的作用域，让this指向obj而不是#test对象。
HTML 代码:
<div id="test">Click Here!</div>
jQuery 代码:
var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );
// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );
$.contains()
一个DOM节点是否包含另一个DOM节点。
eg:
检测一个元素是否包含另一个元素
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
$.type()
检测obj的数据类型。
$.isEmptyObject()
测试对象是否是空对象（不包含任何属性）。
$.isPlainObject()
测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。
$.isNumeric()
确定它的参数是否是一个数字。
$.isNumeric("-10"); // true
$.isNumeric(16); // true
$.isNumeric(0xFF); // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (指数符号的字符串)
$.isNumeric(3.1415); // true
$.isNumeric(+10); // true
$.isNumeric(0144); // true (八进制整数字面)
$.isNumeric(""); // false
$.isNumeric({}); // false (空对象)
$.isNumeric(NaN); // false
$.isNumeric(null); // false
$.isNumeric(true); // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false
$.trim()
去掉字符串起始和结尾的空格。
$.param()
将表单元素数组或者对象序列化
//即为将数组或者对象转化成地址格式
eg：
按照key/value对序列化普通对象。
jQuery 代码:
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
结果:
width=1680&height=1050
回调函数
$.callbacks()
一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表
eg:
jQuery 代码:
function fn1( value ){
console.log( value );
}
function fn2( value ){
fn1("fn2 says:" + value);
return false;
}
var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!
callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!
cal.add()
回调列表中添加一个回调或回调的集合。
eg：
jQuery 代码:
// 要添加到回调列表中的日志记录函数示例
var foo = function( value ){
console.log( 'foo:' + value );
}
// 另一个要添加到列表中的函数
var bar = function( value ){
console.log( 'bar:' + value );
}
var callbacks = $.Callbacks();
// 将函数'foo'添加到列表中
callbacks.add( foo );
// 按单子上的项目做
callbacks.fire( 'hello' );
// outputs: 'foo: hello'
// 将函数“bar”添加到列表中
callbacks.add( bar );
// 把清单上的项目再做一遍
callbacks.fire( 'world' );
// outputs:
// 'foo: world'
// 'bar: world'
cal.fire()
用给定的参数调用所有的回调。
eg：
jQuery 代码:
// 要添加到回调列表中的日志记录函数示例
var foo = function( value ){
console.log( 'foo:' + value );
}
var callbacks = $.Callbacks();
// 将函数'foo'添加到列表中
callbacks.add( foo );
// 按单子上的项目做
callbacks.fire( 'hello' ); // outputs: 'foo: hello'
callbacks.fire( 'world '); // outputs: 'foo: world'
// 测试以确定回调是否已被调用
console.log( callbacks.fired() );
动画框架：Animate
Animate
滚动屏插件swiper3
swiper3
网页触摸内容滑动js插件
http://newsimg.5054399.com/uploads/201228/_164251a3.jpg
MySQL数据库的安装及使用
MySQL数据库
1. 安装mysql8
假设: 安装的同时 设置的密码是: Leifeng123
2. 通过 终端 访问mysql
mysql -u root -p
Leifeng123
可以访问mysql
3. 通过 工具 或者 项目中的 mysql 模块 去访问数据库
var mysql = require('mysql');
var db = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'Leifeng123',
database : 'school'
});
db.connect();
访问不成功
4. 原因:
mysql 8 密码加密方式 不是之前的 正常的加密方式
5. 解决办法:
让 mysql8 中的密码 采用, 之前统一的加密方式
6. 解决步骤:
1. 终端: mysql -u root -p
2. password : Leifeng123
3. show databases;
4. use mysql;
5. 将 mysql 中 root 的密码改为 正常加密模式
alter user 'root'@'localhost' idetified with mysql_native_password by 'Leifeng123';
flush privileges;
6. exit;
7. 此时 第 3 步 就可以成功访问了
补充学习
1.let: (类似var声明)
1.作用域 ---> 块级作用域 --->{}
2.不能形成变量声明前置
//暂时性死区-整个作用域中 不能被访问的那段 （暂时性死区不允许任何人动let 声明的变量 比如typeof ）
3.同一个作用域 不能重名
4.在嵌套作用域可以重复声明
2.const
常量
定义常量后，不可修改，且定义常量时必须要初始化（即定义时就要赋值）
const 与 let一样都是块级声明
3.字符串与正则表达式
repeat()
它接受⼀个参数作为字符串的重复次数,返回 ⼀个将初
始字符串重复指定次数的新字符串
4.函数
1.默认参数
1.在 ES5 或更早的版本中
你可能会使⽤下述模式来创建带有参数默认值的函数:
function makeRequest(url, timeout, callback) {
timeout = timeout || 2000;
callback = callback || function() {
//函数剩余部分
};}
不过此⽅法有个瑕疵,此处的timeout的有效值实际上有可能是0,但因为0是假值,就会导致timeout的值在这种情况下会被替换为2000.
在这种情况下,更安全的替代⽅法是使⽤ typeof 来检测参数的类型,正如下例:
function makeRequest(url, timeout, callback) {
timeout = (typeof timeout !== "undefined") ?
timeout : 2000;
callback = (typeof callback !== "undefined") ?
callback : function() {
//函数剩余部分
};}
虽然这种⽅法更安全,但依然为实现⼀个基本需求⽽书写了过多的代码。它代表了⼀种公共模式,⽽流⾏的JS库中都充斥着类似的模式
2.ES6 中的参数默认值
function makeRequest(url, timeout = 2000, callback = function(){}){
//函数剩余部分
}
3.参数默认值如何影响 arguments 对象
arguments 与 严格模式
假设 一个函数有 两个参数 first , second.
在非严格模式下
first 与 arguments[0]相通
second 与 arguments[1] 相通
在 严格模式 "use strict" 下
first 与 arguments[0] 不相通
second 与 arguments[1] 不相通
ES6 默认运行在 严格模式下
参数的默认值
1. 参数可以有默认值
2. 参数的默认值可以是表达式
3. 参数的默认值的依赖顺序: 只能是 后面的 依赖 前面的
4.参数默认值表达式
参数默认值最有意思的特性或许就是默认值并不要求⼀定是基本类型的值。例如,你可以执⾏⼀个函数来产⽣参数的默认值,
此处若未提供第⼆个参数,getValue()函数就会被调⽤以获取正确的默认值。需要注意的是,仅在调⽤add()函数⽽未提供
第⼆个参数时,getValue()函数才会被调⽤,⽽在getValue()的函数声明初次被解析时并不会进⾏调⽤。这意味着getValue()
函数若被写为 可变的,则它有可能会返回可变的值,这种⾏为引出了另⼀种有趣的能⼒:可以将前⾯的参数作为后⾯参数的默认值,
这⾥有个例⼦:
function add(first, second = first) {
return first + second;
}
console.log(add(1, 1)); // 2
console.log(add(1)); // 2
此代码中first为second参数提供了默认值,意味着只传⼊⼀个参数会让两个参数获得相同的值,因此add(1,1)与add(1)同样返回了2.
进⼀步说,你可以将first作为参数传递给⼀个函数来产⽣second参数的值,正如下例:
function getValue(value) {
return value + 5;
}
function add(first, second = getValue(first)) {
return first + second;
}
console.log(add(1, 1)); // 2
console.log(add(1)); // 7
引⽤其他参数来为参数进⾏默认赋值时,仅允许引⽤前
⽅的参数,因此前⾯的参数不能访问后⾯的参数,例如:
function add(first = second, second) {
return first + second;
}
console.log(add(1, 1)); // 2
console.log(add(undefined, 1)); // 抛出错误
调⽤ add(undefined, 1) 发⽣了错误,是因为 second 在first 之后定义,因此不能将其作 为后者的默认值。要
理解为何会发⽣这种情况,需要着重回顾“暂时性死区”
2.剩余参数
1. 剩余参数( rest parameter )由三个点( ... )与⼀个紧跟着的具名参数指定,它会是包 含传递给函数的其余参数的⼀个数组,名称中
的“剩余”也由此⽽来:
function pick(object, ...keys) {
let result = Object.create(null);
for (let i = 0, len = keys.length; i < len; i++) {
result[keys[i]] = object[keys[i]];
}
return result;
}
//函数的length属性⽤于指示具名参数的数量,⽽剩余参数对其毫⽆影响。
//此例中pick()函数的length属性值是1,因为只有object参数被⽤于计算该值。
2.剩余参数的限制条件
⼀是函数只能有⼀个剩余参数,并且它必须被放在最后第⼆个限制是剩余参数不能在对象字⾯量的setter属性中使⽤,这意味着如下代码
同样会导致语法错误:
let object = {
// 语法错误:不能在 setter 中使⽤剩余参数
set name(...value) {
// ⼀些操作
}
};
存在此限制的原因是:对象字⾯量的setter被限定只能使⽤单个参数;⽽剩余参数按照定义是不限制参数数量的,因此它在此处不被许可
3.剩余参数如何影响 arguments 对象
arguments对象在函数被调⽤时反映了传⼊的参数,与剩余参数能协同⼯作,就像如下程序所演示的:
function checkArgs(...args) {
console.log(args.length); //2
console.log(arguments.length); //2
console.log(args[0], arguments[0]); //a a
console.log(args[1], arguments[1]); //b b
}
checkArgs("a", "b");
arguments 对象总能正确反映被传⼊函数的参数,⽽⽆视剩余参数的使⽤
4.扩展运算符
与剩余参数关联最密切的就是扩展运算符。剩余参数允许你把多个独⽴的参数合并到⼀个数组中;⽽扩展运算符则允许将⼀个数组分割,
并将各个项作为分离的参数传给函数。
let value1 = 25,
value2 = 50;
console.log(Math.max(value1, value2)); // 50
若像本例这样仅处理两个值,那么 Math.max() ⾮常容易使⽤:将这两个值传⼊,就会返回较⼤的那个。但若想处理数组中的值,此时该如何找到最⼤值?
因为Math.max() ⽅法并不允许 你传⼊⼀个数组在 ES5 或更早版本中,你必须⾃⾏搜索整个数组,或像下⾯这样使⽤
apply() ⽅法:
let values = [25, 50, 75, 100]
console.log(Math.max.apply(Math, values)); // 100
该解决⽅案是可⾏的,但如此使⽤ apply() 会让⼈有⼀点疑惑,它实际上使⽤了额外的语法 混淆了代码的真实意图
ES6 的扩展运算符令这种情况变得简单⽆须调⽤ apply() ,你可以像使⽤剩余参数那样在 该数组前添加 ... ,并直接将其传递给 Math.max()。
JS 引擎将会将该数组分割为独⽴参 数并把它们传递进去,就像这样:
let values = [25, 50, 75, 100]
// 等价于
console.log(Math.max(25, 50, 75, 100));
console.log(Math.max(...values)); // 100
你可以将扩展运算符与其他参数混⽤。假设你想让Math.max() 返回的最⼩值为 0 (以防数 组中混⼊了负值),你可以将参数 0 单独传⼊,并继续为
其他参数使⽤扩展运算符,正如下 例:
let values = [-25, -50, -75, -100]
console.log(Math.max(...values, 0)); // 0
本例中传给Math.max()的最后⼀个参数是0,它跟在使⽤扩展运算符的其他参数之后传⼊。⽤扩展运算符传递参数,使得更容易将数组作为函数参
数来使⽤,你会发现在⼤部分场景中 扩展运算符都是apply() ⽅法的合适替代品。
除了你⾄今看到的默认参数与剩余参数的⽤法之外,在ES6中还可以在JS的Function构造器中使⽤这两类参数
3.函数构造器的增强能⼒
Function 构造器允许你动态创建⼀个新函数,但在JS中并不常⽤。传给该构造器的参数都是字符串,它们就是
⽬标函数的参数与函数体
var add = new Function("first", "second", "return first + second");
console.log(add(1, 1)); // 2
ES6 增强了 Function 构造器的能⼒,允许使⽤默认参数以及剩余参数。
使⽤默认参数: 你只需为参数名称添加等于符号以及默认值
var add = new Function("first", "second = first",
"return first + second");
console.log(add(1, 1)); // 2
console.log(add(1)); // 2
使⽤剩余参数: 只需在最后⼀个参数前添加 ... 即可
var pickFirst = new Function("...args", "return args[0]");
console.log(pickFirst(1, 2)); // 1
这篇关于demo-复习补充及前端常用插件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享，温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问！炒鸡煎蛋！
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式（html怎么和css关联）-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
