Js基础总结一

最新推荐文章于 2023-05-17 20:54:58 发布

ffewi

最新推荐文章于 2023-05-17 20:54:58 发布

阅读量277

点赞数

分类专栏：总结 JavaScript 文章标签： JavaScript 总结

本文链接：https://blog.csdn.net/liwei820100259/article/details/86215104

版权

总结同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

strict关键声明

"use strict";

设立"严格模式"的目的，主要有以下几个：错误检测、规范、效率、安全、面向未来

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

严格模式影响范围

变量： var、delete、变量关键字
对象：只读属性、对象字面量属性重复申明
函数：参数重名、arguments对象、申明
其他：this、eval、关键字…

1.对于变量声明限制 – 变量显式声明

'use strict';
// 声明变量不带var
i = 1; // Uncaught ReferenceError: i is not defined
function demo_1(){
	o = 2; // Uncaught ReferenceError: o is not defined
	// 循环时，初始化没用var定义
	for (i = 10 - 1; i >= 0; i--) { // Uncaught ReferenceError: i is not defined
		console.log(i);
	}
}

2.禁止this关键字指向全局对象

function demo_2_1() {
	console.log(this); // Window 对象
	return !this; // 返回false
}

function demo_2_2() {
	'use strict';
	console.log(this); // undefined
	return !this;// 返回true
}

3.禁止删除变量

严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。


function deom_3(){
	'use strict';
	var x = 1;
	delete x; // 语法错误 Delete of an unqualified identifier in strict mode.
　　var o = Object.create(null, {'x': {
　　　　　　value: 1,
　　　　　　configurable: true
　　}});
　　delete o.x; // 删除成功
}

4.函数不能有重名的参数

正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。


function deom_4(a, a, b) { 
// 语法错误 Duplicate parameter name not allowed in this context
　　return ;
}

数据类型

涵盖数据类型有： Number、 String、 Array、 Json、 Boolean、 Object。

创建数组

var arr1 = [1,2,3,4];
var arr2 = new Array(1,2,3,4);

创建对象

var obj1 = {
	name:'ffewi',
	age:23,
	gender:'M',
	city:'chengdu',
	hasCar:false,
	hasBuilder:false,
	habits:['js','java','mybatis','mysql','spring'],
	others:undefined,
	lucky:null
};

变量：变量名是大小写英文、数字、$和_的组合，且不能用数字开头

var variable1 =123;
var $variable2 = 'abc';
var _variable3 = ['helllo'];

字符串

1.转意符

’ 与 " 使用时，需要通过转意符\使用,但是 ' 里面可以包含 " , 同理 " 里面可以包含 ' 直接使用。

var str1 = 'I\'m \"ok!\"';// I'm "ok!"
var str2 = "I'm 'ok'!";// I'm 'ok'!
var str3 = 'I"m "ok"!';// I"m "ok"!

赋值可以直接，ASCII直接编码出字符，也可以通过编码Unicode编码直接编码出中文；进制缩写 8进制：oct (\) 10进制：dec 16进制：hex (\x)。

//  \x 16进制 \n 换行符 \t 制表符
var str4 = '\x41';// A字符  
str4 = '\102';// 8进制的 B 字符
var chinese_str4 = '\u55f2';// 中文 ：嗲

2.字符串操作

字符串可以看出数组来操作下表以0开头不在index范围值为： undifined
；修改其中一个index的字符值，不影响原本字符串的内容遵循java中 String 为不可变类。

var str5 = 'my name is ffewi';
str5[11] + str5[12] + str5[13] + str5[14] + str5[15];// ffewi
str5[-1];// undefined
str5[16];// undefined

尝试修改 str5最后的‘ffewi’ 为 ‘world’。

str5[11] = 'w';
str5[12] = 'o';
str5[13] = 'r';
str5[14] = 'l';
str5[15] = 'd';
console.log(str5[11] + str5[12] + str5[13] + str5[14] + str5[15]);// ffewi

3.常用方法

String 的一些常用的方法：toUpperCase(大写)、 toLowerCase(小写)、 substring(截取)、 indexOf(索引)；

//toUpperCase() 字符串转换为大写
var str6 =str5.toUpperCase();// MY NAME IS FFEWI

//toLowerCase() 字符串转换为小写
var str7 =str6.toLowerCase();// my name is ffewi

//indexOf(string)索引字符内容的位置，以0开头 首个匹配字符的下标
var index = str7.indexOf('ffewi');// 11

var lastIndex = str7.lastIndexOf('f');// 12

var noIndex = str7.indexOf('notFound');// -1

//substring(a,b)  区间为[a,b); String.length  长度值从1开始 与数组区别 数组以0角标开始
var str8 = str7.substring(11,str7.length);// ffewi

