JavaScript
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言
使用方式：JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中
- 行内JS : 写在标签内部的js代码
- 内部JS : 定义在script标签内部的js代码
- 外部JS : 单独的js文件，在HTML中通过script标签引入
<!--行内js-->
<button type="button" onclick="alert('醒醒吧你!!!!')">按钮</button>
<!--引入外部js文件-->
<script src="js/first.js"></script>JS中的调试
- .alert() 弹出框
- document.write("你好啊,中国队必胜!!!");
- 内部可以识别html语法结构
- 当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
- console.log() 控制台输出打印 -> 推荐
- console.log("日志输出")
- console.info("信息输出");
- console.error("错误输出");
- console.warn("警告输出");
JS变量
存储单个数据|表达式
JS 是一个弱类型的语言
定义：
声明的同时赋值
var 变量名 = 赋值；
先声明后赋值
var 变量名；
变量名 = 赋值；
JDK11 ：
Java中的var可以定义局部变量。一当确定就无法改变
Java 中成员变量不赋值有默认值，局部变量不赋值没有默认值
注意：
js中变量的数据类型有值决定
js中的变量不赋值存在默认值 undefined未定义
变量的作用域提升: 只提升变量的声明,不提升变量的赋值
变量的定义可以省略var的声明,不能发生作用域的提升
<script>
/*
* var i = undefined;
* var username = undefined;
* */
console.log(username);
//console.log(w);
//声明的同时赋值
var i = 1;
i = "";
//先声明后赋值
var username;
username = "zhangsan";
//同时定义多个变量
var x=1,y=2,z=false;
console.log(x,y,z);
var b;
console.log(b);
w = 1;
console.log("w = " + w);
</script>JS数据类型
简单| 基础数据类型
- String 字符串
- 一对''|""表示字符串
- 包含0~n个字符
- 通过转义字符进行转义
- Number 数值型
- 整数 小数
- NaN not a number 不是一个数字
- 直接赋值NaN
- 当运算无法得到一个正确结果
- Boolean 布尔型
- true | false
- 常常用于对条件判定结果类型
- Undefined 未定义
- 直接赋值undefined
- 声明变量未赋值默认undefined
- Null 空
- 直接赋值null
- 获取不到元素
- Null 与 Undefined之间的区别:
- undefined : 存在,但是没有值
- null : 元素不存在
- Function 函数型
function 函数名(参数列表){
函数体;
}
通过函数的调用使用
复杂|复合数据类型
对象类型
{} 表示对象
有键值对组合而成
{
key:value,
key:value,
键值对
}
两个键值对之间使用,分隔,最后一个键值对的后面不加,
KEY与VALUE之间使用:分隔
key : 如果符合命名规范可以直接定义,不符合命名规范.需要前后加引号
value : 可以为任意类型
<script>
var str1 = "abc";
var str2 = 'it\'s';
var str3 = '123';
console.log(str1,str2,str3);
var num1 = 123;
var num2 = NaN;
var num3 = 5/'A';
var num4 = 1.234;
console.log(num1,num2,num3,num4);
var n1 = null;
//函数
function fun(){
console.log("这是一个函数");
}
//fun();
//对象
var obj = {}; /*空对象*/
var obj2 = {
name : 'zhangsan',
age : 18,
"girl friend" : null,
son : {
name : 'haha'
}
};
console.log(obj);
console.log(obj2);
console.log(obj2.name);
</script>typeof : 运算符 帮助判断数据的类型
返回一个字符串形式的小写的数据类型
Number -> number
String -> string
Null -> object
Undefined -> undefined
Boolean -> boolean
Function -> function
Object -> object
语法:
typeof(数据)
typeof 数据
<script>
console.log( typeof(123) );
console.log( typeof("123") );
console.log( typeof(typeof("123")));
console.log( typeof(null));
console.log( typeof(undefined));
console.log( typeof(false));
console.log( typeof(function(){}));
console.log( typeof({}));
console.log( typeof 123);
</script>类型转换
对象类型(函数)不参与类型转换
分类:
显示类型转换|强制
任意类型(String,Number,Boolean,Null,Undefined)都可以转为以下三种类型 :
String(数据)
Boolean(数据)
String :
空串->false
其他包含字符的字符串->true
Number
0,NaN -> false
其他 -> true
Null
false
Undefined
false
Number(数据)
String
空串,与空格字符串 -> 0
纯数字字符串 -> 数字
非纯数字字符串 -> NaN
Bollean
true -> 1
false-> 0
Null -> 0
Undefined -> NaN
隐式类型转换|自动
执行某些行为操作时候,目的不是为了转型,但是在执行的时候会默认自动转型->隐式类型转换
String(数据) 把参数数据转为字符串类型 在数据的前后+一对引号
<script>
//String()
console.log(String(123));
console.log(String(null));
console.log(String(undefined));
console.log(String(false));
console.log(String(NaN));
//Boolean
console.log(Boolean(''));
console.log(Boolean(' '));
console.log(Boolean('abc'));
console.log(Boolean('123'));
console.log(Boolean('abc123'));
console.log(Boolean(0)); //false
console.log(Boolean(123)); //true
console.log(Boolean(-1.4)); //true
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log("-----------------------------");
//Number
console.log(Number('')); //0
console.log(Number(' ')); //0
console.log(Number('123')); //123
console.log(Number('abc')); //NaN
console.log(Number('abc123')); //NaN
console.log(Number(true)); //1
console.log(Number(false)); //0
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
//隐式类型转换
console.log('a' - 1); //NaN
console.log(false - 1); //-1
console.log(true + false); //1
</script>= 赋值
== 判断数据是否相等
=== 判断数据以及类型是否相等
先判断类型再检查值
!= 检查数据
!== 检查类型与数据
逻辑运算符
java中要求逻辑运算符左右两边的表达式必须结果为boolean类型
js中,两边的表达式可以为任意类型
&& : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果就是第一个操作数,如果为true,最终的结果为第二个操作数
|| : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果为第二个操作数,如果为true
<script>
console.log(1 == '1'); //true
console.log(1 === '1'); //false
console.log(1 != '1'); //false
console.log(1 !== '1'); //true
console.log(true && false);
console.log(true || false);
console.log(Boolean(1));
console.log(1 && 'a'); //'a'
console.log(1 || 'a'); //1
</script>数组 [ ] 存储多个数据
长度可变，可以存储任意类型的数据
创建方式：
1.new Array() 创建空数组
2.new Array(值1,值2,值3...);
创建数组并赋值
3.[值1,值2,值3...] -> 推荐
索引：
从0开始，每次+1
操作数组中的数据
数组名[索引]
<script>
//1)
var arr1 = new Array();
console.log(arr1);
/*操作数组中的数据*/
arr1[0] = 101;
arr1[1] = '红色';
console.log(arr1[0]);
console.log(arr1[1]);
//2)
var arr2 = new Array(1, 2, 3, 4, 5);
console.log(arr2);
console.log(arr2.length);
//3)
var arr3 = ["", false, 0, null, undefined, function () {
}, {}];
console.log(arr3);
/*当[]中不是0~n的正整数时候,相当于为数组添加自定义的属性*/
arr1['haha'] = 123;
console.log(arr1);
console.log(arr1['haha']);
</script>数组的遍历
数组的遍历:
普通for
for in
foreach
数组的常用方法:
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并
<script>
var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'一','二');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));
var arr = ["red", "green", "yellow", "pink", "black"];
//for
for (var i = 0; i <= arr.length - 1; i++) {
console.log(arr[i]);
}
//for .. in
for (var i in arr) {
console.log(arr[i]);
}
//foreach
arr.forEach(function (value, index) {
console.log(value + "--->" + index)
});
//数字常用方法
console.log(arr);
//slice 截取（切片）数组，原数组不发生变化
console.log(arr.slice(2)); /*默认从参数索引位置开始截取到最后*/
console.log(arr.slice(1, 3)); /*默认从参数1索引位置开始截取到参数2索引位置结果,结束索引不包含*/
console.log(arr);
//splice 剪接数组，原数组变化，可以实现前后删除效果
//console.log(arr.splice(2)); /*实现了剪切|删除的效果,从索引位置开始剪切到最后,修改原数组*/
//console.log(arr.splice(1,2)); /*实现了删除的效果,从参数1索引位置开始删除参数2个*/
console.log(arr.splice(1, 2, "哈哈", "呵呵", "吼吼")); /*实现替换效果,把参数1索引位置开始,删除参数2个数据,替换为参数3开始后面的数据*/
console.log(arr);
</script>JS的函数
1.函数声明
function 函数名(参数列表){ 函数体; }
调用: 执行函中的代码
1.函数名(实参);
2.转为函数表达式然后通过最后添加(实参)的方式调用
在函数声明的前面添加+|-|~|!或者前后添加一对()
2.函数表达式
var 变量名 = function (参数列表){ 函数体; };
函数表达式中的函数名作用只有一个,在递归使用的时候有用,否则默认一般省略
调用:
1.变量名(实参);
2.函数表达式后面直接添加(实参),在当前直接调用
注意:
1.参数个数可以不同,函数没有传递实参,默认undefined
2.函数都存在返回值,没有显示定义return关键字返回结果,默认返回值为undefined
<script>
/*函数声明*/
function fun1(name){
console.log("我的名字是"+name);
return name+"haha";
}
//输出函数的返回值
console.log(fun1("马龙","张继科"));
//函数表达式
var f1 = function fun2(i){
console.log("我是函数表达式1-->"+i);
if(i==5){
return;
}
fun2(++i);
};
//函数表达式调用1
f1(1);
//函数表达式调用2
var f2 = function(x){
console.log("函数表达式2");
}(1);
/*函数声明的其他调用方式*/
~function fun2(){
console.log("函数声明2");
}();
+function fun3(){
console.log("函数声明3");
}();
-function fun4(){
console.log("函数声明4");
}();
!function fun5(){
console.log("函数声明5");
}();
(function fun6(){
console.log("函数声明6");
})();
</script>JS是值传递 | 引用传递（地址值传递）
js中的作用域 ： 函数为单位
js中的函数可以任意嵌套
函数存在作用域的提升: 函数声明的方式会发生作用域的提升
变量的作用域提升: 把当前的变量的声明提升到当前作用域的最上面
当在函数中省略var关键字定义的变量,成为全局变量,但是事前要求这个函数至少被调用过一次
<script>
/*
function func(){
console.log("普通的函数声明");
}
*/
//调用函数的作用域提升
func();
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2); //[1, 2, 3];
//快
{
var i = 1;
}
console.log(i);
//作用域
function fn1(){
var j = 11;
}
//console.log(j);
//嵌套
function f1(){
function f2(){
function f3(){}
}
}
//返回值为函数时
function f4(){
console.log("我是f4");
return function(){
console.log("返回值函数");
}
}
console.log(f4); //打印函数结构
console.log(f4()); //打印输出函数f4的返回值
f4()(); //调用f4函数,得到返回值函数再调用
function func(){
console.log("普通的函数声明");
}
//变量作用域提升
function func2(){
//var haha = undefined;
console.log(haha);
var haha = "zhangsan"; //局部变量
m = 1; //全局变量
}
//func2();
console.log(m);
</script>THIS绑定对象
this的决策树:
1.this所在的函数,是否是通过new关键字调用的,如果是this,绑定new的对象
2.this所在的函数是否是通过对象.函数名()调用的,如果是函数中的this绑定.前面调用的对象
3.没有显示的通过某一个对象调用,默认this指代全局window对象,默认通过window调用,window.可以省略
注意:
定义在全局位置的变量和函数,默认为window对象的属性和功能,调用的时候window.可以省略
修改this的引用指向
obj.fn.call(obj2,100); //调用的方法多个实参作为call方法的第二个参数开始 obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位
<script>
function fn(){
console.log(123);
}
fn();
window.fn();
/*全局变量*/
var str = "希望疫情立即结束!!!";
console.log(str);
console.log(window.str);
//自定义的模板
function Person(name,age){
this.name = name;
this.age = age;
}
var person = new Person("zhangsan",18);
console.log(person);
var a = 1;
var obj = {
a : 10,
fn : function(b){
console.log(this.a+"---->"+b);
}
};
obj.fn(100); //10-->100
var f = obj.fn;
f(); //1-->undefined
var obj2 = {
a : 12
};
/*修改this的引用指向*/
obj.fn.call(obj2,100); //调用的方法多个实参作为call方法的第二个参数开始
obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位
</script>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
