原生JS 基础总结

0. 好习惯    分号  ;  花括号 {}， var   弄清楚 null  , undefined  区别 ， isNaN, === 与  == 区别

1.  prompt , confirm , alert  不同框框

数组常用方法

var arr = [10, 20, '30', 'xyz'];

arr.indexOf(10); // 元素10的索引为0

arr.indexOf(20); // 元素20的索引为1

arr.indexOf(30); // 元素30没有找到，返回-1

arr.indexOf('30'); // 元素'30'的索引为2

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']

arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

push和pop

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：

var arr = ['B', 'C', 'A'];

arr.sort();

arr; // ['A', 'B', 'C']

unshift和shift

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];

// 从索引2开始删除3个元素,然后再添加两个元素:

arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']

arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

// 只删除,不添加:

arr.splice(2, 2); // ['Google', 'Facebook']

arr; // ['Microsoft', 'Apple', 'Oracle']

// 只添加,不删除:

arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素

arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

var arr = ['A', 'B', 'C', 1, 2, 3];

arr.join('-'); // 'A-B-C-1-2-3'

2.  如果if的条件判断语句结果不是true或false怎么办

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

3. //三种方式遍历数组

'use strict';

var arr = ['小明', '小红', '大军', '阿黄'];

arr.sort().forEach(function(name){

  console.log("欢迎 "+name);

});

'use strict';

var arr = ['Bart', 'Lisa', 'Adam'];

for(var i=0;i<arr.length;i++){

    alert(arr[i]);

}

for(var name of arr){

   console.log(name);

}

arr.foreach(function(name){

   console.log(name);

});

//Set 与 Map 的遍历

var userSet=new Set(["user1","user2","user3"]);

for(var user of userSet){

    console.log(user);

}

var userInfoMap=new Map([['jimi',12],['tom',17]]);

for(var userInfo of userInfoMap){

    console.log(userInfo[0]+'--><--'+userInfo[1]);

}

4. 判断本身自己有的属性，去掉继承过来的属性 如 Object 的 toString 等等

var person={

    name:"闹着玩",

    age: 18

}

for(var prop in person){

    if(person.hasOwnProperty(prop))

    console.log(person[prop]);

}

5. 函数 与 错误处理  (异步函数的错误只能够在内部捕获,外层包裹 try catch 并不会有什么卵用)

var abc=function(num){

    if(typeof  num !='number'){

        throw new Error('not a number');

    }

    else{

        if(num>=0){

            return num;

        }

        else

            return -num;

    }

};

try{

    //abc('ssf');

    alert(abc(-129));

}

catch(err){

    console.log(err.message);

}

6.  变量申明提升，赋值不会提升

我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：

function foo() {

    var

        x = 1, // x初始化为1

        y = x + 1, // y初始化为2

        z, i; // z和i为undefined

    // 其他语句:

    for (i=0; i<100; i++) {

        ...

    }

}

7. JSON 序列化生成字符串与反序列化生成对象

var xiaoming = {

    name: '小明',

    age: 14,

    gender: true,

    height: 1.65,

    grade: null,

    'middle-school': '\"W3C\" Middle School',

    skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

var s = JSON.stringify(xiaoming);

var person=JSON.parse(s);

console.log('name: '+person.name);

console.log(s);

var arr = [1, 2, 3];

其原型链是：

arr ----> Array.prototype ----> Object.prototype ----> null

函数也是一个对象，它的原型链是：

foo ----> Function.prototype ----> Object.prototype ----> null

function Person(name){

    this.name=name;

    this.hello=function(){

        alert('Hello '+this.name+' !');

    }

}

var person=new Person('frank');

var personStr=JSON.stringify(person);

alert(personStr);

由于Function.prototype定义了apply()等方法，因此，所有函数都可以调用apply()方法。

很容易想到，如果原型链很长，那么访问一个对象的属性就会因为花更多的时间查找而变得更慢，因此要注意不要把原型链搞得太长。

7. map /reduce 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var result=arr.map(function pow(x) {

    return x * x;

});

alert(result);

'use strict';

function product(arr) {

return arr.reduce(function multi_all(x,y){

  return x*y;

});

}

// 测试:

if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {

    console.log('测试通过!');

}

else {

    console.log('测试失败!');

'use strict';

function string2int(s) {

  var strArray=s.split("");

    return strArray.map(function(x){

                           return +x;

                         })

                   .reduce(function(x,y){

                         return (x*10)+y;

                    });

}

// 测试:

if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {

    if (string2int.toString().indexOf('parseInt') !== -1) {

        console.log('请勿使用parseInt()!');

    } else if (string2int.toString().indexOf('Number') !== -1) {

        console.log('请勿使用Number()!');

    } else {

        console.log('测试通过!');

    }

}

else {

    console.log('测试失败!');

}

////////------------------------==================

'use strict';

var arr = ['1', '2', '3'];

var r;

r = arr.map(parseInt);

console.log(r);

结果竟然是1, NaN, NaN，小明百思不得其解，请帮他找到原因并修正代码。

提示：参考Array.prototype.map()的文档。

由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：

parseInt('0', 0); // 0, 按十进制转换

parseInt('1', 1); // NaN, 没有一进制

parseInt('2', 2); // NaN, 按二进制转换不允许出现2

可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数。

x=>parseInt(x)

8. 高阶函数  filter

'use strict';

var arr=[];

for(let i=0;i<10;i++){

    arr.push(i);

}

alert(arr.filter(function(element){

    return element % 2===0;

}));

'use strict';

function  add(x,y,f){

    return f(x)+f(y);

}

alert('result: '+add(-5,6,Math.abs));

9.  filter

'use strict';

var arr = ['A', '', 'B', null, undefined, 'C', '  '];

alert(arr.filter(function(s){

    return s && s.trim();

}));

'use strict';

var

    r,

    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r=arr.filter(function(element,index,self){

   if(self.indexOf(element)===index){

    return true;

  }

   else return false;

});

console.log(r.toString());

去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

// ---------------=================-------------------

'use strict';

function get_primes(arr) {

return arr.filter(

function(element){

  if(element===1) return false;

  else{

     for(var i=2;i<element;i++){

        if(element%i===0) return false;

     }

     return true;

  }

}

);

}

// 测试:

var

    x,

    r,

    arr = [];

for (x = 1; x < 100; x++) {

    arr.push(x);

}

r = get_primes(arr);

if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {

    console.log('测试通过!');

} else {

    console.log('测试失败: ' + r.toString());

}

排序算法

排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序，排序的核心是比较两个元素的大小。如果是数字，我们可以直接比较，但如果是字符串或者两个对象呢？直接比较数学上的大小是没有意义的，因此，比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。

'use strict';

var arr = [10, 20, 1, 2];

arr.sort(function (x, y) {

    if (x < y) {

        return -1;

    }

    if (x > y) {

        return 1;

    }

    return 0;

});

console.log(arr); // [1, 2, 10, 20]

var arr = ['Google', 'apple', 'Microsoft'];

arr.sort(function (s1, s2) {

    x1 = s1.toUpperCase();

    x2 = s2.toUpperCase();

    if (x1 < x2) {

        return -1;

    }

    if (x1 > x2) {

        return 1;

    }

    return 0;

}); // ['apple', 'Google', 'Microsoft']
原生JS基础总结
巴特西

原生JS 基础总结

最新文章

热门文章