//substring(a)  区间为[a,字符末尾]
var str9 = str7.substring(11);// ffewi

数组

1.数组的长度

数组在java中String拥有 length() 方法，Array拥有length属性。js中 length 同时可以表示String和Array的长度。

var str1 = 'hello!';
console.log(str1.length);// 6
var arr1 = new Array('a1','a2','a3',4,[1,2,3,4]);
console.log(arr1.length);// 5

2.数组的定义

数组的定义：new Array(ob1,ob2,ob2,...) 或者 [ob1,ob2,ob3,...] ; 且里面的内容值是Object任意类型。

var arr2 = new Array(1,'2b',[3,'4d']);
var arr3 = [1,'2b',[3,'4d']];
console.log("定义的数组arr2：" + arr2);// 定义的数组arr2：1,2b,3,4d
console.log("定义的数组arr3：" + arr3);// 定义的数组arr3：1,2b,3,4d

比较上面两看着相似的数组。

console.log(arr2==arr3);//false 对象比较
console.log(arr2[1]===arr3[1]);//true 值比较

3.数组的操作

修改Array的 length将会改变Ta的储存结构，增加长度填充undifined,减少长度截取末尾，与java区别，此处Array是可变的数组。

自动填充 - increament

/* 上面 arr3长度为3 */
// 赋值后，由于第4、5位没有值，默认填充undifined;[1, "2b", Array(2), empty × 2, 5]
arr3[5] = 5;// 第6个值设置为5
console.log(arr3 + "填充的倒数第二位值为：" + arr3[4]);// 1,2b,3,4d,,,5填充的倒数第二位值为：undefined
console.log("填充的内容是undifined: " + (arr3[4] == 'undifined'));// 填充的内容是undifined: false
console.log("填充的内容是null：" + (arr3[4] == null));// 填充的内容是null：true

自动缩减 - reduce

arr3.length = 2;// 将长度变为2，原数组后面的元素自动丢弃
console.log("arr3.length reduce to 2 : " + arr3);// arr3.length reduce to 2 : 1,2b
console.log(arr3[5]);// undefined

null 和 undefined 的区别

var a;
var b=null;
console.log(a);// undefined
console.log(b);// null
console.log(a == b);// true
console.log(a === b);// false

4.常用的方法

indexOf(索引)
slice(切片)
push/pop(入栈/弹栈)末尾元素
unshift/shift(入栈/弹栈)头元素
sort(排序)
reverse(反转)
splice(几乎万能的方法，相当于拥有增删改)
concat(连接多个array)
join(以 内容 来连接array里面的元素)

indexOf && lastIndexOf

var arr4 = [1,'3',22,30,'1'];
var index1 = arr4.indexOf(1);
var index2 = arr4.lastIndexOf('1');
var index3 = arr4.indexOf('not found');//没有元素 返回-1
// indexOf Method : 0  lastIndexOf Method : 4 not have index : -1
console.log("indexOf Method : " + index1 + "  lastIndexOf Method : " + index2 + " not have index : " + index3);

slice

对应String.Method’s substring() 范围为 [a,b) 或者 [a,length)； slice() 无参数直接 [0,length]。

var arr5 = [1,2,3,4,5,6,7,8];
var arr5_1 = arr5.slice(4,8);
console.log("slice(a,b) [a,b) : "+arr5_1);// slice(a,b) [a,b) : 5,6,7,8
var arr5_2 = arr5.slice(4);
console.log("slice(a) [a...length)  : "+arr5_2);// slice(a) [a...length)  : 5,6,7,8
var arr5_3 = arr5.slice();
console.log("arr5.slice() equals copy arr5 to arr5_3 : " +arr5_3);// arr5.slice() equals copy arr5 to arr5_3 : 1,2,3,4,5,6,7,8

push / pop

末尾操作push(ob1,…) 插入多个pop() 弹出一个。

var arr6 = ['a','b','c','d','e','f'];
arr6.push('g');
// push one : a,b,c,d,e,f,g
console.log("push one : " + arr6);

arr6.push('h',[1,2,3]);
// push more than one : a,b,c,d,e,f,g,h,1,2,3
console.log("push more than one : " + arr6);

arr6.pop();
// pop must be pop one ,can't pop more than one : a,b,c,d,e,f,g,h
console.log("pop must be pop one ,can't pop more than one : " + arr6);

var len = arr6.length;
// 从尾开始清空数组
for(var i= 0;i<len;i++){arr6.pop()}
// arr6.pop() to undifined : undefined
console.log("arr6.pop() to undifined : " + arr6.pop());

unshift / shift

头端操作unshift(ob1,…) 多个；shift() 去除一个；没有值时，在调用shift() 返回undifined ，不会报错。

