下面小编就为大家带来一篇 JavaScript 自学笔记 (必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
0 - 判断变量、参数是否初始化
- if(x){} //变量被初始化了或者变量不为空或者变量不为零
1 - 声明函数不需要声明返回值、参数类型,句尾甚至都不需要';'
- function sum(i1, i2) {
- return i1 + i2
- }
2 - 直接声明匿名函数立即使用
- var f = function(i1, i2) {
- return i1 + i2;
- };
- alert(f(1, 2)); //普通匿名函数
- alert(function(i1, i2) {
- return i1 + i2;
- } (3, 4)); //直接声明,立即使用
3-js 中没有类的概念,于是有些方法就长的像类了
- function Person(name, age) {
- this.Name = name; //动态增加属性,类似于C#里的dynamic A = new ExpendoObject();
- this.Age = age;
- this.SayHello = function() {
- alert('Hello,My name is ' + name + ' I am ' + age + ' years old.')
- };
- }
- var p1 = new Person('lorry', 21);
- p1.SayHello(); //像类一样调用
- p1.Gender = '男'; //动态增加'性别'属性
- alert(p1.Gender);
4-Array 对象就是数组,定义数组不用预先限定长度
- var arr=new Array();
- arr[0]=0;
- arr[1]=1;
- arr[2]=2;
- for(var i=0;i<=arr.length-1;i++){
- alert(arr[i]);
- }
5-Array 是数组,也是 Dictionary,也是 Stack
- var dict = new Array(); //作为Dictionary使用
- dict['我'] = 'wo';
- dict['爱'] = 'ai';
- dict['你'] = 'ni';
- alert(dict['我']); //通过键值调用
- alert(dict.爱); //像调用属性一样调用(动态语言的特性)
- for (var k in dict) { //js中的遍历
- alert(k); //'我','爱','你'-->打印出的是key
- }
- for (var k of dict) { //js中的遍历
- alert(k); //'wo','ai','ni'-->打印出的是value
- }
- var arr = [1, 2, 3, 4, 5]; //Array的简化创建方式
- var arr = {
- "lorry": 21,
- "cloud": 20
- }; //字典风格的创建方式
6 - 遍历当前页面能够调用的所有元素
- var s=null;
- for(var k in document){//对象的属性都是以key的形式出现的
- s+=k+" ;";
- }
- alert(s);
7 - 使用类似 Array 的下标操作获取字符串某个指定位置的字符
- var s = 'Hello, world!';
- s[0]; // 'H'
- s[6]; // ' '
- s[12]; // '!'
- s[13]; // undefined 超出范围的索引不会报错,但一律返回undefined
- 需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果:
- var s = 'Test';
- s[0] = 'X';
- alert(s); // s仍然为'Test'
8 - 改大写小写
- var s = 'Hello';
- s.toUpperCase(); // 返回'HELLO'
- var s = 'Hello';
- s.toLowerCase(); // 返回'hello'
9 - 搜索指定字符串出现的位置
- var s = 'hello, world';
- s.indexOf('world'); // 返回7
- s.indexOf('World'); // 没有找到指定的子串,返回-1
10 - 获取字符串指定索引区间的子串
- var s = 'hello, world'
- s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
- s.substring(7);// 从索引7开始到结束,返回'world'
11-JavaScript 的对象是一种无序的集合数据类型,它由若干键值对组成
- var xiaoming = {
- name: '小明',
- birth: 1990,
- school: 'No.1 Middle School',
- height: 1.70,
- weight: 65,
- score: null //最后一个键值对不需要在末尾加','
- };
- xiaoming.name; // '小明'
- xiaoming.birth; // 1990
- 访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用 []括起来:
- var xiaohong = {
- name: '小红',
- 'middle-school': 'No.1 Middle School'
- };
- xiaohong['middle-school']; // 'No.1 Middle School'
- xiaohong['name']; // '小红'
- xiaohong.name; // '小红'
- xiaohong.age; // undefined
12 - 检测 xiaoming 是否拥有某一属性,用 in 操作符:
- 'name' in xiaoming;// true
- 'grade' in xiaoming;// false
- ***如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的:
- 'toString' in xiaoming; // true
- ***要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:
- xiaoming.hasOwnProperty('name'); // true
- xiaoming.hasOwnProperty('toString'); // false
13-Map
- var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//二维数组初始化法
- m.get('Michael'); // 95
- var m = new Map();// 直接初始化一个空Map
- m.set('Adam', 67); // 添加新的key-value
- m.set('Bob', 59);
- m.has('Adam'); // 是否存在key 'Adam': true
- m.get('Adam'); // 67
- m.delete('Adam'); // 删除key 'Adam'
- m.get('Adam'); // undefined
- var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
- for (var n of m) { // 遍历Map
- alert(n[1] + '=' + n[0]);
- }
14-iterable 内置的 forEach 方法,它接收一个函数,每次迭代就自动回调该函数。
- var a = ['A', 'B', 'C'];
- a.forEach(function (element, index, array) {
- // element: 指向当前元素的值
- // index: 指向当前索引
- // array: 指向Array对象本身
- alert(element);
- });
- Set与Array类似,但Set没有索引,因此回调函数最多两个参数:
- var s = new Set(['A', 'B', 'C']);
- s.forEach(function (element, set) {
- alert(element);
- });
- Map的回调函数参数依次为value、key和map本身:
- var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
- m.forEach(function (value, key, map) {
- alert(value);
- });
- var a = ['A', 'B', 'C'];
- a.forEach(function (element) {
- alert(element);
- });
15 - 用 Array 的 map() 方法,传入我们自己的函数,就得到了一个新的 Array 作为结果:
- var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
- arr.map(function(x){
- return x*x;
- }).forEach(function (element) {
- alert(element);// [1, 4, 9, 16, 25, 36, 49, 64, 81]
- });
16 - 用 map() 把 Array 的所有数字转为字符串:
- var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
- arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
17 - 用 Array 的 reduce() 做累积计算
- var arr = [];
- for (var x = 1; x <= 100; x++) {
- arr.push(x); //将1~100放入数组
- }
- alert(arr.reduce(function(x,y){
- return x+y; //对arr的所有对象累积求和,返回求和结果
- }));
18 - 用 reduce()做一个牛逼的转换:把 [1, 2, 5, 8, 0] 变换成整数 12580
- var arr = [1, 2, 5, 8, 0];
- alert(arr.reduce(function(x,y){
- return x*10+y;
- }));
19 - 用 filter() 把 Array 的某些元素过滤掉
- var arr = [0,1,2,3,4,5,6,7,8,9];
- alert(arr.filter(function(x){
- return x%2===0;
- }));//0,2,4,6,8 //返回true则保留
- 把一个Array中的空字符串删掉
- var arr = ['A', '', 'B', null, undefined, 'C', ' '];
- alert(arr.filter(function (s) {
- return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
- })); // ['A', 'B', 'C']
20-Array 的 sort() 方法默认把所有元素先转换为 String 再排序,于是...
- [10, 20, 1, 2].sort(); // [1, 10, 2, 20]
- 因此如果要按数字大小排序,可以这么写:
- var arr = [];
- for (var x = 1; x <= 10; x++) {
- arr.push(x);
- }
- document.write(arr + "<br/>");
- document.write(arr.sort(function(x, y) {
- return x < y ? true: false;
- }));
- 若要忽略字母大小写影响,则要先转化为大写或小写
- var arr = ['Google', 'apple', 'Microsoft'];
- alert(arr.sort(function(s1, s2) {
- var x1 = s1.toUpperCase();
- var x2 = s2.toUpperCase();
- return x1 < x2 ? false: true;
- })); // ['apple', 'Google', 'Microsoft']
21 - 闭包(Closure)程序结构
- ①将函数作为返回值赋值给参数,调用该参数获得计算结果
- var arr = [];
- for(var n=1;n<101;n++){
- arr.push(n);
- }
- function lazy_sum(arr){
- var sum = function(){
- return arr.reduce(function(x,y){
- return x+y;
- });
- }
- return sum;
- }
- var f = lazy_sum(arr);
- alert(f());
- ②返回的函数并没有立刻执行,而是直到调用了f()才执行
- function count() {
- var arr = [];
- for (var i=1; i<=3; i++) {
- arr.push(function () {
- return i * i;
- });
- }
- return arr;
- }
- var results = count(); //results里存了3个function
- var f1 = results[0];
- var f2 = results[1];
- var f3 = results[2];
- f1(); // 16 返回的函数引用了变量i,但它并非立刻执行。
- f2(); // 16 等到3个函数都返回时,它们所引用的变量i已经变成了4,
- f3(); // 16 因此最终结果为16
- ***返回闭包时牢记:返回函数不要引用任何循环变量,或者后续会发生变化的变量!
- ③如果一定要引用循环变量怎么办?
- 方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,
- 无论该循环变量后续如何更改,已绑定到函数参数的值不变:
- function count() {
- var arr = [];
- for (var i=1; i<=3; i++) {
- arr.push(function(n){
- return function(){
- return n*n;
- }
- }(i));
- }
- return arr;
- }
- var results = count();
- var f1 = results[0];
- var f2 = results[1];
- var f3 = results[2];
- alert(f1()); // 1
- alert(f2()); // 4
- alert(f3()); // 9
- ④在没有class机制,只有函数的语言里,借助闭包,可以封装一个私有变量
- function creat_counter(init){
- var n = init||0;
- return{
- add:function(){
- n+=1;
- return n;
- }
- }
- }
- var c = creat_counter();
- alert(c.add());//1
- alert(c.add());//2
- alert(c.add());//3
- ***在返回的对象中,实现了一个闭包,该闭包携带了局部变量n,并且,从外部代码根本无法访问到变量n。
- 换句话说,闭包就是携带状态的函数,并且它的状态可以完全对外隐藏起来。
- ⑤利用Math.pow(x, y)计算x^2或x^3 //Math.pow(x, y)-->x^y
- function make_pow(y){
- return function(x){
- return Math.pow(x,y);
- }
- }
- var pow2 = make_pow(2)
- var pow3 = make_pow(3)
- alert(pow2(3))//9
- alert(pow3(3))//27
22 - 箭头函数 (目前仅 firefox 支持) // 参数 => 函数体
- var f = x => x*x*x
- alert(f(3)) //27
23 - 用 generator 产生斐波那契数列
- function * fib(max) {
- var t, a = 0,
- b = 1,
- n = 1;
- while (n <= max) {
- yield a;
- t = a + b;
- a = b;
- b = t;
- n++;
- }
- return a;
- }
- for (var x of fib(10)) { //用for ... of循环迭代generator对象
- document.write(x + ' '); // 依次输出0, 1, 1, 2, 3
- }
- 用generator产生一个自增的ID(无需全局变量) function * next_id() {
- for (var x = 1; x < 100; yield x++);
- }
- var g = next_id();
- alert(g.next().value); //1
- alert(g.next().value); //2
- alert(g.next().value); //3
来源: http://www.phperz.com/article/17/0305/264625.html