当前位置:
首页 > 网站开发 > JavaScript >
-
JavaScript教程之web前端篇：JavaScript基础篇（易懂小(2)
;
function hello() {
alert('Hello ' + name);
}
//second.js
var name = 'Jack';
function hello() {
alert('Hello ' + name);
}
-
这两个函数都是用
hello()形式调用，但是你只能访问到second.js文件的hello()函数。second.js在源代码中后应用到HTML中，所以它的变量和函数覆盖了first.js中的。我们称为这种行为叫代码冲突。
例题：
function fn() {
switch (arguments.length){
case 2:
console.log('2个参数');
break;
case 3:
console.log('3个参数');
console.log(arguments);//Arguments(3) [2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
break;
default:
break;
}
}
fn(2,3);//2个参数
fn(2,3,4);//3个参数
//arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数.
//arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。
6.函数内部的函数
- 在任何地方你都可以调用函数，甚至可以在另一个函数中调用函数。这通常被用作保持代码整洁的方式。如果你有一个复杂的函数，如果将其分解成几个子函数，它更容易理解：
function myBigFunction() {
var myValue = 1;
subFunction1(myValue);
subFunction2(myValue);
subFunction3(myValue);
}
function subFunction1(value) {
console.log(value);
}
function subFunction2(value) {
console.log(value);
}
function subFunction3(value) {
console.log(value);
}
-
函数自执行
（function(){ //代码 })();
9.对象（object）:
-
对象属性：它是属于这个对象的某个变量。比如字符串的长度、数组的长度和索引、图像的宽高等。
-
对象的方法：只有某个特定属性才能调用的函数。表单的提交、时间的获取等。
-
对象的创建方式：
1.字面量表示法
-
对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。
<script> var person = { name : 'xjk', age : 22, fav :function() { console.log('学JS') } }; person.fav();//学JS console.log(person.name);//22 </script>var person = {};//与new Object()相同 var obj2 = new Object();
2.点语法(set和get)
<script> var person = {}; person.name='xjk'; person.fav = function(){ console.log(this) }; person.fav();//{name: "xjk", fav: ƒ} console.log(person.name);//xjk </script>//set get 用法： //1、get与set是方法，因为是方法，所以可以进行判断。 //2、get是得到 一般是要返回的 set 是设置 不用返回 //3、如果调用对象内部的属性约定的命名方式是_age var my = { name:'jk', work:function () { console.log('working'); }, _age:22, get age(){ return this._age; }, set age(val){ if (val<0 || val>100) { throw new Error('invalid value') }else{ this._age = val; } } }; console.log(my.age);//22 my.age = 18; console.log(my.age);//18 my.age = 200; console.log(my.age);//Uncaught Error: invalid value3.括号表示法
person['name']; -
-
ECMAScript6：
<script> class Person{ constructor(name,age){ //初始化相当于python__init__,this相当于self this.name = name; this.age = age; } fav(){ console.log(this.name); } } var p = new Person('mjj',18); p.fav(); </script> //与python相似 -
例题：
var obj = {}; obj.name = 'mjj'; obj.fav = function(){ //obj console.log(this); }; console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}全局的。 function add(x,y) { console.log(this.name); console.log(x); console.log(y); } add.call(obj,1,2); //obj传入add 函数，给this赋予局部函数，为obj.name，调用obj对象的name并打印。 add.apply(obj,[1,2]); //apply 与call相似，第二个参数传入必须为数组 //匿名函数 (function () { console.log(this); })(); //window -
注意：首先要了解JS里的this对象，this对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window，而当函数作为某个对象例如A的方法B被调用时，this等于A对象，这里有个例外，匿名函数的执行环境具有全局性，因此匿名函数的this对象通常指向window。用一句话总结，就是谁调用this，谁就被引用。
<script> var name = 'wusir'; (function () { console.log(this.name); })(); </script> //wusir -
练习题：
<script> var name = 'window'; var obj = { name:'my obj', getname:function () { var name = 'inner name'; return this.name; } }; alert(obj.getname()); </script> //my obj //谁调用this，谁就被引用。 -
apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替Function类里this对象 args：这个是数组，它将作为参数传给Function（args-->arguments）call:和apply的意思一样,只不过是参数列表不一样. Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：这个对象将代替Function类里this对象
10.内置对象：
- 它提供了一些列预先定义好的对象，而我们可以把这些对象直接用在自己的脚本里。我们称这种对象叫内置对象（navtive object）。
1.Array
- 其实我们已经见过一些Javascript内置对象了。数组就是一种Javascript内置对象中的一种。本节我们主要介绍数组常用的属性和方法。
1.1数组创建：
var colors = new Array();
1.2使用字面量方式创建数组
var colors = [];
1.3 isArray
- 判断是否为数组
<script>
var colors = ['red','green','blue'];
if (Array.isArray(colors)){
console.log("是数组")
}
</script>
//是数组
1.4 toString
-
数组中每个值得字符串形式拼接。
<script> var colors = ['red','green','blue']; alert(colors.toString()); </script> //red,green,blue
1.5 join
-
分割字符串
<script> var colors = ['red','green','blue']; res = colors.join("|"); console.log(res); </script> //red|green|blue
1.6栈方法push() pop()
-
数组也可以像栈一样，既可以插入和删除项的数据结构。栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构，也就是最新添加的那项元素最早被删除。而栈中项的插入（叫做推入）和移除(叫做弹出)，只发生在一个位置——栈的顶部。
- push():可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
- pop():从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项 。
<script> var colors = ['red','green','blue']; colors.push('yellow','black'); console.log(colors); </script> //["red", "green", "blue", "yellow", "black"]<script> var colors = ['red','green','blue']; res = colors.pop();//res = 'blue' console.log(colors); </script> //["red", "green"]
1.7队列方法 shift() unshift()
-
队列数据结构的访问规则是
FIFO(First-In-First-Out， 先进先出)。队列在列表的末端添加项，从列表的前端移除项。 -
shift()
<script> var colors = ['red','green','blue']; var item = colors.shift(); alert(item); </script> //red -
unshift()
var colors = []; var count = colors.unshift('red','green'); //推入两项 alert(count); //2 console.log(colors); // ["red", "green"]
1.8reverse()
-
反转数组。
var values = [1,2,3,4]; values.reverse(); alert(values); //4,3,2,1
1.9sort()
-
方法按升序排列
-
默认情况下，
sort()方法按升序排列——即最小的值位于最前面，最大的值排在最后面。 为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序 。即使数组中的每一项都是数值，sort()方法比较的也是字符串。
var values = [0,1,5,10,15]; varlus.sort(); alert(values); //0,1,10,15,5 //可见，即使例子中值的顺序没有问题，但 sort()方法也会根据测试字符串的结果改变原来的顺序。 因为数值 5 虽然小于 10，但在进行字符串比较时，”10”则位于”5”的前面，于是数组的顺序就被修改了。 不用说，这种排序方式在很多情况下都不是最佳方案。 -
默认情况下，
1.10 concat方法
-
数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组。concat()接收的参数是可以是任意的。
- 参数为一个或多个数组，则该方法会将这些数组中每一项都添加到结果数组中。
- 参数不是数组，这些值就会被简单地添加到结果数组的末尾
var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]
1.11 slice()方法
-
slice()方法，它能够基于当前数组中一个或多个项创建一个新数组。slice()方法可以接受一或两个参数，既要返回项的起始和结束位置。- 一个参数的情况下，slice()方法会返回从该参数指定位置开始到当前数组默认的所有项
- 两个参数的情况下，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"]
colors.slice(-1,-2);//[]
//解析colors.slice(-2,-1) 等于colors.slice(3,4)，都加colors.length.此时为5.
1.12splice
-
用于数组删除，插入，替换。
//1.删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的个数。例如splice(0,2)会删除数组中的前两项。 <script> var colors = ['red','blue','green','yellow','purple']; colors.splice(0,2); console.log(colors);//["green", "yellow", "purple"] </script> //2.插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的个数）和要插入的项。如果要插入多个项，可以再传入第四、第五、以至任意多个项。例如，splice(2,0,'red','green')会从当前数组的位置2开始插入字符串'red'和'green'。 <script> var colors = ['red','blue','green','yellow','purple']; colors.splice(2,0,'red','green'); console.log(colors);//["red", "blue", "red", "green", "green", "yellow", "purple"] </script> //3.替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"。 <script> var colors = ['red','blue','green','yellow','purple']; colors.splice(2,1,'red','green'); console.log(colors);//["red", "blue", "red", "green", "yellow", "purple"] </script>
1.13 indexOf() lastIndexOf()位置方法
-
indexOf()和lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中，indexOf()方法从数组的开头(位置 0)开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。在没找到的情况下返回-1.<script> var num = [1,2,3,4,5,4,3,2,1]; alert(num.indexOf(4));//3 查找值为4的索引为3 </script> <script> var num = [1,2,3,4,5,4,3,2,1]; // alert(num.indexOf(4));//3 查找值为4的索引为3 alert(num.lastIndexOf(4));//5 从后开始查找值为4的 索引为5（索引还是从前面开始算） </script> <script> var num = [1,2,3,4,5,4,3,2,1]; alert(num.indexOf(4,4));//5 第一个参数要查找的值4，第二个参数为规定在字符串中开始检索的位置,从4好位置开始查找 // alert(num.lastIndexOf(4));//5 从后开始查找值为4的 索引为5（索引还是从前面开始算） </script>
1.14迭代方法 filter map forEach
-
filter()函数，它利用指定的函数确定是否在返回的数组中包含某一项。var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item, index, array){ return (item > 2); }); alert(filterResult); //[3,4,5,4,3] -
map方法
- 方法也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行输入函数的结果。
var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.map(function(item, index, array){ return item * 2; }); alert(filterResult); //[2,4,6,8,10,8,6,4,2] -
forEach()方法
- 它只是对数组中的每一项运行传入的函数。这个方法没有返回值， 本质上与使用 for 循环迭代数组一样。
<script> var num = [1,2,3,4,5,4,3,2,1]; var res = num.forEach(function(item,index,array){ console.log(index,item); }); </script> /* 第一个索引index，第二个值item 0 1 1 2 2 3 3 4 4 5 5 4 6 3 7 2 8 1 */
2.String
2.1 length方法
- 获取字符串长度。
var stringValue = "hello world";
alert(stringValue.length); //"11"
2.2charAt() charCodeAt()字符方法
-
这两个方法都接收一个 参数，即基于 0 的字符位置。其中，
charAt()方法以单字符字符串的形式返回给定位置的那个字符。<script> var stringValue = "hello world"; alert(stringValue.charAt(1));//'e' </script> var stringValue = "hello world"; alert(stringValue.charCodeAt(1)); //输出"101" 当前字符编码
2.3 concat()字符串操作方法
-
用于将一或多个字符串拼接起来， 返回拼接得到的新字符串.concat可以接收任意多个参数。
<script> var stringValue = "hello "; var result = stringValue.concat("world",'!'); alert(result);//hello world! </script>
2.4子字符串创建新字符串
-
slice() substr() substring()
-
与 concat()方法一样，slice()、substr()和 substring()也不会修改字符串本身的值——它们只是 返回一个基本类型的字符串值，对原始字符串没有任何影响。
- slice()、 substring() 第二个参数指定的是字符串最后一个字符位置。
- substr()第二个参数指定则是返回字符个数。
var stringValue = "hello world"; alert(stringValue.slice(3));//"lo world" alert(stringValue.substring(3));//"lo world" alert(stringValue.substr(3));//"lo world" alert(stringValue.slice(3, 7));//"lo w" alert(stringValue.substring(3,7));//"lo w" alert(stringValue.substr(3, 7));//"lo worl"
2.5indexOf() lastIndexOf()字符串位置方法
-
有两个可以从字符串中查找子字符串的方法:
indexOf()和lastIndexOf()。这两个方法都是从 一个字符串中搜索给定的子字符串，然后返回子字符串的位置(如果没有找到该子字符串，则返回-1)。var stringValue = "hello world"; alert(stringValue.indexOf("o")); //4 alert(stringValue.lastIndexOf("o")); //7 alert(stringValue.indexOf("o", 6)); //7 alert(stringValue.lastIndexOf("o", 6)); //4
2.6trim()方法
-
trim()方法,删除字符串的前后空格.
var stringValue = " hello world "; var trimmedStringValue = stringValue.trim(); alert(stringValue); //" hello world " alert(trimmedStringValue); //"hello world"
2.7字符串大小写转换
var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase()); //"hello world"
alert(stringValue.toLowerCase()); //"hello world"
11.date对象方法
var date = new Date();
console.log(date);
//Mon Jun 03 2019 23:51:28 GMT+0800 (中国标准时间)
console.log(date.getDate());
//3 根据本地时间返回本月第几天
console.log(date.getMonth()+1);
//6 根据本地时间返回第几月
console.log(date.getFullYear());
//2019 返回年
console.log(date.getDay());
// 星期几
console.log(date.getHours());
//几时
console.log(date.getMinutes());
//几分
console.log(date.getSeconds());
//几秒
console.log(date.toLocaleString());
//2019/6/3 下午11:56:00
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var date = new Date();
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`);
- 时钟：
<h2 id="time"></h2>
<script>
var timeObj = document.getElementById('time');
console.log(time);
function getNowTime() {
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0) {
temp = "12";
}
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
timeObj.innerText = temp;
}
setInterval(getNowTime, 20)
</script>
12.window对象
- ECMAScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了 window 对象的属性。来看下面的例子。
var color = "red";
function sayColor(){
alert(window.color);
}
window.sayColor(); //"red"
13.Math对象
13.1max min 最小值 最大值
var max = Math.max(3,54,32,16);
alert(max);//54
var min = Math.min(3,54,32,16);
alert(min);//3
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);
console.log(max);
13.2舍入方法
- Math.ceil():执行向上舍入，即它总是将数值向上舍入为最接近的整数;
- Math.floor():执行向下舍入，即它总是将数值向下舍入为最接近的整数;
- Math.round():执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。
<script>
栏目列表
最新更新
python爬虫及其可视化
使用python爬取豆瓣电影短评评论内容
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀（爬取学校通知公告）
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求：requests模块基础使用必知必会
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析：SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL，这些神奇的特性你知道吗？
openGauss内核分析：执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
uniapp/H5 获取手机桌面壁纸 (静态壁纸）
[前端] DNS解析与优化
为什么在js中需要添加addEventListener（）？
JS模块化系统
js通过Object.defineProperty() 定义和控制对象
这是目前我见过最好的跨域解决方案！
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比