var arr7 = [1,2,3,4,5];
arr7.unshift(0);
// unshift one : 0,1,2,3,4,5
console.log("unshift one : "+arr7);

arr7.unshift(['a','b','c'],-1);
// unshift more than one : a,b,c,-1,0,1,2,3,4,5
console.log("unshift more than one : " + arr7);

arr7.shift();
// shift each time just can shift one : -1,0,1,2,3,4,5
console.log("shift each time just can shift one : " + arr7);

len = arr7.length;
// 从头开始清空数组
for(var i=0;i<len;i++){arr7.shift()}
// for to shift to undifined : undefined
console.log("for to shift to undifined : " + arr7.shift());

sort / reserve

排序和反转

var arr8 = [4,7,8,9,['-1',16,11]];// 一般情况下 ，排序都是同种类型数据，所以不要找茬
arr8 = [11,88,5,66,32,45];
// [11, 88, 5, 66, 32, 45]
console.log(arr8);

var arr8_3 = [];
// 这样才能复制arr8的实际内容 而不是 修改对象引用
arr8_3 = arr8.slice();
var arr8_1 = arr8.sort();
// [11,32,45,5,66,88]   [11,32,45,5,66,88]  [11,32,45,5,66,88]
console.log(arr8 + "   " + arr8_1 + "  " + arr8.sort());

var arr8_2 = arr8.reverse();
// 会看到 arr8_1 arr8_2 只是对象引用，并无实际值存储
// 排序：[88,66,5,45,32,11] 反转：[88,66,5,45,32,11] 本尊arr8: 88,66,5,45,32,11 arr8_3 11,88,5,66,32,45
console.log("排序：["+arr8_1+"]反转：["+arr8_2+"]本尊arr8:"+arr8+"arr8_3"+arr8_3);

arr8.reverse();
// 排序：[11,32,45,5,66,88] 反转：[11,32,45,5,66,88] 本尊arr8: 11,32,45,5,66,88 arr8_3 11,88,5,66,32,45
console.log("排序：["+arr8_1+"]反转：["+arr8_2+"]本尊arr8:"+arr8+"arr8_3"+arr8_3);

// [11, 88, 5, 66, 32, 45]
console.log(arr8_3);

splice

splice(index1_start,index2_count,content1,conten2,…) 可以在任意位置添加，或者删除需要制定脚标与连续删除的个数。

var arr9 = ['beijing','chengdu','shanghai','zigong','kunming','fushun'];
//删除从chengdu开始 的两个地名  (a,b) 从[a] -->b个元素
var delElements = arr9.splice(1,2);
// beijing,zigong,kunming,fushun 被删除的元素：chengdu,shanghai
console.log(arr9+" 被删除的元素："+delElements);

//删除的同时添加
var delElements1 = arr9.splice(0,1,'chongqing',['xiamen','fujian','hulan']);
// chongqing,xiamen,fujian,hulan,zigong,kunming,fushun 被删除的元素 ：beijing
console.log(arr9+" 被删除的元素 ："+delElements1);


var delElements2 = arr9.splice(2,0)//不删除任何，
// chongqing,xiamen,fujian,hulan,zigong,kunming,fushun delElements2 :
console.log(arr9+" delElements2 : "+ delElements2);

concat / join

前者连接两个数组，后者把数组里面的值通过‘content’ 内容连接起来

var arr10 = [1,2,3];
var arr11 = ['a','b','c',['aaa','bbb'],11];
var concat10_11 = arr10.concat(arr11);
// 1,2,3,a,b,c,aaa,bbb,11  arr10: 1,2,3
console.log(concat10_11+"  arr10: "+arr10);//数据结构不变
// ["aaa", "bbb"]
console.log(concat10_11[6]);

var join1 = arr10.join('-');
var join2 = arr11.join('-');
// 1-2-3  a-b-c-aaa,bbb-11
console.log(join1+"  "+ join2);
// object  string
console.log(typeof(arr11)+"  "+typeof("ffewi"));

Object

Object的声明以及一些方法

var ffewi = {
	name:'ffewi',
	age:23,
	gender:'M',
	height:172,
	weight:74,
	habits:['java','js','mysql'],
	other:null,
	test:'看来不能不赋值',
	QQ:undefined
};
console.log("ffewi's message : "+"name: "+ffewi.name + " habits:"+ffewi.habits + " other:" + ffewi.other);

//看来使用 == 比较 undifined == null 时 会自动把undifined-->null?
console.log("比较 undifined == null :"+(undefined==null));//答案是true
console.log(" undifined QQ :"+ ffewi.QQ +"  compare undifined :"+(ffewi.QQ===undefined) +" compare undifined with null : "+(ffewi.QQ==null));

//当声明对象 属性带有特殊值是 用‘’ 加以修饰
var ffewi1 = {
	'show-msg':'hello',
	//show-msg:123 这样修饰会出现 “Unexpected token -” 访问时 也只能用 ffewi1['show-msg'],不能用. 的方式
};
console.log(ffewi1['show-msg']);

//访问没有的属性 返回值为 undifined
console.log(ffewi1.age);

//动态增加属性 直接用 ob.property=args 或者 ob[property]=args
ffewi1.age = 23;
ffewi1['like-people']='all of you';
console.log("{"+ffewi1.age+","+ffewi1['show-msg']+","+ffewi1['like-people']+"}");

//删除object里面有的属性 
delete ffewi1['show-msg'];
console.log("{"+ffewi1.age+","+ffewi1['show-msg']+","+ffewi1['like-people']+"}");

//常用 方法， 判断某个属性在不在object里面 ：in  判断某个属性是不是 object 自己拥有的属性，非父类属性 hasOwnProperty
var in1 = 'age' in ffewi1;
var in2 = 'toString' in ffewi1;
console.log("age 自身属性在否："+in1+" toString 继承父类属性在否："+in2);//in 包含父类属性

var in3 = ffewi1.hasOwnProperty('age');
var in4 = ffewi1.hasOwnProperty('toString');
console.log("age 自身属性在否："+in3+" toString 继承父类属性在否："+in4);//hasOwnProperty 只判断自己的属性

条件判断

JavaScript把null、undefined、0、NaN和空字符串 ‘’ 视为false，其他值一概视为true


if(true){
	console.log("这个语法简单，自己领会");
}else{
	console.log("其它内容，可以自己嵌套着使用看看");
}
if(!0){
	console.log("0 is false");
}
if(-1){
	console.log("-1 is true");
}

循环

循环：主要有for 和 while 循环
例子：计算1*2*3*…*10

var sum;//undifined
sum = 1;
var loopTime = 10;
var count = 0;//统计乘的次数
//正常的for
for(var i=1;i<=loopTime;i++){
	sum *= i;
	count++;
}
console.log(sum+" count : "+count);//362880

//for in 常用来遍历数组
var sum1 = 1;
var number1 = [1,2,3,4,5,6,7,8,9,10];
//i为角标.. for in 遍历数组
for(var i in number1){
	sum1 *= number1[i]; 
	//console.log(sum1+"and i = " + i);
}
console.log(sum1);//362880

//for in 遍历对象
var ffewi = {
	name:'ffewi',
	age:23,
	gender:'M',
	habtis:['java','js','mysql']
};
for(var value in ffewi){
	console.log(value+" :"+ffewi[value]);
}

//while 循环   与   do while 循环
//结构 ：
//判断后执行
while(false){
	console.log("这里的这句话不会出现在控制台！");
}
//先执行一次，以后每次执行都判断下
do{
	console.log("这里的这句话会出现在控制台！ belive me!");
}while(false);

Map / Set

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报ReferenceError错误，那么你需要换一个支持ES6的浏览器。

简单总结

Map 以键值对存储，方便查找，添加，删除
Set 不可以存放重复元素，当存入重复的时候操作即为覆盖原有值

声明方式

new Map()/new Set()
初始Map [[key1,value1],[key2,value2],[],…]
Set [value1,value2,value3,…]

简单操作

m.get(key) 获取
m.set(key,value) 添加
m.delete(key) 删除
m.has(key) 返回结果： true/false

var m = new Map([['name','ffewi']]);
m.set('name2','ffewi2');

var s = new Set(['name','ffewi']);
s.add('ffewi1');
console.log("map: "+m +" set: "+s);
/*小结
 *Map和Set是ES6标准新增的数据类型，请根据浏览器的支持情况决定是否要使用 
 * */
console.log(m.get('name')+"  "+s);
//遍历 map set 使用iterable  因为他们没有下标
//遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，
//ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型
//结构:
var arr = [];
var index = 0;
for(var value of m){
	arr[index]=value;
	index++;
}
arr[index]="set 部分";
index++;
for(var value of s){
	arr[index]=value;
	index++;
}
console.log(arr);
//forEach(function(data,index,object){});  data:索引，或者脚标，index 角标或者索引纸箱的值，object对象本身
m.forEach(function(date,index,obj){
	console.log(index+"："+date+"  对象自己："+obj);
});
s.forEach(function(date,index,obj){
	console.log(index+"："+date+"  对象自己："+obj);
});
var arr2= [1,2,'name'];
arr2.forEach(function(date,index,obj){
	console.log(index+"："+date+"  对象自己："+obj);
});